feat:增加循环播放功能

Taois · Taois · commit 7b965445f627 · 2025-10-07T06:17:38.000+08:00
diff --git a/dashboard/src/components/players/ArtVideoPlayer.vue b/dashboard/src/components/players/ArtVideoPlayer.vue
@@ -5,6 +5,7 @@
       :player-type="playerType"
       :episodes="episodes"
       :auto-next-enabled="autoNextEnabled"
+      :loop-enabled="loopEnabled"
       :countdown-enabled="countdownEnabled"
       :skip-enabled="skipEnabled"
       :show-debug-button="showDebugButton"
@@ -14,6 +15,7 @@
       :needs-parsing="needsParsing"
       :parse-data="parseData"
       @toggle-auto-next="toggleAutoNext"
+      @toggle-loop="toggleLoop"
       @toggle-countdown="toggleCountdown"
       @player-change="handlePlayerTypeChange"
       @open-skip-settings="openSkipSettingsDialog"
@@ -170,6 +172,7 @@ const dynamicHeight = ref(450) // 动态计算的高度
 
 // 自动下一集功能相关数据
 const autoNextEnabled = ref(true) // 自动下一集开关，默认关闭
+const loopEnabled = ref(JSON.parse(localStorage.getItem('loopEnabled') || 'false')) // 循环播放开关，从本地存储读取
 const autoNextCountdown = ref(0) // 自动下一集倒计时
 const autoNextTimer = ref(null) // 自动下一集定时器
 const showAutoNextDialog = ref(false) // 显示自动下一集对话框
@@ -659,12 +662,34 @@ const initArtPlayer = async (url) => {
     })
 
     art.on('video:ended', () => {
-      console.log('视频播放结束')
-      // 视频结束时启动自动下一集
-      if (autoNextEnabled.value && hasNextEpisode()) {
-        startAutoNextCountdown()
-      } else if (!hasNextEpisode()) {
-        Message.info('全部播放完毕')
+      try {
+        console.log('视频播放结束')
+        
+        // 优先处理循环播放
+        if (loopEnabled.value) {
+          console.log('循环播放：重新播放当前选集')
+          // 重新执行当前选集的播放逻辑
+          setTimeout(() => {
+            try {
+              // 触发重新选择当前选集，这会重新获取播放链接
+              emit('episode-selected', props.currentEpisodeIndex)
+            } catch (error) {
+              console.error('循环播放触发选集事件失败:', error)
+              Message.error('循环播放失败，请重试')
+            }
+          }, 1000)
+          return
+        }
+        
+        // 视频结束时启动自动下一集
+        if (autoNextEnabled.value && hasNextEpisode()) {
+          startAutoNextCountdown()
+        } else if (!hasNextEpisode()) {
+          Message.info('全部播放完毕')
+        }
+      } catch (error) {
+        console.error('视频结束事件处理失败:', error)
+        Message.error('视频结束处理失败')
       }
     })
 
@@ -1022,11 +1047,33 @@ const playNextEpisode = () => {
 const toggleAutoNext = () => {
   autoNextEnabled.value = !autoNextEnabled.value
   
+  // 如果开启自动连播，则关闭循环播放
+  if (autoNextEnabled.value) {
+    loopEnabled.value = false
+    localStorage.setItem('loopEnabled', 'false')
+  }
+  
   if (!autoNextEnabled.value) {
     cancelAutoNext()
   }
 }
 
+// 切换循环播放开关
+const toggleLoop = () => {
+  loopEnabled.value = !loopEnabled.value
+  
+  // 保存到本地存储
+  localStorage.setItem('loopEnabled', JSON.stringify(loopEnabled.value))
+  
+  // 如果开启循环播放，则关闭自动连播
+  if (loopEnabled.value) {
+    autoNextEnabled.value = false
+    cancelAutoNext()
+  }
+  
+  console.log('循环播放开关:', loopEnabled.value ? '开启' : '关闭')
+}
+
 // 切换倒计时开关
 const toggleCountdown = () => {
   countdownEnabled.value = !countdownEnabled.value
diff --git a/dashboard/src/components/players/PlayerHeader.vue b/dashboard/src/components/players/PlayerHeader.vue
@@ -29,6 +29,22 @@
           </svg>
           <span class="btn-text">自动连播</span>
         </div>
+
+        <!-- 循环播放按钮 -->
+        <div 
+          class="compact-btn" 
+          @click="$emit('toggle-loop')" 
+          :class="{ active: loopEnabled }"
+          title="循环播放当前选集"
+        >
+          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17 1l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none"/>
+            <path d="M3 11V9a4 4 0 0 1 4-4h14" stroke="currentColor" stroke-width="2" fill="none"/>
+            <path d="M7 23l-4-4 4-4" stroke="currentColor" stroke-width="2" fill="none"/>
+            <path d="M21 13v2a4 4 0 0 1-4 4H3" stroke="currentColor" stroke-width="2" fill="none"/>
+          </svg>
+          <span class="btn-text">循环播放</span>
+        </div>
         
         <!-- 倒计时按钮 -->
         <div 
@@ -199,6 +215,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  loopEnabled: {
+    type: Boolean,
+    default: false
+  },
   countdownEnabled: {
     type: Boolean,
     default: false
@@ -246,6 +266,7 @@ const props = defineProps({
 // Emits
 const emit = defineEmits([
   'toggle-auto-next',
+  'toggle-loop',
   'toggle-countdown', 
   'player-change',
   'open-skip-settings',
diff --git a/dashboard/src/components/players/VideoPlayer.vue b/dashboard/src/components/players/VideoPlayer.vue
@@ -6,6 +6,7 @@
       :player-type="playerType"
       :episodes="episodes"
       :auto-next-enabled="autoNext"
+      :loop-enabled="loopEnabled"
       :countdown-enabled="showCountdown"
       :skip-enabled="skipEnabled"
       :show-debug-button="showDebugButton"
@@ -15,6 +16,7 @@
       :needs-parsing="needsParsing"
       :parse-data="parseData"
       @toggle-auto-next="toggleAutoNext"
+      @toggle-loop="toggleLoop"
       @toggle-countdown="toggleCountdown"
       @player-change="handlePlayerTypeChange"
       @open-skip-settings="openSkipSettingsDialog"
@@ -176,12 +178,13 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['close', 'error', 'player-change', 'next-episode', 'quality-change', 'parser-change'])
+const emit = defineEmits(['close', 'error', 'player-change', 'next-episode', 'episode-selected', 'quality-change', 'parser-change'])
 
 // 响应式数据
 const videoPlayer = ref(null)
 const mediaPlayerManager = ref(null)
 const autoNext = ref(true) // 默认开启自动连播
+const loopEnabled = ref(JSON.parse(localStorage.getItem('loopEnabled') || 'false')) // 循环播放开关，从本地存储读取
 const showCountdown = ref(false)
 const showAutoNextDialog = ref(false)
 const autoNextCountdown = ref(10)
@@ -386,6 +389,26 @@ const {
 // 切换自动连播
 const toggleAutoNext = () => {
   autoNext.value = !autoNext.value
+  // 如果开启自动连播，则关闭循环播放
+  if (autoNext.value) {
+    loopEnabled.value = false
+    localStorage.setItem('loopEnabled', 'false')
+  }
+}
+
+// 切换循环播放
+const toggleLoop = () => {
+  loopEnabled.value = !loopEnabled.value
+  
+  // 保存到本地存储
+  localStorage.setItem('loopEnabled', JSON.stringify(loopEnabled.value))
+  
+  // 如果开启循环播放，则关闭自动连播
+  if (loopEnabled.value) {
+    autoNext.value = false
+  }
+  
+  console.log('循环播放开关:', loopEnabled.value ? '开启' : '关闭')
 }
 
 // 切换倒计时显示
@@ -515,22 +538,43 @@ const initVideoPlayer = (url) => {
   
   // 视频结束事件处理函数
   const handleVideoEnded = () => {
-    // 防抖：如果正在处理自动连播，则忽略
-    if (isProcessingAutoNext.value) {
-      return
-    }
-    
-    if (autoNext.value && hasNextEpisode()) {
-      isProcessingAutoNext.value = true
+    try {
+      // 防抖：如果正在处理自动连播，则忽略
+      if (isProcessingAutoNext.value) {
+        return
+      }
       
-      if (showCountdown.value) {
-        showAutoNextDialogFunc()
-      } else {
-        // 如果不显示倒计时，直接播放下一集
+      // 优先处理循环播放
+      if (loopEnabled.value) {
+        console.log('循环播放：重新播放当前选集')
+        // 重新执行当前选集的播放逻辑
         setTimeout(() => {
-          playNextEpisode()
+          try {
+            // 触发重新选择当前选集，这会重新获取播放链接
+            emit('episode-selected', props.currentEpisodeIndex)
+          } catch (error) {
+            console.error('循环播放触发选集事件失败:', error)
+            Message.error('循环播放失败，请重试')
+          }
         }, 1000)
+        return
+      }
+      
+      if (autoNext.value && hasNextEpisode()) {
+        isProcessingAutoNext.value = true
+        
+        if (showCountdown.value) {
+          showAutoNextDialogFunc()
+        } else {
+          // 如果不显示倒计时，直接播放下一集
+          setTimeout(() => {
+            playNextEpisode()
+          }, 1000)
+        }
       }
+    } catch (error) {
+      console.error('视频结束事件处理失败:', error)
+      Message.error('视频结束处理失败')
     }
   }
 
diff --git a/dashboard/src/views/VideoDetail.vue b/dashboard/src/views/VideoDetail.vue
@@ -68,6 +68,8 @@
         @player-change="handlePlayerTypeChange"
         @parser-change="handleParserChange"
         @next-episode="handleNextEpisode"
+        @episode-selected="handleEpisodeSelected"
+        @quality-change="handleQualityChange"
       />
 
       <!-- ArtPlayer 播放器组件 -->
@@ -1017,19 +1019,36 @@ const handleNextEpisode = (nextEpisodeIndex) => {
 }
 
 // 处理选集选择事件
-const handleEpisodeSelected = (episode) => {
-  console.log('从播放器选择剧集:', episode)
+const handleEpisodeSelected = (episodeParam) => {
+  console.log('从播放器选择剧集:', episodeParam)
   
-  // 查找选集在当前路线中的索引
-  const episodeIndex = currentRouteEpisodes.value.findIndex(ep => 
-    ep.name === episode.name && ep.url === episode.url
-  )
-  
-  if (episodeIndex !== -1) {
-    selectEpisode(episodeIndex)
+  // 判断传入的参数类型
+  if (typeof episodeParam === 'number') {
+    // 如果是数字，直接作为索引使用（循环播放场景）
+    const episodeIndex = episodeParam
+    if (episodeIndex >= 0 && episodeIndex < currentRouteEpisodes.value.length) {
+      console.log('使用索引选择选集:', episodeIndex)
+      selectEpisode(episodeIndex)
+    } else {
+      console.warn('无效的选集索引:', episodeIndex)
+      Message.warning('选集切换失败：无效的选集索引')
+    }
+  } else if (episodeParam && typeof episodeParam === 'object') {
+    // 如果是对象，按原来的逻辑查找索引
+    const episodeIndex = currentRouteEpisodes.value.findIndex(ep => 
+      ep.name === episodeParam.name && ep.url === episodeParam.url
+    )
+    
+    if (episodeIndex !== -1) {
+      console.log('通过对象查找到选集索引:', episodeIndex)
+      selectEpisode(episodeIndex)
+    } else {
+      console.warn('未找到选集:', episodeParam)
+      Message.warning('选集切换失败：未找到匹配的选集')
+    }
   } else {
-    console.warn('未找到选集:', episode)
-    Message.warning('选集切换失败')
+    console.warn('无效的选集参数:', episodeParam)
+    Message.warning('选集切换失败：参数格式错误')
   }
 }
 
