修复创建直播页面重复请求动作接口的问题

dfa5964d · haojie · 85c88a23 · dfa5964d · dfa5964d · dfa5964d
Commit dfa5964d authored Aug 21, 2023 by haojie
10 changed files
--- a/src/components/AddVideoPlay.vue
+++ b/src/components/AddVideoPlay.vue
 <template>
  <div class="add-video-play">
-    <div class="main-video-play" v-show="showFirstVideo">
+    <div class="main-video-play" v-show="showFirstVideo && !showActionVideo">
      <template v-for="(item, index) in mainVideoList" :key="item.name">
        <video
          v-show="item.show"
@@ -14,9 +14,9 @@
        ></video>
      </template>
    </div>
-    <!--  -->
+    <!-- 互动 -->
    <video
-      v-show="!showFirstVideo"
+      v-show="!showFirstVideo && !showActionVideo"
      ref="videoSecond"
      :volume="secondVideoVolume"
      class="video-default"
@@ -24,6 +24,15 @@
      @ended="secondVideoEnded"
      @canplay="canplay2"
    ></video>
+    <!-- 动作 -->
+    <video
+      v-show="showActionVideo"
+      ref="videoAction"
+      class="video-default"
+      :src="actionVideo"
+      @ended="actionVideoEnded"
+      @canplay="actionCanplay"
+    ></video>
    <ConfirmDialog
      v-model="confirmVisible"
      :closeOnOverlayClick="false"
@@ -58,18 +67,34 @@ const props = withDefaults(
  defineProps<{
    playMainIndex: number | null;
    video2: string;
+    actionVideo?: string;
    playId?: any;
    progress?: number;
    liveDetail: any;
    mainVideoList: any[];
    loading: boolean;
+    currentMainVideoIndex: number | null;
+    playInfo: any;
+    firstVideoIsMain: boolean;
+    showActionVideo: boolean;
  }>(),
  {
    progress: 0,
+    actionVideo: '',
  },
 );
-const emit = defineEmits(['currentTime', 'playEnd', 'update:progress', 'update:playMainIndex', 'mainVideoListChange']);
+const emit = defineEmits([
+  'currentTime',
+  'playEnd',
+  'actionPlayChange',
+  'update:progress',
+  'update:playMainIndex',
+  'mainVideoListChange',
+  'initActionVideo',
+  'update:showActionVideo',
+  'update:firstVideoIsMain',
+]);
 const store = useStore();
 const videoNum = computed(() => store.getters['live/getVideoNum']);
@@ -78,6 +103,7 @@ const liveVideoStatus = computed(() => store.getters['live/getLiveVideoStatus'])
 // 视频类型
 const liveInfo = ref({});
 const loop = ref(false);
+// 主视频与互动视频的显隐
 const showFirstVideo = ref(true);
 // 第二个视频是否播放
 const videoSecondPlay = ref(false);
@@ -86,6 +112,7 @@ const confirmVisible = ref(true);
 // 第二个视频是否首次播放
 const videoSecondFirstPlay = ref(true);
+const actionVideoFirstPlay = ref(true);
 // 当前正在播放的主视频下标
 const currentPlayMainIndex = ref(props.playMainIndex);
@@ -95,9 +122,10 @@ const currentPlayMainIndex = ref(props.playMainIndex);
 */
 // 主视频
 const videoFirst = ref<HTMLVideoElement>();
 // 互动视频
 const videoSecond = ref<HTMLVideoElement>();
+// 动作视频
+const videoAction = ref<HTMLVideoElement>();
 // 初始音量
 const initVolume = 1;
@@ -108,6 +136,43 @@ const secondVideoVolume = ref(initVolume);
 let interval = null;
+// 更新动作视频显示状态
+const updateActionVideoShow = (status: boolean) => {
+  emit('update:showActionVideo', status);
+};
+// 更新主视频的显示和隐藏状态
+const updateMainVideoShow = (status: boolean, index: number | boolean = false) => {
+  emit('mainVideoListChange', {
+    index: typeof index === 'number' ? index : currentPlayMainIndex.value,
+    key: 'show',
+    value: status,
+  });
+};
+// 更新主视频播放状态
+const mainVideoPlayChange = (status: boolean, index: number | boolean = false) => {
+  if (status) {
+    closeInterval();
+    if (index === false && typeof currentPlayMainIndex.value === 'number') {
+      updateMainVideoShow(true);
+      videoFirst.value[currentPlayMainIndex.value].play();
+    } else if (typeof index === 'number') {
+      updateMainVideoShow(true, index);
+      videoFirst.value[index].play();
+    }
+    openInterval();
+  } else {
+    if (index === false && typeof currentPlayMainIndex.value === 'number') {
+      updateMainVideoShow(false);
+      videoFirst.value[currentPlayMainIndex.value].pause();
+    } else if (typeof index === 'number') {
+      updateMainVideoShow(false, index);
+      videoFirst.value[index].pause();
+    }
+  }
+};
 // 离开前先关闭弹窗
 onBeforeRouteLeave((to, from, next) => {
  confirmVisible.value = false;
@@ -128,10 +193,16 @@ const closeInterval = () => {
 // 确定播放
 const confirm = () => {
-  openInterval();
+  if (props.firstVideoIsMain) {
-  onPlay();
+    openInterval();
-  // 通知python开始播放了
+    onPlay();
-  // callPyjsInWindow('')
+  } else {
+    currentPlayMainIndex.value = 0;
+    // 准备播放动作视频
+    actionVideoPlayChange(true);
+  }
+  // 确定之后修改状态
+  emit('update:firstVideoIsMain', true);
 };
 // 主视频可以播放
@@ -161,20 +232,42 @@ const mainVideoPlayStatus = (index: number) => {
 };
 // 下一个要播放的视频
-const nextVideoToPlay = () => {
+const nextVideoToPlay = (status: boolean = true) => {
  const { mainVideoList } = props;
  if (!loop.value) {
    // 找到下一个要播放的
    let nextIndex = mainVideoList.findIndex((item: any) => item.url && !item.playEnd && !item.play);
-    if (nextIndex !== -1) {
+    if (nextIndex !== -1 && status) {
-      console.log('开始播放下一个主视频');
      mainVideoPlayStatus(nextIndex);
-      videoFirst.value[nextIndex].play();
      // 更新当前正在播放的video标签下标
      emit('update:playMainIndex', nextIndex);
+      if (mainVideoList[nextIndex].restart && status) {
+        // 本次播放是重复播放，通知父组件初始化动作视频的状态
+        console.log('本次播放是重复播放,初始化动作视频的状态');
+        emit('initActionVideo', props.currentMainVideoIndex);
+        return;
+      }
+      // 更新状态
+      emit('mainVideoListChange', {
+        index: nextIndex,
+        key: 'restart',
+        value: false,
+      });
+      // 播放
+      console.log('开始播放下一个主视频,1');
+      mainVideoPlayChange(true, nextIndex);
+    } else if (nextIndex == -1 && !status) {
+      // 更新状态
+      emit('mainVideoListChange', {
+        index: currentPlayMainIndex.value,
+        key: 'restart',
+        value: false,
+      });
+      // 播放
+      console.log('开始播放下一个主视频,2');
+      mainVideoPlayChange(true);
    } else {
-      console.log(props.mainVideoList);
+      console.log('未找到下一个要播放的主视频');
-      console.log('未找到下一条视频');
    }
  } else {
    console.log('循环播放不需要找下一个视频');
@@ -204,7 +297,7 @@ const firstVideoEnded = (index: number) => {
      videoValue: true,
    });
    // 强制关闭自己的播放状态，防止loop生效
-    videoFirst.value[currentPlayMainIndex.value].pause();
+    mainVideoPlayChange(false);
    nextVideoToPlay();
  }
@@ -215,7 +308,28 @@ const secondVideoEnded = () => {
  if (videoSecond.value?.ended) {
    emit('playEnd', props.playId);
    showFirstVideo.value = true;
-    videoFirst.value[currentPlayMainIndex.value].play();
+    mainVideoPlayChange(true);
+  }
+};
+// 动作视频播放完毕
+const actionVideoEnded = () => {
+  if (videoAction.value.ended) {
+    // 更新状态
+    emit('actionPlayChange', {
+      key: 'play',
+      value: false,
+      index: props.currentMainVideoIndex,
+    });
+    emit('actionPlayChange', {
+      key: 'status',
+      value: true,
+      index: props.currentMainVideoIndex,
+      clear: true,
+    });
+    // 重新播放
+    mainVideoPlayChange(true);
+    updateActionVideoShow(false);
  }
 };
@@ -232,8 +346,32 @@ const canplay2 = () => {
  }
 };
+// 动作视频播放状态改变
+const actionVideoPlayChange = (status: boolean) => {
+  if (status) {
+    videoAction.value.play();
+    updateActionVideoShow(true);
+  } else {
+    videoAction.value.pause();
+    updateActionVideoShow(false);
+  }
+};
+// 动作视频可以播放
+const actionCanplay = () => {
+  if (actionVideoFirstPlay.value) {
+    return;
+  }
+  if (props.firstVideoIsMain) {
+    console.log('动作视频开始播放');
+    // 停止播放主视频
+    mainVideoPlayChange(false);
+    actionVideoPlayChange(true);
+  }
+};
 const secondPlay = () => {
-  videoFirst.value[currentPlayMainIndex.value].pause();
+  mainVideoPlayChange(false);
  videoSecond.value?.play();
 };
@@ -247,7 +385,7 @@ const onPlay = () => {
    mainVideoPlayStatus(index);
    console.log(index, '开始播放', mainVideoList[index]);
    // 开始播放
-    videoFirst.value[index].play();
+    mainVideoPlayChange(true, index);
    emit('update:playMainIndex', index);
  }
  // 第一个视频连带着第二个视频一起播放--立马暂停是为了处理后续进来的视频
@@ -257,7 +395,7 @@ const onPlay = () => {
 };
 const onStop = () => {
-  videoFirst.value[currentPlayMainIndex.value].pause();
+  mainVideoPlayStatus(false);
 };
 watch(
@@ -269,6 +407,14 @@ watch(
  },
 );
+watch(props.playInfo, (v) => {
+  if (v && v.is_main) {
+    //
+    console.log('开始播放主视频-watch');
+    nextVideoToPlay(false);
+  }
+});
 // 判断是否洗稿
 watch(
  () => props.liveDetail,
@@ -280,7 +426,7 @@ watch(
      } else if (v.is_disorganize === 0) {
        // 不洗稿，开启循环播放
        console.log('不洗稿，开启循环播放');
-        loop.value = true;
+        // loop.value = true;
      } else {
        console.log('需要洗稿,loop设置false');
      }
@@ -306,6 +452,15 @@ watch(
 );
 watch(
+  () => props.actionVideo,
+  (v) => {
+    if (v) {
+      actionVideoFirstPlay.value = false;
+    }
+  },
+);
+watch(
  () => currentPlayMainIndex.value,
  (v) => {
    emit('update:playMainIndex', v);

--- a/src/pages/OnlyVideoLive/indexV2.vue
+++ b/src/pages/OnlyVideoLive/indexV2.vue
@@ -3,12 +3,19 @@
    <div class="start-only-video-live">
      <AddVideoPlay
        v-model:playMainIndex="currentPlayMainIndex"
+        v-model:showActionVideo="showActionVideo"
+        v-model:firstVideoIsMain="firstVideoIsMain"
        :loading="loading"
        :playId="addVideoId"
        :liveDetail="liveDetail"
        :video2="addVideo"
+        :actionVideo="actionVideo"
        :mainVideoList="mainVideoList"
+        :currentMainVideoIndex="currentMainVideoIndex"
+        :playInfo="playInfo"
        @playEnd="playEnd"
+        @actionPlayChange="actionPlayChange"
+        @initActionVideo="initActionVideo"
        @currentTime="currentTimeChange"
        @mainVideoListChange="mainVideoListChange"
      ></AddVideoPlay>
@@ -25,10 +32,17 @@ const {
  addVideoId,
  liveDetail,
  addVideo,
+  actionVideo,
  mainVideoList,
+  currentMainVideoIndex,
+  playInfo,
+  firstVideoIsMain,
+  showActionVideo,
  playEnd,
+  actionPlayChange,
  currentTimeChange,
  mainVideoListChange,
+  initActionVideo,
 } = useScript();
 /**
 * 合并主视频，动作视频开始时间从后台取

--- a/src/pages/OnlyVideoLive/useScript.ts
+++ b/src/pages/OnlyVideoLive/useScript.ts
--- a/src/pages/createLive/components/TextScriptDialog.vue
+++ b/src/pages/createLive/components/TextScriptDialog.vue
@@ -27,13 +27,13 @@ import Dialog from '@/components/Dialog.vue';
 import CustomInput from '@/components/input/index.vue';
 import CustomTextarea from '@/components/textarea.vue';
 import { show_message } from '@/utils/tool';
-import { getLiveMovementList } from '@/service/Common';
 import { movementTypeStart, movementTypeEnd } from '@/service/CreateLive';
 import CustomRadio from '@/components/radio';
 const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    info: any;
+    actionList: any[];
  }>(),
  {},
 );
@@ -47,7 +47,6 @@ const contentValue = ref('');
 // 当前选择的动作
 const currentSelect = ref('');
-const actionList = ref([]);
 const currentRadio = ref('');
 // 单选列表
@@ -62,28 +61,12 @@ const radioGroup = [
  },
 ];
-const getAction = async () => {
-  let list = await getLiveMovementList(true);
-  actionList.value = list.map((item: any) => {
-    return {
-      label: item.name,
-      value: item.id,
-      url: item.url,
-    };
-  });
-};
-onMounted(() => {
-  getAction();
-});
 const confirm = () => {
  let movement_name = '';
  let movement_url = '';
  if (currentSelect.value) {
    // 找到对应的数据
-    let obj = actionList.value.find((item: any) => item.value == currentSelect.value);
+    let obj = props.actionList.find((item: any) => item.value == currentSelect.value);
    if (obj) {
      movement_name = obj.label;
      movement_url = obj.url;

--- a/src/pages/createLive/components/audioScriptDialog.vue
+++ b/src/pages/createLive/components/audioScriptDialog.vue
@@ -29,12 +29,11 @@
 </template>
 <script lang="ts" setup>
-import { watch, ref, onActivated, onMounted } from 'vue';
+import { watch, ref } from 'vue';
 import Select from '@/components/Select.vue';
 import Dialog from '@/components/Dialog.vue';
 import CustomInput from '@/components/input/index.vue';
 import { show_message } from '@/utils/tool';
-import { getLiveMovementList } from '@/service/Common';
 import { movementTypeStart, movementTypeEnd } from '@/service/CreateLive';
 import CustomRadio from '@/components/radio';
 import MultipleUpload from '@/components/MultipleUpload';
@@ -44,6 +43,7 @@ const props = withDefaults(
    modelValue: boolean;
    info: any;
    ossConfig: any;
+    actionList: any[];
  }>(),
  {},
 );
@@ -57,7 +57,6 @@ const audioList = ref([]);
 // 当前选择的动作
 const currentSelect = ref('');
-const actionList = ref([]);
 const currentRadio = ref('');
 // 单选列表
@@ -72,26 +71,6 @@ const radioGroup = [
  },
 ];
-const getAction = async () => {
-  let list = await getLiveMovementList(true);
-  actionList.value = list.map((item: any) => {
-    return {
-      label: item.name,
-      value: item.id,
-      url: item.url,
-    };
-  });
-};
-onMounted(() => {
-  getAction();
-});
-onActivated(() => {
-  getAction();
-});
 const confirm = () => {
  if (!titleValue.value) {
    show_message('标题必填');
@@ -113,7 +92,7 @@ const confirm = () => {
  let movement_url = '';
  if (currentSelect.value) {
    // 找到对应的数据
-    let obj = actionList.value.find((item: any) => item.value == currentSelect.value);
+    let obj = props.actionList.find((item: any) => item.value == currentSelect.value);
    if (obj) {
      movement_name = obj.label;
      movement_url = obj.url;

--- a/src/pages/createLive/components/scripts.vue
+++ b/src/pages/createLive/components/scripts.vue
@@ -185,10 +185,16 @@
        </div>
      </ScriptTemplate>
    </div>
-    <TextScriptDialog v-model="textScriptVisible" @submit="textScriptSubmit" :info="editTextInfo"></TextScriptDialog>
+    <TextScriptDialog
+      v-model="textScriptVisible"
+      :actionList="actionList"
+      @submit="textScriptSubmit"
+      :info="editTextInfo"
+    ></TextScriptDialog>
    <AudioScriptDialog
      v-model="audioScriptVisible"
      :ossConfig="ossConfig"
+      :actionList="actionList"
      @submit="audioScriptSubmit"
      :info="editAudioInfo"
    ></AudioScriptDialog>
@@ -206,7 +212,7 @@
 </template>
 <script lang="tsx" setup>
-import { computed, onMounted, reactive, ref, watch, toRaw } from 'vue';
+import { computed, onMounted, reactive, ref, watch, toRaw, onActivated } from 'vue';
 import AudioSvg from '@/assets/svg/upload/audio.svg';
 import Button from '@/components/Button.vue';
 import CheckBox from '@/components/CheckBox.vue';
@@ -225,7 +231,7 @@ import {
  mergeSameAudio,
 } from '@/service/CreateLive';
 import { useLiveInfoSubmit } from '@/hooks/useStoreCommit';
-import { getUploadConfig, getTonesList } from '@/service/Common';
+import { getUploadConfig, getTonesList, getLiveMovementList } from '@/service/Common';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import { v4 } from 'uuid';
@@ -248,6 +254,9 @@ const imgs = {
 const store = useStore();
 const route = useRoute();
+// 动作列表
+const actionList = ref([]);
 // 编辑信息
 const editInfo = computed(() => store.getters['live/getEditLive']);
@@ -608,6 +617,18 @@ const getList = async () => {
  updateTonesInfo(tonesValue.value, soundColorValue.value);
 };
+const getAction = async () => {
+  let list = await getLiveMovementList(true);
+  actionList.value = list.map((item: any) => {
+    return {
+      label: item.name,
+      value: item.id,
+      url: item.url,
+    };
+  });
+};
 onMounted(async () => {
  // 获取上传配置
  ossConfig.value = await getUploadConfig();
@@ -620,6 +641,10 @@ onMounted(async () => {
  // 获取音色音调列表
  getList();
 });
+onActivated(() => {
+  getAction();
+});
 </script>
 <style lang="less">

--- a/src/pages/createLive/index.vue
+++ b/src/pages/createLive/index.vue
@@ -92,6 +92,7 @@ import {
  filterFiled,
  getAudioUrl,
  getAudioUrlKey,
+  getDurationOfAudioFileList,
 } from '@/service/CreateLive';
 import { getLiveTaskInfo, createDrafts, getDraftsDetail, liveTts, createLiveTask } from '@/utils/api/userApi';
 import { useRoute, onBeforeRouteLeave } from 'vue-router';
@@ -496,7 +497,7 @@ const convertCallback = (convertInfo: any) => {
 };
 // python切割回调
-const splitCallback = (splitInfo: any) => {
+const splitCallback = async (splitInfo: any) => {
  console.log(splitInfo);
  let num = 0;
  if ('url' in splitInfo && 'list' in splitInfo) {
@@ -508,6 +509,14 @@ const splitCallback = (splitInfo: any) => {
        let row = item[j];
        if (getAudioUrl(row) == splitInfo.url) {
          row.new_content = splitInfo.list.join('|');
+          // 更新时长
+          let durationList = await getDurationOfAudioFileList(splitInfo.list);
+          // 四舍五入
+          durationList = durationList.map((it: any) => {
+            return Math.round(it);
+          });
+          row.duration = durationList.join('|');
+          console.log(row.duration, 'row.duration,切割后的时长字段');
          row.py_split_status = true;
        }
        // 统计完成数量
@@ -665,6 +674,7 @@ const audioScriptLiveTaskSubmit = async () => {
  }
  let params = filterFiled(getCreateLiveInfo(), type);
  console.log('创建提交的参数', params);
+  console.log('创建提交的参数json', JSON.stringify(params));
  let res: any = await createLiveTask(params);
  if (res.code == 0) {
    console.log('创建成功-', res.data.id);

--- a/src/service/CreateLive.ts
+++ b/src/service/CreateLive.ts
@@ -5,6 +5,7 @@ import store from '@/store';
 import { v4 } from 'uuid';
 import { writeLog } from '@/utils/pyqt';
 import { getDurationOfAudioFile } from '@/utils/audio';
+import CustomException from '@/utils/error';
 /**
 * 创建直播的版本
@@ -57,6 +58,21 @@ export const typeSoundColor = 2; // 音色
 export const movementTypeStart = 1; // 开头插入
 export const movementTypeEnd = 2; // 结尾插入
+// 获取音频文件列表的时长
+export const getDurationOfAudioFileList = async (list: string[]) => {
+  let durationList = [];
+  try {
+    for (let i = 0; i < list.length; i++) {
+      const duration = await getDurationOfAudioFile(list[i]);
+      durationList.push(duration);
+    }
+  } catch (e) {
+    console.log('音频文件列表的时长失败');
+    console.log(e);
+  }
+  return durationList;
+};
 // 计算音频块列表的开始时间和结束时间
 export const getAudioStartTimeAndEndTime = async (list: any[]) => {
  try {
@@ -332,9 +348,7 @@ export const filterFiled = (item: any, type: string = '') => {
      let content: any = list.map((child: any) => {
        return child.url;
      });
-      console.log(content, '合并前的数组content');
      let str = content.join('|');
-      console.log(str, '合并后的str');
      return str;
    };
    // 音频
@@ -348,8 +362,21 @@ export const filterFiled = (item: any, type: string = '') => {
          uuid: v4(),
          duration: 0,
        };
+        // 创建时的时长
        if (it.duration) {
-          params.duration = parseInt(it.duration);
+          if (typeof it.duration === 'number') {
+            params.duration = Math.round(it.duration);
+          } else {
+            params.duration = it.duration;
+          }
+        }
+        // 编辑时的时长
+        if (it.children && it.children.length) {
+          params.duration = it.children
+            .map((row: any) => {
+              return row.duration;
+            })
+            .join('|');
        }
        // 草稿类型的
        if (type == 'edit_drafts') {
@@ -368,9 +395,9 @@ export const filterFiled = (item: any, type: string = '') => {
            params.content = it.url;
          }
        } else {
-          // 获取编辑状态下的content
+          // 编辑
          if (it.children && it.children.length > 1) {
-            console.log(it.children, 'it.children,编辑状态下的参数');
+            // 获取编辑状态下的content
            // 修改content
            params.content = audioConversion(it.children);
            params.old_content = getAudioUrl(it);

--- a/src/utils/pyqt.ts
+++ b/src/utils/pyqt.ts
@@ -32,7 +32,6 @@ export const callPyjsInWindow = (
  toJson: boolean = true,
 ) => {
  if (!window.pyjs) {
-    console.log('py没有注入');
    return;
  }
  try {

--- a/stats.html
+++ b/stats.html