Skip to content

L
live-management-web
Commit c9ec9cdc by haojie
Options

Merge branch 'v4test' of http://124.223.61.50:8099/haojie/live-management-web into v5

parents b9282d44 a3d210c3
Showing with 663 additions and 258 deletions
src/pages/OnlyVideoLive/useScript.ts
...@@ -591,52 +591,54 @@ export default function () { ...@@ -591,52 +591,54 @@ export default function () {
try { try {
let res: any = await getLiveDetail(getRouteId()); let res: any = await getLiveDetail(getRouteId());
if (res.code == 0) { if (res.code == 0) {
if (isDev()) { // if (isDev()) {
// 创建url // // 创建url
res.data = {}; // res.data = {};
let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
// let url = // let url =
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4'; // 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
let list = [ // // let url =
{ // // 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
url: url, // let list = [
type: 1,
},
// { // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // url: url,
// type: 3, // type: 1,
// play_time: 10,
// },
// 动作视频
// {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4',
// type: 3,
// play_time: 172,
// }, // },
// // {
// // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// // type: 3,
// // play_time: 10,
// // },
// // 动作视频
// // {
// // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4',
// // type: 3,
// // play_time: 172,
// // },
// // {
// // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// // type: 3,
// // play_time: 172,
// // },
// { // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // url: url,
// type: 3, // type: 1,
// play_time: 172,
// }, // },
{ // // {
url: url, // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
type: 1, // // type: 3,
}, // // play_time: 0,
// { // // },
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // ];
// type: 3,
// play_time: 0, // res.data.url = list;
// }, // }
]; console.log(res.data);
res.data.url = list;
}
if (DataType(res.data, 'object') && res.data.url && res.data.url.length) { if (DataType(res.data, 'object') && res.data.url && res.data.url.length) {
res.data.url.forEach((item: any) => { res.data.url.forEach((item: any) => {
item.uuid = v4(); item.uuid = v4();
}); });
const mainUrl = res.data.url.filter((item: any) => item.type == mainVideoType); const mainUrl = res.data.url.filter((item: any) => item.type == mainVideoType);
console.log(mainUrl, 'mainUrl');
const actionUrl = res.data.url.filter((item: any) => { const actionUrl = res.data.url.filter((item: any) => {
if (item.type == actionVideoType) { if (item.type == actionVideoType) {
item.remove = false; item.remove = false;
......
src/pages/home/components/myDigtalPeople.vue
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="my-digtal-people"> <div class="my-digtal-people">
<Grid :length="myDigtalList.list.length" :marginLeft="35"> <Grid :length="myDigtalList.list.length" :marginLeft="35">
<template v-for="item in myDigtalList.list" :key="item.id"> <template v-for="item in myDigtalList.list" :key="item.id">
<template v-if="item.type == LIVE_TYPES.VIDEO_LIVE">
<CardTwo <CardTwo
:id="item.id" :id="item.id"
:img="item.cover_url" :img="item.cover_url"
...@@ -19,7 +20,11 @@ ...@@ -19,7 +20,11 @@
</template> </template>
<template v-else> <template v-else>
<Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button> <Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button>
<Button class="digtal-people-ctrl" theme="danger" height="40px" @click="openInteractiveResponse(item)" <Button
class="digtal-people-ctrl"
theme="danger"
height="40px"
@click="openInteractiveResponse(item)"
>控制台</Button >控制台</Button
> >
</template> </template>
...@@ -44,6 +49,28 @@ ...@@ -44,6 +49,28 @@
</template> </template>
</CardTwo> </CardTwo>
</template> </template>
<template v-else>
<div class="my-digtal-people-audio">
<div class="digtal-people-audio-content">
<img :src="imgs.start" alt="" @click="startLive(item)" />
<Button
class="digtal-people-ctrl"
v-if="item.is_live || isDev()"
theme="danger"
height="40px"
@click="openInteractiveResponse(item)"
>控制台</Button
>
</div>
<div class="digtal-people-audio-footer">
<ChangeName :value="item.name" @change="nameChange"></ChangeName>
<div class="create-time">
{{ item.created_at }}
</div>
</div>
</div>
</template>
</template>
</Grid> </Grid>
<CustomLoading v-show="myDigtalList.loading"></CustomLoading> <CustomLoading v-show="myDigtalList.loading"></CustomLoading>
<ConfirmDialog v-model="confirmVisible" title="确定删除吗？" @confirm="confirm"></ConfirmDialog> <ConfirmDialog v-model="confirmVisible" title="确定删除吗？" @confirm="confirm"></ConfirmDialog>
...@@ -51,6 +78,7 @@ ...@@ -51,6 +78,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ChangeName from '@/components/changeName.vue';
import OtherLoading from '@/components/Loading/FirstCircle.vue'; import OtherLoading from '@/components/Loading/FirstCircle.vue';
import Grid from '@/components/Grid.vue'; import Grid from '@/components/Grid.vue';
import { onMounted, reactive, ref, watch } from 'vue'; import { onMounted, reactive, ref, watch } from 'vue';
...@@ -64,6 +92,7 @@ import { onUpdateLiveTask } from '@/service/Common'; ...@@ -64,6 +92,7 @@ import { onUpdateLiveTask } from '@/service/Common';
import { getLiveTask, deleteLiveTask, liveVideoDownload } from '@/utils/api/userApi'; import { getLiveTask, deleteLiveTask, liveVideoDownload } from '@/utils/api/userApi';
import { isDev, show_message } from '@/utils/tool'; import { isDev, show_message } from '@/utils/tool';
import { callPyjsInWindow, injectWindow, pyDownloadVideo } from '@/utils/pyqt'; import { callPyjsInWindow, injectWindow, pyDownloadVideo } from '@/utils/pyqt';
import { LIVE_TYPES } from '@/service/Live';
// import { jumpToCreateLivePage } from '@/router/jump'; // import { jumpToCreateLivePage } from '@/router/jump';
const props = withDefaults( const props = withDefaults(
...@@ -73,6 +102,11 @@ const props = withDefaults( ...@@ -73,6 +102,11 @@ const props = withDefaults(
{}, {},
); );
const imgs = {
start: new URL('@/assets/svg/custom/startAudio.svg', import.meta.url).href,
stop: new URL('@/assets/svg/custom/stopAudio.svg', import.meta.url).href,
};
const router = useRouter(); const router = useRouter();
const myDigtalList = reactive({ const myDigtalList = reactive({
...@@ -86,24 +120,36 @@ const confirmId = ref(''); ...@@ -86,24 +120,36 @@ const confirmId = ref('');
// 页面跳转前的校验 // 页面跳转前的校验
const beforePageJump = (item: any) => { const beforePageJump = (item: any) => {
if (item.status == 2) { if (item.status == 2 && !isDev()) {
show_message('直播未准备完毕'); show_message('直播未准备完毕');
return; return;
} }
let obj = myDigtalList.list.find((it: any) => it.is_live == 1); let obj = myDigtalList.list.find((it: any) => it.is_live == 1);
if (obj && obj.id != item.id) { if (obj && obj.id != item.id && !isDev()) {
show_message('已有开播任务，请先关闭直播'); show_message('已有开播任务，请先关闭直播');
return; return;
} }
let params: {
let params = { id: number;
status: number;
digital_image?: string;
digital_name?: string;
is_live: number;
page_path?: string;
type: number;
} = {
id: item.id, id: item.id,
status: item.status, status: item.status,
digital_image: item.cover_url,
digital_name: item.name,
is_live: item.is_live, is_live: item.is_live,
page_path: '', page_path: '',
type: item.type,
}; };
if (item.type == LIVE_TYPES.VIDEO_LIVE) {
params.digital_image = item.cover_url;
params.digital_name = item.name;
} else if (item.type == LIVE_TYPES.AUDIO_LIVE) {
// params = {};
}
return params; return params;
}; };
...@@ -135,8 +181,10 @@ const downLoadVideo = async (item: any) => { ...@@ -135,8 +181,10 @@ const downLoadVideo = async (item: any) => {
}; };
const startLive = (item: any) => { const startLive = (item: any) => {
// 视频直播页
let params = beforePageJump(item); let params = beforePageJump(item);
if (params) { if (params) {
if (item.type == LIVE_TYPES.VIDEO_LIVE) {
if (isDev()) { if (isDev()) {
// 新的播放页面 // 新的播放页面
router.push({ router.push({
...@@ -149,6 +197,16 @@ const startLive = (item: any) => { ...@@ -149,6 +197,16 @@ const startLive = (item: any) => {
// 打开只有视频播放的页面 // 打开只有视频播放的页面
callPyjsInWindow('openLivePage', params); callPyjsInWindow('openLivePage', params);
} }
} else if (item.type == LIVE_TYPES.AUDIO_LIVE) {
// 音频直播页
if (isDev()) {
router.push({
path: routerConfig.onlyVideoLive.path,
name: routerConfig.onlyVideoLive.name,
query: params,
});
}
}
} }
}; };
...@@ -252,6 +310,38 @@ watch( ...@@ -252,6 +310,38 @@ watch(
background: #303030; background: #303030;
position: relative; position: relative;
min-height: 300px; min-height: 300px;
.my-digtal-people-audio {
width: 200px;
height: 411px;
border-radius: 8px;
background: #1e1e1e;
.dja();
flex-direction: column;
.digtal-people-audio-content {
flex: 1;
.dja(space-evenly);
flex-direction: column;
img {
cursor: pointer;
}
.t-button {
width: 176px;
}
}
.digtal-people-audio-footer {
width: 100%;
padding: 6px 12px;
display: flex;
flex-direction: column;
border-top: 1px solid #303030;
justify-content: space-evenly;
.create-time {
font-size: @size-13;
color: #b3b3b3;
text-align: left;
}
}
}
.custom-loading-two { .custom-loading-two {
top: 150px; top: 150px;
transform: translate(-50%, 0); transform: translate(-50%, 0);
......
src/pages/onlyAudioLive/index.vue 0 → 100644
<template>
<div class="custom-start-only-video-page">
<div class="start-only-video-live">
<AddVideoPlay
v-model:currentPlayMainIndex="currentPlayMainIndex"
v-model:showActionVideo="showActionVideo"
v-model:firstVideoIsMain="firstVideoIsMain"
v-model:endVideoIsMain="endVideoIsMain"
:loading="loading"
:playId="addVideoId"
:liveDetail="liveDetail"
:video2="addVideo"
:actionVideo="actionVideo"
:mainVideoList="mainVideoList"
:currentMainVideoIndex="currentMainVideoIndex"
:playInfo="playInfo"
:realVideoList="realVideoList"
@playEnd="playEnd"
@actionPlayChange="actionPlayChange"
@initActionVideo="initActionVideo"
@currentTime="currentTimeChange"
@mainVideoListChange="mainVideoListChange"
></AddVideoPlay>
</div>
</div>
</template>
<script lang="ts" setup>
import AddVideoPlay from '@/components/AddVideoPlay.vue';
import useScript from './useScript';
const {
currentPlayMainIndex,
loading,
addVideoId,
liveDetail,
addVideo,
actionVideo,
mainVideoList,
currentMainVideoIndex,
playInfo,
firstVideoIsMain,
endVideoIsMain,
showActionVideo,
realVideoList,
playEnd,
actionPlayChange,
currentTimeChange,
mainVideoListChange,
initActionVideo,
} = useScript();
</script>
<style lang="less">
@import '@/style/variables.less';
.custom-start-only-video-page {
display: flex;
width: 100% !important;
padding: 0 !important;
overflow: hidden;
& > * {
width: 100%;
background: #303030;
height: 100%;
}
.start-only-video-live {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
}
</style>
src/pages/OnlyVideoLive/index.vue → src/pages/onlyAudioLive/useScript.ts
<template>
<div class="custom-start-only-video-page">
<div class="start-only-video-live">
<AddVideoPlay
v-model:playMainIndex="currentPlayMainIndex"
v-model:progress="progress"
:loading="loading"
:playId="addVideoId"
:liveDetail="liveDetail"
:video2="addVideo"
:mainVideoList="mainVideoList"
@playEnd="playEnd"
@currentTime="currentTimeChange"
@mainVideoListChange="mainVideoListChange"
></AddVideoPlay>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import AddVideoPlay from '@/components/AddVideoPlay.vue';
import { getLiveDetail, closeLiveTask } from '@/utils/api/userApi'; import { getLiveDetail, closeLiveTask } from '@/utils/api/userApi';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { show_message, isDev, DataType, randomIntFormList } from '@/utils/tool'; import { show_message, isDev, DataType, randomIntFormList } from '@/utils/tool';
...@@ -33,61 +12,76 @@ import { CONFUSE_STATUS } from '@/service/Live'; ...@@ -33,61 +12,76 @@ import { CONFUSE_STATUS } from '@/service/Live';
import { processTextCallback } from '@/hooks/useScript'; import { processTextCallback } from '@/hooks/useScript';
import { scriptTypeText } from '@/service/CreateLive'; import { scriptTypeText } from '@/service/CreateLive';
import { writeLog } from '@/utils/pyqt'; import { writeLog } from '@/utils/pyqt';
const { currentConfuseId, confuseList, stopConfuse, openConfuseInterval } = useConfuse(); import { getDurationOfAudioFile } from '@/utils/audio';
const { openInterval: confuseInterval } = processTextCallback();
const store = useStore(); export default function () {
const route = useRoute(); const { currentConfuseId, confuseList, stopConfuse, openConfuseInterval } = useConfuse();
const router = useRouter(); const { openInterval: confuseInterval } = processTextCallback();
const routeQuery = route.query; const mainVideoType = 1;
const actionVideoType = 3;
const userInfo = computed(() => store.getters['user/userInfo']); const store = useStore();
const route = useRoute();
const router = useRouter();
const routeQuery = route.query;
// 视频加载loading const userInfo = computed(() => store.getters['user/userInfo']);
const loading = ref(true);
const progress = ref(0); // 视频加载loading
const loading = ref(true);
// 剩余多少时长时开始洗稿并获取下一个视频 // 剩余多少时长时开始洗稿并获取下一个视频
const esidueTime = 60 * 10; const esidueTime = 60 * 10;
const imgs = { const imgs = {
mp4: new URL('../../assets/img/1.mp4', import.meta.url).href, mp4: new URL('../../assets/img/1.mp4', import.meta.url).href,
}; };
// 本次测试用的变量
const requestNum = ref(0);
const isFirst = ref(true);
// 定时检测python的方法是否注入成功
let interval = null;
// 定时获取直播互动内容
let intervalLive = null;
// 定时获取后台主视频任务
let intervalMainVideo = null;
// 定时获取下一个要播放的主视频
let intervalLocalMainVideo = null;
// 主视频列表
const realVideoList = ref([]);
// 互动视频
const addVideo = ref(imgs.mp4);
// 互动视频列表
const addVideoList = ref([]);
// 互动视频当前播放id
const addVideoId = ref('');
// 直播详情
const liveDetail = ref({});
// 当前正在播放的主视频下标 // 本次测试用的变量
const currentPlayMainIndex = ref(null); const requestNum = ref(0);
const isFirst = ref(true);
// 获取已经存到本地的互动列表,播放
let interval = null;
// 定时获取后台直播互动内容
let intervalLive = null;
// 定时获取本地的动作视频
let intervalAction = null;
// 定时获取后台主视频任务
let intervalMainVideo = null;
// 定时获取下一个要播放的主视频
let intervalLocalMainVideo = null;
// 主视频列表
const realVideoList = ref([]);
// 当前播放的视频中，第一个视频是否为主视频
const firstVideoIsMain = ref(true);
// 当前播放的视频中，最后一个视频是否为主视频
const endVideoIsMain = ref(true);
// 互动视频
const addVideo = ref(imgs.mp4);
// 动作视频
const actionVideo = ref(imgs.mp4);
const showActionVideo = ref(false);
// 互动视频列表
const addVideoList = ref([]);
// 互动视频当前播放id
const addVideoId = ref('');
// 直播详情
const liveDetail = ref<any>({});
// 通知视频播放
const playInfo = ref({
mainStart: true,
num: 0,
});
// 主视频列表 // 主视频列表
const mainVideoList = ref([ const mainVideoList = ref([
{ {
name: 'mainVideo1', name: 'mainVideo1',
// 播放链接 // 播放链接
...@@ -111,10 +105,30 @@ const mainVideoList = ref([ ...@@ -111,10 +105,30 @@ const mainVideoList = ref([
total: 0, total: 0,
videoIndex: null, videoIndex: null,
}, },
]); ]);
// 主视频列表状态更新 // 获取当前页面的id
const mainVideoListChange = (params: any) => { const getRouteId = () => {
if (typeof route.query.id === 'string' || typeof route.query.id === 'number') {
return route.query.id;
}
return '';
};
// 当前正在播放的主视频标签下标
const currentPlayMainIndex = ref(null);
// 当前正在播放的主视频列表下标
const currentMainVideoIndex = computed(() => {
if (typeof currentPlayMainIndex.value === 'number') {
return mainVideoList.value[currentPlayMainIndex.value].videoIndex;
}
return null;
});
// 当前播放的动作视频的下标
const currentActionIndex = ref();
// 主视频列表状态更新
const mainVideoListChange = (params: any) => {
if (typeof params.index === 'number' && !params.type) { if (typeof params.index === 'number' && !params.type) {
mainVideoList.value[params.index][params.key] = params.value; mainVideoList.value[params.index][params.key] = params.value;
if (params.key == 'show') { if (params.key == 'show') {
...@@ -137,9 +151,9 @@ const mainVideoListChange = (params: any) => { ...@@ -137,9 +151,9 @@ const mainVideoListChange = (params: any) => {
console.log(realVideoList.value[videoIndex], '更新主视频列表'); console.log(realVideoList.value[videoIndex], '更新主视频列表');
} }
} }
}; };
const submitAudioTask = async (list: any[]) => { const submitAudioTask = async (list: any[]) => {
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let params = { let params = {
// 音色 // 音色
...@@ -157,10 +171,10 @@ const submitAudioTask = async (list: any[]) => { ...@@ -157,10 +171,10 @@ const submitAudioTask = async (list: any[]) => {
console.log('等待音频生成完成'); console.log('等待音频生成完成');
// 开始轮询 // 开始轮询
confuseInterval(true, '', false, currentConfuseId.value, regenerate, list.length); confuseInterval(true, '', false, currentConfuseId.value, regenerate, list.length);
}; };
// 洗稿列表变化 // 洗稿列表变化
watch( watch(
() => confuseList.value, () => confuseList.value,
(v) => { (v) => {
if (v.length) { if (v.length) {
...@@ -169,10 +183,10 @@ watch( ...@@ -169,10 +183,10 @@ watch(
submitAudioTask(v); submitAudioTask(v);
} }
}, },
); );
// 提交洗稿 // 提交洗稿
const submitConfuse = async () => { const submitConfuse = async () => {
try { try {
// currentConfuseId.value = v4(); // currentConfuseId.value = v4();
// let content = ''; // let content = '';
...@@ -195,20 +209,23 @@ const submitConfuse = async () => { ...@@ -195,20 +209,23 @@ const submitConfuse = async () => {
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
// 找一个已经播放完毕的视频，加入video标签中 // 找一个已经播放完毕的视频，加入video标签中
const findOneVideoInit = () => { const findOneVideoInit = () => {
// 是否需要执行 // 是否需要执行
let status = false; let status = false;
let videoTagIndex = mainVideoList.value.findIndex((item: any, index: number) => index !== currentPlayMainIndex.value); let videoTagIndex = mainVideoList.value.findIndex(
(item: any, index: number) => index !== currentPlayMainIndex.value,
);
if (videoTagIndex !== -1) { if (videoTagIndex !== -1) {
let hideVideo = mainVideoList.value[videoTagIndex]; let hideVideo: any = mainVideoList.value[videoTagIndex];
// 隐藏的视频已经播放结束 且 视频列表中不存在有url，没取走的视频 // 隐藏的视频已经播放结束 且 视频列表中不存在有url，没取走的视频
let notRemove = realVideoList.value.find((item: any) => item.result && !item.remove); let notRemove = realVideoList.value.find((item: any) => item.result && !item.remove);
if (!hideVideo.play && hideVideo.playEnd && !notRemove) { if (!hideVideo.play && hideVideo.playEnd && !notRemove) {
console.log('需要重新入队'); console.log('需要重新入队');
status = true; status = true;
hideVideo.restart = true;
} }
// start // start
...@@ -219,17 +236,21 @@ const findOneVideoInit = () => { ...@@ -219,17 +236,21 @@ const findOneVideoInit = () => {
const changeVideo = (url: string, index: number | boolean = false) => { const changeVideo = (url: string, index: number | boolean = false) => {
hideVideo.play = false; hideVideo.play = false;
hideVideo.playEnd = false; hideVideo.playEnd = false;
if (hideVideo.url !== url) {
hideVideo.url = url; hideVideo.url = url;
}
if (index !== false) { if (index !== false) {
hideVideo.videoIndex = index; hideVideo.videoIndex = index;
} }
}; };
// 找到所有已经播放完毕的主视频 // 找到所有已经播放完毕的主视频
let playEndVideos = realVideoList.value.filter((row: any, index: number) => { let playEndVideos = [];
if (row.remove && item.result && item.status) { realVideoList.value.forEach((row: any, index: number) => {
return index; if (row.remove && row.result && row.status && typeof index === 'number') {
playEndVideos.push(index);
} }
}); });
console.log(playEndVideos, '随机下标列表');
if (playEndVideos.length) { if (playEndVideos.length) {
if (playEndVideos.length === 1) { if (playEndVideos.length === 1) {
console.log('只有一条视频播放完毕，重新播放该视频'); console.log('只有一条视频播放完毕，重新播放该视频');
...@@ -238,7 +259,22 @@ const findOneVideoInit = () => { ...@@ -238,7 +259,22 @@ const findOneVideoInit = () => {
// 多条视频 // 多条视频
// 随机下标 // 随机下标
let num = randomIntFormList(playEndVideos); let num = randomIntFormList(playEndVideos);
// 防止出错
try {
if (typeof num !== 'number' || !realVideoList.value[num]) {
console.log('num格式错误，初始化第1个视频', num);
num = 0;
}
} catch (e) {
num = 0;
console.log(e, '初始化旧视频出错了,将num改为0');
writeLog({
name: '初始化旧视频出错了,将num改为0',
value: e,
});
}
console.log(`初始化第${num}个视频`); console.log(`初始化第${num}个视频`);
console.log(realVideoList.value[num]);
// 链接是否一致 // 链接是否一致
if (realVideoList.value[num].result === item.url) { if (realVideoList.value[num].result === item.url) {
// 循环播放 // 循环播放
...@@ -257,18 +293,23 @@ const findOneVideoInit = () => { ...@@ -257,18 +293,23 @@ const findOneVideoInit = () => {
} }
} }
} }
}; };
// 当前播放进度变化 // 当前播放进度变化
const currentTimeChange = (index: number, value: number) => { const currentTimeChange = (index: number, value: number) => {
try {
// console.log(value, '当前主视频进度');
let row = mainVideoList.value[index]; let row = mainVideoList.value[index];
// 剩余多少没有播放 // 剩余多少没有播放
let currentEsidueTime = row.total - value; let currentEsidueTime = row.total - value;
let currentVideoRow = realVideoList.value[row.videoIndex]; let currentVideoRow = realVideoList.value[row.videoIndex];
// 更新当前进度
currentVideoRow.current = value;
// 低于设置的值、没有开始洗稿、有文本内容 、必须是文本脚本 // 低于设置的值、没有开始洗稿、有文本内容 、必须是文本脚本
if ( if (
currentEsidueTime < esidueTime && currentEsidueTime < esidueTime &&
currentVideoRow.confuse === CONFUSE_STATUS.CONFUSE_STATUS_WAIT && currentVideoRow.confuse === CONFUSE_STATUS.CONFUSE_STATUS_WAIT &&
liveDetail.value.type_content &&
liveDetail.value.type_content.length && liveDetail.value.type_content.length &&
typeof liveDetail.value.phonetic_timbres_id === 'number' && typeof liveDetail.value.phonetic_timbres_id === 'number' &&
typeof liveDetail.value.tone_id === 'number' && typeof liveDetail.value.tone_id === 'number' &&
...@@ -287,10 +328,13 @@ const currentTimeChange = (index: number, value: number) => { ...@@ -287,10 +328,13 @@ const currentTimeChange = (index: number, value: number) => {
if (currentEsidueTime < 20 && typeof currentPlayMainIndex.value === 'number') { if (currentEsidueTime < 20 && typeof currentPlayMainIndex.value === 'number') {
findOneVideoInit(); findOneVideoInit();
} }
}; } catch (e) {
console.log(e);
}
};
// 互动视频播放结束 // 互动视频播放结束
const playEnd = (id: any) => { const playEnd = (id: any) => {
if (id) { if (id) {
// //
let index = addVideoList.value.findIndex((item: any) => item.id == id); let index = addVideoList.value.findIndex((item: any) => item.id == id);
...@@ -301,45 +345,71 @@ const playEnd = (id: any) => { ...@@ -301,45 +345,71 @@ const playEnd = (id: any) => {
addVideoList.value.splice(index, 1); addVideoList.value.splice(index, 1);
} }
} }
}; };
// 开启主视频任务定时器 // 动作视频更新
const StartIntervalMainVideo = () => { const actionPlayChange = (params: any) => {
try {
const { key, value, index } = params;
const current = realVideoList.value[index].actionUrl[currentActionIndex.value];
current[key] = value;
// 播放完毕，清空url
if (params.clear) {
actionVideo.value = '';
}
} catch (e) {
console.log('动作视频更新失败');
console.log(e);
}
};
// 初始化动作视频的状态
const initActionVideo = (index: number) => {
const row = realVideoList.value[index];
row.actionUrl.forEach((item: any) => {
item.remove = false;
item.play = false;
item.status = false;
});
if (row.mainStart) {
// 是主视频--通知视频直接播放
playInfo.value.mainStart = true;
playInfo.value.num += 1;
}
};
// 开启主视频任务定时器
const StartIntervalMainVideo = () => {
intervalMainVideo = window.setInterval(() => { intervalMainVideo = window.setInterval(() => {
getDetail(); getDetail();
}, 10000); }, 10000);
}; };
// 关闭主视频任务定时器 // 关闭主视频任务定时器
const closeIntervalMainVideo = () => { const closeIntervalMainVideo = () => {
window.clearInterval(intervalMainVideo); window.clearInterval(intervalMainVideo);
clearInterval(intervalMainVideo); clearInterval(intervalMainVideo);
intervalMainVideo = null; intervalMainVideo = null;
}; };
const stopInterval = () => {
window.clearInterval(interval);
clearInterval(interval);
interval = null;
};
// 开启本地主视频定时器 // 开启本地主视频定时器
const openLocalMainVideoInterval = () => { const openLocalMainVideoInterval = () => {
intervalLocalMainVideo = window.setInterval(() => { intervalLocalMainVideo = window.setInterval(() => {
takeMainVideoV2(false); takeMainVideoV2(false);
}, 5000); }, 5000);
}; };
// 关闭本地主视频定时器 // 关闭本地主视频定时器
const closeLocalMainVideoInterval = () => { const closeLocalMainVideoInterval = () => {
window.clearInterval(intervalLocalMainVideo); window.clearInterval(intervalLocalMainVideo);
clearInterval(intervalLocalMainVideo); clearInterval(intervalLocalMainVideo);
intervalLocalMainVideo = null; intervalLocalMainVideo = null;
}; };
// 获取最新的要播放的互动内容 // 获取最新的要播放的互动内容
const openInterval = () => { const openInterval = () => {
interval = window.setInterval(() => { interval = window.setInterval(() => {
try {
// 找到第一个没有播放的 // 找到第一个没有播放的
for (let i = 0; i < addVideoList.value.length; i++) { for (let i = 0; i < addVideoList.value.length; i++) {
let item = addVideoList.value[i]; let item = addVideoList.value[i];
...@@ -349,6 +419,29 @@ const openInterval = () => { ...@@ -349,6 +419,29 @@ const openInterval = () => {
break; break;
} }
if (item.play_status === false && item.remove === false) { if (item.play_status === false && item.remove === false) {
const realVideoRow = realVideoList.value[currentMainVideoIndex.value];
// 当前主视频播放时长
const currentMainVideoTime = realVideoRow.current;
// 判断当前时间段能否播放
const markers = liveDetail.value.markers;
if (DataType(markers, 'array')) {
for (let j = 0; j < markers.length; j++) {
const row = markers[j];
if (currentMainVideoTime >= row.start && currentMainVideoTime <= row.end) {
// 禁止播放
console.log('当前时间段无法播放', row, currentMainVideoTime);
return;
}
}
} else {
console.log('markers不是数组');
}
// 动作视频是否正在播放
const playVideo = realVideoRow.actionUrl.find((it: any) => it.play);
if (playVideo) {
console.log('当前有动作视频在播放');
return;
}
if (addVideo.value == item.reply_content) { if (addVideo.value == item.reply_content) {
// 本次播放的视频与上次一致,通知视频模块重新播放 // 本次播放的视频与上次一致,通知视频模块重新播放
store.commit('live/videoReload'); store.commit('live/videoReload');
...@@ -360,11 +453,76 @@ const openInterval = () => { ...@@ -360,11 +453,76 @@ const openInterval = () => {
break; break;
} }
} }
} catch (e) {
console.log('轮询获取本地互动视频失败');
writeLog({
name: '轮询获取本地互动视频失败',
value: e,
});
console.log(e);
}
}, 100); }, 100);
}; };
// 关闭本地互动定时器
const stopInterval = () => {
window.clearInterval(interval);
clearInterval(interval);
interval = null;
};
// 取本地动作视频
const retrieveLocalActionVideo = () => {
if (typeof currentMainVideoIndex.value === 'number') {
// 当前主视频对象
const currentMain = realVideoList.value[currentMainVideoIndex.value];
const actionUrl = currentMain.actionUrl;
// 没有正在播放的动作视频，再找
const list = actionUrl.filter((item: any) => !item.play);
if (list.length === actionUrl.length) {
// 找到第一个没有取走的视频
const index = actionUrl.findIndex((item: any) => !item.remove && !item.status);
if (index !== -1) {
const currentAction = actionUrl[index];
// 当前正在播放的主视频的进度
const currentProgress = currentMain.current;
// 最后一个视频是动作视频,当前找到的url和最后一个动作的链接一致的
if (!currentMain.mainEnd.status && currentAction.uuid == currentMain.mainEnd.uuid) {
// console.log('最后一个视频是动作视频，这里不处理');
return;
}
// 是否到了播放时间
if (currentProgress >= currentAction.play_time) {
// 可以播放
actionVideo.value = currentAction.url;
console.log(index, '动作视频下标');
currentActionIndex.value = index;
// 更新状态
currentAction.remove = true;
currentAction.play = true;
}
}
}
}
};
// 打开本地动作视频定时器
const openLocalActionInterval = () => {
intervalAction = window.setInterval(() => {
retrieveLocalActionVideo();
}, 1000);
};
// 关闭本地动作视频定时器
const closeLocalActionInterval = () => {
window.clearInterval(intervalAction);
clearInterval(intervalAction);
intervalAction = null;
};
// 获取直播互动内容 // 获取直播互动内容
const getLive = async () => { const getLive = async () => {
try { try {
let res: any = await getliveTaskReply(route.query.id); let res: any = await getliveTaskReply(route.query.id);
if (res.code == 0 && res.data && res.data.length) { if (res.code == 0 && res.data && res.data.length) {
...@@ -384,9 +542,9 @@ const getLive = async () => { ...@@ -384,9 +542,9 @@ const getLive = async () => {
}); });
console.log(e); console.log(e);
} }
}; };
// 重新生成直播 // 重新生成直播
const regenerate = async (list: any[]) => { const regenerate = async (list: any[]) => {
try { try {
let params = { let params = {
digital_man_id: liveDetail.value.digital_man_id, digital_man_id: liveDetail.value.digital_man_id,
...@@ -394,8 +552,8 @@ const regenerate = async (list: any[]) => { ...@@ -394,8 +552,8 @@ const regenerate = async (list: any[]) => {
phonetic_timbres_id: liveDetail.value.phonetic_timbres_id, phonetic_timbres_id: liveDetail.value.phonetic_timbres_id,
tone_id: liveDetail.value.tone_id, tone_id: liveDetail.value.tone_id,
type: liveDetail.value.type, type: liveDetail.value.type,
type_content: list,
}; };
params.type_content = list;
let res: any = await liveTaskRegenerate(liveDetail.value.id, params); let res: any = await liveTaskRegenerate(liveDetail.value.id, params);
if (res.code == 0) { if (res.code == 0) {
// //
...@@ -408,76 +566,112 @@ const regenerate = async (list: any[]) => { ...@@ -408,76 +566,112 @@ const regenerate = async (list: any[]) => {
}); });
console.log(e); console.log(e);
} }
}; };
// 开启 // 开启
const startLiveInterval = () => { const startLiveInterval = () => {
closeLiveInterval(); closeLiveInterval();
intervalLive = window.setInterval(() => { intervalLive = window.setInterval(() => {
getLive(); getLive();
}, 3000); }, 3000);
}; };
// 关闭 // 关闭
const closeLiveInterval = () => { const closeLiveInterval = () => {
window.clearInterval(intervalLive); window.clearInterval(intervalLive);
clearInterval(intervalLive); clearInterval(intervalLive);
intervalLive = null; intervalLive = null;
}; };
const getDetail = async (type: string = '') => { const getDetail = async (type: string = '') => {
if (!routeQuery.id) { if (!getRouteId()) {
show_message('禁止访问'); show_message('禁止访问');
return; return;
} }
try { try {
let res: any = await getLiveDetail(routeQuery.id); let res: any = await getLiveDetail(getRouteId());
if (res.code == 0) { if (res.code == 0) {
if (isDev()) { // if (isDev()) {
// 创建url // // 创建url
res.data = {}; // res.data = {};
let list = [ // let url =
{ // 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
url: 'http://yunyi-tiktok.oss-cn-shenzhen.aliyuncs.com/files/user/admin/e9f3d546-05f2-4dc1-a37d-d6c0ca960e43.mp4', // // let url =
type: 1, // // 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
}, // let list = [
{ // {
url: 'http://yunyi-tiktok.oss-cn-shenzhen.aliyuncs.com/files/user/admin/9604b4aa-e509-4f74-a73f-a0dc130f8f28.mp4', // url: url,
type: 3, // type: 1,
// 是否需要播放 // },
}, // // {
{ // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
url: 'http://yunyi-tiktok.oss-cn-shenzhen.aliyuncs.com/files/user/admin/f2112aea-6f69-4403-acef-33d0fda7e736.mp4', // // type: 3,
type: 1, // // play_time: 10,
}, // // },
]; // // 动作视频
// // {
// 哪些时间段不能播放动作视频和互动视频 // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4',
res.data.period = [ // // type: 3,
{ // // play_time: 172,
start: 1, // // },
end: 5, // // {
}, // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
{ // // type: 3,
start: 12, // // play_time: 172,
end: 30, // // },
}, // {
]; // url: url,
res.data.url = list; // type: 1,
} // },
// // {
// // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// // type: 3,
// // play_time: 0,
// // },
// ];
// res.data.url = list;
// }
console.log(res.data);
if (DataType(res.data, 'object') && res.data.url && res.data.url.length) { if (DataType(res.data, 'object') && res.data.url && res.data.url.length) {
// 初始化视频列表的状态
res.data.url.forEach((item: any) => { res.data.url.forEach((item: any) => {
// 是否播放完毕 item.uuid = v4();
item.status = false; });
// 是否取走 const mainUrl = res.data.url.filter((item: any) => item.type == mainVideoType);
console.log(mainUrl, 'mainUrl');
const actionUrl = res.data.url.filter((item: any) => {
if (item.type == actionVideoType) {
item.remove = false; item.remove = false;
// 是否正在播放
item.play = false; item.play = false;
item.status = false;
return item;
}
}); });
// 取出所有 type==1 的主视频，计算总时长 // 最后一个视频是否是动作视频
const lastRow = res.data.url[res.data.url.length - 1];
let mainEnd = lastRow.type === mainVideoType ? true : false;
let url = '';
let uuid = '';
if (mainEnd) {
url = lastRow.url;
} else {
// 最后一个不是主视频,才有uuid
uuid = lastRow.uuid;
}
realVideoList.value.push({ realVideoList.value.push({
url: res.data.url, // 主视频列表
url: mainUrl,
// 过滤动作视频
actionUrl: actionUrl,
// 第一个视频是否是主视频
mainStart: res.data.url[0].type === mainVideoType ? true : false,
// 最后一个视频是否是主视频
mainEnd: {
status: mainEnd,
url: url,
// 生成一个uid
uuid: uuid,
},
// 合并后的地址 // 合并后的地址
result: '', result: '',
// 是否播放完毕 // 是否播放完毕
...@@ -494,11 +688,20 @@ const getDetail = async (type: string = '') => { ...@@ -494,11 +688,20 @@ const getDetail = async (type: string = '') => {
if (isDev()) { if (isDev()) {
if (isFirst.value) { if (isFirst.value) {
if (realVideoList.value[0].mainStart) {
// 首个视频是主视频的
mergeCallback({ mergeCallback({
video: res.data.url[0].url, video: mainUrl[0].url,
index: realVideoList.value.length - 1, index: realVideoList.value.length - 1,
childIndex: 0,
}); });
} else {
// 首个视频是互动视频的
mergeCallback({
video: mainUrl[0].url,
index: realVideoList.value.length - 1,
});
}
isFirst.value = false; isFirst.value = false;
} }
} else { } else {
...@@ -530,10 +733,10 @@ const getDetail = async (type: string = '') => { ...@@ -530,10 +733,10 @@ const getDetail = async (type: string = '') => {
}); });
console.log(e); console.log(e);
} }
}; };
// 视频列表提交到py // 视频列表提交到py
const submitVideo = () => { const submitVideo = () => {
try { try {
if (window.pyjs) { if (window.pyjs) {
if (window.pyjs.run) { if (window.pyjs.run) {
...@@ -563,22 +766,45 @@ const submitVideo = () => { ...@@ -563,22 +766,45 @@ const submitVideo = () => {
value: e, value: e,
}); });
} }
}; };
// 取主视频(v2) // 取主视频(v2)
const takeMainVideoV2 = (first: boolean = true) => { const takeMainVideoV2 = async (first: boolean = true) => {
// 找到第一个播放完毕的 // 找到第一个播放完毕的
let index = mainVideoList.value.findIndex((item: any) => item.playEnd); let index = mainVideoList.value.findIndex((item: any) => item.playEnd);
if (index !== -1) { if (index !== -1) {
let videoIndex = realVideoList.value.findIndex((item: any) => !item.remove && item.result && !item.status); let videoIndex = realVideoList.value.findIndex((item: any) => !item.remove && item.result && !item.status);
if (videoIndex !== -1) { if (videoIndex !== -1) {
const realVideoRow = realVideoList.value[videoIndex];
if (!realVideoRow.mainStart) {
console.log('当前要播放的主视频列表中，第一个视频是动作视频');
firstVideoIsMain.value = false;
mainVideoList.value[0].show = false;
actionVideo.value = realVideoRow.actionUrl[0].url;
realVideoRow.actionUrl[0].remove = true;
realVideoRow.actionUrl[0].play = true;
currentActionIndex.value = 0;
// 显示动作视频
showActionVideo.value = true;
} else {
firstVideoIsMain.value = true;
}
// 最后一个视频是否主视频
if (!realVideoRow.mainEnd.status) {
endVideoIsMain.value = false;
} else {
endVideoIsMain.value = true;
}
// 存入视频 // 存入视频
mainVideoList.value[index].url = realVideoList.value[videoIndex].result; mainVideoList.value[index].url = realVideoRow.result;
// 获取视频总长度
realVideoRow.total = await getDurationOfAudioFile(realVideoRow.result);
// 更新状态 // 更新状态
mainVideoList.value[index].playEnd = false; mainVideoList.value[index].playEnd = false;
mainVideoList.value[index].videoIndex = videoIndex; mainVideoList.value[index].videoIndex = videoIndex;
// 视频已被取走 // 视频已被取走
realVideoList.value[videoIndex].remove = true; realVideoRow.remove = true;
console.log(mainVideoList.value[index], '取出下一条要播放的视频', index, videoIndex); console.log(mainVideoList.value[index], '取出下一条要播放的视频', index, videoIndex);
if (first) { if (first) {
// 视频加载完毕 // 视频加载完毕
...@@ -586,10 +812,10 @@ const takeMainVideoV2 = (first: boolean = true) => { ...@@ -586,10 +812,10 @@ const takeMainVideoV2 = (first: boolean = true) => {
} }
} }
} }
}; };
// python 回调 // python 回调
const mergeCallback = (params: any) => { const mergeCallback = (params: any) => {
try { try {
// console.log('python回调',params); // console.log('python回调',params);
let index = params.index; let index = params.index;
...@@ -609,6 +835,10 @@ const mergeCallback = (params: any) => { ...@@ -609,6 +835,10 @@ const mergeCallback = (params: any) => {
StartIntervalMainVideo(); StartIntervalMainVideo();
} }
} else { } else {
writeLog({
name: 'mergeCallback 回调格式错误',
value: params,
});
console.log('回调格式错误'); console.log('回调格式错误');
console.log(params); console.log(params);
} }
...@@ -619,21 +849,21 @@ const mergeCallback = (params: any) => { ...@@ -619,21 +849,21 @@ const mergeCallback = (params: any) => {
}); });
console.log(e); console.log(e);
} }
}; };
const getTone = async () => { const getTone = async () => {
try { try {
let res = await getLiveTaskInfo(route.query.id); let res: any = await getLiveTaskInfo(getRouteId());
if (res.code == 0) { if (res.code == 0) {
liveDetail.value = res.data; liveDetail.value = res.data;
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
// //
const closeLive = async () => { const closeLive = async () => {
try { try {
let res: any = await closeLiveTask(route.query.id); let res: any = await closeLiveTask(route.query.id);
if (res.code == 0) { if (res.code == 0) {
...@@ -643,9 +873,9 @@ const closeLive = async () => { ...@@ -643,9 +873,9 @@ const closeLive = async () => {
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
onMounted(async () => { onMounted(async () => {
// 将通知方法注入window // 将通知方法注入window
injectWindow('mergeCallback', mergeCallback); injectWindow('mergeCallback', mergeCallback);
injectWindow('closeLive', closeLive); injectWindow('closeLive', closeLive);
...@@ -660,32 +890,34 @@ onMounted(async () => { ...@@ -660,32 +890,34 @@ onMounted(async () => {
await getDetail('init'); await getDetail('init');
// 获取音调和音色 // 获取音调和音色
getTone(); getTone();
}); // 开启动作视频轮询
onBeforeUnmount(() => { openLocalActionInterval();
});
onBeforeUnmount(() => {
closeLiveInterval(); closeLiveInterval();
stopInterval(); stopInterval();
closeIntervalMainVideo(); closeIntervalMainVideo();
closeLocalMainVideoInterval(); closeLocalMainVideoInterval();
}); closeLocalActionInterval();
</script> });
return {
<style lang="less"> currentPlayMainIndex,
@import '@/style/variables.less'; loading,
.custom-start-only-video-page { addVideoId,
display: flex; liveDetail,
width: 100% !important; addVideo,
padding: 0 !important; actionVideo,
overflow: hidden; currentMainVideoIndex,
& > * { mainVideoList,
width: 100%; playInfo,
background: #303030; firstVideoIsMain,
height: 100%; endVideoIsMain,
} showActionVideo,
.start-only-video-live { realVideoList,
display: flex; playEnd,
justify-content: center; actionPlayChange,
align-items: center; currentTimeChange,
box-sizing: border-box; mainVideoListChange,
} initActionVideo,
};
} }
</style>
src/service/Live.ts
...@@ -20,3 +20,11 @@ export const CONFUSE_STATUS = { ...@@ -20,3 +20,11 @@ export const CONFUSE_STATUS = {
CONFUSE_STATUS_PROGRESS: 2, // 进行中 CONFUSE_STATUS_PROGRESS: 2, // 进行中
CONFUSE_STATUS_SUCCESS: 3, // 已完成 CONFUSE_STATUS_SUCCESS: 3, // 已完成
}; };
/**
* 直播间类型
*/
export const LIVE_TYPES = {
VIDEO_LIVE: 1, // 视频直播
AUDIO_LIVE: 2, // 音频直播
};
src/utils/request.ts
...@@ -8,7 +8,8 @@ const error_messaage = '请求错误'; ...@@ -8,7 +8,8 @@ const error_messaage = '请求错误';
const getBaseUrl = async () => { const getBaseUrl = async () => {
if (isDev()) { if (isDev()) {
return 'http://rpc.chensav.top'; // return 'http://rpc.chensav.top';
// return 'http://156.247.11.21:93';
return ''; return '';
} }
// 默认线上地址 // 默认线上地址
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment