搜索结果页面分页

src/components/item-card.vue

@@ -0,0 +1,56 @@
+<template>
+  <!-- padding-left: 10px; padding-right: 10px; -->
+  <div style="width: 320px">
+    <router-link :to="`/video/${videoInfo.videoId}`">
+      <v-img
+        :src="videoInfo.coverUrl"
+        outlined
+        aspect-ratio="1.77"
+      />
+    </router-link>
+    <v-row>
+      <v-col cols="2">
+        <router-link :to="`/user/${videoInfo.userId}`">
+          <v-avatar size="48">
+            <v-img :src="videoInfo.avatarUrl" />
+          </v-avatar>
+        </router-link>
+      </v-col>
+      <v-col cols="10">
+        <p style="font-size: 15px; margin-bottom: 0px;color: black;">
+          <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
+        </p>
+        <p style="font-size: 10px; color: #606060;">
+          <router-link :to="`/user/${videoInfo.userId}`"> {{ videoInfo.username }}</router-link>
+          <br>
+          {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
+          <span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)" />
+        </p>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import TimeUtil from '@/utils/time-util.vue'
+export default {
+  name: 'ItemCard',
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      TimeUtil,
+      videoInfo: this.item
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style>
+</style>

src/components/player/player.vue

@@ -79,7 +79,7 @@ export default {
         danmaku: {
           id: videoId,
           maximum: 10000,
-          api: 'api.reghao.cn/api/media/danmaku/',
+          api: '//api.reghao.cn/api/media/danmaku/',
           token: 'hertube',
           user: this.userId,
           bottom: '15%',
@@ -90,34 +90,135 @@ export default {
       // 跳转到指定秒
       // dp.seek(100)
 
+      const playRecord1 = {
+        'userId': 110110,
+        'videoId': videoId,
+        'currentTime': 0.0
+      }
+
       player.on('play', function() {
-        console.log(videoId + ' 播放开始' + player.video.currentTime)
+        playRecord1.currentTime = player.video.currentTime
+        submitPlayRecord(playRecord1)
+          .then(res => {
+            // eslint-disable-next-line no-empty
+            if (res.code === 0) {
+            } else {
+              this.$notify({
+                title: res.code,
+                message: res.msg,
+                type: 'warning',
+                duration: 500
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error.message)
+          })
       })
 
       player.on('pause', function() {
-        console.log(videoId + ' 播放暂停' + player.video.currentTime)
+        playRecord1.currentTime = player.video.currentTime
+        submitPlayRecord(playRecord1)
+          .then(res => {
+            // eslint-disable-next-line no-empty
+            if (res.code === 0) {
+            } else {
+              this.$notify({
+                title: res.code,
+                message: res.msg,
+                type: 'warning',
+                duration: 500
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error.message)
+          })
       })
 
       player.on('ended', function() {
         // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
-        console.log(videoId + ' 播放结束' + player.video.currentTime)
+        playRecord1.currentTime = player.video.currentTime
+        submitPlayRecord(playRecord1)
+          .then(res => {
+            // eslint-disable-next-line no-empty
+            if (res.code === 0) {
+            } else {
+              this.$notify({
+                title: res.code,
+                message: res.msg,
+                type: 'warning',
+                duration: 500
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error.message)
+          })
       })
 
       player.on('seeking', function() {
-        console.log(videoId + ' seeking 事件 ' + player.video.currentTime)
+        playRecord1.currentTime = player.video.currentTime
+        submitPlayRecord(playRecord1)
+          .then(res => {
+            // eslint-disable-next-line no-empty
+            if (res.code === 0) {
+            } else {
+              this.$notify({
+                title: res.code,
+                message: res.msg,
+                type: 'warning',
+                duration: 500
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error.message)
+          })
       })
 
       player.on('seeked', function() {
-        console.log(videoId + ' seeked 事件' + player.video.currentTime)
+        playRecord1.currentTime = player.video.currentTime
+        submitPlayRecord(playRecord1)
+          .then(res => {
+            // eslint-disable-next-line no-empty
+            if (res.code === 0) {
+            } else {
+              this.$notify({
+                title: res.code,
+                message: res.msg,
+                type: 'warning',
+                duration: 500
+              })
+            }
+          })
+          .catch(error => {
+            console.error(error.message)
+          })
       })
 
-      const interval = 5
       var i = 0
       player.on('progress', function() {
         console.log('i = ' + i)
-        if (i % interval === 0) {
-          // TODO 每 5s 向后端报告一次播放进度
-          console.log(videoId + ' 播放进度 ' + player.video.currentTime)
+        if (i % 5 === 0) {
+          playRecord1.currentTime = player.video.currentTime
+          submitPlayRecord(playRecord1)
+            .then(res => {
+              // eslint-disable-next-line no-empty
+              if (res.code === 0) {
+                console.log('播放进度已发送: ' + i)
+              } else {
+                this.$notify({
+                  title: res.code,
+                  message: res.msg,
+                  type: 'warning',
+                  duration: 500
+                })
+              }
+            })
+            .catch(error => {
+              console.error(error.message)
+            })
         }
         i++
       })
@@ -140,6 +241,7 @@ export default {
           api: '//api.reghao.cn/api/media/danmaku/',
           token: 'hertube',
           user: this.userId,
+          videoId: videoId,
           bottom: '15%',
           unlimited: true
         }

src/views/home/search-result.vue

@@ -1,30 +1,50 @@
 <template>
-  <v-container fill-height fluid style="padding-left: 24px; padding-right: 24px">
+  <v-container fill-height>
     <div>
-      <v-row no-gutters>
+      <v-row>
+        <v-col>
+          <h3>搜索结果</h3>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-divider />
+        </v-col>
+      </v-row>
+      <v-row>
         <v-col
-            v-for="item in videoList"
-            :key="item.id"
+          v-for="item in videoList"
+          :key="item.id"
         >
-          <VideoCared :video="item" />
+          <ItemCard :item="item" />
         </v-col>
       </v-row>
+      <v-row justify="center">
+        <v-pagination
+          v-model="page"
+          :length="length"
+          @input="pageChange"
+        />
+      </v-row>
     </div>
   </v-container>
 </template>
 
 <script>
 import { videoQuery } from '@/api/media/video'
-import VideoCared from '@/components/player/video-card.vue'
+import ItemCard from '@/components/item-card.vue'
 
 export default {
   name: 'SearchResult',
   components: {
-    VideoCared
+    ItemCard
   },
   data() {
     return {
-      videoList: []
+      videoList: [],
+      page: 1,
+      size: 20,
+      length: 1
     }
   },
   created() {
@@ -56,5 +76,4 @@ export default {
 </script>
 
 <style>
-
 </style>