更新视频播放页面

src/components/card/comment-card.vue

@@ -13,7 +13,7 @@
     </v-row>
     <v-divider />
     <v-row>
-      <div ref="comment" :style="wrapStyle" class="comment-wrap">
+      <div ref="comment" :style="wrapStyle" class="comment-wrap" style="width: 720px; height: 1080px">
         <Comment
           v-model="videoComments"
           :user="currentUser"
@@ -75,7 +75,8 @@ export default {
     this.getVideoComment(this.video.videoId, 1)
   },
   mounted() {
-    const header = this.$refs.header
+    // const header = this.$refs.header
+    const header = 10
     this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
   },
   methods: {

src/components/player/player.vue

@@ -62,13 +62,13 @@
 </template>
 
 <script>
-import { videoUrl, submitPlayRecord } from '@/api/media/video'
+import { videoUrl } from '@/api/media/video'
 import SocketInstance from '@/utils/ws/socket-instance'
 
+const DPlayer = require('dplayer')
+const flv = require('flv.js')
 const hls = require('hls.js')
 const dashjs = require('dashjs')
-const flv = require('flv.js')
-const DPlayer = require('dplayer')
 
 export default {
   name: 'Play',
@@ -123,27 +123,6 @@ export default {
     const videoId = this.videoProp.videoId
     if (this.getUrl) {
       this.getVideoUrl(videoId)
-      /*      videoUrl(videoId)
-        .then(res => {
-          if (res.code === 0) {
-            const urlType = res.data.type
-            if (urlType === 'mp4') {
-              const urls = res.data.urls
-              for (const url of urls) {
-                url.type = 'normal'
-              }
-              this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls)
-            } else if (urlType === 'flv') {
-              // this.initFlvPlayer(videoId, coverUrl, urls)
-            } else {
-              alert('url 类型无法识别')
-            }
-          } else {
-            console.error(res.msg)
-          }
-        }).catch(error => {
-          console.error(error.message)
-        })*/
     }
   },
   methods: {
@@ -157,7 +136,7 @@ export default {
               for (const url of urls) {
                 url.type = 'normal'
               }
-              this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls)
+              this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls, 0)
             } else if (urlType === 'flv') {
               // this.initFlvPlayer(videoId, coverUrl, urls)
             } else {
@@ -173,24 +152,7 @@ export default {
     // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     danmakuConfig() {
     },
-    submitVideoPlayRecord(currentTime) {
-      if (this.playRecord == null) {
-        return
-      }
-
-      this.playRecord.currentTime = currentTime
-      submitPlayRecord(this.playRecord)
-        .then(res => {
-          if (res.code === 0) {
-            console.log('播放进度已发送')
-          } else {
-            console.error(res.msg)
-          }
-        }).catch(error => {
-          console.error(error.message)
-        })
-    },
-    initMp4Player(userId, videoId, coverUrl, urls) {
+    initMp4Player(userId, videoId, coverUrl, urls, pos) {
       const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
@@ -215,78 +177,16 @@ export default {
         }
       })
 
-      // 跳转到指定秒
-      // dp.seek(100)
-      /* player.on('play', function() {
-        console.log('mp4Player 开始播放事件' + this.userPermission.userId)
-        console.log(this.playRecord)
-        if (this.playRecord == null) {
-          return
-        }
-
-        this.playRecord.currentTime = player.video.currentTime
-        submitPlayRecord(this.playRecord)
-          .then(res => {
-          }).catch(error => {
-            console.error(error.message)
-          })
-      })
-
-      player.on('pause', function() {
-        if (this.playRecord == null) {
-          return
-        }
+      // 跳转到上次看到的位置
+      player.seek(pos)
 
-        this.playRecord.currentTime = player.video.currentTime
-        submitPlayRecord(this.playRecord)
-          .then(res => {
-          }).catch(error => {
-            console.error(error.message)
-          })
+      player.on('progress', function() {
+        SocketInstance.send({ userId: userId, videoId: videoId, currentTime: player.video.currentTime })
       })
 
       player.on('ended', function() {
         // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        if (this.playRecord == null) {
-          return
-        }
-
-        this.playRecord.currentTime = player.video.currentTime
-        submitPlayRecord(this.playRecord)
-          .then(res => {
-          }).catch(error => {
-            console.error(error.message)
-          })
-      })
-
-      player.on('seeking', function() {
-        if (this.playRecord == null) {
-          return
-        }
-
-        this.playRecord.currentTime = player.video.currentTime
-        submitPlayRecord(this.playRecord)
-          .then(res => {
-          }).catch(error => {
-            console.error(error.message)
-          })
-      })
-
-      player.on('seeked', function() {
-        if (this.playRecord == null) {
-          return
-        }
-
-        this.playRecord.currentTime = player.video.currentTime
-        submitPlayRecord(this.playRecord)
-          .then(res => {
-          }).catch(error => {
-            console.error(error.message)
-          })
-      })*/
-
-      player.on('progress', function() {
-        SocketInstance.send({ userId: userId, videoId: videoId, currentTime: player.video.currentTime })
+        console.log('视频播放完成')
       })
     },
     initFlvPlayer(videoId, coverUrl, videoUrl) {
@@ -376,7 +276,4 @@ export default {
 </script>
 
 <style>
-#dplayer {
-  height: 500px;
-}
 </style>

src/utils/ws/socket-instance.js

@@ -23,7 +23,7 @@ class SocketInstance {
         if (token === null || token === '') {
           return null
         } else {
-          return 'wss://push.reghao.cn/ws/push?token=' + token
+          return 'wss://api.reghao.cn/ws/progress?token=' + token
         }
       },
       {

src/views/video/video.vue

@@ -21,6 +21,49 @@
         <v-col>
           <VideoPlayer v-if="vidProp !== null" :video-prop="vidProp" />
         </v-col>
+        <v-col>
+          <v-card
+            light
+          >
+            <v-card-title>
+              最近投稿
+            </v-card-title>
+            <v-virtual-scroll
+              :bench="benched"
+              :items="items"
+              height="300"
+              item-height="64"
+            >
+              <template v-slot:default="{ item }">
+                <v-list-item :key="item">
+                  <v-list-item-action>
+                    <v-btn
+                      fab
+                      small
+                      depressed
+                      color="primary"
+                    >
+                      {{ item }}
+                    </v-btn>
+                  </v-list-item-action>
+
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      DB <strong>ID {{ item }}</strong>
+                    </v-list-item-title>
+                  </v-list-item-content>
+
+                  <v-list-item-action>
+                    <v-icon small>
+                      mdi-open-in-new
+                    </v-icon>
+                  </v-list-item-action>
+                </v-list-item>
+                <v-divider />
+              </template>
+            </v-virtual-scroll>
+          </v-card>
+        </v-col>
       </v-row>
     </v-container>
     <v-container fill-height style="padding-top: 0px;">
@@ -286,8 +329,17 @@ export default {
         videoId: null,
         pubDate: null
       },
-      showComment: false,
-      vidProp: null
+      showComment: true,
+      vidProp: null,
+      benched: 0
+    }
+  },
+  computed: {
+    items() {
+      return Array.from({ length: this.length }, (k, v) => v + 1)
+    },
+    length() {
+      return 100
     }
   },
   created() {