feat(admin): 清晰度产物支持 HLS 预览播放

src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue

@@ -2,12 +2,12 @@
 <!-- 剧集转码清晰度表格与播放地址操作 -->
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
 import type { MediaRenditionItem } from '@/api/admin/types'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import RenditionPlayerDialog from './RenditionPlayerDialog.vue'
 import {
   formatBytes,
   formatDuration,
@@ -20,30 +20,20 @@ defineProps<{
 }>()
 
 const { t } = useI18n()
-const { copy, isSupported } = useClipboard()
+
+const playerVisible = ref(false)
+const playerUrl = ref('')
+const playerTitle = ref('')
 
 function statusLabel(rendition: MediaRenditionItem) {
   return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
 }
 
-async function copyPlayUrl(url: string) {
-  if (!url) return
-  if (!isSupported.value) {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-    return
-  }
-  try {
-    await copy(url)
-    ElMessage.success(t('episodeTranscode.copySuccess'))
-  } catch {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-  }
-}
-
-function openPlayUrl(url: string) {
-  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
-    ElMessage.error(t('episodeTranscode.openFailed'))
-  }
+function playRendition(rendition: MediaRenditionItem) {
+  if (!rendition.hlsUrl) return
+  playerUrl.value = rendition.hlsUrl
+  playerTitle.value = `${rendition.qualityName} · ${rendition.resolution}`
+  playerVisible.value = true
 }
 </script>
 
@@ -82,21 +72,18 @@ function openPlayUrl(url: string) {
         </el-tag>
       </template>
     </el-table-column>
-    <el-table-column :label="t('episodeTranscode.actions')" width="92" fixed="right" align="center">
+    <el-table-column :label="t('episodeTranscode.actions')" width="76" fixed="right" align="center">
       <template #default="{ row }">
-        <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
-          <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.copy" :size="17" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
-          <el-button text circle @click="openPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.openInNew" :size="17" />
+        <el-tooltip :content="t('episodeTranscode.play')" placement="top">
+          <el-button text circle @click="playRendition(row)">
+            <AppIcon :icon="AppIcons.videoPlay" :size="17" />
           </el-button>
         </el-tooltip>
       </template>
     </el-table-column>
   </el-table>
+
+  <RenditionPlayerDialog v-model="playerVisible" :url="playerUrl" :title="playerTitle" />
 </template>
 
 <style scoped>