Feat: Whether to count when idle

Author: sheepzh

global.d.ts

@@ -35,5 +35,12 @@ declare namespace Timer {
         displayBadgeText: boolean
     }
 
-    type Option = PopupOption & AppearanceOption
+    type StatisticsOption = {
+        /**
+         * Count when idle
+         */
+        countWhenIdle: boolean
+    }
+
+    type Option = PopupOption & AppearanceOption & StatisticsOption
 }

src/app/components/option/components/statistics.ts

@@ -0,0 +1,38 @@
+import { ElCard, ElSwitch, ElTooltip } from "element-plus"
+import optionService from "../../../../service/option-service"
+import { defaultStatistics } from "../../../../util/constant/option"
+import { defineComponent, h, Ref, ref } from "vue"
+import { t } from "../../../locale"
+import { renderHeader, renderOptionItem, tagText } from "../common"
+
+const optionRef: Ref<Timer.StatisticsOption> = ref(defaultStatistics())
+
+function updateOptionVal(key: keyof Timer.StatisticsOption, newVal: boolean) {
+    const value = optionRef.value
+    value[key] = newVal
+    optionService.setStatisticsOption(value)
+}
+
+const countWhenIdle = () => h(ElSwitch, {
+    modelValue: optionRef.value.countWhenIdle,
+    onChange: (newVal: boolean) => updateOptionVal('countWhenIdle', newVal)
+})
+
+const options = () => [
+    renderOptionItem({
+        input: countWhenIdle(),
+        idleTime: tagText(msg => msg.option.statistics.idleTime),
+        info: h(ElTooltip, { content: t(msg => msg.option.statistics.idleTimeInfo) }, { default: () => h('i', { class: 'el-icon-info' }) })
+    }, msg => msg.statistics.countWhenIdle, t(msg => msg.option.no))
+]
+
+const _default = defineComponent(() => {
+    return () => h(ElCard, {}, {
+        header: () => renderHeader(
+            msg => msg.statistics.title,
+            () => optionService.setStatisticsOption(optionRef.value = defaultStatistics())),
+        default: options
+    })
+})
+
+export default _default

src/app/components/option/index.ts

@@ -1,11 +1,12 @@
 import { defineComponent, h } from 'vue'
 import Popup from './components/popup'
 import Appearance from './components/appearance'
+import Statistics from './components/statistics'
 import './style'
 
 export default defineComponent(() => {
     return () => h('div',
         { class: 'option-container' },
-        [h(Popup), h(Appearance)]
+        [h(Statistics), h(Popup), h(Appearance)]
     )
 })

src/app/locale/components/option.ts

@@ -19,6 +19,12 @@ export type OptionMessage = {
         icon: string
         badgeTextContent: string
     }
+    statistics: {
+        title: string
+        countWhenIdle: string
+        idleTime: string
+        idleTimeInfo: string
+    }
     resetButton: string
     resetSuccess: string
     defaultValue: string
@@ -42,6 +48,12 @@ const _default: Messages<OptionMessage> = {
             icon: '扩展图标',
             badgeTextContent: '当前网站的今日浏览时长'
         },
+        statistics: {
+            title: '统计',
+            countWhenIdle: '{input}  是否统计 {idleTime} {info}',
+            idleTime: '休眠时间',
+            idleTimeInfo: '长时间不操作（比如全屏观看视频），浏览器会自动进入休眠状态'
+        },
         resetButton: '恢复默认',
         resetSuccess: '成功重置为默认值',
         defaultValue: '默认值： {default}'
@@ -63,6 +75,12 @@ const _default: Messages<OptionMessage> = {
             icon: 'the icon of extension',
             badgeTextContent: 'the browsing time of current website'
         },
+        statistics: {
+            title: 'Statistics',
+            countWhenIdle: '{input}  Whether to count {idleTime} {info}',
+            idleTime: 'idle time',
+            idleTimeInfo: 'If you do not operate for a long time (such as watching a video in full screen), the browser will automatically enter the idle state'
+        },
         resetButton: 'Reset',
         resetSuccess: 'Reset to default successfully!',
         defaultValue: 'Default: {default}'
@@ -85,6 +103,12 @@ const _default: Messages<OptionMessage> = {
             icon: 'the icon of extension',
             badgeTextContent: 'the browsing time of current website'
         },
+        statistics: {
+            title: '統計',
+            countWhenIdle: '{input}  Whether to count {idleTime} {info}',
+            idleTime: 'idle time',
+            idleTimeInfo: 'If you do not operate for a long time (such as watching a video in full screen), the browser will automatically enter the idle state'
+        },
         resetButton: 'リセット',
         resetSuccess: 'デフォルトに正常にリセット',
         defaultValue: 'デフォルト値：{default}'

src/background/timer/context.ts

@@ -1,3 +1,5 @@
+import optionService from "../../service/option-service"
+
 export class TimeInfo {
     focus: number
     run: number
@@ -18,6 +20,14 @@ export class TimeInfo {
         this.run += another.run
     }
 }
+
+
+let countWhenIdle: boolean = false
+
+const setCountWhenIdle = (op: Timer.Option) => countWhenIdle = op.countWhenIdle
+optionService.getAllOption().then(setCountWhenIdle)
+optionService.addOptionChangeListener(setCountWhenIdle)
+
 /**
  * Context of timer
  */
@@ -30,13 +40,11 @@ export default class TimerContext {
      * The last collect time
      */
     lastCollectTime: number
-    /**
-     * Whether to time
-     */
-    private timing: boolean
+
+    private idleState: chrome.idle.IdleState
 
     constructor() {
-        this.timing = true
+        this.idleState = 'active'
         this.lastCollectTime = new Date().getTime()
         this.resetTimeMap()
     }
@@ -59,14 +67,17 @@ export default class TimerContext {
         return Object.entries(this.timeMap).find(([_host, { focus }]) => focus)
     }
 
-    /**
-     * Pause timing
-     */
-    pause() { this.timing = false }
-    /**
-     * Resume timing
-     */
-    resume() { this.timing = true }
+    setIdle(idleNow: chrome.idle.IdleState) { this.idleState = idleNow }
 
-    isPaused(): boolean { return !this.timing }
+    isPaused(): boolean {
+        if (this.idleState === 'active') {
+            return true
+        } else if (this.idleState === 'locked') {
+            return false
+        } else if (this.idleState === 'idle') {
+            return !countWhenIdle
+        }
+        // Never happen
+        return false
+    }
 }

src/background/timer/idle-listener.ts

@@ -2,15 +2,8 @@ import { formatTime } from "../../util/time"
 import TimerContext from "./context"
 
 function listen(context: TimerContext, newState: chrome.idle.IdleState) {
-    console.log(`idle status changed: ${newState}, ${formatTime(Date.now())}`)
-    if (newState === 'active') {
-        context.resume()
-    } else if (newState === 'locked') {
-        // If locked then pause
-        context.pause()
-    } else if (newState === 'idle') {
-        // do nothing
-    }
+    console.log(`Idle state changed:${newState}`, formatTime(new Date()))
+    context.setIdle(newState)
 }
 
 /**

src/service/option-service.ts

@@ -1,10 +1,10 @@
 import OptionDatabase from "../database/option-database"
-import { defaultAppearance, defaultPopup } from "../util/constant/option"
+import { defaultAppearance, defaultPopup, defaultStatistics } from "../util/constant/option"
 
 const db = new OptionDatabase(chrome.storage.local)
 
 const defaultOption = () => {
-    return { ...defaultAppearance(), ...defaultPopup() }
+    return { ...defaultAppearance(), ...defaultPopup(), ...defaultStatistics() }
 }
 
 async function getAllOption(): Promise<Timer.Option> {
@@ -22,6 +22,10 @@ async function setAppearanceOption(option: Timer.AppearanceOption): Promise<void
     await setOption(option)
 }
 
+async function setStatisticsOption(option: Timer.StatisticsOption): Promise<void> {
+    await setOption(option)
+}
+
 async function setOption(option: Partial<Timer.Option>): Promise<void> {
     const exist: Partial<Timer.Option> = await db.getOption()
     const toSet = defaultOption()
@@ -34,6 +38,7 @@ class OptionService {
     getAllOption = getAllOption
     setPopupOption = setPopupOption
     setAppearanceOption = setAppearanceOption
+    setStatisticsOption = setStatisticsOption
     addOptionChangeListener = db.addOptionChangeListener
 }
 

src/util/constant/option.ts

@@ -11,4 +11,10 @@ export function defaultAppearance(): Timer.AppearanceOption {
         displayWhitelistMenu: true,
         displayBadgeText: false
     }
+}
+
+export function defaultStatistics(): Timer.StatisticsOption {
+    return {
+        countWhenIdle: false
+    }
 }