Просмотр исходного кода

refactor(live-stream): remove watch dialog and implement routing for stream viewing

- Removed the watch dialog component from the LiveStream view.
- Updated the handleWatch function to navigate to the Cloudflare Stream page with stream details instead of displaying a dialog.
- Cleaned up related styles and unused variables for improved code clarity.
yb 1 неделя назад
Родитель
Сommit
cac465e612
1 измененных файлов с 11 добавлено и 43 удалено
  1. 11 43
      src/views/live-stream/index.vue

+ 11 - 43
src/views/live-stream/index.vue

@@ -163,25 +163,12 @@
         <el-button type="primary" @click="templateDialogVisible = false">{{ t('关闭') }}</el-button>
         <el-button type="primary" @click="templateDialogVisible = false">{{ t('关闭') }}</el-button>
       </template>
       </template>
     </el-dialog>
     </el-dialog>
-
-    <!-- 观看弹窗 -->
-    <el-dialog v-model="watchDialogVisible" :title="t('观看直播')" width="800px" destroy-on-close>
-      <div v-if="currentWatchUrl" class="watch-container">
-        <video ref="videoRef" controls autoplay style="width: 100%; max-height: 450px; background: #000">
-          <source :src="currentWatchUrl" type="application/x-mpegURL" />
-        </video>
-        <div class="watch-url">
-          <span>{{ t('播放地址') }}:</span>
-          <el-link type="primary" :href="currentWatchUrl" target="_blank">{{ currentWatchUrl }}</el-link>
-        </div>
-      </div>
-      <div v-else class="watch-empty">{{ t('暂无播放地址') }}</div>
-    </el-dialog>
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue'
 import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { Search, RefreshRight, View } from '@element-plus/icons-vue'
 import { Search, RefreshRight, View } from '@element-plus/icons-vue'
 import {
 import {
@@ -198,6 +185,7 @@ import dayjs from 'dayjs'
 import { useI18n } from 'vue-i18n'
 import { useI18n } from 'vue-i18n'
 
 
 const { t } = useI18n({ useScope: 'global' })
 const { t } = useI18n({ useScope: 'global' })
+const router = useRouter()
 
 
 // 格式化时间
 // 格式化时间
 function formatDateTime(dateStr: string | undefined): string {
 function formatDateTime(dateStr: string | undefined): string {
@@ -211,10 +199,8 @@ const actionLoading = ref<Record<number, boolean>>({})
 const streamList = ref<LiveStreamDTO[]>([])
 const streamList = ref<LiveStreamDTO[]>([])
 const dialogVisible = ref(false)
 const dialogVisible = ref(false)
 const templateDialogVisible = ref(false)
 const templateDialogVisible = ref(false)
-const watchDialogVisible = ref(false)
 const formRef = ref<FormInstance>()
 const formRef = ref<FormInstance>()
 const currentTemplate = ref('')
 const currentTemplate = ref('')
-const currentWatchUrl = ref('')
 
 
 // 下拉选项
 // 下拉选项
 const lssOptions = ref<LssDTO[]>([])
 const lssOptions = ref<LssDTO[]>([])
@@ -626,8 +612,15 @@ async function handleStop(row: LiveStreamDTO) {
 }
 }
 
 
 function handleWatch(row: LiveStreamDTO) {
 function handleWatch(row: LiveStreamDTO) {
-  currentWatchUrl.value = row.playUrl || ''
-  watchDialogVisible.value = true
+  // 跳转到 Cloudflare Stream 页面,带上 stream 信息
+  router.push({
+    path: '/cc',
+    query: {
+      streamSn: row.streamSn,
+      name: row.name,
+      playUrl: row.playUrl || ''
+    }
+  })
 }
 }
 
 
 async function handleSubmit() {
 async function handleSubmit() {
@@ -820,29 +813,4 @@ onMounted(() => {
   max-height: 400px;
   max-height: 400px;
   overflow: auto;
   overflow: auto;
 }
 }
-
-.watch-container {
-  video {
-    border-radius: 4px;
-  }
-
-  .watch-url {
-    margin-top: 12px;
-    padding: 8px 12px;
-    background: #f5f7fa;
-    border-radius: 4px;
-    font-size: 13px;
-
-    span {
-      color: #666;
-      margin-right: 8px;
-    }
-  }
-}
-
-.watch-empty {
-  text-align: center;
-  padding: 40px;
-  color: #999;
-}
 </style>
 </style>