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 () {
try {
let res: any = await getLiveDetail(getRouteId());
if (res.code == 0) {
if (isDev()) {
// 创建url
res.data = {};
let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
// let url =
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
let list = [
{
url: url,
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: 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: url,
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;
}
// if (isDev()) {
// // 创建url
// res.data = {};
// let url =
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
// // let url =
// // 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
// let list = [
// {
// url: url,
// 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: 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: url,
// 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) {
res.data.url.forEach((item: any) => {
item.uuid = v4();
});
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;
......
src/pages/home/components/myDigtalPeople.vue
......@@ -2,47 +2,74 @@
<div class="my-digtal-people">
<Grid :length="myDigtalList.list.length" :marginLeft="35">
<template v-for="item in myDigtalList.list" :key="item.id">
<CardTwo
:id="item.id"
:img="item.cover_url"
:created_at="item.updated_at"
:value="item.name"
@nameChange="nameChange"
>
<template #hover>
<template v-if="item.status != 2">
<div class="my-digtal-people-hover">
<template v-if="item.is_live == 0">
<Button class="digtal-people-start-end" theme="danger" height="40px" @click="startLive(item)"
>开启直播</Button
>
</template>
<template v-else>
<Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button>
<Button class="digtal-people-ctrl" theme="danger" height="40px" @click="openInteractiveResponse(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>
<template v-if="item.type == LIVE_TYPES.VIDEO_LIVE">
<CardTwo
:id="item.id"
:img="item.cover_url"
:created_at="item.updated_at"
:value="item.name"
@nameChange="nameChange"
>
<template #hover>
<template v-if="item.status != 2">
<div class="my-digtal-people-hover">
<template v-if="item.is_live == 0">
<Button class="digtal-people-start-end" theme="danger" height="40px" @click="startLive(item)"
>开启直播</Button
>
</template>
<template v-else>
<Button class="digtal-people-start-end" theme="danger" height="40px">开播中</Button>
<Button
class="digtal-people-ctrl"
theme="danger"
height="40px"
@click="openInteractiveResponse(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>
</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">
<div class="digtal-people-status process"><OtherLoading></OtherLoading>生成中</div>
<template #live>
<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>
</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>
</Grid>
<CustomLoading v-show="myDigtalList.loading"></CustomLoading>
......@@ -51,6 +78,7 @@
</template>
<script lang="ts" setup>
import ChangeName from '@/components/changeName.vue';
import OtherLoading from '@/components/Loading/FirstCircle.vue';
import Grid from '@/components/Grid.vue';
import { onMounted, reactive, ref, watch } from 'vue';
......@@ -64,6 +92,7 @@ import { onUpdateLiveTask } from '@/service/Common';
import { getLiveTask, deleteLiveTask, liveVideoDownload } from '@/utils/api/userApi';
import { isDev, show_message } from '@/utils/tool';
import { callPyjsInWindow, injectWindow, pyDownloadVideo } from '@/utils/pyqt';
import { LIVE_TYPES } from '@/service/Live';
// import { jumpToCreateLivePage } from '@/router/jump';
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 myDigtalList = reactive({
......@@ -86,24 +120,36 @@ const confirmId = ref('');
// 页面跳转前的校验
const beforePageJump = (item: any) => {
if (item.status == 2) {
if (item.status == 2 && !isDev()) {
show_message('直播未准备完毕');
return;
}
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('已有开播任务，请先关闭直播');
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,
status: item.status,
digital_image: item.cover_url,
digital_name: item.name,
is_live: item.is_live,
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;
};
......@@ -135,19 +181,31 @@ const downLoadVideo = async (item: any) => {
};
const startLive = (item: any) => {
// 视频直播页
let params = beforePageJump(item);
if (params) {
if (isDev()) {
// 新的播放页面
router.push({
path: routerConfig.onlyVideoLive.path,
name: routerConfig.onlyVideoLive.name,
query: params,
});
} else {
params.page_path = routerConfig.onlyVideoLive.path;
// 打开只有视频播放的页面
callPyjsInWindow('openLivePage', params);
if (item.type == LIVE_TYPES.VIDEO_LIVE) {
if (isDev()) {
// 新的播放页面
router.push({
path: routerConfig.onlyVideoLive.path,
name: routerConfig.onlyVideoLive.name,
query: params,
});
} else {
params.page_path = routerConfig.onlyVideoLive.path;
// 打开只有视频播放的页面
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(
background: #303030;
position: relative;
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 {
top: 150px;
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 = {
CONFUSE_STATUS_PROGRESS: 2, // 进行中
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 = '请求错误';
const getBaseUrl = async () => {
if (isDev()) {
return 'http://rpc.chensav.top';
// return 'http://rpc.chensav.top';
// return 'http://156.247.11.21:93';
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