feat: add currentTime and duration to playerStore

[izkizk8]

This pull request primarily focuses on improving the video playback functionality in the application. The changes involve the addition of a currentTime and duration state to the player store, the creation of a utility function to format seconds into a time string, and the utilization of these new features in the BottomPanel.vue and CanvasPlayer.vue components.

Additions to player store state:

• src/stores/player.ts: Added currentTime and duration as reactive state variables in the player store. These variables will keep track of the current playback time and total duration of the video, respectively.

Utility function creation:

• src/utils/index.ts: Created a formatSeconds function that takes a number of seconds and formats it into a time string in the format of hours, minutes, and seconds. This function will be used to display the current time and duration in the player.

Updates to Vue components:

• src/components/bottom-panel/BottomPanel.vue: Imported the formatSeconds function and added currentTime and duration to the list of variables obtained from the player store. Updated the time display in the bottom panel to use these new variables. [1] [2]
• src/components/player/CanvasPlayer.vue: Similar to BottomPanel.vue, added currentTime and duration to the list of variables obtained from the player store. Also added event listeners to the video element to update currentTime and duration accordingly as the video plays. [1] [2]

Test:

[wangrongding]

🌸 Very well, thanks for your continued contribution to the project.