better mobile support

public/version.js

@@ -1 +1 @@
-window.__SRT_VERSION__ = '1.5.6'
+window.__SRT_VERSION__ = '1.5.7'

src/components/Nav/WaveFormSetting.tsx

@@ -28,7 +28,6 @@ const WaveFormOption: FC<WaveFormOptionProps> = ({ type, disabled, setDisabled,
   const enableStatus = useSelector(s => s.settings.waveform)
   const active = type === enableStatus
   const file = useSelector(s => s.files.selected) as string
-  const videoDuration = doVideoWithDefault(video => video.duration, 0)
 
   let mainText = ''
   let subText = ''
@@ -40,7 +39,7 @@ const WaveFormOption: FC<WaveFormOptionProps> = ({ type, disabled, setDisabled,
       worker,
       arrayBuffer: ab,
       fileName: file,
-      audioDuration: duration ?? videoDuration,
+      audioDuration: duration ?? doVideoWithDefault(video => video.duration, 0),
       onProgress: s => setStage(s),
     })
   }
@@ -51,7 +50,7 @@ const WaveFormOption: FC<WaveFormOptionProps> = ({ type, disabled, setDisabled,
     }
     case EnableWaveForm.video: {
       mainText = i18n('nav.waveform.enable')
-      subText = i18n('nav.waveform.with_video')
+      subText = i18n('nav.waveform.with_existing')
 
       cb = async () => {
         setStage(StageEnum.decoding)
@@ -63,7 +62,7 @@ const WaveFormOption: FC<WaveFormOptionProps> = ({ type, disabled, setDisabled,
     }
     case EnableWaveForm.audio: {
       mainText = i18n('nav.waveform.enable')
-      subText = i18n('nav.waveform.with_audio')
+      subText = i18n('nav.waveform.with_another')
 
       cb = async () => {
         const handles = await showOpenFilePicker({
@@ -95,6 +94,7 @@ const WaveFormOption: FC<WaveFormOptionProps> = ({ type, disabled, setDisabled,
   return (
     <div
       className={cn(styles['waveform-option'], { [styles['active']]: active })}
+      data-button-type={type === EnableWaveForm.video ? 'create-waveform' : undefined}
       onClick={async () => {
         if (enableStatus === type) return
         if (disabled) return

src/components/Video.module.less

@@ -68,9 +68,16 @@
 .video-controls-top {
   flex: 1;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
+  flex-direction: column;
+  .two-icons {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+  }
+  .touch-top,
+  .touch-bottom {
+    flex: 1;
+  }
 }
 
 .float-control {

src/components/Video.tsx

@@ -22,6 +22,7 @@ import {
   IS_IOS,
   toggleFullScreen,
   FULLSCREEN_ENABLED,
+  useTouchEmitter,
 } from '../utils'
 import { WaveForm } from './WaveForm'
 import { confirm, message } from './Modal'
@@ -34,8 +35,11 @@ export const Video: FC = () => {
   const i18n = useI18n()
   const dispatch = useDispatch()
   const enableStatus = useSelector(s => s.settings.waveform)
+  const hasVideo = useSelector(s => s.video.hasVideo)
   const file = useSelector(s => s.files.selected) as string
   const { controlsShow, showForAWhile, showControls, hideControls } = useShowControls()
+  const { divRef: replayDivRef, emitter: replayEmitter } = useTouchEmitter([hasVideo])
+  const { divRef: scrollDivRef, emitter: scrollEmitter } = useTouchEmitter([hasVideo])
 
   useEffect(() => {
     dispatch(LoadWaveFormPreference(file))
@@ -98,12 +102,28 @@ export const Video: FC = () => {
     }
   }, [])
 
+  useEffect(() => {
+    // automatically create wavefrom when: 1. only audio, 2. first time played (current time is 0)
+    if (audioOnly) {
+      doVideo(v => {
+        if (v.currentTime === 0) {
+          const button = document.querySelector('div[data-button-type="create-waveform"]')
+          if (button) {
+            ;(button as HTMLDivElement).click()
+          }
+        }
+      })
+    }
+  }, [audioOnly])
+
   if (videoUrl) {
     return (
       <div
         className={cn(styles['video-container'], { [styles['has-waveform']]: enableStatus, 'audio-only': audioOnly })}
       >
-        {enableStatus !== EnableWaveForm.disable && <WaveForm key={enableStatus} />}
+        {enableStatus !== EnableWaveForm.disable && (
+          <WaveForm key={enableStatus} replayEmitter={replayEmitter} scrollEmitter={scrollEmitter} />
+        )}
         <div className={styles['inner']}>
           <video
             autoPlay={IS_IOS} // loaddata does not fire on iPhone unless played
@@ -145,6 +165,8 @@ export const Video: FC = () => {
             show={showControls}
             hide={hideControls}
             hasWaveform={enableStatus !== EnableWaveForm.disable}
+            replayDivRef={replayDivRef}
+            scrollDivRef={scrollDivRef}
           />
         </div>
       </div>
@@ -191,30 +213,36 @@ interface VideoControlsProps {
   show(): void
   hide(): void
   hasWaveform: boolean
+  replayDivRef: React.RefObject<HTMLDivElement>
+  scrollDivRef: React.RefObject<HTMLDivElement>
 }
 
-const VideoControls: FC<VideoControlsProps> = ({ shown, show, hide, hasWaveform }) => {
+const VideoControls: FC<VideoControlsProps> = ({ shown, show, hide, hasWaveform, replayDivRef, scrollDivRef }) => {
   const { hasVideo, playing, total, current } = useSelector(s => s.video)
 
   if (!hasVideo) return null
 
   return (
     <div className={cn(styles['video-controls'], { [styles['is-playing']]: playing })}>
       <div className={styles['video-controls-top']} onClick={togglePlay}>
-        <div className={cn('material-icons-outlined', styles['float-control'])}>
-          {playing ? 'pause_circle' : 'play_circle'}
-        </div>
-        {hasWaveform && (
-          <div
-            className={cn('material-icons', styles['float-control'])}
-            onClick={e => {
-              e.stopPropagation()
-              window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyR' }))
-            }}
-          >
-            replay
+        <div className={styles['touch-top']} ref={replayDivRef} />
+        <div className={styles['two-icons']}>
+          <div className={cn('material-icons-outlined', styles['float-control'])}>
+            {playing ? 'pause_circle' : 'play_circle'}
           </div>
-        )}
+          {hasWaveform && (
+            <div
+              className={cn('material-icons', styles['float-control'])}
+              onClick={e => {
+                e.stopPropagation()
+                window.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyR' }))
+              }}
+            >
+              replay
+            </div>
+          )}
+        </div>
+        <div className={styles['touch-bottom']} ref={scrollDivRef} />
       </div>
       <div
         className={cn(styles['video-controls-bottom'], {

src/components/WaveForm.module.less

@@ -30,6 +30,9 @@
       visibility: hidden;
     }
   }
+  &.instant-scroll {
+    scroll-behavior: auto;
+  }
 
   /* firefox-only */
   scrollbar-width: thin;

src/components/WaveForm.tsx

@@ -1,14 +1,18 @@
 import { FC, useEffect, useState, useRef } from 'react'
 import { getSampling, doVideo, doVideoWithDefault, useVideoEvents, PIXELS_PER_SECOND } from '../utils'
 import { useSelector } from '../state'
+import { TouchEmitterListener, TouchEmitValue } from '../utils'
 import cn from 'classnames'
 import styles from './WaveForm.module.less'
 
-interface Props {}
+interface Props {
+  replayEmitter: { subscribe: (fn: TouchEmitterListener) => void }
+  scrollEmitter: { subscribe: (fn: TouchEmitterListener) => void }
+}
 
 const WAVEFORM_ID = 'srt-player-waveform'
 
-export const WaveForm: FC<Props> = () => {
+export const WaveForm: FC<Props> = ({ replayEmitter, scrollEmitter }) => {
   const file = useSelector(s => s.files.selected) as string
   const waveformDivRef = useRef<HTMLDivElement>(null)
   const [ready, setReady] = useState(false)
@@ -62,6 +66,19 @@ export const WaveForm: FC<Props> = () => {
     }
   }, [])
 
+  useEffect(() => {
+    replayEmitter.subscribe(deltaX =>
+      setReplayPos(p => {
+        if (deltaX === 'start' || deltaX === 'end') {
+          return p
+        } else {
+          return p + deltaX
+        }
+      }),
+    )
+    scrollEmitter.subscribe(setScrollPosition)
+  }, [])
+
   return (
     <div
       className={cn(styles['waveform'], { [styles['ready']]: ready })}
@@ -190,3 +207,28 @@ const updatePosition = (() => {
     })
   }
 })()
+
+const setScrollPosition = (() => {
+  let lastScrollLeft = -1
+  return (deltaX: TouchEmitValue) => {
+    const canvasContainer = document.getElementById(WAVEFORM_ID) as HTMLDivElement
+    if (!canvasContainer) return
+    const parent = canvasContainer.parentElement as HTMLDivElement
+    if (deltaX === 'start') {
+      lastScrollLeft = parent.scrollLeft
+      parent.classList.add(styles['instant-scroll'])
+      return
+    }
+    if (deltaX === 'end') {
+      parent.classList.remove(styles['instant-scroll'])
+      return
+    }
+    console.log(lastScrollLeft)
+    const newScrollLeft = lastScrollLeft - deltaX
+    if (newScrollLeft < 0) {
+      return
+    }
+    parent.scrollLeft = newScrollLeft
+    lastScrollLeft = newScrollLeft
+  }
+})()

src/locale/en-US.json

@@ -68,8 +68,8 @@
       "name": "Waveform",
       "disable": "Disable",
       "enable": "Enable",
-      "with_video": "Using existing video file",
-      "with_audio": "Using extra audio file",
+      "with_existing": "Using existing file",
+      "with_another": "Using another file",
       "generating": "Generating waveform, this might take a while...",
       "done": "Done"
     }

src/locale/zh-CN.json

@@ -68,8 +68,8 @@
       "name": "波形图",
       "disable": "关闭",
       "enable": "启用",
-      "with_video": "从现有视频提取",
-      "with_audio": "其他视频/音频源",
+      "with_existing": "从现有文件提取",
+      "with_another": "其他文件源",
       "generating": "波形图生成中，请稍等...",
       "done": "完成"
     }

src/utils/index.ts

@@ -12,3 +12,4 @@ export * from './duration'
 export * from './ga'
 export * from './toggleFullScreen'
 export * from './language'
+export * from './touchEmitter'

src/utils/touchEmitter.ts

@@ -0,0 +1,54 @@
+import { useRef, useState, useEffect } from 'react'
+
+export type TouchEmitValue = number | 'start' | 'end'
+export interface TouchEmitterListener {
+  (deltaX: TouchEmitValue): void
+}
+
+export const useTouchEmitter = (deps: any[]) => {
+  const divRef = useRef<HTMLDivElement>(null)
+  const [emitter] = useState(() => {
+    let listener: TouchEmitterListener = () => {}
+    return {
+      broadcast(deltaX: TouchEmitValue) {
+        listener(deltaX)
+      },
+      subscribe(fn: TouchEmitterListener) {
+        listener = fn
+      },
+    }
+  })
+
+  useEffect(() => {
+    const div = divRef.current
+    if (!div) return
+    let lastX: number
+    const onTouchStart = (e: TouchEvent) => {
+      emitter.broadcast('start')
+      lastX = e.touches[0].clientX
+      div.addEventListener('touchmove', onTouchMove)
+      div.addEventListener('touchend', onTouchFinish)
+      div.addEventListener('touchcancel', onTouchFinish)
+    }
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault()
+      const x = e.touches[0].clientX
+      if (Math.abs(x - lastX) > 1) {
+        emitter.broadcast(x - lastX)
+        lastX = x
+      }
+    }
+    const onTouchFinish = () => {
+      emitter.broadcast('end')
+      div.removeEventListener('touchmove', onTouchMove)
+      div.removeEventListener('touchend', onTouchFinish)
+      div.removeEventListener('touchcancel', onTouchFinish)
+    }
+    div.addEventListener('touchstart', onTouchStart)
+    return () => {
+      div.removeEventListener('touchstart', onTouchStart)
+    }
+  }, deps)
+
+  return { divRef, emitter }
+}