video

src/modules/resource/actions/editor.ts

@@ -20,16 +20,16 @@ export const editorActions = ResourceModule.action({
     this.store.setTreeData(data);
   },
 
-  async submitRender(id: string, images: any, vidoes: any) {
+  async submitRender(id: string, images: any, videos: any) {
     queenApi.showLoading("任务提交中");
 
-    console.log("iamges=>", images, "videos->", vidoes);
+    console.log("iamges=>", images, "videos->", videos);
 
     try {
       await this.https.sourceGen({
         genRequest: {
           templateId: id,
-          vidoes: vidoes,
+          videos: videos,
           images: images,
           matSlots: this.store.matSlots,
           meshSlots: this.store.meshSlots,

src/pages/website/CreateMat/components/OutputTemplateItem.tsx

@@ -1,9 +1,9 @@
 import { css, cx } from "@linaria/core";
 import { Image, View } from "@queenjs/ui";
-import { Checkbox, Radio, RadioChangeEvent } from "ant-design-vue";
+import { Checkbox, Radio, RadioChangeEvent, Tag } from "ant-design-vue";
 import { defineUI, queenApi } from "queenjs";
 import { reactive } from "vue";
-import { any, bool } from "vue-types";
+import { any, bool, string } from "vue-types";
 import PreviewModal from "../../components/PreviewModal";
 
 const options = [
@@ -13,6 +13,7 @@ const options = [
 
 export default defineUI({
   props: {
+    type: string<"image" | "video">().def("image"),
     active: bool(),
     record: any(),
   },
@@ -28,9 +29,15 @@ export default defineUI({
     };
 
     const showModal = () => {
+      const { record, type } = props;
+      const isVideo = type == "video";
+
       queenApi.dialog(
         <PreviewModal
-          data={{ url: props.record?.thumbnailUrl, fileType: "image" }}
+          data={{
+            url: isVideo ? record.videoUrl : record?.thumbnailUrl,
+            fileType: type,
+          }}
         />,
         {
           title: "预览渲染模板",
@@ -40,7 +47,8 @@ export default defineUI({
     };
 
     return () => {
-      const { active, record } = props;
+      const { active, record, type } = props;
+      const isVideo = type == "video";
 
       return (
         <div class="cursor-pointer">
@@ -53,10 +61,19 @@ export default defineUI({
               active && "active"
             )}
           >
+            {isVideo && (
+              <Tag color="#E88B00" class="absolute right-0 top-0 z-9 !mr-0">
+                视频
+              </Tag>
+            )}
             {active && (
               <Checkbox checked class="!-mt-0.2em absolute top-0 left-0 z-3" />
             )}
-            <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
+            {!isVideo ? (
+              <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
+            ) : (
+              <video src={record.videoUrl} class="h-1/1 w-1/1 object-cover" />
+            )}
             <span
               class="absolute left-1/2 top-1/2 z-3 transform -translate-x-1/2 -translate-y-1/2 rounded-1/2 w-56px leading-56px text-center bg-primary transition-all opacity-0 group-hover:opacity-100 hover:(bg-opacity-50)"
               onClick={(e) => {

src/pages/website/CreateMat/components/OutputTemplateModal.tsx

@@ -12,9 +12,9 @@ export default defineComponent({
     const route = useRoute();
 
     const state = reactive({
-      images: [] as { id: string; qos: 1 }[],
-      videos: [] as { id: string; qos: 1 }[],
-    }) as any;
+      images: [] as { id: string; qos: number }[],
+      videos: [] as { id: string; qos: number }[],
+    });
 
     const submit = async () => {
       if (state.images.length == 0 && state.videos.length == 0) {
@@ -31,6 +31,25 @@ export default defineComponent({
       }
     };
 
+    const selectTmp = (record: { id: string }, type = "image") => {
+      const list = type == "image" ? state.images : state.videos;
+
+      const selected = !!list.find((v: any) => v.id == record.id);
+      if (selected) {
+        const index = list.findIndex((d: any) => d.id == record.id);
+        list.splice(index);
+        return;
+      }
+      list.push({ id: record.id, qos: 1 });
+    };
+
+    const changeQos = (record: { id: string }, qos: number, type = "image") => {
+      const list = type == "image" ? state.images : state.videos;
+      const selected = list.find((v: any) => v.id == record.id);
+      if (!selected) return;
+      selected.qos = qos;
+    };
+
     return () => {
       const { sourceDetail } = resource.store;
       const isEmpty =
@@ -40,29 +59,21 @@ export default defineComponent({
         <div>
           {isEmpty && <Empty description="暂无数据" />}
           <div class="grid grid-cols-4 gap-10px">
-            {sourceDetail.images.map((record: any) => (
+            {sourceDetail.images?.map((record: any) => (
               <OutputTemplateItem
                 record={record}
                 active={!!state.images.find((v: any) => v.id == record.id)}
-                onChange={(qos) => {
-                  const selected = state.images.find(
-                    (v: any) => v.id == record.id
-                  );
-                  selected.qos = qos;
-                }}
-                onSelect={() => {
-                  const selected = !!state.images.find(
-                    (v: any) => v.id == record.id
-                  );
-                  if (selected) {
-                    const index = state.images.findIndex(
-                      (d: any) => d.id == record.id
-                    );
-                    state.images.splice(index);
-                    return;
-                  }
-                  state.images.push({ id: record.id, qos: 1 });
-                }}
+                onChange={(qos) => changeQos(record, qos)}
+                onSelect={() => selectTmp(record)}
+              />
+            ))}
+            {sourceDetail.videos?.map((record: any) => (
+              <OutputTemplateItem
+                type="video"
+                record={record}
+                active={!!state.videos.find((v: any) => v.id == record.id)}
+                onChange={(qos) => changeQos(record, qos, "video")}
+                onSelect={() => selectTmp(record, "video")}
               />
             ))}
           </div>

src/pages/website/components/PreviewModal.tsx

@@ -25,7 +25,11 @@ export default defineUI({
             />
           )}
           {data.fileType == "video" && (
-            <video controls src={data.url} class="max-w-1/1 max-h-800px" />
+            <video
+              controls
+              src={data.url}
+              class="max-w-1/1 max-h-800px min-h-200px"
+            />
           )}
         </div>
       );