custom music

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

@@ -0,0 +1,92 @@
+import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
+import { PlusOutlined } from "@ant-design/icons-vue";
+import { Button, Divider, Select } from "ant-design-vue";
+import { defineComponent, onMounted, reactive } from "vue";
+import { any } from "vue-types";
+import { MusicOptions } from "./localMusic";
+import { queenApi } from "queenjs";
+export default defineComponent({
+  props: {
+    otherProps: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const { helper, controls } = useEditor();
+
+    const resource = useResource();
+
+    const addMusic = async () => {
+      const { successRow, failRow } =
+        await resource.actions.createAudioMaterial();
+      if (failRow.length > 0) {
+        queenApi.messageError(
+          `${failRow.length}条数据上传失败，超过限制大小。`
+        );
+      }
+      if (successRow.length > 0) {
+        queenApi.messageSuccess("上传成功");
+        const ctrl = resource.controls.materialAudioListCtrl;
+        await ctrl.loadPage(1, 1);
+        if (ctrl.state.list.length > 0) {
+          const item: any = ctrl.state.list[0];
+          const fileUrl = item.file.url;
+          const option = {
+            label: "自定义",
+            value: "custom",
+            src: fileUrl,
+          };
+          const options = [...controls.mediaCtrl.state.musicOptions];
+          const customIndex = options.findIndex((e) => {
+            return e.value == "custom";
+          });
+          if (customIndex != -1) {
+            options.splice(customIndex, 1, option);
+          } else {
+            options.push(option);
+          }
+          controls.mediaCtrl.setMusicOptions(options);
+          emit("change", "custom");
+        }
+      }
+    };
+    return () => {
+      const compMusic = helper.findRootComp()?.value.music || "";
+      const curValue = MusicOptions.find((e) => {
+        return e.value == compMusic;
+      });
+      const { musicOptions } = controls.mediaCtrl.state;
+      return (
+        <Select
+          class={"w-full flex-1 overflow-hidden"}
+          options={musicOptions}
+          value={curValue?.value || ""}
+          onChange={(value: any) => {
+            emit("change", value);
+          }}
+        >
+          {{
+            dropdownRender: ({ menuNode }: any) => {
+              return (
+                <>
+                  {menuNode}
+                  <Divider style={{ margin: 0 }} />
+                  <Button
+                    type="link"
+                    icon={<PlusOutlined />}
+                    onMousedown={(e) => {
+                      e.stopPropagation();
+                    }}
+                    onClick={addMusic}
+                  >
+                    自定义音乐
+                  </Button>
+                </>
+              );
+            },
+          }}
+        </Select>
+      );
+    };
+  },
+});

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

@@ -5,11 +5,11 @@ import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
-import { Select } from "ant-design-vue";
-import { MusicOptions } from "./localMusic";
+
 import { css } from "@linaria/core";
+import MusicSelect from "./MusicSelect";
 import screen from "./screen";
-const styleColumns = (muisc?: string): ColumnItem[] => {
+const styleColumns = (): ColumnItem[] => {
   return [
     {
       label: "背景颜色",
@@ -19,12 +19,7 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     {
       label: "背景音乐",
       dataIndex: "value.music",
-      component: Select,
-      props: {
-        class: "w-full flex-1 overflow-hidden",
-        value: muisc,
-        options: [{ label: "无", value: "" }, ...MusicOptions],
-      },
+      component: MusicSelect,
     },
     // {
     //   label: "页面模式",
@@ -38,11 +33,11 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     {
       dataIndex: "value.music",
       component: PageMusic,
-      isVisible: (value, data) => data?.value?.music != "" && muisc != "",
+      isVisible: (value, data) => data?.value?.music != "",
     },
     {
       component: screen,
-    }
+    },
   ];
 };
 export const PageForm = defineComponent({
@@ -56,17 +51,12 @@ export const PageForm = defineComponent({
     }
 
     return () => {
-      const compMusic = helper.findRootComp()?.value.music || "";
-      const curValue = MusicOptions.find((e) => {
-        return e.value == compMusic;
-      });
-
       return (
         <div class={formStyle}>
           <div class="text-white">作品属性</div>
           <FormUI
             data={props.component}
-            columns={styleColumns(curValue?.value || "")}
+            columns={styleColumns()}
             onChange={changeVal}
           />
         </div>

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

@@ -8,20 +8,19 @@ import {
 } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
 
+import { isPc } from "@queenjs/utils";
 import { Button, Dropdown, Slider } from "ant-design-vue";
 import { Howl } from "howler";
 import { nanoid } from "nanoid";
-import { isPc } from "@queenjs/utils";
 import {
   defineComponent,
+  onMounted,
+  onUnmounted,
   reactive,
   ref,
   watch,
-  onUnmounted,
-  onMounted,
 } from "vue";
 import { bool, number } from "vue-types";
-import { MusicOptions } from "./localMusic";
 declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
   setup() {
@@ -42,10 +41,13 @@ export const PageMusic = defineComponent({
 
     const initAudioBgm = () => {
       audioBgm.value = null;
-      const curAudio = MusicOptions.find((e) => {
+      const curAudio = controls.mediaCtrl.state.musicOptions.find((e) => {
         return e.value == rootComp?.value.music;
       });
-      const src = curAudio?.src || "";
+      if (!curAudio) {
+        return;
+      }
+      const src = curAudio.src || "";
       audioBgm.value = new Howl({
         src: [src],
         loop: store.isEditMode ? false : true,
@@ -145,6 +147,13 @@ export const PageMusic = defineComponent({
         initAudioBgm();
       }
     );
+    watch(
+      () => controls.mediaCtrl.state.musicOptions,
+      () => {
+        audioRest();
+        initAudioBgm();
+      }
+    );
     onMounted(() => {
       initAudioBgm();
     });

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

@@ -6,11 +6,11 @@ import { defineComponent, nextTick, onMounted, onUnmounted } from "vue";
 import { string } from "vue-types";
 
 import { IconArrowUp } from "@/assets/icons";
+import { useResource } from "@/modules/resource";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
 import { PageMusic } from "./PageMusic";
-import { MusicOptions } from "./localMusic";
 
 export const Component = defineComponent({
   props: {
@@ -20,7 +20,23 @@ export const Component = defineComponent({
     const editor = useEditor();
     const { helper, store, controls } = editor;
     const compRef = useCompRef(props.compId);
-
+    const resource = useResource();
+    const ctrl = resource.controls.materialAudioListCtrl;
+    const getCustomMusic = async () => {
+      await ctrl.loadPage(1, 1);
+      if (ctrl.state.list.length > 0) {
+        const item: any = ctrl.state.list[0];
+        const fileUrl = item.file.url;
+        const option = {
+          label: "自定义",
+          value: "custom",
+          src: fileUrl,
+        };
+        const options = [...controls.mediaCtrl.state.musicOptions, option];
+        controls.mediaCtrl.setMusicOptions(options);
+      }
+    };
+    getCustomMusic();
     // const getContextStyles = () => {
     //   let contextStyle: any = null;
     //   if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
@@ -99,7 +115,7 @@ export const Component = defineComponent({
       const isPcDesign = value.useFor == "pc";
 
       const compMusic = value.music || "";
-      const curValue = MusicOptions.find((e) => {
+      const curValue = controls.mediaCtrl.state.musicOptions.find((e) => {
         return e.value == compMusic;
       });
 

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

@@ -1,10 +1,73 @@
 import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
 import { EditorModule } from "../../module";
+const MusicOptions = [
+  {
+    label: "安静舒缓",
+    value: "soothing&quiet",
+    src: require("@/assets/audio/soothing&quiet.mp3"),
+  },
+  {
+    label: "和煦的风",
+    value: "balmy_wind",
+    src: require("@/assets/audio/balmy_wind.mp3"),
+  },
+  {
+    label: "纽约落日",
+    value: "sunset_in_newyork",
+    src: require("@/assets/audio/sunset_in_newyork.mp3"),
+  },
+  {
+    label: "温情回忆",
+    value: "warm_memories",
+    src: require("@/assets/audio/warm_memories.mp3"),
+  },
+  {
+    label: "春华秋实",
+    value: "spring&autumn",
+    src: require("@/assets/audio/spring&autumn.mp3"),
+  },
+  {
+    label: "明媚阳光",
+    value: "bright_sunshine",
+    src: require("@/assets/audio/bright_sunshine.mp3"),
+  },
+  {
+    label: "动感活力",
+    value: "dynamic&energetic",
+    src: require("@/assets/audio/dynamic&energetic.mp3"),
+  },
+  {
+    label: "冲上云霄",
+    value: "soar_into_the_sky",
+    src: require("@/assets/audio/soar_into_the_sky.mp3"),
+  },
+  {
+    label: "命运希望",
+    value: "destiny&hope",
+    src: require("@/assets/audio/destiny&hope.mp3"),
+  },
+  {
+    label: "励志活力",
+    value: "inspirational_vitality",
+    src: require("@/assets/audio/inspirational_vitality.mp3"),
+  },
+  {
+    label: "励志希望",
+    value: "inspirational_hope",
+    src: require("@/assets/audio/inspirational_hope.mp3"),
+  },
+  {
+    label: "活力鼓舞",
+    value: "inspiration_vigour",
+    src: require("@/assets/audio/inspiration_vigour.mp3"),
+  },
+];
 
 export class MediaCtrl extends ModuleControl<EditorModule> {
   state = reactive({
     medias: new Map<string, any>(),
+    musicOptions: [{ label: "无", value: "", src: "" }, ...MusicOptions],
   });
   init() {
     this.state.medias.clear();
@@ -22,4 +85,7 @@ export class MediaCtrl extends ModuleControl<EditorModule> {
   removeMedia(currKey: string) {
     this.state.medias.delete(currKey);
   }
+  setMusicOptions(options: any) {
+    this.state.musicOptions = options;
+  }
 }

src/modules/resource/actions/material.ts

@@ -6,7 +6,7 @@ import { ResourceModule } from "..";
 export const materialActions = ResourceModule.action({
   async createMaterial() {
     const { successRow, failRow } = await this.helper.uploadMaterials({
-      accept: "image/*, video/mp4",
+      accept: "image/*,video/mp4,audio/mp3",
       multiple: true,
     });
 
@@ -21,6 +21,18 @@ export const materialActions = ResourceModule.action({
     this.controls.materialListCtrl.loadPage(1);
     return { successRow, failRow };
   },
+  async createAudioMaterial() {
+    const { successRow, failRow } = await this.helper.uploadMaterials({
+      accept: "audio/mp3",
+      multiple: false,
+    });
+
+    for (const key in successRow) {
+      const souceObj = successRow[key];
+      await this.https.createResource(souceObj);
+    }
+    return { successRow, failRow };
+  },
 
   async deleteMaterial(record) {
     const res = await queenApi.showConfirm({

src/modules/resource/controllers/MaterialController.ts

@@ -1,58 +1,71 @@
 import { PageListController } from "@queenjs/controllers";
 import { reactive } from "vue";
 
-export class MaterialController  {
-    state = reactive({isSelect:false, selectType:"image", currTab: "image", tabs:["image", "video", "task"], btns:["upload", "image","video"] , uploadType:"Default" as "image"|"video"|"Default"});
-    imageCtrl = new PageListController<any, any>();
-    vidoeCtrl = new PageListController<any, any>();
-    taskCtrl = new PageListController<any, any>();
-    tplCtrl = new PageListController<any, any>();
+export class MaterialController {
+  state = reactive({
+    isSelect: false,
+    selectType: "image",
+    currTab: "image",
+    tabs: ["image", "video", "task"],
+    btns: ["upload", "image", "video"],
+    uploadType: "Default" as "image" | "video" | "Default",
+  });
+  imageCtrl = new PageListController<any, any>();
+  videoCtrl = new PageListController<any, any>();
+  audioCtrl = new PageListController<any, any>();
+  taskCtrl = new PageListController<any, any>();
+  tplCtrl = new PageListController<any, any>();
 
-    async showDialog(type:string) {
-        const ctrl = this.tplCtrl;
-        ctrl.state.query = type == "video" ? { hasVideo: true } : {}
-        ctrl.loadPage(1);
-        const record:any = await this.onShowDialog(ctrl, type);
-        if (record && record._id) {
-            const url = `${location.origin}/index.html#/create/${record._id}`;
-            location.href = url;
-        }
+  async showDialog(type: string) {
+    const ctrl = this.tplCtrl;
+    ctrl.state.query = type == "video" ? { hasVideo: true } : {};
+    ctrl.loadPage(1);
+    const record: any = await this.onShowDialog(ctrl, type);
+    if (record && record._id) {
+      const url = `${location.origin}/index.html#/create/${record._id}`;
+      location.href = url;
     }
-    switchTab(name: string, fresh = true) {
-        this.state.currTab = name;
-        const ctrol = this.getCurrControl();
-        if(fresh)  ctrol.fresh();
+  }
+  switchTab(name: string, fresh = true) {
+    this.state.currTab = name;
+    const ctrol = this.getCurrControl();
+    if (fresh) ctrol.fresh();
+  }
+  getCurrControl(): PageListController<any, any> {
+    switch (this.state.currTab) {
+      case "image":
+        return this.imageCtrl;
+      case "video":
+        return this.videoCtrl;
+      case "audio":
+        return this.audioCtrl;
+      default:
+        return this.taskCtrl;
     }
-    getCurrControl() : PageListController<any, any> {
-        switch (this.state.currTab) {
-            case "image": return this.imageCtrl;
-            case "video": return this.vidoeCtrl;
-            default: return  this.taskCtrl;
-        }
-    }
-
+  }
 
-    onBtnClick(name:string) {
-        console.log("onBtnClick", name)
-    }
-    onItemClick(name: "delete" | "download" | "preview" |"use", record:any) {
-        console.log("onItemClick", name, record)
-    }
-    async onShowDialog(listCtrl: PageListController<any, any>, type:string) {
-        console.log("onShowDialog", type)
-    }
-     onCloseDialog(data:any) {
-        console.log("onCloseDialog", data)
-    }
+  onBtnClick(name: string) {
+    console.log("onBtnClick", name);
+  }
+  onItemClick(name: "delete" | "download" | "preview" | "use", record: any) {
+    console.log("onItemClick", name, record);
+  }
+  async onShowDialog(listCtrl: PageListController<any, any>, type: string) {
+    console.log("onShowDialog", type);
+  }
+  onCloseDialog(data: any) {
+    console.log("onCloseDialog", data);
+  }
 }
 
 export const TabNames = {
-     "video":"视频",
-    "image": "图片",
-    "task": "渲染任务"
-}
+  video: "视频",
+  image: "图片",
+  //   audio: "音频",
+  task: "渲染任务",
+};
 export const BtnNames = {
-    "video":"生成视频",
-    "image": "生成图片",
-    "upload": "上传素材"
-}
+  video: "生成视频",
+  image: "生成图片",
+  upload: "上传素材",
+};

src/modules/resource/helper.ts

@@ -67,7 +67,6 @@ export const helper = ResourceModule.helper({
 
     queenApi.showLoading("上传中……");
 
-    
     for (const key in blobs) {
       const blob = blobs[key];
       if (blob.type.indexOf("image") !== -1 && blob.size >= 10 * 1024 * 1024) {
@@ -77,13 +76,19 @@ export const helper = ResourceModule.helper({
         blob.size >= 200 * 1024 * 1024
       ) {
         result.failRow.push(blob);
+      } else if (
+        blob.type.indexOf("audio") !== -1 &&
+        blob.size >= 20 * 1024 * 1024
+      ) {
+        result.failRow.push(blob);
       } else {
         const file = await this.controls.uploader.uploadFile(blob, "queenshow");
         const souceObj = {
           file,
           fileType: blob.type.split("/")[0],
           from: "upload",
-          isSvg:  blob.name.toLowerCase().lastIndexOf(".svg") == blob.name.length -4
+          isSvg:
+            blob.name.toLowerCase().lastIndexOf(".svg") == blob.name.length - 4,
         };
         result.successRow.push(souceObj);
       }

src/modules/resource/index.ts

@@ -37,6 +37,7 @@ export class ResourceModule extends ModuleRoot {
 
     materialImageListCtrl: new PageListController(this.config?.httpConfig),
     materialVideoListCtrl: new PageListController(this.config?.httpConfig),
+    materialAudioListCtrl: new PageListController(this.config?.httpConfig),
 
     // 用户资源
     custImageListCtrl: new PageListController(this.config?.httpConfig),
@@ -82,6 +83,10 @@ export class ResourceModule extends ModuleRoot {
     this.controls.materialVideoListCtrl.state.size = 18;
     this.controls.materialVideoListCtrl.state.query = { fileType: "video" };
 
+    this.controls.materialAudioListCtrl.setCrudPrefix("/source");
+    this.controls.materialAudioListCtrl.state.size = 18;
+    this.controls.materialAudioListCtrl.state.query = { fileType: "audio" };
+
     this.controls.custImageListCtrl.setCrudPrefix("/source");
     this.controls.custImageListCtrl.state.size = 20;
     this.controls.custImageListCtrl.state.query = { fileType: "image" };

src/pages/website/Material2/components/Material.tsx

@@ -32,7 +32,7 @@ export default defineUI({
             <div class="flex items-baseline">
               <h3 class="text-22px m-0">我的素材</h3>
               <span class="ml-5px text-gray-300 text-12px">
-                (图片支持jpg、png、gif、svg，不超过10M，视频支持mp4，不超过200M)
+                (图片支持jpg、png、gif、svg，不超过10M；视频支持mp4，不超过200M；)
               </span>
             </div>
           )}

src/pages/website/Material2/controller.tsx

@@ -46,7 +46,8 @@ export default function createController(
 
   const ctrl = new MaterialController();
   ctrl.imageCtrl = controls.materialImageListCtrl;
-  ctrl.vidoeCtrl = controls.materialVideoListCtrl;
+  ctrl.videoCtrl = controls.materialVideoListCtrl;
+  ctrl.audioCtrl = controls.materialAudioListCtrl;
   ctrl.taskCtrl = controls.renderTaskListCtrl;
   ctrl.state.isSelect = isSelectModel;
   if (selectType) ctrl.state.selectType = selectType;