chore(merge): 合并剧集转码产物面板

src/api/admin/transcode.ts

@@ -0,0 +1,30 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { EpisodeTranscodeItem, MediaThumbnailResult, TranscodeTriggerResult } from './types'
+
+/** 分集编辑页聚合查询转码任务、清晰度与帧图。 */
+export const getEpisodeTranscodeApi = (episodeId: number | string) => {
+  return request.get<EpisodeTranscodeItem>({
+    url: `/admin/episodes/${episodeId}/transcode`
+  })
+}
+
+/** 按媒体分页读取帧图；页面切换时复用该接口。 */
+export const getMediaThumbnailsApi = (
+  mediaAssetId: number | string,
+  pageIndex: number,
+  pageSize: number
+) => {
+  return request.get<MediaThumbnailResult>({
+    url: `/admin/media/${mediaAssetId}/thumbnails`,
+    params: { pageIndex, pageSize }
+  })
+}
+
+/** 手动触发或重转当前分集绑定的媒体。 */
+export const triggerMediaTranscodeApi = (mediaAssetId: number | string) => {
+  return request.post<TranscodeTriggerResult>({
+    url: `/admin/media/${mediaAssetId}/transcode`
+  })
+}

src/api/admin/types.ts

@@ -248,6 +248,78 @@ export interface MediaTranscodeProfile {
   sprite: MediaTranscodeSprite
 }
 
+export interface MediaRenditionItem {
+  id: number
+  quality: string
+  qualityName: string
+  width: number
+  height: number
+  resolution: string
+  videoBitrateKbps: number
+  audioBitrateKbps: number
+  videoCodec: string
+  audioCodec?: string
+  container: string
+  hlsUrl: string
+  sizeBytes: number
+  durationSec: number
+  segmentCount: number
+  status: string
+}
+
+export interface MediaThumbnailFrameItem {
+  frameIndex: number
+  timeMs: number
+  endTimeMs?: number
+  imageUrl: string
+  spriteUrl: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface MediaThumbnailSpriteInfo {
+  spriteUrl?: string
+  spriteUrls: string[]
+  vttUrl?: string
+  columns: number
+  rows: number
+  totalFrames: number
+  thumbWidth: number
+  thumbHeight: number
+  intervalSeconds: number
+}
+
+export interface MediaThumbnailResult {
+  mediaAssetId?: number | null
+  episodeId?: number | null
+  /** READY / FAILED / EMPTY / INVALID / NO_EPISODE */
+  status: string
+  errorMsg?: string
+  pageIndex: number
+  pageSize: number
+  frames: PageResult<MediaThumbnailFrameItem>
+  sprite?: MediaThumbnailSpriteInfo | null
+}
+
+export interface EpisodeTranscodeItem {
+  episodeId: number
+  mediaAssetId?: number | null
+  taskId?: number | null
+  status: string
+  progress?: number
+  retryCount?: number
+  errorMsg?: string
+  renditions: MediaRenditionItem[]
+  thumbnails?: MediaThumbnailResult | null
+}
+
+export interface TranscodeTriggerResult {
+  taskId: number
+  status: string
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string

src/constants/icons.ts

@@ -37,6 +37,8 @@ export const AppIcons = {
   delete: 'material-symbols:delete-rounded',
   upload: 'material-symbols:upload-rounded',
   download: 'material-symbols:download-rounded',
+  copy: 'material-symbols:content-copy-rounded',
+  openInNew: 'material-symbols:open-in-new-rounded',
   visibility: 'material-symbols:visibility-rounded',
   arrowUp: 'material-symbols:arrow-upward-rounded',
   arrowDown: 'material-symbols:arrow-downward-rounded',

src/locales/en.ts

@@ -529,6 +529,64 @@ export default {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
   },
+  episodeTranscode: {
+    title: 'Transcode outputs',
+    description: 'Review the transcode task, renditions and frame previews for this episode.',
+    statusLabel: 'Status',
+    progress: 'Progress',
+    retryCount: 'Retries',
+    reprocess: 'Transcode again',
+    reprocessing: 'Submitting',
+    triggerSuccess: 'Transcode task submitted',
+    loadFailed: 'Failed to load transcode outputs',
+    retryLoad: 'Reload',
+    triggerFailed: 'Failed to retry transcode',
+    noMedia: 'No uploaded media is bound to this episode yet.',
+    noRendition: 'No rendition outputs',
+    renditionTitle: 'Rendition outputs',
+    quality: 'Quality',
+    resolution: 'Resolution',
+    videoBitrate: 'Video bitrate',
+    audioBitrate: 'Audio bitrate',
+    codec: 'Codec',
+    container: 'Container',
+    fileSize: 'File size',
+    duration: 'Duration',
+    segments: 'Segments',
+    statusColumn: 'Status',
+    actions: 'Actions',
+    copyUrl: 'Copy playback URL',
+    openUrl: 'Open in new window',
+    copySuccess: 'Playback URL copied',
+    copyFailed: 'Failed to copy playback URL',
+    openFailed: 'Unable to open playback URL',
+    frameTitle: 'Frame previews',
+    frameView: 'Frames',
+    spriteView: 'Sprites',
+    frameCount: '{total} frames',
+    frameTime: 'Timestamp',
+    previewFrame: 'Preview frame at {time}',
+    spriteSheet: 'Sprite {index}',
+    spriteSheetFrames: '{count} frames',
+    noFrames: 'No frame previews',
+    noSprites: 'No sprite sheets available',
+    zoomTitle: 'Frame preview',
+    status: {
+      queued: 'Queued',
+      running: 'Transcoding',
+      success: 'Success',
+      failed: 'Failed',
+      empty: 'No output',
+      noVideo: 'No video',
+      noMediaAsset: 'No media asset',
+      noTask: 'No transcode task',
+      noEpisode: 'No episode binding',
+      episodeNotFound: 'Episode not found',
+      invalid: 'Invalid output',
+      ready: 'Ready',
+      unknown: 'Unknown'
+    }
+  },
   episodeBatch: {
     title: 'Batch upload episodes',
     entry: 'Batch upload',

src/locales/zh-CN.ts

@@ -523,6 +523,64 @@ export default {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
   },
+  episodeTranscode: {
+    title: '转码产物',
+    description: '查看当前分集的转码任务、清晰度与帧图产物。',
+    statusLabel: '状态',
+    progress: '进度',
+    retryCount: '重试次数',
+    reprocess: '重新转码',
+    reprocessing: '正在触发',
+    triggerSuccess: '已提交转码任务',
+    loadFailed: '转码产物加载失败',
+    retryLoad: '重新加载',
+    triggerFailed: '重新转码失败',
+    noMedia: '当前分集尚未绑定已上传视频，暂无可查询的转码产物。',
+    noRendition: '暂无清晰度产物',
+    renditionTitle: '清晰度产物',
+    quality: '档位名称',
+    resolution: '分辨率',
+    videoBitrate: '视频码率',
+    audioBitrate: '音频码率',
+    codec: '编码',
+    container: '容器',
+    fileSize: '文件大小',
+    duration: '时长',
+    segments: '分片数',
+    statusColumn: '状态',
+    actions: '操作',
+    copyUrl: '复制播放地址',
+    openUrl: '新窗口打开',
+    copySuccess: '播放地址已复制',
+    copyFailed: '复制播放地址失败',
+    openFailed: '无法打开播放地址',
+    frameTitle: '帧图预览',
+    frameView: '逐帧',
+    spriteView: '雪碧图',
+    frameCount: '共 {total} 帧',
+    frameTime: '时间点',
+    previewFrame: '预览 {time} 帧图',
+    spriteSheet: '雪碧图 {index}',
+    spriteSheetFrames: '{count} 帧',
+    noFrames: '暂无帧图产物',
+    noSprites: '暂无可展示的雪碧图',
+    zoomTitle: '帧图预览',
+    status: {
+      queued: '排队中',
+      running: '转码中',
+      success: '成功',
+      failed: '失败',
+      empty: '暂无产物',
+      noVideo: '无视频',
+      noMediaAsset: '未绑定媒资',
+      noTask: '无转码任务',
+      noEpisode: '未绑定分集',
+      episodeNotFound: '分集不存在',
+      invalid: '产物异常',
+      ready: '就绪',
+      unknown: '未知状态'
+    }
+  },
   episodeBatch: {
     title: '批量上传剧集',
     entry: '批量上传',

src/views/contentManagement/upload/EpisodeFormDialog.vue

@@ -6,6 +6,7 @@ import { nextTick, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
 import { formatCount } from '@/utils/format'
+import EpisodeTranscodePanel from './EpisodeTranscodePanel.vue'
 import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
 
 const props = defineProps({
@@ -263,6 +264,8 @@ defineExpose({ openCreate, openEdit })
       </section>
     </el-form>
 
+    <EpisodeTranscodePanel v-if="editingId" :episode-id="editingId" :active="dialogVisible" />
+
     <template #footer>
       <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
         取消

src/views/contentManagement/upload/EpisodeTranscodePanel.vue

@@ -0,0 +1,816 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码产物：任务状态、清晰度列表、帧图与雪碧图预览 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import {
+  getEpisodeTranscodeApi,
+  getMediaThumbnailsApi,
+  triggerMediaTranscodeApi
+} from '@/api/admin/transcode'
+import type {
+  EpisodeTranscodeItem,
+  MediaRenditionItem,
+  MediaThumbnailFrameItem,
+  MediaThumbnailResult,
+  MediaThumbnailSpriteInfo
+} from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const props = defineProps<{
+  episodeId: number
+  active: boolean
+}>()
+
+const { t } = useI18n()
+const { copy, isSupported } = useClipboard()
+
+const POLL_INTERVAL_MS = 4000
+const THUMBNAIL_PAGE_SIZE = 100
+const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
+const FRAME_CARD_WIDTH = 128
+const PREVIEW_MAX_WIDTH = 520
+const PREVIEW_MAX_HEIGHT = 360
+const STATUS_KEYS: Record<string, string> = {
+  QUEUED: 'queued',
+  RUNNING: 'running',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  EMPTY: 'empty',
+  NO_VIDEO: 'noVideo',
+  NO_MEDIA_ASSET: 'noMediaAsset',
+  NO_TASK: 'noTask',
+  NO_EPISODE: 'noEpisode',
+  EPISODE_NOT_FOUND: 'episodeNotFound',
+  INVALID: 'invalid',
+  READY: 'ready'
+}
+
+const expanded = ref<string[]>(['transcode'])
+const detail = ref<EpisodeTranscodeItem | null>(null)
+const thumbnails = ref<MediaThumbnailResult | null>(null)
+const loading = ref(false)
+const thumbnailLoading = ref(false)
+const retriggering = ref(false)
+const errorMessage = ref('')
+const thumbnailError = ref('')
+const frameView = ref<'frames' | 'sprites'>('frames')
+const pageIndex = ref(1)
+const pageSize = ref(THUMBNAIL_PAGE_SIZE)
+const previewVisible = ref(false)
+const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
+let pollTimer: ReturnType<typeof setTimeout> | null = null
+let requestSeq = 0
+let thumbnailSeq = 0
+
+const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
+const hasMedia = computed(() => mediaAssetId.value > 0)
+const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
+const renditions = computed(() => detail.value?.renditions || [])
+const frames = computed(() => thumbnails.value?.frames?.list || [])
+const sprite = computed(() => thumbnails.value?.sprite || null)
+const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
+const framesTotal = computed(() => Number(thumbnails.value?.frames?.total || 0))
+const isProcessing = computed(
+  () => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
+)
+const safeProgress = computed(() => Math.min(100, Math.max(0, Number(detail.value?.progress || 0))))
+
+const statusLabel = computed(() => {
+  const key = STATUS_KEYS[String(detail.value?.status || '').toUpperCase()] || 'unknown'
+  return t(`episodeTranscode.status.${key}`)
+})
+
+const statusTagType = computed(() => {
+  switch (normalizedStatus.value) {
+    case 'SUCCESS':
+      return 'success'
+    case 'RUNNING':
+      return 'warning'
+    case 'FAILED':
+      return 'danger'
+    case 'QUEUED':
+      return 'primary'
+    default:
+      return 'info'
+  }
+})
+
+const progressStatus = computed(() => {
+  if (normalizedStatus.value === 'SUCCESS') return 'success'
+  if (normalizedStatus.value === 'FAILED') return 'exception'
+  return undefined
+})
+
+const previewStyle = computed(() => {
+  const frame = previewFrame.value
+  const info = sprite.value
+  if (!frame || !info) return {}
+  const scale = Math.min(
+    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
+    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
+  )
+  return frameStyle(frame, info, scale)
+})
+
+watch(
+  [() => props.episodeId, () => props.active],
+  ([episodeId, active], [previousEpisodeId]) => {
+    if (episodeId !== previousEpisodeId) resetState()
+    if (!active) {
+      stopPolling()
+      return
+    }
+    if (episodeId) void loadDetail()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(stopPolling)
+
+function resetState() {
+  stopPolling()
+  requestSeq += 1
+  thumbnailSeq += 1
+  detail.value = null
+  thumbnails.value = null
+  errorMessage.value = ''
+  thumbnailError.value = ''
+  pageIndex.value = 1
+  pageSize.value = THUMBNAIL_PAGE_SIZE
+  frameView.value = 'frames'
+  previewVisible.value = false
+  previewFrame.value = null
+}
+
+function stopPolling() {
+  if (pollTimer) clearTimeout(pollTimer)
+  pollTimer = null
+}
+
+function schedulePolling() {
+  stopPolling()
+  if (!props.active || !isProcessing.value) return
+  pollTimer = setTimeout(() => {
+    pollTimer = null
+    void loadDetail(true)
+  }, POLL_INTERVAL_MS)
+}
+
+async function loadDetail(silent = false) {
+  if (!props.active || !props.episodeId) return
+  const seq = ++requestSeq
+  stopPolling()
+  if (!silent) loading.value = true
+  errorMessage.value = ''
+  try {
+    const response = await getEpisodeTranscodeApi(props.episodeId)
+    if (seq !== requestSeq) return
+    const result = response.data
+    detail.value = result
+    if (result.thumbnails) {
+      thumbnails.value = result.thumbnails
+      pageIndex.value = result.thumbnails.pageIndex || 1
+      pageSize.value = result.thumbnails.pageSize || THUMBNAIL_PAGE_SIZE
+      thumbnailError.value = ''
+    }
+    if (isProcessing.value) schedulePolling()
+  } catch (error) {
+    if (seq !== requestSeq) return
+    errorMessage.value = errorText(error, t('episodeTranscode.loadFailed'))
+    stopPolling()
+  } finally {
+    if (seq === requestSeq) loading.value = false
+  }
+}
+
+async function loadThumbnailPage() {
+  if (!hasMedia.value || thumbnailLoading.value) return
+  const seq = ++thumbnailSeq
+  thumbnailLoading.value = true
+  thumbnailError.value = ''
+  try {
+    const response = await getMediaThumbnailsApi(
+      mediaAssetId.value,
+      pageIndex.value,
+      pageSize.value
+    )
+    if (seq !== thumbnailSeq) return
+    const result = response.data
+    thumbnails.value = result
+    pageIndex.value = result.pageIndex || pageIndex.value
+    pageSize.value = result.pageSize || pageSize.value
+  } catch (error) {
+    if (seq !== thumbnailSeq) return
+    thumbnailError.value = errorText(error, t('episodeTranscode.loadFailed'))
+  } finally {
+    if (seq === thumbnailSeq) thumbnailLoading.value = false
+  }
+}
+
+async function retrigger() {
+  if (!hasMedia.value || isProcessing.value || retriggering.value) return
+  retriggering.value = true
+  errorMessage.value = ''
+  try {
+    await triggerMediaTranscodeApi(mediaAssetId.value)
+    if (detail.value) {
+      detail.value = { ...detail.value, status: 'QUEUED', progress: 0, errorMsg: '' }
+    }
+    ElMessage.success(t('episodeTranscode.triggerSuccess'))
+    await loadDetail(true)
+    schedulePolling()
+  } catch (error) {
+    errorMessage.value = errorText(error, t('episodeTranscode.triggerFailed'))
+  } finally {
+    retriggering.value = false
+  }
+}
+
+function changePage(value: number) {
+  pageIndex.value = value
+  void loadThumbnailPage()
+}
+
+function changePageSize(value: number) {
+  pageSize.value = value
+  pageIndex.value = 1
+  void loadThumbnailPage()
+}
+
+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 openFramePreview(frame: MediaThumbnailFrameItem) {
+  previewFrame.value = frame
+  previewVisible.value = true
+}
+
+function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
+  return {
+    width: `${Math.round(frame.width * scale)}px`,
+    height: `${Math.round(frame.height * scale)}px`,
+    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
+    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
+    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
+      (info.rows || 1) * frame.height * scale
+    )}px`
+  }
+}
+
+function frameCardStyle(frame: MediaThumbnailFrameItem) {
+  if (!sprite.value) return {}
+  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
+}
+
+function spriteFrameCount(index: number) {
+  const info = sprite.value
+  if (!info) return 0
+  const capacity = Math.max(1, info.columns * info.rows)
+  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
+}
+
+function renditionStatusLabel(rendition: MediaRenditionItem) {
+  const key = STATUS_KEYS[String(rendition.status || '').toUpperCase()] || 'unknown'
+  return t(`episodeTranscode.status.${key}`)
+}
+
+function renditionStatusType(status: string) {
+  if (status === 'ready') return 'success'
+  if (status === 'failed') return 'danger'
+  return 'info'
+}
+
+function formatBytes(value?: number) {
+  const size = Number(value || 0)
+  if (size >= 1024 * 1024 * 1024) return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
+  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
+  if (size >= 1024) return `${Math.round(size / 1024)} KB`
+  return `${size} B`
+}
+
+function formatDuration(seconds?: number) {
+  const total = Math.max(0, Number(seconds || 0))
+  const minutes = Math.floor(total / 60)
+  return `${String(minutes).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`
+}
+
+function formatTimeMs(milliseconds?: number) {
+  const totalMs = Math.max(0, Number(milliseconds || 0))
+  const totalSeconds = Math.floor(totalMs / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${Math.floor(
+    (totalMs % 1000) / 100
+  )}`
+}
+
+function errorText(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+</script>
+
+<template>
+  <section class="episode-editor-section episode-transcode-panel">
+    <el-collapse v-model="expanded">
+      <el-collapse-item name="transcode">
+        <template #title>
+          <div class="episode-transcode-panel__heading">
+            <span>{{ t('episodeTranscode.title') }}</span>
+            <el-tag v-if="detail" :type="statusTagType" effect="light" size="small">
+              {{ statusLabel }}
+            </el-tag>
+            <el-progress
+              v-if="detail && hasMedia"
+              class="episode-transcode-panel__heading-progress"
+              :percentage="safeProgress"
+              :status="progressStatus"
+              :stroke-width="6"
+              :show-text="false"
+            />
+          </div>
+        </template>
+
+        <p class="episode-transcode-panel__description">
+          {{ t('episodeTranscode.description') }}
+        </p>
+        <el-skeleton v-if="loading && !detail" :rows="4" animated />
+        <div v-else-if="errorMessage" class="episode-transcode-panel__error">
+          <el-alert type="error" :title="errorMessage" :closable="false" show-icon />
+          <el-button size="small" @click="loadDetail()">
+            <AppIcon :icon="AppIcons.refresh" :size="16" />
+            {{ t('episodeTranscode.retryLoad') }}
+          </el-button>
+        </div>
+        <el-empty
+          v-else-if="detail && !hasMedia"
+          :description="t('episodeTranscode.noMedia')"
+          :image-size="72"
+        />
+        <template v-else-if="detail">
+          <div class="episode-transcode-panel__summary">
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.statusLabel') }}</span>
+              <el-tag :type="statusTagType" effect="light">{{ statusLabel }}</el-tag>
+            </div>
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.progress') }}</span>
+              <b>{{ safeProgress }}%</b>
+            </div>
+            <div class="episode-transcode-panel__metric">
+              <span>{{ t('episodeTranscode.retryCount') }}</span>
+              <b>{{ detail.retryCount || 0 }}</b>
+            </div>
+            <el-button
+              class="episode-transcode-panel__retry"
+              type="primary"
+              plain
+              :loading="retriggering"
+              :disabled="!hasMedia || isProcessing || retriggering"
+              @click="retrigger"
+            >
+              <AppIcon :icon="AppIcons.restart" :size="16" />
+              {{
+                retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
+              }}
+            </el-button>
+          </div>
+          <el-progress
+            class="episode-transcode-panel__progress"
+            :percentage="safeProgress"
+            :status="progressStatus"
+            :stroke-width="8"
+          />
+          <el-alert
+            v-if="detail.errorMsg"
+            class="episode-transcode-panel__error-alert"
+            type="error"
+            :title="detail.errorMsg"
+            :closable="false"
+            show-icon
+          />
+
+          <div class="episode-transcode-panel__subheading">
+            <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
+          </div>
+          <el-table
+            :data="renditions"
+            size="small"
+            border
+            class="episode-transcode-panel__table"
+            :empty-text="t('episodeTranscode.noRendition')"
+          >
+            <el-table-column
+              prop="qualityName"
+              :label="t('episodeTranscode.quality')"
+              min-width="88"
+            />
+            <el-table-column
+              prop="resolution"
+              :label="t('episodeTranscode.resolution')"
+              min-width="105"
+            />
+            <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
+              <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
+            </el-table-column>
+            <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
+              <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
+            </el-table-column>
+            <el-table-column
+              prop="videoCodec"
+              :label="t('episodeTranscode.codec')"
+              min-width="82"
+            />
+            <el-table-column
+              prop="container"
+              :label="t('episodeTranscode.container')"
+              min-width="82"
+            />
+            <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
+              <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
+            </el-table-column>
+            <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
+              <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
+            </el-table-column>
+            <el-table-column
+              prop="segmentCount"
+              :label="t('episodeTranscode.segments')"
+              min-width="76"
+            />
+            <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
+              <template #default="{ row }">
+                <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
+                  {{ renditionStatusLabel(row) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="t('episodeTranscode.actions')"
+              width="92"
+              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-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="episode-transcode-panel__subheading">
+            <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
+            <div class="episode-transcode-panel__frame-tools">
+              <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
+              <el-radio-group v-model="frameView" size="small">
+                <el-radio-button label="frames">{{
+                  t('episodeTranscode.frameView')
+                }}</el-radio-button>
+                <el-radio-button label="sprites">{{
+                  t('episodeTranscode.spriteView')
+                }}</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <el-alert
+            v-if="thumbnailError"
+            type="error"
+            :title="thumbnailError"
+            :closable="false"
+            show-icon
+          >
+            <template #default>
+              <el-button size="small" text @click="loadThumbnailPage">
+                {{ t('episodeTranscode.retryLoad') }}
+              </el-button>
+            </template>
+          </el-alert>
+          <div v-loading="thumbnailLoading">
+            <template v-if="frameView === 'frames'">
+              <div v-if="frames.length" class="episode-transcode-panel__frames">
+                <button
+                  v-for="frame in frames"
+                  :key="frame.frameIndex"
+                  class="episode-transcode-panel__frame"
+                  type="button"
+                  :aria-label="
+                    t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })
+                  "
+                  @click="openFramePreview(frame)"
+                >
+                  <span
+                    class="episode-transcode-panel__frame-image"
+                    :style="frameCardStyle(frame)"
+                  ></span>
+                  <span>{{ formatTimeMs(frame.timeMs) }}</span>
+                </button>
+              </div>
+              <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
+              <el-pagination
+                v-if="framesTotal"
+                class="episode-transcode-panel__pagination"
+                background
+                layout="sizes, prev, pager, next"
+                :current-page="pageIndex"
+                :page-size="pageSize"
+                :page-sizes="THUMBNAIL_PAGE_SIZES"
+                :total="framesTotal"
+                @current-change="changePage"
+                @size-change="changePageSize"
+              />
+            </template>
+            <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-panel__sprites">
+              <figure
+                v-for="(url, index) in spriteUrls"
+                :key="url"
+                class="episode-transcode-panel__sprite"
+              >
+                <div
+                  class="episode-transcode-panel__sprite-frame"
+                  :style="{
+                    aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
+                      sprite.rows * sprite.thumbHeight
+                    }`
+                  }"
+                >
+                  <el-image
+                    :src="url"
+                    :preview-src-list="spriteUrls"
+                    :initial-index="index"
+                    fit="contain"
+                    preview-teleported
+                    hide-on-click-modal
+                  />
+                  <span
+                    class="episode-transcode-panel__sprite-grid"
+                    :style="{
+                      backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
+                    }"
+                  ></span>
+                </div>
+                <figcaption>
+                  <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
+                  <span>{{
+                    t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
+                  }}</span>
+                </figcaption>
+              </figure>
+            </div>
+            <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
+          </div>
+        </template>
+      </el-collapse-item>
+    </el-collapse>
+
+    <el-dialog
+      v-model="previewVisible"
+      :title="t('episodeTranscode.zoomTitle')"
+      width="min(92vw, 600px)"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="episode-transcode-panel__preview-shell">
+        <div class="episode-transcode-panel__preview-image" :style="previewStyle"></div>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+
+<style scoped>
+.episode-transcode-panel :deep(.el-collapse) {
+  border: 0;
+}
+
+.episode-transcode-panel :deep(.el-collapse-item__header),
+.episode-transcode-panel :deep(.el-collapse-item__wrap) {
+  background: transparent;
+}
+
+.episode-transcode-panel__heading {
+  display: flex;
+  width: 100%;
+  padding-right: 12px;
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--el-text-color-primary);
+  align-items: center;
+  gap: 10px;
+}
+
+.episode-transcode-panel__heading-progress {
+  width: 110px;
+  margin-left: auto;
+}
+
+.episode-transcode-panel__description {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-transcode-panel__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.episode-transcode-panel__summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.episode-transcode-panel__metric {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 8px;
+}
+
+.episode-transcode-panel__metric b {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.episode-transcode-panel__retry {
+  margin-left: auto;
+}
+
+.episode-transcode-panel__progress {
+  margin-top: 12px;
+}
+
+.episode-transcode-panel__error-alert,
+.episode-transcode-panel__thumbnail-error {
+  margin-top: 12px;
+}
+
+.episode-transcode-panel__subheading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-panel__subheading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-panel__table {
+  width: 100%;
+}
+
+.episode-transcode-panel__frame-tools {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 12px;
+}
+
+.episode-transcode-panel__frames {
+  display: grid;
+  justify-content: center;
+  gap: 10px;
+  grid-template-columns: repeat(4, 128px);
+}
+
+.episode-transcode-panel__frame {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  cursor: zoom-in;
+  background: transparent;
+  border: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.episode-transcode-panel__frame-image {
+  display: block;
+  overflow: hidden;
+  background-color: var(--el-fill-color-dark);
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 7px;
+}
+
+.episode-transcode-panel__frame:hover .episode-transcode-panel__frame-image {
+  border-color: var(--el-color-primary);
+}
+
+.episode-transcode-panel__pagination {
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+
+.episode-transcode-panel__sprites {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.episode-transcode-panel__sprite {
+  min-width: 0;
+  margin: 0;
+}
+
+.episode-transcode-panel__sprite-frame {
+  position: relative;
+  overflow: hidden;
+  background: var(--el-fill-color-dark);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.episode-transcode-panel__sprite-frame :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.episode-transcode-panel__sprite-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.episode-transcode-panel__sprite figcaption {
+  display: flex;
+  padding-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.episode-transcode-panel__preview-shell {
+  display: flex;
+  min-height: 240px;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-fill-color-dark);
+  border-radius: 8px;
+}
+
+.episode-transcode-panel__preview-image {
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-panel__frames {
+    grid-template-columns: repeat(2, 128px);
+  }
+
+  .episode-transcode-panel__summary {
+    align-items: flex-start;
+  }
+
+  .episode-transcode-panel__retry {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+</style>