From dac65346845efff80f8d7f423ad3690863c62d20 Mon Sep 17 00:00:00 2001
From: skarab42 <skarab@onlfait.ch>
Date: Sun, 14 Feb 2021 16:31:21 +0100
Subject: [PATCH] feat(timeline): Duplicate asset

---
 .../components/Anime/Timeline/Editor.svelte      | 12 ++++++++++++
 .../Anime/Timeline/Editor/Timeline.svelte        |  1 +
 .../Anime/Timeline/Editor/Timeline/Item.svelte   |  1 +
 .../Timeline/Editor/Timeline/ItemButtons.svelte  | 16 ++++++++++++++--
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/front-src/client/components/Anime/Timeline/Editor.svelte b/front-src/client/components/Anime/Timeline/Editor.svelte
index f42c22d2..a18c5014 100644
--- a/front-src/client/components/Anime/Timeline/Editor.svelte
+++ b/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>
diff --git a/front-src/client/components/Anime/Timeline/Editor/Timeline.svelte b/front-src/client/components/Anime/Timeline/Editor/Timeline.svelte
index d4d839e6..ec9ed21d 100644
--- a/front-src/client/components/Anime/Timeline/Editor/Timeline.svelte
+++ b/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
     />
diff --git a/front-src/client/components/Anime/Timeline/Editor/Timeline/Item.svelte b/front-src/client/components/Anime/Timeline/Editor/Timeline/Item.svelte
index 3dcf341c..a67ebb32 100644
--- a/front-src/client/components/Anime/Timeline/Editor/Timeline/Item.svelte
+++ b/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}"
diff --git a/front-src/client/components/Anime/Timeline/Editor/Timeline/ItemButtons.svelte b/front-src/client/components/Anime/Timeline/Editor/Timeline/ItemButtons.svelte
index 1b2bb2f9..fbedf5c4 100644
--- a/front-src/client/components/Anime/Timeline/Editor/Timeline/ItemButtons.svelte
+++ b/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)}"