feat: complete player

backend/modules/medias/service.go

@@ -272,22 +272,26 @@ func (svc *Service) GetM3U8(ctx context.Context, tenantId int64, types pg.MediaT
 	if !ok {
 		return nil, errors.New("Invalid media playlist")
 	}
-	media.Segments = lo.Filter(media.Segments, func(seg *m3u8.MediaSegment, _ int) bool {
-		return seg != nil
-	})
 
 	if !bought {
 		duration := 0
-		for i, seg := range media.Segments {
-			duration += int(seg.Duration)
-			if duration >= 55 {
-				media.Segments = media.Segments[:i]
-				break
+		media.Segments = lo.Map(media.Segments, func(seg *m3u8.MediaSegment, _ int) *m3u8.MediaSegment {
+			if seg == nil {
+				return nil
 			}
-		}
+
+			duration += int(seg.Duration)
+			if duration <= 55 {
+				return seg
+			}
+			return nil
+		})
 	}
 
 	for _, seg := range media.Segments {
+		if seg == nil {
+			continue
+		}
 		// remove seg.URI ext, only keep the name
 		name, ext := path.SplitNameExt(seg.URI)
 		nameId, err := cast.ToInt64E(name)

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>