feat(timeline): Duplicate asset (#159)

front-src/client/components/Anime/Timeline/Editor.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { v4 as uuid } from "uuid";
+  import cloneDeep from "clone-deep";
   import { _ } from "@/libs/i18next";
   import createStore from "./libs/store";
   import { setContext, createEventDispatcher } from "svelte";
@@ -106,6 +108,15 @@
     }
   }
 
+  function onDuplicate({ detail: item }) {
+    const clone = cloneDeep(item);
+    clone.id = uuid();
+    clone.keyframes = clone.keyframes.map((keyframe) => {
+      return { ...keyframe, id: uuid() };
+    });
+    addItem(clone);
+  }
+
   function addFile({ detail: file }) {
     createAnimeFromFile(file)
       .then(addItem)
@@ -155,6 +166,7 @@
       on:textFileChange
       on:file="{addFile}"
       on:remove="{onRemove}"
+      on:duplicate="{onDuplicate}"
       on:fileUpdate="{onFileUpdate}"
     />
   </div>

front-src/client/components/Anime/Timeline/Editor/Timeline.svelte

@@ -101,6 +101,7 @@
       index="{index}"
       widget="{widget}"
       on:remove="{onRemove}"
+      on:duplicate
       on:textFileChange
       on:fileUpdate
     />

front-src/client/components/Anime/Timeline/Editor/Timeline/Item.svelte

@@ -91,6 +91,7 @@
   <ItemMenu>
     <ItemButtons
       on:remove
+      on:duplicate
       on:fileUpdate
       on:textFileChange
       widget="{widget}"

front-src/client/components/Anime/Timeline/Editor/Timeline/ItemButtons.svelte

@@ -6,6 +6,7 @@
   import { getContext, createEventDispatcher } from "svelte";
   import MdFileUpload from "svelte-icons/md/MdFileUpload.svelte";
   import ConfirmModal from "@/components/UI/ConfirmModal.svelte";
+  import MdContentCopy from "svelte-icons/md/MdContentCopy.svelte";
   import FileManagerModal from "@/components/FileManager/Modal.svelte";
   import MdDeleteForever from "svelte-icons/md/MdDeleteForever.svelte";
 
@@ -15,7 +16,8 @@
   const dispatch = createEventDispatcher();
   const { items, selectedItem, selectedKeyframe } = getContext("Editor");
 
-  let accept = [];
+  const accept = ["image", "audio", "text", "video", "font"];
+
   let showFileManager = false;
   let confirmRemoveModal = false;
   let showTextEditorModal = false;
@@ -39,7 +41,6 @@
 
   function openFileManager(item) {
     selectItem(item);
-    accept = [item.target.type];
     showFileManager = true;
   }
 
@@ -67,6 +68,10 @@
     confirmRemoveModal = false;
     confirm && remove();
   }
+
+  function duplicateItem(item) {
+    dispatch("duplicate", item);
+  }
 </script>
 
 {#if item.target.type === 'text'}
@@ -78,6 +83,13 @@
   </div>
 {/if}
 
+<div
+  class="p-2 cursor-pointer hover:bg-secondary"
+  on:click="{duplicateItem.bind(null, item)}"
+>
+  <Icon icon="{MdContentCopy}" />
+</div>
+
 <div
   class="p-2 cursor-pointer hover:bg-secondary"
   on:click="{openFileManager.bind(null, item)}"