Merge pull request #5 from izkizk8/playtime

feat: add currentTime and duration to playerStore

src/components/bottom-panel/BottomPanel.vue

@@ -14,10 +14,11 @@ import IconZoomin from '~/assets/icons/control-zoomin.svg?component'
 import IconZoomout from '~/assets/icons/control-zoomout.svg?component'
 import IconZoomToFit from '~/assets/icons/control-zoomtofit.svg?component'
 import { usePlayerStore } from '~/stores/player'
+import { formatSeconds } from '~/utils/index'
 
 const playerStore = usePlayerStore()
 // 将 store 中的 playStatus 转换为 ref
-const { playStatus } = storeToRefs(playerStore)
+const { playStatus, currentTime, duration } = storeToRefs(playerStore)
 
 function toggleVideoPlay() {
   playerStore.playStatus = !playStatus.value
@@ -43,7 +44,7 @@ function toggleVideoPlay() {
           <IconPlay />
         </button>
         <button class="btn-control"><IconNext /></button>
-        <span>00:00:00 / 00:00:00</span>
+        <span>{{ `${formatSeconds(currentTime)} / ${formatSeconds(duration)}`}}</span>
       </div>
       <div class="flex gap-4">
         <button class="tooltip btn-control" data-tip="放大"><IconZoomout /></button>

src/components/player/CanvasPlayer.vue

@@ -14,7 +14,7 @@ defineProps<{
 const container = ref<HTMLElement | null>(null)
 let video: HTMLVideoElement
 const playerStore = usePlayerStore()
-const { playStatus } = storeToRefs(playerStore)
+const { playStatus, currentTime, duration } = storeToRefs(playerStore)
 const menuShow = ref(false)
 const contextMenuPosition = ref({ x: 0, y: 0 })
 const contextMenu = ref<typeof ContextMenu | null>(null)
@@ -140,10 +140,12 @@ function drawVideo() {
       originX: 'left',
       originY: 'top'
     })
+    duration.value = video.duration
     canvas.add(videoElement)
     canvas.setActiveObject(videoElement)
     continuouslyRepaint()
   })
+  video.addEventListener('timeupdate', () => { currentTime.value = video.currentTime })
 }
 
 // 持续重绘

src/stores/player.ts

@@ -13,5 +13,9 @@ export const usePlayerStore = defineStore('playerStore', () => {
   // 轨道数
   const trackCount = computed(() => playList.value.length)
 
-  return { playStatus, togglePlay, playList, trackCount }
+  const currentTime = ref<number>(0)
+
+  const duration = ref<number>(0)
+
+  return { playStatus, togglePlay, playList, trackCount, currentTime, duration }
 })

src/utils/index.ts

@@ -0,0 +1,13 @@
+export function formatSeconds(seconds: number) {
+  seconds = Math.floor(seconds)
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const remainingSeconds = seconds % 60
+
+  const formattedTime = `${padZero(hours)}:${padZero(minutes)}:${padZero(remainingSeconds)}`
+  return formattedTime
+}
+
+export function padZero(number: number) {
+  return number.toString().padStart(2, '0')
+}