feat(video): 添加视频播放功能和抖音视频批量解析支持

- 新增 /video 路由用于视频播放
- 创建视频播放组件，支持通过 url 参数播放视频
- 实现抖音视频批量解析功能，支持多视频链接解析
- 优化视频播放器界面，添加直播状态显示
- 更新白名单路由，允许视频页面无需登录访问
- 修复视频播放相关的样式问题
- 优化进度条和直播标识显示逻辑

nexo-example/nexo-model/src/main/java/com/nexo/model/douyin/service/impl/INexoDouyinVideoServiceImpl.java

@@ -7,6 +7,9 @@ import com.nexo.module.api.douyin.utils.DouYinUtils;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.stereotype.Service;
 
+import java.util.ArrayList;
+import java.util.Map;
+
 /**
  * 抖音视频Service接口
  *
@@ -26,7 +29,12 @@ public class INexoDouyinVideoServiceImpl implements INexoDouyinVideoService {
         // 批量视频
         else if (item.getType() == 1) {
             String[] split = item.getVideoUrl().split("\\n");
-
+            ArrayList<Object> list = new ArrayList<>();
+            for (int i = 0; i < split.length; i++) {
+                Map<String, Object> parse = DouYinUtils.parse(split[i]);
+                list.add(parse);
+            }
+            return R.ok("解析成功", list);
         }
         return null;
     }

nexo-ui/src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/video']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

nexo-ui/src/router/index.js

@@ -61,6 +61,11 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+  {
+    path: '/video',
+    component: () => import('@/views/components/video/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,

nexo-ui/src/views/components/video/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <video_play :video_url="videoUrl" v-if="videoUrl !== undefined" :autoplay="true" :loop="true" style="height: 100vh" :video_type="1"/>
+    <div v-else>
+      请输入视频地址
+    </div>
+  </div>
+</template>
+<script>
+import Video_play from '@/views/components/video/video_play.vue'
+
+export default {
+  name: 'index',
+  components: { Video_play },
+  data() {
+    return {
+      videoUrl: null
+    }
+  },
+  mounted() {
+    this.videoUrl = this.$route.query.url
+    console.log(this.videoUrl)
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

nexo-ui/src/views/components/video/video_play.vue

@@ -94,7 +94,7 @@
             <div class="mini-progress-played" :style="{ width: progressPercent + '%' }"></div>
             <div class="mini-progress-dot" :style="{ left: progressPercent + '%' }"></div>
           </div>
-          <div v-else class="mini-progress-bar">
+          <div v-else class="mini-progress-bar" style="cursor: default">
             <div class="mini-progress-live">
               <span style="color: #ffffff">直播</span>
             </div>
@@ -2544,14 +2544,14 @@ div[data-title]:not([data-title-position]) {
 }
 
 .mini-progress-live {
-  background-color: #ffffff30;
-  padding: 3px 10px;
+  //background-color: #ffffff30;
+  //padding: 3px 10px;
   padding-left: 20px;
   border-radius: 3px;
   font-size: 12px;
   position: relative;
 
-  &::after{
+  &::after {
     content: '';
     position: absolute;
     top: 50%;
@@ -2561,9 +2561,8 @@ div[data-title]:not([data-title-position]) {
     height: 6px;
     background-color: #ff4757;
     border-radius: 50%;
-    animation:
-      pulse 1.5s ease-in-out infinite,
-      glow 2s ease-in-out infinite;
+    animation: pulse 1.5s ease-in-out infinite,
+    glow 2s ease-in-out infinite;
   }
 }
 

nexo-ui/src/views/module/douyin/live/live.vue

@@ -3,10 +3,9 @@
     <nexo-radio v-model="type" :options="radioOptions" style="width: 350px"/>
     <el-card shadow="never" class="mt10">
       <el-input v-model="videoUrl" placeholder="请输入视频地址"/>
-      <el-button type="primary" class="mt10" @click="handleSubmit">提交</el-button>
     </el-card>
-    <el-card shadow="never" class="mt10">
-      <video_play :video_url="videoUrl" v-if="videoUrl!=''" :autoplay="true" :loop="true" style="height: 50vh" :video_type="0"/>
+    <el-card shadow="never" class="mt10" v-if="videoUrl!=''">
+      <video_play :video_url="videoUrl" :autoplay="true" :loop="true" style="height: 50vh" :video_type="0"/>
     </el-card>
   </div>
 </template>
@@ -23,7 +22,7 @@ export default {
       radioOptions: [
         { label: '抖音', value: 'douyin' },
         { label: '快手', value: 'kuaishou' },
-        { label: '歪歪', value: 'yy' }
+        { label: 'YY语音', value: 'yy' }
       ],
       videoUrl: ''
     }