Skip to content

L
live-management-web
Commit a3d210c3 by haojie
Options

音频直播

parent 4e45bf47
Showing with 270 additions and 97 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 = // let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4'; // '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-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
let list = [ // let list = [
{ // {
url: url, // url: url,
type: 1, // type: 1,
}, // },
// { // // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// type: 3, // // type: 3,
// play_time: 10, // // play_time: 10,
// }, // // },
// 动作视频 // // 动作视频
// { // // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4', // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4',
// type: 3, // // type: 3,
// play_time: 172, // // play_time: 172,
// }, // // },
// { // // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// type: 3, // // type: 3,
// play_time: 172, // // play_time: 172,
// }, // // },
{ // {
url: url, // url: url,
type: 1, // type: 1,
}, // },
// { // // {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4', // // url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// type: 3, // // type: 3,
// play_time: 0, // // play_time: 0,
// }, // // },
]; // ];
res.data.url = list; // 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.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,47 +2,74 @@ ...@@ -2,47 +2,74 @@
<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">
<CardTwo <template v-if="item.type == LIVE_TYPES.VIDEO_LIVE">
:id="item.id" <CardTwo
:img="item.cover_url" :id="item.id"
:created_at="item.updated_at" :img="item.cover_url"
:value="item.name" :created_at="item.updated_at"
@nameChange="nameChange" :value="item.name"
> @nameChange="nameChange"
<template #hover> >
<template v-if="item.status != 2"> <template #hover>
<div class="my-digtal-people-hover"> <template v-if="item.status != 2">
<template v-if="item.is_live == 0"> <div class="my-digtal-people-hover">
<Button class="digtal-people-start-end" theme="danger" height="40px" @click="startLive(item)" <template v-if="item.is_live == 0">
>开启直播</Button <Button class="digtal-people-start-end" theme="danger" height="40px" @click="startLive(item)"
> >开启直播</Button
</template> >
<template v-else> </template>
<Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button> <template v-else>
<Button class="digtal-people-ctrl" theme="danger" height="40px" @click="openInteractiveResponse(item)" <Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button>
>控制台</Button <Button
> class="digtal-people-ctrl"
</template> theme="danger"
<div class="digtal-people-hover-tool"> height="40px"
<!-- <Button size="13" theme="dark" @click="onEdit(item)">编辑</Button> --> @click="openInteractiveResponse(item)"
<Button size="13" theme="dark" @click="downLoadVideo(item)">下载</Button> >控制台</Button
<Button size="13" theme="dark" @click="onDelete(item)">删除</Button> >
</template>
<div class="digtal-people-hover-tool">
<!-- <Button size="13" theme="dark" @click="onEdit(item)">编辑</Button> -->
<Button size="13" theme="dark" @click="downLoadVideo(item)">下载</Button>
<Button size="13" theme="dark" @click="onDelete(item)">删除</Button>
</div>
</div> </div>
</div> </template>
</template>
</template>
<template #live>
<template v-if="item.is_live">
<div class="digtal-people-status liveing">
<div class="dot"></div>
<span>LIVE</span>
</div>
</template> </template>
<template v-if="item.status == 2"> <template #live>
<div class="digtal-people-status process"><OtherLoading></OtherLoading>生成中</div> <template v-if="item.is_live">
<div class="digtal-people-status liveing">
<div class="dot"></div>
<span>LIVE</span>
</div>
</template>
<template v-if="item.status == 2">
<div class="digtal-people-status process"><OtherLoading></OtherLoading>生成中</div>
</template>
</template> </template>
</template> </CardTwo>
</CardTwo> </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> </template>
</Grid> </Grid>
<CustomLoading v-show="myDigtalList.loading"></CustomLoading> <CustomLoading v-show="myDigtalList.loading"></CustomLoading>
...@@ -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,19 +181,31 @@ const downLoadVideo = async (item: any) => { ...@@ -135,19 +181,31 @@ 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 (isDev()) { if (item.type == LIVE_TYPES.VIDEO_LIVE) {
// 新的播放页面 if (isDev()) {
router.push({ // 新的播放页面
path: routerConfig.onlyVideoLive.path, router.push({
name: routerConfig.onlyVideoLive.name, path: routerConfig.onlyVideoLive.path,
query: params, name: routerConfig.onlyVideoLive.name,
}); query: params,
} else { });
params.page_path = routerConfig.onlyVideoLive.path; } else {
// 打开只有视频播放的页面 params.page_path = routerConfig.onlyVideoLive.path;
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/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