fix: issues

frontend/src/views/PlayView.vue

@@ -1,7 +1,6 @@
 <template>
   <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
-  <video id="video" :poster="item.poster"></video>
-  <van-progress v-if="playing" :percentage="(100 * currentTime) / item.duration" stroke-width="8" :show-pivot="false" />
+  <video controls id="video" :poster="item.poster" />
 
   <template v-if="false === item.bought">
     <van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
@@ -9,29 +8,18 @@
       花费 {{ (item.price * item.discount) / 100 }} 点 立即购买
     </van-button>
   </template>
-  <template v-else></template>
 
   <div id="container">
     <van-space direction="vertical" fill size="2rem">
-      <template v-if="playing">
-        <van-row>
-          <van-col span="24">
-            <van-button type="danger" @click="stop()" size="large" block>结束播放</van-button>
-          </van-col>
-        </van-row>
-      </template>
-
-      <template v-else>
-        <van-row gutter="20" v-if="!pageLoading">
-          <van-col span="12">
-            <van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
-          </van-col>
-          <van-col span="12">
-            <van-button type="warning" plain round="" @click="play(item.hash, 'audio')" size="large"
-              block>听音频</van-button>
-          </van-col>
-        </van-row>
-      </template>
+      <van-row gutter="20" v-if="!pageLoading">
+        <van-col span="12">
+          <van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
+        </van-col>
+        <van-col span="12">
+          <van-button type="warning" plain round="" @click="play(item.hash, 'audio')" size="large"
+            block>听音频</van-button>
+        </van-col>
+      </van-row>
     </van-space>
   </div>
 </template>
@@ -49,32 +37,18 @@ const item = ref({
   title: "加载中...",
 });
 
-const currentTime = ref(0);
-const duration = ref(0);
-const playing = ref(false);
-
 onBeforeUnmount(() => {
   const player = document.getElementById("video");
-  if (player && playing.value) {
-    stop();
+  if (player) {
+    player.pause();
   }
 });
 
 onMounted(() => {
   loadMedia(route.params.hash);
   const player = document.getElementById("video");
-  player.addEventListener("timeupdate", updateTime);
-  player.addEventListener("loadedmetadata", () => {
-    duration.value = player.duration;
-  });
   player.addEventListener("ended", function () {
     console.log("Video ended");
-    playing.value = false;
-  });
-  player.addEventListener("pause", () => {
-    playing.value = false;
-    player.currentTime = 0;
-    currentTime.value = 0;
   });
 });
 
@@ -154,8 +128,6 @@ const loadMedia = (hash) => {
 };
 
 const play = (hash, type) => {
-  playing.value = true;
-
   const player = document.getElementById("video");
   const source = `/v1/medias/${hash}/${type}`;
   if (Hls.isSupported()) {
@@ -176,27 +148,6 @@ const play = (hash, type) => {
     });
   }
 };
-
-const updateTime = () => {
-  const player = document.getElementById("video");
-  currentTime.value = player?.currentTime;
-};
-
-const stop = () => {
-  const player = document.getElementById("video");
-  if (!player) {
-    return;
-  }
-  player.pause();
-  player.currentTime = 0;
-  currentTime.value = 0;
-};
-
-const formatTime = (time) => {
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
-};
 </script>
 
 <style scoped>