media ctrl

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -1,20 +1,17 @@
 import { IconMusic } from "@/assets/icons";
 import { isWeixinBrowser } from "@/controllers/wxController";
 import { useEditor } from "@/modules/editor";
-import {
-  PauseCircleOutlined,
-  PlayCircleOutlined,
-  LoadingOutlined,
-} from "@ant-design/icons-vue";
+import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
-import { Button, Slider, Spin } from "ant-design-vue";
+import { Button, Slider } from "ant-design-vue";
 import { Howl } from "howler";
+import { nanoid } from "nanoid";
 import { defineComponent, reactive, ref, watch } from "vue";
 import { bool, number } from "vue-types";
 declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
   setup() {
-    const { store, helper } = useEditor();
+    const { store, helper, controls } = useEditor();
     const state = reactive({
       playStatus: false,
       duration: 0,
@@ -22,6 +19,7 @@ export const PageMusic = defineComponent({
       muted: true,
     });
     const rootComp = helper.findRootComp();
+    let audioKey = nanoid();
     let audioBgm = ref();
 
     const initAudioBgm = () => {
@@ -31,10 +29,10 @@ export const PageMusic = defineComponent({
         loop: store.isEditMode ? false : true,
         preload: true,
         HTML5: true,
-        autoplay: store.isEditMode ? false : true,
       });
       audioBgm.value.on("load", () => {
         state.duration = audioBgm.value.duration();
+        controls.mediaCtrl.setMediasInstance(audioKey, audioBgm.value);
         if (!store.isEditMode) {
           if (isWeixinBrowser()) {
             WeixinJSBridge.invoke(
@@ -45,6 +43,8 @@ export const PageMusic = defineComponent({
               },
               false
             );
+          } else {
+            playAudio(true);
           }
         }
       });
@@ -55,14 +55,20 @@ export const PageMusic = defineComponent({
         console.log("音频播放失败");
       });
       audioBgm.value.on("play", () => {
+        controls.mediaCtrl.pauseOtherMedia(audioKey);
         if (!state.playStatus) {
           state.playStatus = true;
         }
         playStep();
       });
-      audioBgm.value.on("end", () => {
+      audioBgm.value.on("pause", () => {
         audioRest();
       });
+      audioBgm.value.on("end", () => {
+        if (store.isEditMode) {
+          audioRest();
+        }
+      });
     };
     initAudioBgm();
     const playStep = () => {

src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent, ref, watch, onMounted } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -35,10 +35,15 @@ export const Component = defineComponent({
         actions.onCompLayoutUpdated(comp);
       }
     );
-
+    onMounted(() => {
+      videoRef.value.addEventListener("play", () => {
+        controls.mediaCtrl.pauseOtherMedia(props.compId);
+      });
+      controls.mediaCtrl.setMediasInstance(props.compId, videoRef.value);
+    });
     return () => {
       const options: any = {};
-      if (value.autoplay) options.autoplay = true;
+      if (value.autoplay) options.autoplay = false;
       if (value.loop) options.loop = true;
       if (value.controls) options.controls = true;
       if (value.poster) options.poster = value.poster;

src/modules/editor/controllers/MediaCtrl/indext.ts

@@ -0,0 +1,22 @@
+import { ModuleControl } from "queenjs";
+import { reactive } from "vue";
+import { EditorModule } from "../../module";
+
+export class MediaCtrl extends ModuleControl<EditorModule> {
+  state = reactive({
+    medias: new Map<string, any>(),
+  });
+  init() {
+    this.state.medias.clear();
+  }
+  setMediasInstance(key: string, instance: any) {
+    this.state.medias.set(key, instance);
+  }
+  pauseOtherMedia(currKey: string) {
+    for (let [key, value] of this.state.medias) {
+      if (key != currKey && value) {
+        value.pause();
+      }
+    }
+  }
+}

src/modules/editor/module/actions/init.ts

@@ -11,14 +11,15 @@ export const initActions = EditorModule.action({
     const { historyCtrl } = this.controls;
     historyCtrl.bindActions(Object.keys(editActions));
     this.controls.compUICtrl.init();
-
+    this.controls.mediaCtrl.init();
     createProxyEffect(this.store, (type, paths, value, oldValue) => {
-      if (paths[0] === "designData" || 
-          paths[0] === "currCompId" || 
-          paths[0] === "selected" || 
-          paths[0] === "currStreamCardId" ||
-          paths[0] === "selectId"
-          ) {
+      if (
+        paths[0] === "designData" ||
+        paths[0] === "currCompId" ||
+        paths[0] === "selected" ||
+        paths[0] === "currStreamCardId" ||
+        paths[0] === "selectId"
+      ) {
         historyCtrl.record(this.store, type, paths, value, oldValue);
       }
     });

src/modules/editor/module/index.ts

@@ -18,6 +18,7 @@ import { SelectCtrl } from "../controllers/SelectCtrl";
 import { CompObject } from "../controllers/SelectCtrl/compObj";
 import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
+import { MediaCtrl } from "../controllers/MediaCtrl/indext";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -56,6 +57,7 @@ export class EditorModule extends ModuleRoot {
     pickCtrl: new ImagePickController(),
     compUICtrl: new CompUICtrl(this),
     selectCtrl: new SelectCtrl(this),
+    mediaCtrl: new MediaCtrl(this),
   };
   compObjsMap = new Map<string, CompObject>();