开发视频播放列表功能

src/components/VideoPlayer.vue

@@ -48,8 +48,7 @@ export default {
             for (const url of urls) {
               url.type = 'normal'
             }
-            const autoPlay = false
-            this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime, autoPlay)
+            this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime)
           } else if (urlType === 'flv') {
             const urls = res.data.urls
             const url = urls[0].url
@@ -79,13 +78,13 @@ export default {
     danmakuConfig() {
       // TODO 获取弹幕配置，将 videoUrl 作为本函数的回调
     },
-    initMp4Player(userId, videoId, coverUrl, urls, pos, autoPlay) {
+    initMp4Player(userId, videoId, coverUrl, urls, pos) {
       const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         logo: '/logo.png',
         screenshot: false,
-        autoplay: autoPlay,
+        autoplay: true,
         volume: 0.1,
         mutex: true,
         video: {

src/components/comment/index.vue

@@ -175,7 +175,7 @@ export default {
     },
     processVideoComments() {
       this.cacheData = this.videoComments.map(this.comparePropsAndValues)
-      console.log(this.videoComments)
+      // console.log(this.videoComments)
     },
     /** 对比和检查每条评论对象字段值 */
     comparePropsAndValues(comment) {

src/utils/ws/socket-instance.js

@@ -24,13 +24,9 @@ class SocketInstance {
           return null
         }
 
-        const token = '1234567890'
-        if (token === '') {
-          return null
-        } else {
-          var url = 'wss://api.reghao.cn/ws/progress?token=' + token
-          return url
-        }
+        const token = userdata.split(':')[0]
+        var url = 'wss://api.reghao.cn/ws/progress?token=' + token
+        return url
       },
       {
         onError: evt => {

src/views/home/VideoList.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row v-if="!permissionDenied" class="movie-list">
-    <el-col :md="15">
+    <el-col v-if="video !== null" :md="15">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -139,46 +139,31 @@
             </div>
             <div class="text item">
               <el-table
-                :data="similarVideos"
+                :data="playList.list"
+                :show-header="false"
+                height="480"
                 style="width: 100%"
               >
                 <el-table-column
                   prop="title"
                 >
                   <template slot-scope="scope">
-                    <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
-                      <span>{{ scope.row.videoId }}</span>
+                    <router-link :to="`/vidlist/${scope.row.videoId}`">
+                      <span>{{ scope.row.title | ellipsis }}</span>
                     </router-link>
                   </template>
                 </el-table-column>
                 <el-table-column
-                  prop="coverUrl"
+                  prop="duration"
                 >
                   <template slot-scope="scope">
-                    <span>10:00</span>
+                    <span>{{ scope.row.duration }}</span>
                   </template>
                 </el-table-column>
               </el-table>
             </div>
           </el-card>
         </el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <el-row>
-                <h3>推荐视频</h3>
-              </el-row>
-              <el-row>
-                <span>自动播放 <el-switch v-model="autoPlay" /></span>
-              </el-row>
-            </div>
-            <div class="text item">
-              <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
-                <video-card :video="item" />
-              </el-row>
-            </div>
-          </el-card>
-        </el-row>
       </el-row>
     </el-col>
 
@@ -239,7 +224,6 @@
 
 <script>
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
-import VideoCard from 'components/card/VideoCard'
 import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
 import SocketInstance from '@/utils/ws/socket-instance'
@@ -254,7 +238,17 @@ import { submitAccessCode } from '@/api/content'
 
 export default {
   name: 'VideoList',
-  components: { VideoCard, UserAvatarCard, PermissionDeniedCard, comment },
+  components: { UserAvatarCard, PermissionDeniedCard, comment },
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
   data() {
     return {
       /** ********************************************************************/
@@ -281,7 +275,6 @@ export default {
       // **********************************************************************/
       video: null,
       user: null,
-      similarVideos: [],
       isCollected: false,
       showAccessCodeDialog: false,
       accessCodeForm: {
@@ -299,7 +292,7 @@ export default {
         content: '视频',
         route: '/video'
       },
-      showPlaylist: false,
+      showPlaylist: true,
       autoPlay: false,
       playList: {
         current: 0,
@@ -331,15 +324,30 @@ export default {
     const videoId = this.$route.params.id
     this.accessCodeForm.contentId = videoId
     this.getVideoInfo(videoId)
-    this.getSimilarVideos(videoId)
+
+    const key = 'myplaylist-' + videoId
+    const value = localStorage.getItem(key)
+    if (value != null) {
+      this.playList = JSON.parse(value)
+      this.calculateCurrent(videoId)
+    } else {
+      this.getSimilarVideos(videoId)
+    }
   },
   mounted() {
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
     const header = this.$refs.header
-    if (header !== null) {
+    if (header !== undefined && header !== null) {
+      console.log('header -> ' + header)
       this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
     }
   },
   methods: {
+    handleBeforeUnload(event) {
+      const key = 'myplaylist-' + this.video.videoId
+      localStorage.removeItem(key)
+      // event.preventDefault()
+    },
     // 获取视频的详细信息
     getVideoInfo(videoId) {
       videoInfo(videoId).then(resp => {
@@ -378,8 +386,8 @@ export default {
     getSimilarVideos(videoId) {
       similarVideo(videoId).then(resp => {
         if (resp.code === 0) {
-          // this.similarVideos = resp.data
           this.playList.list = resp.data
+          this.calculateCurrent(videoId)
         } else {
           this.$notify.error({
             message: '推荐视频数据获取失败',
@@ -507,8 +515,7 @@ export default {
             for (const url of urls) {
               url.type = 'normal'
             }
-            const autoPlay = false
-            this.initMp4Player(this.video.userId, videoId, this.video.coverUrl, urls, res.data.currentTime, autoPlay)
+            this.initMp4Player(this.video.userId, videoId, this.video.coverUrl, urls, res.data.currentTime)
           } else {
             this.$notify.error({
               message: '视频 url 类型不合法',
@@ -531,13 +538,13 @@ export default {
         })
       })
     },
-    initMp4Player(userId, videoId, coverUrl, urls, pos, autoPlay) {
+    initMp4Player(userId, videoId, coverUrl, urls, pos) {
       const player = new DPlayer({
         container: document.querySelector('#dplayer'),
         lang: 'zh-cn',
         logo: '/logo.png',
         screenshot: false,
-        autoplay: autoPlay,
+        autoplay: true,
         volume: 0.1,
         mutex: true,
         video: {
@@ -575,28 +582,44 @@ export default {
         jsonData.videoId = videoId
         jsonData.currentTime = player.video.currentTime
         SocketInstance.send(jsonData)
-
-        const nextPath = this.getNextPath()
-        if (nextPath !== null) {
-          console.log('播放下一个视频')
-          this.$router.push(nextPath)
-        } else {
-          console.log('视频播放完成')
-        }
+        this.getNextPath(videoId)
       })
 
       player.on('volumechange', () => {
         console.log('声音改变')
       })
     },
-    getNextPath() {
-      let current = this.playList.current
-      if (current !== this.playList.list.length) {
-        current += 1
-        return this.playList.list[current]
+    calculateCurrent(videoId) {
+      for (var i = 0; i < this.playList.list.length; i++) {
+        if (videoId === this.playList.list[i].videoId) {
+          this.playList.current = i
+          const key = 'myplaylist-' + this.video.videoId
+          localStorage.setItem(key, JSON.stringify(this.playList))
+        }
+      }
+    },
+    setCurrent(current) {
+      this.playList.current = current
+      const key = 'myplaylist-' + this.video.videoId
+      localStorage.setItem(key, JSON.stringify(this.playList))
+    },
+    getNextPath(current) {
+      this.calculateCurrent(current)
+      const next = this.playList.current + 1
+      if (next < this.playList.list.length) {
+        this.setCurrent(next)
+        const videoId = this.playList.list[next].videoId
+        const path = '/vidlist/' + videoId
+        if (path !== this.$route.path) {
+          this.$router.push(path)
+        } else {
+          console.log(this.playList)
+          this.$notify.info({
+            message: '视频列表播放完成',
+            duration: 3000
+          })
+        }
       }
-
-      return null
     },
     // ****************************************************************************************************************
     async submit(newComment, parent, add) {

src/views/home/VideoPage.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row v-if="!permissionDenied" class="movie-list">
-    <el-col :md="15">
+    <el-col v-if="video !== null" :md="15">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -282,7 +282,7 @@ export default {
   },
   mounted() {
     const header = this.$refs.header
-    if (header !== null) {
+    if (header !== undefined && header !== null) {
       this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
     }
   },

src/views/user/Collection.vue

@@ -142,7 +142,7 @@ export default {
 
     const favlistId1 = this.$route.query.favlistId
     if (favlistId1 === undefined) {
-      //this.$router.push(this.navList[0].path)
+      // this.$router.push(this.navList[0].path)
       this.getUserFavlistWrapper()
     } else {
       const myfavlist = localStorage.getItem('myfavlist')