video

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";
@@ -53,6 +53,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">
@@ -70,16 +71,19 @@ export const Sources = defineComponent({
           >
             {dataSource.map((item: any) => (
               <Draggable>
-                <Thumbnail
-                  size={240}
-                  class="draggable-item"
-                  style={{ aspectRatio: 1 }}
-                  onClick={() => clickToDesign(item.file.url)}
-                  objectContain={item.fileType == "image" ? true : false}
-                  src={
-                    item.fileType == "video" ? item.thumbnail : item.file.url
-                  }
-                />
+                {sourceType == "Image" ? (
+                  <ImageItem
+                    class="draggable-item"
+                    record={item}
+                    onClick={clickToDesign}
+                  />
+                ) : (
+                  <VideoItem
+                    class="draggable-item"
+                    record={item}
+                    onClick={clickToDesign}
+                  />
+                )}
               </Draggable>
             ))}
           </Container>
@@ -98,3 +102,69 @@ export const Sources = defineComponent({
     };
   },
 });
+
+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}
+          style={{ aspectRatio: 1 }}
+          onClick={() => emit("click", record.file.url)}
+          objectContain={true}
+          src={record.file.url}
+        />
+      );
+    };
+  },
+});