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

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();
-  onPlay();
-  // 通知python开始播放了
-  // callPyjsInWindow('')
+  if (props.firstVideoIsMain) {
+    openInterval();
+    onPlay();
+  } 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) {
-      console.log('开始播放下一个主视频');
+    if (nextIndex !== -1 && status) {
       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);

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();
 /**
  * 合并主视频，动作视频开始时间从后台取

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;

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;

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">

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);

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);

src/utils/pyqt.ts

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