From 508fb0a9c5b72b19f63e9e46a022c995afe7ddc0 Mon Sep 17 00:00:00 2001
From: izkizk8 <izkizk8@qq.com>
Date: Wed, 10 Apr 2024 17:28:22 +0800
Subject: [PATCH] feat: add currentTime and duration to playerStore

---
 src/components/bottom-panel/BottomPanel.vue |  5 +++--
 src/components/player/CanvasPlayer.vue      |  4 +++-
 src/stores/player.ts                        |  6 +++++-
 src/utils/index.ts                          | 13 +++++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/bottom-panel/BottomPanel.vue b/src/components/bottom-panel/BottomPanel.vue
index 239afd0..3801531 100644
--- a/src/components/bottom-panel/BottomPanel.vue
+++ b/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>
diff --git a/src/components/player/CanvasPlayer.vue b/src/components/player/CanvasPlayer.vue
index 2a06fe2..ee41361 100644
--- a/src/components/player/CanvasPlayer.vue
+++ b/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 })
 }
 
 // 持续重绘
diff --git a/src/stores/player.ts b/src/stores/player.ts
index 3daae18..7678248 100644
--- a/src/stores/player.ts
+++ b/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 }
 })
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e69de29..64b4319 100644
--- a/src/utils/index.ts
+++ b/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')
+}