ow

WebVue/src/views/master/DmsFileDeleteEnquiry.vue

@@ -21,7 +21,8 @@
       onVisibleChange: setPicVisible,
     }" :src="imageSrc" />
     <dmsFolder @on-submit="onReload"></dmsFolder>
-    <videoPlay></videoPlay>
+    <VideoPlayModal v-model:open="videoPlayModal" :videos="videoPlayList" :start-index="videoPlayIndex"
+      :title="videoPlayTitle" :fullscreen="width < 640" />
     <dragModal v-model:open="showModalShare" width="60%" title="分享管理查询" :mask-closable="false" :fullscreen="width < 640"
       @ok="handleSelectShare">
       <DmsFileShareModal ref="shareEnquiry"></DmsFileShareModal>
@@ -77,7 +78,6 @@ import { notification } from "ant-design-vue";
 import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
 import dmsFolder from "./DmsFolderModal.vue";
 import { orderBy } from "lodash-es";
-import VideoPlay from "./PlayVideo.vue";
 import { Howl } from "howler";
 import { PublishVideoEntity } from "@/data/auto/publishVideoEntity";
 import publishVideoService from "@/service/master/publishVideoService";
@@ -92,6 +92,9 @@ import { PublishPhotoEntity } from "@/data/auto/publishPhotoEntity";
 import MyComputer from "@/components/basic/MyComputer.vue";
 import Toolbar from "@/components/basic/Toolbar.vue";
 import OperatorStationDelete from "@/components/basic/OperatorStationDelete.vue";
+import VideoPlayModal from "@/components/basic/VideoPlayModal.vue";
+import type { VideoItem } from "@/components/basic/VideoPlayer.vue";
+import { PublishVideoDetailDisplayData } from "@/data/auto/publishVideoDetailDisplayData";
 
 interface BreadcrumbItem {
   value: string;
@@ -137,9 +140,8 @@ const dmsFolderIsRename = ref<boolean>(false);
 const dmsFolderIsMove = ref<boolean>(false);
 const entity = ref<DmsFileEntity>(new DmsFileEntity());
 const videoPlayModal = ref<boolean>(false);
-const videoSrc = ref<string>("");
-const videoPoster = ref<string>("");
-const videoType = ref<string>("");
+const videoPlayList = ref<VideoItem[]>([]);
+const videoPlayIndex = ref<number>(0);
 const videoPlayTitle = ref<string>("");
 const visible = ref<boolean>(false);
 
@@ -239,11 +241,6 @@ provide("dmsFolderTitle", dmsFolderTitle);
 provide("dmsFolderIsRename", dmsFolderIsRename);
 provide("dmsFolderIsMove", dmsFolderIsMove);
 provide("DmsFileEntity", entity);
-provide("videoPlayModal", videoPlayModal);
-provide("videoPlayTitle", videoPlayTitle);
-provide("videoSrc", videoSrc);
-provide("videoPoster", videoPoster);
-provide("videoType", videoType);
 provide("isModalPublishVideo", showModalPublishVideo);
 provide("isModalPublishAudio", showModalPublishAudio);
 provide("isModalPublishPhoto", showModalPublishPhoto);
@@ -295,29 +292,61 @@ const onChangeFolder = async (fvalue: string) => {
   onSearchByFilePath(fvalue);
 };
 
-const onUrlVideoPlay = (url: string, title: string, poster: string) => {
+/** DMS 记录 → 播放列表项（m3u8 的封面用同名 png 兜底） */
+const toVideoItem = (
+  record: DmsFileUploadDeleteLogViewDisplayData,
+): VideoItem => {
+  const item = new PublishVideoDetailDisplayData();
+  item.Title = record.OrgFileName;
+  item.FormattedUrl = record.Url;
+  item.FormattedPic = (record.FormattedPic || "").replace(/\.m3u8$/, ".png");
+  return item;
+};
+
+/** 当前目录里已转码（有 Url）的视频，作为弹窗播放器的播放列表 */
+const buildVideoList = (
+  records: DmsFileUploadDeleteLogViewDisplayData[],
+): VideoItem[] =>
+  records
+    .filter(
+      (x) =>
+        x.IsDirectoryIndc != "Y" &&
+        fileTypePolicy.isVideo(x.OrderKey || x.OrgFileName) &&
+        !!x.Url,
+    )
+    .map(toVideoItem);
+
+/** 打开视频弹窗 */
+const openVideoPlay = (list: VideoItem[], index: number, title: string) => {
   sound.value?.stop();
   datas.value.forEach((element) => {
     element.IsPlay = "";
   });
-  videoPoster.value = poster;
-  videoType.value = "m3u8";
-  videoSrc.value = url;
+  videoPlayList.value = list;
+  videoPlayIndex.value = index < 0 ? 0 : index;
+  videoPlayTitle.value = title || "视频播放";
   videoPlayModal.value = true;
-  videoPlayTitle.value = title;
 };
 
-const onVideoPlay = async (fid: number) => {
-  dmsFileService
-    .FindDeleteLogM3u8Path(fid)
-    .then((res) => {
-      videoType.value = "video/mp4";
-      videoSrc.value = res;
-      videoPlayModal.value = true;
-    })
-    .catch(() => {
-      videoPlayModal.value = false;
+/** 未转码的视频没有 Url，直接取源片路径播放 */
+const onSourceVideoPlay = async (
+  record: DmsFileUploadDeleteLogViewDisplayData,
+) => {
+  try {
+    loading.value = true;
+    const url = await dmsFileService.FindDeleteLogM3u8Path(record.FileId);
+    const item = toVideoItem(record);
+    item.FormattedUrl = url;
+    openVideoPlay([item], 0, record.OrgFileName);
+  } catch (error) {
+    notification.info({
+      message: "系统提示：",
+      description: "视频加载失败",
+      placement: "topRight",
     });
+  } finally {
+    loading.value = false;
+  }
 };
 
 const onPreviewFile = async (
@@ -531,7 +560,7 @@ const onViewPic = () => {
   } else if (fileTypePolicy.isImage(keys.value[0].OrgFileName)) {
     onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
   } else if (fileTypePolicy.isVideo(keys.value[0].OrgFileName)) {
-    onVideoPlay(keys.value[0].FileId);
+    onUrlVideoPlayItem(keys.value[0]);
   } else {
     notification.info({
       message: "系统提示：",
@@ -942,7 +971,7 @@ const onOpenFile = (record: DmsFileUploadDeleteLogViewDisplayData) => {
   if (fileTypePolicy.isImage(record.OrgFileName)) {
     onPreviewFile(record.CreatedBy, record.OrderKey);
   } else if (fileTypePolicy.isVideo(record.OrgFileName)) {
-    onVideoPlay(record.FileId);
+    onUrlVideoPlayItem(record);
   } else if (fileTypePolicy.isAudio(record.OrgFileName)) {
     onPlayAudio(toUploadView(record));
   } else {
@@ -988,12 +1017,21 @@ const onViewPreviewSelected = (items: DmsFileUploadDeleteLogViewDisplayData[]) =
   }
 };
 
-const onUrlVideoPlayItem = (record: DmsFileUploadDeleteLogViewDisplayData) => {
-  onUrlVideoPlay(
-    record.Url,
-    record.OrgFileName,
-    record.FormattedPic.replace(".m3u8", ".png"),
-  );
+/** 播放视频：把当前目录的视频串成播放列表，从点中的那一个开始 */
+const onUrlVideoPlayItem = async (
+  record: DmsFileUploadDeleteLogViewDisplayData,
+) => {
+  if (!record.Url) {
+    await onSourceVideoPlay(record);
+    return;
+  }
+  const list = buildVideoList(datas.value);
+  let index = list.findIndex((x) => x.FormattedUrl === record.Url);
+  if (index < 0) {
+    list.unshift(toVideoItem(record));
+    index = 0;
+  }
+  openVideoPlay(list, index, record.OrgFileName);
 };
 
 const onPlayAudioItem = (record: DmsFileUploadDeleteLogViewDisplayData) => {