From 94dc723910e27f57639f35fa82e2abfcfd40cfd7 Mon Sep 17 00:00:00 2001
From: osiris <taoran0796@163.com>
Date: Sat, 18 May 2024 19:14:55 +0800
Subject: [PATCH] fix:

---
 src/components/Home/About copy.vue |  34 +++++++++
 src/components/Home/About.vue      | 111 +++++++++++++++++++++++------
 src/components/Home/Home.vue       |  55 ++++++++++----
 src/store/modules/scan.ts          |  36 +++++++++-
 4 files changed, 201 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Home/About copy.vue

diff --git a/src/components/Home/About copy.vue b/src/components/Home/About copy.vue
new file mode 100644
index 0000000..4354178
--- /dev/null
+++ b/src/components/Home/About copy.vue	
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// import { ref } from 'vue'
+// import { copy } from '@/utils/string'
+// const info = reactive({
+//   title: "关于本站",
+// })
+const feedBackUrl = import.meta.env.VITE_FEEDBACK_URL
+//copy
+// const copyRes = async (resStr: string) => {
+//   copy(resStr)
+// }
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 flex-1">
+    <div class="bg-white rounded-md p-5">
+      <br>
+      <p>本项目是一个开源工具站, 求星星</p>
+      <br>
+      <p>本项目开源地址：<el-link href="https://github.com/taoran1401/tools-web">https://github.com/taoran1401/tools-web</el-link></p>
+      <br>
+      <p class="font-bold">联系作者/问题反馈</p>
+      <br>
+      <p>反馈中心：<el-link :href="feedBackUrl">{{ feedBackUrl }}</el-link></p>
+      <br>
+      <p>邮箱：taoran0796@163.com</p>
+      <br>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Home/About.vue b/src/components/Home/About.vue
index 4354178..e66d6d1 100644
--- a/src/components/Home/About.vue
+++ b/src/components/Home/About.vue
@@ -1,31 +1,100 @@
 <script setup lang="ts">
-// import { ref } from 'vue'
-// import { copy } from '@/utils/string'
-// const info = reactive({
-//   title: "关于本站",
-// })
-const feedBackUrl = import.meta.env.VITE_FEEDBACK_URL
-//copy
-// const copyRes = async (resStr: string) => {
-//   copy(resStr)
+import { ref, onMounted } from 'vue'
+// import { useRouter } from "vue-router"
+import { useScanStore } from '@/store/modules/scan'
+
+// const router = useRouter()
+const scanStore = useScanStore()
+
+//video html element
+const videoPlayerRef = ref()
+
+//上一个
+const playPreviousVideo = () => {
+  var data = scanStore.historyList[scanStore.historyList.length - 2];
+  videoPlayerRef.value.src = scanStore.sourceUrl + data.title;
+  // console.log(videoPlayerRef.value.src)
+  videoPlayerRef.value.load();
+  videoPlayerRef.value.play();
+  //记录当期播放
+  scanStore.setNowPlay(data)
+  // scanStore.setNowIndex(nextIndex)
+  //刷新页面
+  window.location.reload()
+}
+
+//下一个
+const playNextVideo = () => {
+  let nextIndex = scanStore.getNowIndex() + 1;
+  if (scanStore.isRandPlay === false) {
+    //随机播放,并且不能和当前相同TODO
+    nextIndex = Math.floor(Math.random() * scanStore.videoList.length);
+  }
+  if (nextIndex < scanStore.videoList.length) {
+    var data = scanStore.videoList[nextIndex];
+    videoPlayerRef.value.src = scanStore.sourceUrl + data.title;
+    videoPlayerRef.value.load();
+    videoPlayerRef.value.play();
+    //记录当期播放
+    scanStore.setNowPlay(data)
+    scanStore.setNowIndex(nextIndex)
+    //刷新页面
+    window.location.reload()
+  } else {
+    alert('没有下一个了')
+  }
+}
+
+//能播放时触发
+const canplay = () => {
+  //更新历史播放
+  //过滤重复信息
+  let nowPlay = scanStore.getNowPlay()
+  console.log(nowPlay.id)
+  scanStore.historyList = scanStore.historyList.filter(item => item.id != nowPlay.id)
+  scanStore.historyList.push(scanStore.getNowPlay())
+  localStorage.setItem('historyList', JSON.stringify(scanStore.historyList))
+}
+
+//根据索引获取文件信息
+// const getInfoByIndex = () => {
+//   return scanStore.videoList[Number(scanStore.nowIndex)];
 // }
+
+//播放结束时触发
+const ended = () => {
+  //自动播放下一个
+  playNextVideo()
+}
+
+onMounted(() => {
+  console.log(scanStore.getNowPlay())
+})
+
 </script>
 
 <template>
   <div class="flex flex-col mt-3 flex-1">
-    <div class="bg-white rounded-md p-5">
-      <br>
-      <p>本项目是一个开源工具站, 求星星</p>
-      <br>
-      <p>本项目开源地址：<el-link href="https://github.com/taoran1401/tools-web">https://github.com/taoran1401/tools-web</el-link></p>
-      <br>
-      <p class="font-bold">联系作者/问题反馈</p>
-      <br>
-      <p>反馈中心：<el-link :href="feedBackUrl">{{ feedBackUrl }}</el-link></p>
-      <br>
-      <p>邮箱：taoran0796@163.com</p>
-      <br>
+    <div class="ml-3">
+      <router-link to="/" class="mr-3">
+        <el-button>首页</el-button>
+      </router-link>
+      <el-button @click="playPreviousVideo">上一个</el-button>
+      <el-button @click="playNextVideo">下一个</el-button>
+      <div class="mt-3 mb-3">当前播放：{{ scanStore.getNowPlay().path }}</div>
+      <video 
+        ref="videoPlayerRef"
+        :src="scanStore.sourceUrl + scanStore.getNowPlay().title" class="w-[850px] h-[500px]" 
+        :autoplay="false"
+        :playbackRate="scanStore.playbackRate"
+        @canplay="canplay"
+        @ended="ended"
+        controls>
+        您的浏览器不支持video
+      </video>
+
     </div>
+
   </div>
 </template>
 
diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index 97272d3..45436a1 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -3,10 +3,10 @@ import { onMounted,reactive, ref } from 'vue';
 import { useScanStore } from '@/store/modules/scan'
 // import { ElMessage } from 'element-plus'
 import { Search } from '@element-plus/icons-vue';
-// import { useRoute } from "vue-router"
+import { useRouter } from "vue-router"
 //store
 const scanStore = useScanStore()
-// const route = useRoute()
+const router = useRouter()
 // const getToolsCate = async () => {
 //   try {
 //     await toolsStore.getToolCate()
@@ -18,8 +18,8 @@ const scanStore = useScanStore()
 const loading = ref(false)
 const setTagsDialog = ref(false)
 // const checkedTags = reactive({})
-//常见视频格式
-const extVideo = ref(['ts', 'mp4', 'mkv', 'wmv', 'avi', 'flv', '3gp', 'dvd', 'mov', 'vob', 'webm'])
+//----- config -----
+//----- ^ -----
 
 //获取分类
 //查询参数
@@ -28,8 +28,9 @@ const searchParam = reactive({
   tags: '',
   page: 1,
 })
-const getList = async () => {
+const getList = async (query) => {
   try {
+    searchParam.title = query
     await scanStore.getList(searchParam)
   } catch (error) {
     console.log(error)
@@ -97,15 +98,38 @@ const pageChange = async (nowPage: number) => {
   await scanStore.getList(searchParam)
 }
 
+/**
+ * open local app
+ * 
+ * index: 索引
+ * data: 内容数据
+ */
+const open = (index: number, data: any) => {
+  //缓存当前播放和播放索引
+  scanStore.setNowPlay(data)
+  scanStore.setNowIndex(index)
+  router.push({
+    path: '/about',
+  })
+
+  // let addr = router.resolve({
+  //   path: '/about',
+  //   params: {
+  //     url: url
+  //   }
+  // }).href
+  // window.open(addr, '_blank')
+}
+
 onMounted(() => {
-  getList();
+  getList('');
   getTags();
 })
 </script>
 
 <template>
   <div>
-    <div class="mt-3">
+    <div class="mt-3 flex items-center">
       <el-select
         v-model="searchParam.title"
         filterable
@@ -128,6 +152,11 @@ onMounted(() => {
         >
         </el-optiond>
       </el-select>
+      <!-- <el-button>扫描目录</el-button> -->
+      <el-button>随机预览</el-button>
+      <div class='ml-3'>
+        <el-text>数量：111</el-text>
+      </div>
     </div>
 
     <div class="flex w-full">
@@ -138,8 +167,8 @@ onMounted(() => {
           <div class="flex items-center">
             <!--  -->
             <div>
-              <div v-if="extVideo.includes(item.ext)">
-                <video :src="item.path" controls></video>
+              <div v-if="scanStore.extVideo.includes(item.ext)">
+                <video :src="scanStore.sourceUrl + item.title" style="height:150px;width:270px;"></video>
               </div>
               <div v-else>
                 <el-empty description="无预览" :image-size="100"/>
@@ -163,10 +192,10 @@ onMounted(() => {
 
           <!-- right -->
           <div class="flex flex-col justify-center">
-            <el-button size="small" type="primary" class="w-20">open</el-button>
+            <el-button size="small" type="primary" class="w-20" @click="open(index, item)">open</el-button>
             <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;" @click="setTagsDia(item.id)">set tags</el-button>
-            <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;" >move</el-button>
-            <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;">delete</el-button>
+            <!-- <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;" >move</el-button> -->
+            <!-- <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;">delete</el-button> -->
           </div>
         </div>
         <!-- 分页 -->
@@ -196,7 +225,7 @@ onMounted(() => {
       </div>
     </div>
     <!-- set tags dialog -->
-    <el-dialog v-model="setTagsDialog" title="set tags" width="800" @close="getList()">
+    <el-dialog v-model="setTagsDialog" title="set tags" width="800" @close="getList('')">
       <!-- tags -->
       <div class="p-3 bg-white" v-for="(item, index) in scanStore.tags" :key="index">
         <div>{{ item.title }}</div>
diff --git a/src/store/modules/scan.ts b/src/store/modules/scan.ts
index 5ed65c8..dd6ccb5 100644
--- a/src/store/modules/scan.ts
+++ b/src/store/modules/scan.ts
@@ -9,7 +9,13 @@ export const useScanStore = defineStore('scan', {
     list: {} as ScanFilePage,
     fileInfo: {} as ScanFileInfo, //当前文件信息
     fileInfoTags: [] as number[], //当期文件tags
-    tags: [] as ScanTagInfo[]
+    tags: [] as ScanTagInfo[],
+    videoList: localStorage.getItem('videoList') !== null ? JSON.parse(localStorage.getItem('videoList') || '') : [], //播放列表，一般情况下同list
+    playbackRate: 1.5,  //播放速度
+    isRandPlay: false,  //是否随机播放
+    extVideo: ['ts', 'mp4', 'mkv', 'wmv', 'avi', 'flv', '3gp', 'dvd', 'mov', 'vob', 'webm'], //视频格式
+    sourceUrl: 'http://localhost:7881/',  //资源服务地址
+    historyList: localStorage.getItem('historyList') !== null ? JSON.parse(localStorage.getItem('historyList') || '') : [],   //历史播放
   }),
   //方法
   actions: {
@@ -19,6 +25,8 @@ export const useScanStore = defineStore('scan', {
       const result: any = await getList(data)
       if (result.code == 200) {
           this.list = result.data
+          localStorage.setItem('videoList', JSON.stringify(result.data.data))
+          console.log(localStorage.getItem('videoList'))
           return result.message
       } else {
         return Promise.reject(new Error(result.message))
@@ -56,5 +64,31 @@ export const useScanStore = defineStore('scan', {
         return Promise.reject(new Error(result.message))
       }
     },
+    //设置播放列表
+    // setVideoList() {
+
+    // },
+    //设置播放速度
+    setPlaybackRate(number) {
+      this.playbackRate = number
+    },
+    //当期那播放信息、索引获取和设置
+    getNowPlay() {
+      return localStorage.getItem('nowPlay') !== null ? JSON.parse(localStorage.getItem('nowPlay') || '') : {};
+    },
+    getNowIndex() {
+      return localStorage.getItem('nowIndex') !== null ? JSON.parse(localStorage.getItem('nowIndex') || '') : 0;
+    },
+    setNowPlay(data) {
+      localStorage.setItem('nowPlay', JSON.stringify(data))
+    },
+    setNowIndex(index) {
+      localStorage.setItem('nowIndex', JSON.stringify(index))
+    },
+    //清除缓存
+    cleanCache() {
+      localStorage.removeItem('videoList');
+      localStorage.removeItem('historyList');
+    }
   }
 })
\ No newline at end of file