ow
This commit is contained in:
itcsx committed
1 parent
501c92d87c
commit
f1a88acb89
9 files changed
+1040
-165
No files matched your search
@@ -1,93 +1,49 @@
|
||||
<template>
|
||||
<vue3VideoPlay v-if="options.type == 'm3u8'" :width="videoWidth" :title="title" :src="modal.videoSrc"
|
||||
:poster="modal.poster" type="m3u8" @ended="handleEnded" :autoPlay="false" />
|
||||
<vue3VideoPlay v-else :width="videoWidth" :title="title" :src="modal.videoSrc" :poster="modal.poster"
|
||||
type="video/mp4" @ended="handleEnded" :autoPlay="false" />
|
||||
<div class="list-container" :style="'height:' + listHeight + 'px;'">
|
||||
<a-list bordered :data-source="modal.data.Details">
|
||||
<template #renderItem="{ item, index }">
|
||||
<a-list-item slot="renderItem" slot-scope="item, index" @click="handleChange(index)">
|
||||
<span
|
||||
:style="modal.index == index ? 'color: black;font-weight: bold;font-size: 24px;' : 'font-size: 20px;'">
|
||||
{{ index + 1
|
||||
}}.{{
|
||||
item.Title }}</span>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #header>
|
||||
<div>播放列表</div>
|
||||
</template>
|
||||
</a-list>
|
||||
<div class="pv-page" :style="{
|
||||
height: bsInfo.height - 120 + 'px',
|
||||
}">
|
||||
<VideoPlayer :videos="videos" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
watch,
|
||||
computed,
|
||||
inject,
|
||||
reactive,
|
||||
ref,
|
||||
VNode,
|
||||
h,
|
||||
unref,
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
} from "vue";
|
||||
import dragModal from "@/components/basic/DragModal.vue";
|
||||
import { PublishVideoData } from "@/data/auto/publishVideoData";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import publishVideoService from "@/service/master/publishVideoService";
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import VideoPlayer from "@/components/basic/VideoPlayer.vue";
|
||||
import type { VideoItem } from "@/components/basic/VideoPlayer.vue";
|
||||
|
||||
import { bsInfo } from "@/utils/browser";
|
||||
import publishVideoService from "@/service/master/publishVideoService";
|
||||
import { PublishVideoData } from "@/data/auto/publishVideoData";
|
||||
import { PublishVideoDetailDisplayData } from "@/data/auto/publishVideoDetailDisplayData";
|
||||
import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
|
||||
import dmsFileService from "@/service/master/dmsFileService";
|
||||
import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
|
||||
import { SearchFilter } from "@/data/auto/searchFilter";
|
||||
import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
|
||||
import { DmsFileResultData } from "@/data/auto/dmsFileResultData";
|
||||
import dmsFileService from "@/service/master/dmsFileService";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const publishName = ref<string>(route.params.id as string);
|
||||
const mode = ref<string>(route.params.mode as string)
|
||||
const mode = ref<string>(route.params.mode as string);
|
||||
|
||||
const videoWidth = computed(() => {
|
||||
if (bsInfo.size.sm) return bsInfo.width;
|
||||
else return bsInfo.width - 600;
|
||||
});
|
||||
|
||||
|
||||
const listHeight = computed(() => {
|
||||
if (bsInfo.size.sm) return bsInfo.height - 550;
|
||||
else return bsInfo.height - 560;
|
||||
});
|
||||
|
||||
|
||||
const modal = reactive({
|
||||
loading: false,
|
||||
showModal: false,
|
||||
videoSrc: "",
|
||||
poster: "",
|
||||
index: 0,
|
||||
data: new PublishVideoData(),
|
||||
});
|
||||
|
||||
const title = "有家视频";
|
||||
// 视频列表：与 VinylAudioPlayer 的 tracks 一致，组件负责 UI，页面只负责数据
|
||||
const videos = ref<VideoItem[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
// 加载歌曲信息
|
||||
loadVideos();
|
||||
await loadVideos();
|
||||
});
|
||||
|
||||
const loadVideos = async () => {
|
||||
try {
|
||||
if (mode.value == "list") {
|
||||
let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
|
||||
// 模式一：从网盘中心加载某个路径下的所有视频
|
||||
if (mode.value === "list") {
|
||||
const c = new DmsFileSearchCriteria();
|
||||
c.limit = 100;
|
||||
c.page = 1;
|
||||
|
||||
let filter: SearchFilter;
|
||||
filter = new SearchFilter();
|
||||
filter.Column = DmsFileUploadViewDisplayData.DB_FILE_PATH;
|
||||
@@ -95,6 +51,7 @@ const loadVideos = async () => {
|
||||
filter.Operator = "single";
|
||||
filter.Value = publishName.value;
|
||||
c.Filter.push(filter);
|
||||
|
||||
filter = new SearchFilter();
|
||||
filter.Column = DmsFileUploadViewDisplayData.DB_FILE_TYPE;
|
||||
filter.Type = "SingleSelection";
|
||||
@@ -102,76 +59,41 @@ const loadVideos = async () => {
|
||||
filter.Value = FileTypePolicy.VIDEO;
|
||||
c.Filter.push(filter);
|
||||
|
||||
let dr: DmsFileResultData = await dmsFileService.FindBySearchCriteria(c);
|
||||
const dr: DmsFileResultData = await dmsFileService.FindBySearchCriteria(c);
|
||||
|
||||
if (dr && dr.Datas && dr.Datas.length > 0) {
|
||||
|
||||
modal.data.Details = [];
|
||||
let detail: PublishVideoDetailDisplayData;
|
||||
for (let i = 0; i < dr.Datas.length; i++) {
|
||||
detail = new PublishVideoDetailDisplayData()
|
||||
detail.Title = dr.Datas[i].OrgFileName;
|
||||
detail.FormattedUrl = dr.Datas[i].Url;
|
||||
detail.FormattedPic = dr.Datas[i].FormattedPic.replace('.m3u8', '.png');
|
||||
modal.data.Details.push(detail);
|
||||
for (const item of dr.Datas) {
|
||||
const detail = new PublishVideoDetailDisplayData();
|
||||
detail.Title = item.OrgFileName;
|
||||
detail.FormattedUrl = item.Url;
|
||||
// m3u8 通常配套同名 jpg/png 封面，这里把后缀替换成 .png 兜底
|
||||
detail.FormattedPic = (item.FormattedPic || "").replace(/\.m3u8$/, ".png");
|
||||
videos.value.push(detail);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
else if (!publishName.value || publishName.value.length == 0) {
|
||||
modal.data = await publishVideoService.FindPublishVideoDefault();
|
||||
} else {
|
||||
modal.data = await publishVideoService.FindByKey(publishName.value);
|
||||
// 默认发布视频
|
||||
else if (!publishName.value || publishName.value.length === 0) {
|
||||
const data: PublishVideoData = await publishVideoService.FindPublishVideoDefault();
|
||||
videos.value = data?.Details ?? [];
|
||||
}
|
||||
// 按 key 加载
|
||||
else {
|
||||
const data: PublishVideoData = await publishVideoService.FindByKey(publishName.value);
|
||||
videos.value = data?.Details ?? [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error); // for debug
|
||||
}
|
||||
|
||||
if (modal.data && modal.data.Details && modal.data.Details.length > 0) {
|
||||
options.type = modal.data.Details[0].FormattedUrl.indexOf(".m3u8") > 0 ? "m3u8" : "video/mp4";
|
||||
modal.videoSrc = modal.data.Details[0].FormattedUrl;
|
||||
modal.poster = modal.data.Details[0].FormattedPic;
|
||||
modal.index = 0;
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (index: number) => {
|
||||
modal.index = index;
|
||||
options.type = modal.data.Details[index].FormattedUrl.indexOf(".m3u8") > 0 ? "m3u8" : "video/mp4";
|
||||
modal.videoSrc = modal.data.Details[index].FormattedUrl;
|
||||
modal.poster = modal.data.Details[index].FormattedPic;
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
// 视频播放结束后，自动播放下一个视频
|
||||
const index = modal.index + 1;
|
||||
if (index < modal.data.Details.length) {
|
||||
modal.index = index;
|
||||
options.type = modal.data.Details[index].FormattedUrl.indexOf(".m3u8") > 0 ? "m3u8" : "video/mp4";
|
||||
modal.videoSrc = modal.data.Details[index].FormattedUrl;
|
||||
modal.poster = modal.data.Details[index].FormattedPic;
|
||||
} else {
|
||||
// 所有视频播放完毕，跳转到下一个页面
|
||||
//router.push("/master/video-publish");
|
||||
}
|
||||
};
|
||||
|
||||
//const videoSrc = ref('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
|
||||
// 视频播放器配置
|
||||
const options = reactive({
|
||||
src: modal.videoSrc, //视频源
|
||||
type: "m3u8", //视频类型
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layout-content-view {
|
||||
padding-top: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
<style scoped>
|
||||
.pv-page {
|
||||
width: 100%;
|
||||
/* 外层 .layout-content-view 只有 padding-left: 8px，这里补上右侧
|
||||
同样的间距，播放器才会左右居中而不是偏右贴边 */
|
||||
padding-right: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
overflow-y: scroll;
|
||||
/* 添加滚动条 */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user