feat: complete player

frontend/src/views/PlayView.vue

@@ -1,12 +1,10 @@
 <template>
   <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
-  <div style="background-color: black;">
-    <video id="video" :poster="item.poster"></video>
-  </div>
+  <video id="video" :poster="item.poster"></video>
 
   <template v-if="false === item.bought">
     <van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
-    <van-button square type="success" @click="buy()" size="large" block>
+    <van-button square type="warning" @click="buy()" size="large" block>
       花费 {{ item.price * item.discount / 100 }} 点 立即购买
     </van-button>
   </template>
@@ -16,30 +14,26 @@
   <div id="container">
     <van-space direction="vertical" fill size="2rem">
 
-
-      <van-row gutter="20">
-        <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 v-if="playing">
-        <van-row gutter="20">
-          <van-col span="24">
-            <van-progress :percent="(currentTime / duration) * 100" />
-          </van-col>
-        </van-row>
-        <van-row gutter="20">
+        <van-row>
           <van-col span="24">
             <van-button round type="danger" @click="stop()" size="large" block>结束播放</van-button>
           </van-col>
         </van-row>
       </template>
 
+      <template v-else>
+        <van-row gutter="20">
+          <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-space>
   </div>
 </template>
@@ -146,7 +140,8 @@ const formatTime = (time) => {
 }
 
 #video {
-  width: 100%;
   aspect-ratio: 4 / 3;
+  width: 100%;
+  object-fit: fill;
 }
 </style>