added 'show net duration' option to seek hotkeys

src/background/GlobalState.ts

@@ -292,7 +292,8 @@ const namedSelectors = {
       speedPresets: true,
       speedSmallStep: true,
       speedBigStep: true,
-      speedSlider: true
+      speedSlider: true,
+      showNetSeek: true
     } as StateViewSelector    
 }
 

src/background/processKeybinds.ts

@@ -4,14 +4,15 @@ import { sendMessageToConfigSync, formatSpeed, intoFxFlags, sendMediaEvent, crea
 import { TabInfo, requestCreateTab } from "../utils/browserUtils"
 import { MediaEvent } from "../contentScript/utils/applyMediaEvent"
 import { OverlayShowOpts } from "../contentScript/Overlay"
-import { round, clamp, isFirefox } from "../utils/helper"
+import { round, clamp, isFirefox, formatDuration } from "../utils/helper"
 import { FlatMediaInfo } from "../contentScript/utils/genMediaInfo"
 import { getDefaultFx, getDefaultAudioFx } from "../defaults"
 import { filterInfos } from "../defaults/filters"
 import produce from "immer"
 
 let feedbackAudio = isFirefox() ? null : createFeedbackAudio()
 let feedbackBadAudio = isFirefox() ? null : createFeedbackAudio(false)
+let lastSeek: {key: string, time: number, net: number}
 
 export async function processKeybinds(keybinds: Keybind[], tabInfo: TabInfo) {
   const fetch = (selector: StateViewSelector) => {
@@ -218,9 +219,22 @@ const commandHandlers: {
   },
   seek: async args => {
     const { kb, media, applyToMedia, show, fetch } = args
+    const { showNetSeek } = fetch({showNetSeek: true})
     const speed = fetch({speed: true}).speed ?? 1
+
     const value = kb.valueBool ? kb.valueNumber * speed : kb.valueNumber
-    const text = ` ${round(value, 2)}`
+    let text = ` ${Math.abs(round(value, 2))}`
+
+    if (showNetSeek) {
+      const now = new Date().getTime()
+      let net = 0; 
+      if (lastSeek && lastSeek.key === media.key && lastSeek.time + 1000 > now) {
+        net = lastSeek.net
+      }
+      net += value 
+      lastSeek = {key: media.key, time: now, net}
+      text = ` ${net < 0 ? "-" : ""}${formatDuration(Math.abs(net))}`
+    }  
 
     kb.valueNumber >= 0 ? show({icons: ["forward"], text}) : show({icons: ["backward"], text}) 
     applyToMedia({type: "SEEK", value, relative: true})

src/options/KeyBindControl.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { Keybind, TargetFx, StateOption, AdjustMode } from "../types"
 import produce from "immer"
 import { KeyPicker } from "../comps/KeyPicker"
@@ -15,19 +15,21 @@ import { GiAnticlockwiseRotation } from "react-icons/gi"
 import { BsMusicNoteList } from "react-icons/bs"
 import { TiArrowLoop } from "react-icons/ti"
 import { MdTimer } from "react-icons/md"
-import { isFirefox, clamp } from "../utils/helper"
+import { isFirefox, clamp, feedbackText, domRectGetOffset } from "../utils/helper"
 import { ThrottledTextInput } from "../comps/ThrottledTextInput"
 import { Move } from "../comps/Move"
 import { URLModal } from "./URLModal"
 import { getDefaultURLCondition } from "../defaults"
 import "./KeybindControl.scss"
+import { pushView } from "notFirefox/background/GlobalState"
 
 
 type KeybindControlProps = {
   onChange: (id: string, newValue: Keybind) => void,
   onRemove: (id: string) => void,
   onMove: (id: string, down: boolean) => void,
-  value: Keybind
+  value: Keybind,
+  showNetSpeed: boolean
 }
 
 export const KeybindControl = (props: KeybindControlProps) => {
@@ -149,11 +151,24 @@ export const KeybindControl = (props: KeybindControlProps) => {
         {value.command === "tabCapture" && <div className={`captureIcon ${value.enabled ? "active" : ""}`}><div></div></div>}
         <span>{label}</span>
         {value.command === "seek" && (
-          <button title={window.gsm.command.relativeTooltip} className={`toggle ${value.valueBool ? "active" : ""}`} onClick={e => {
-            props.onChange(value.id, produce(value, d => {
-              d.valueBool = !d.valueBool
-            }))
-          }}>x</button>
+          <>
+            <button title={window.gsm.command.relativeTooltip} className={`toggle ${value.valueBool ? "active" : ""}`} onClick={e => {
+              props.onChange(value.id, produce(value, d => {
+                d.valueBool = !d.valueBool
+              }))
+
+              if (!value.valueBool) {
+                feedbackText(window.gsm.command.relativeTooltip, domRectGetOffset((e.target as HTMLButtonElement).getBoundingClientRect()))
+              }
+            }}>{"×"}</button>
+            <button style={{marginLeft: "5px"}} title={window.gsm.command.showNetTooltip} className={`toggle ${props.showNetSpeed ? "active" : ""}`} onClick={e => {
+              pushView({override: {showNetSeek: !props.showNetSpeed}})
+
+              if (!props.showNetSpeed) {
+                feedbackText(window.gsm.command.showNetTooltip, domRectGetOffset((e.target as HTMLButtonElement).getBoundingClientRect()))
+              }
+            }}>{":"}</button>
+          </>
         )}
         {tooltip && <Tooltip label="?" tooltip={tooltip}/>}
         {commandInfo.valueType === "adjustMode" && <button className="adjustMode" onClick={e => {

src/options/SectionEditor.tsx

@@ -17,10 +17,10 @@ import { pushView } from "../background/GlobalState"
 export function SectionEditor(props: {}) {
   const [commandOption, setCommandOption] = useState("adjustSpeed")
   const [view, setView] = useStateView({keybinds: true})
-  const [urlView] = useStateView({keybindsUrlCondition: true})
+  const [viewAlt] = useStateView({keybindsUrlCondition: true, showNetSeek: true})
   const [show, setShow] = useState(false)
 
-  if (!view || !urlView) return <div></div>
+  if (!view || !viewAlt) return <div></div>
 
   const handleKeybindChange = (id: string, newKb: Keybind) => {
     setView(produce(view, d => {
@@ -41,7 +41,7 @@ export function SectionEditor(props: {}) {
     }))
   }
 
-  const urlRuleCount = urlView.keybindsUrlCondition?.parts?.length || 0
+  const urlRuleCount = viewAlt.keybindsUrlCondition?.parts?.length || 0
 
   return (
     <div className="section SectionEditor">
@@ -70,7 +70,7 @@ export function SectionEditor(props: {}) {
       {isFirefox() ? null : <UnusedCommandWarning keybinds={view.keybinds || []}/>}
       <div className="keybindControls">
         {(view.keybinds || []).map(bind => (
-          <KeybindControl key={bind.id} value={bind} 
+          <KeybindControl showNetSpeed={viewAlt.showNetSeek} key={bind.id} value={bind} 
             onChange={handleKeybindChange} 
             onRemove={handleKeybindRemove}
             onMove={handleKeybindMove}
@@ -102,7 +102,7 @@ export function SectionEditor(props: {}) {
           pushView({override: {keybindsUrlCondition: null}})
         }} className={`${urlRuleCount ? "error" : ""}`}>{`-- ${urlRuleCount} --`}</button>
         {show && <URLModal 
-          value={urlView.keybindsUrlCondition || getDefaultURLCondition()} 
+          value={viewAlt.keybindsUrlCondition || getDefaultURLCondition()} 
           onClose={() => setShow(false)} 
           onReset={() => pushView({override: {keybindsUrlCondition: null}})}
           onChange={v => {

src/options/SectionHelp.tsx

@@ -3,7 +3,7 @@ import { MdContentCopy, MdContentPaste } from "react-icons/md"
 import { pushView } from "../background/GlobalState"
 import { State } from "../types"
 import { requestCreateTab } from "../utils/browserUtils"
-import { isFirefox, areYouSure, feedbackText } from "../utils/helper"
+import { isFirefox, areYouSure, feedbackText, domRectGetOffset } from "../utils/helper"
 import "./SectionHelp.scss"
 
 
@@ -70,8 +70,7 @@ function ExportImport(props: {}) {
       const cb = () => {
         chrome.runtime.sendMessage({type: "GET_STATE"}, state => {
           navigator.clipboard.writeText(JSON.stringify(state)).then(() => {
-            const {x, y} = (e.target as HTMLButtonElement).getBoundingClientRect()
-            feedbackText("copied!", {x: x + 10, y: y - 50})
+            feedbackText("copied!", domRectGetOffset((e.target as HTMLButtonElement).getBoundingClientRect()))
           }, err => {})
         })
       }

src/types.ts

@@ -53,7 +53,8 @@ export type State = {
   speedPresets?: number[],
   speedSmallStep?: number,
   speedBigStep?: number,
-  speedSlider?: {min: number, max: number}
+  speedSlider?: {min: number, max: number},
+  showNetSeek?: boolean
 }
 
 
@@ -325,7 +326,8 @@ export type Gsm = {
     adjustGain: string,
     adjustDelay: string,
     tabCapture: string,
-    relativeTooltip: string
+    relativeTooltip: string,
+    showNetTooltip: string
   },
   options: {
     flags: {

src/utils/helper.ts

@@ -172,4 +172,9 @@ export function flatJoin<T>(groups: T[][], value: T) {
     flag = true 
   }
   return flatGroup
+}
+
+
+export function domRectGetOffset(rect: DOMRect, offset = 10) {
+  return {x: rect.x + rect.width + offset, y: rect.y - rect.height - offset}
 }

static/locales/en.json

@@ -89,7 +89,8 @@
     "adjustGain": "gain",
     "adjustDelay": "delay",
     "tabCapture": "tab capture",
-    "relativeTooltip": "relative to speed"
+    "relativeTooltip": "relative to speed",
+    "showNetTooltip": "show net duration"
   },
   "options": {
     "flags": {

static/locales/es.json

@@ -89,7 +89,8 @@
     "adjustGain": "volumen+",
     "adjustDelay": "retrasar",
     "tabCapture": "capturar",
-    "relativeTooltip": "relativa a la velocidad"
+    "relativeTooltip": "relativa a la velocidad",
+    "showNetTooltip": "mostrar la duración neta"
   },
   "options": {
     "flags": {

static/locales/hi.json

@@ -89,7 +89,8 @@
     "adjustGain": "आवाज़+",
     "adjustDelay": "विलंब",
     "tabCapture": "पकड़ना",
-    "relativeTooltip": "गति के सापेक्ष"
+    "relativeTooltip": "गति के सापेक्ष",
+    "showNetTooltip": "शुद्ध अवधि दिखाएं"
   },
   "options": {
     "flags": {

static/locales/ja.json

@@ -89,7 +89,8 @@
     "adjustGain": "音量+",
     "adjustDelay": "遅延",
     "tabCapture": "捕捉",
-    "relativeTooltip": "速度に対して"
+    "relativeTooltip": "速度に対して",
+    "showNetTooltip": "ネット期間を表示"
   },
   "options": {
     "flags": {

static/locales/ko.json

@@ -89,7 +89,8 @@
     "adjustGain": "볼륨+",
     "adjustDelay": "지연",
     "tabCapture": "캡처",
-    "relativeTooltip": "속도에 비례"
+    "relativeTooltip": "속도에 비례",
+    "showNetTooltip": "순 기간 표시"
   },
   "options": {
     "flags": {

static/locales/pt_BR.json

@@ -89,7 +89,8 @@
     "adjustGain": "volume+",
     "adjustDelay": "atraso",
     "tabCapture": "capturar",
-    "relativeTooltip": "relativo à velocidade"
+    "relativeTooltip": "relativo à velocidade",
+    "showNetTooltip": "mostrar duração líquida"
   },
   "options": {
     "flags": {

static/locales/ru.json

@@ -89,7 +89,8 @@
     "adjustGain": "громкость+",
     "adjustDelay": "задержка",
     "tabCapture": "захватить",
-    "relativeTooltip": "относительно скорости"
+    "relativeTooltip": "относительно скорости",
+    "showNetTooltip": "показать чистую продолжительность"
   },
   "options": {
     "flags": {

static/locales/tr.json

@@ -89,7 +89,8 @@
     "adjustGain": "ses+",
     "adjustDelay": "geciktir",
     "tabCapture": "ele geçirmek",
-    "relativeTooltip": "hıza göre"
+    "relativeTooltip": "hıza göre",
+    "showNetTooltip": "net süreyi göster"
   },
   "options": {
     "flags": {

static/locales/zh_CN.json

@@ -89,7 +89,8 @@
     "adjustGain": "增益",
     "adjustDelay": "延迟",
     "tabCapture": "捕获",
-    "relativeTooltip": "相对于速度"
+    "relativeTooltip": "相对于速度",
+    "showNetTooltip": "显示净时长"
   },
   "options": {
     "flags": {

static/locales/zh_TW.json

@@ -89,7 +89,8 @@
     "adjustGain": "增益",
     "adjustDelay": "延遲",
     "tabCapture": "捕獲",
-    "relativeTooltip": "相對於速度"
+    "relativeTooltip": "相對於速度",
+    "showNetTooltip": "顯示淨時長"
   },
   "options": {
     "flags": {