Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/Viewport/Slider/SliderLeft/SourceItem.tsx

@@ -4,18 +4,93 @@ import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
 import { EyeOutlined } from "@ant-design/icons-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
-import { any, bool } from "vue-types";
+import { any, bool, object } from "vue-types";
 import { useAuth } from "@queenjs-modules/auth";
 import Thumbnail from "@/components/Thumbnail";
+import { reactive, defineComponent} from "vue";
 
+
+const VideoItem = defineComponent({
+    props: {
+      record: object<any>(),
+    },
+    emits: ["click"],
+    setup(props, { emit }) {
+      const state = reactive({
+        play: false,
+      });
+  
+      return () => {
+        const { record } = props;
+        const { play } = state;
+  
+        return (
+          <div
+            style={{ aspectRatio: 1.5 }}
+            class="overflow-hidden cursor-pointer"
+            onMouseenter={() => (state.play = true)}
+            onMouseleave={() => (state.play = false)}
+            onClick={() => emit("click", record.file.url)}
+          >
+            {!play ? (
+              <Thumbnail
+                class="w-1/1 h-1/1"
+                size={240}
+                objectContain={false}
+                src={record.thumbnail}
+              />
+            ) : (
+              <video
+                muted
+                autoplay
+                controls={false}
+                src={record.file.url}
+                class="w-1/1 h-1/1 object-cover"
+              />
+            )}
+          </div>
+        );
+      };
+    },
+  });
+  
+  const ImageItem = defineComponent({
+    props: {
+      record: object<any>(),
+    },
+    emits: ["click"],
+    setup(props, { emit }) {
+      return () => {
+        const { record } = props;
+  
+        return (
+          <Thumbnail
+            size={240}
+            class="draggable-item"
+            style={{ aspectRatio: 1 }}
+            onClick={() => emit("click", record.file.url)}
+            objectContain={true}
+            src={record.file.url}
+          />
+        );
+      };
+    },
+  });
+
+  
 export default defineUI({
   props: {
     record: any(),
     tagable: bool().def(false),
+    isVideo: bool().def(false),
   },
   emits: ["edit", "preview", "menu", "click"],
   setup(props, { emit }) {
     const auth = useAuth();
+    const state = reactive({
+        play: false,
+    });
+
 
     return () => {
       const { record } = props;
@@ -25,16 +100,10 @@ export default defineUI({
 
       return (
         <div class={cx(itemStyles, "relative")}>
-          <Thumbnail
-            size={240}
-            class="draggable-item"
-            style={{ aspectRatio: 1 }}
-            onClick={() => emit("click")}
-            objectContain={record.fileType == "image" ? true : false}
-            src={
-              record.fileType == "video" ? record.thumbnail : record.file.url
-            }
-          />
+         {
+            props.isVideo ? <VideoItem  record={props.record} /> : <ImageItem  record={props.record} />
+         }
+
           {isSys && props.tagable && (
             <Tag
               color={record.published? "green": "#E88B00" }

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, onMounted, watch } from "vue";
+import { defineComponent, onMounted, reactive, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { string } from "vue-types";
+import { object, string } from "vue-types";
 
 import Thumbnail from "@/components/Thumbnail";
 import { useEditor } from "@/modules/editor";
@@ -55,6 +55,7 @@ export const Sources = defineComponent({
     return () => {
       const control = getCurrCtrl();
       const dataSource = control.state.list;
+      const { sourceType } = props;
 
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
@@ -73,8 +74,11 @@ export const Sources = defineComponent({
             {dataSource.map((item: any) => (
               <Draggable>
                 <SourceItem
+                  class="draggable-item"
                   record={item}
+                  isVideo = {sourceType == "Video"}
                   tagable={props.sourceFrom == "user"}
+
                   onClick={() => clickToDesign(item.file.url)}
                   onMenu={async (name)=>{
                       console.log(name);
@@ -110,4 +114,4 @@ export const Sources = defineComponent({
       );
     };
   },
-});
+});