Added reverse playlist button in playlist editor

playlist-editor/src/components/PlaylistEditor.svelte

@@ -10,6 +10,7 @@
   import PlaylistPlusIcon from "./icons/PlaylistPlusIcon.svelte";
   import PlusMultiple from "./icons/PlusMultiple.svelte";
   import SaveIcon from "./icons/SaveIcon.svelte";
+  import ReverseIcon from "./icons/ReverseIcon.svelte";
   import LoadingModal from "./LoadingModal.svelte";
   import Modal from "./Modal.svelte";
   import PlaylistVideo from "./PlaylistVideo.svelte";
@@ -128,6 +129,15 @@
     modalType = ModalType.Export;
   }
 
+  async function reversePlaylist() {
+    let reversed = new Array(videos.length);
+    for(let i = 0; i < videos.length; i++) {
+      let r = videos.length - i - 1;
+      reversed[i] = videos[r];
+    }
+    videos = reversed;
+  }
+
   async function savePlaylist() {
     const videoIds = videos.map((video) => video.videoId.toString());
     playlist = { ...playlist, videos: videoIds };
@@ -196,6 +206,12 @@
         <FloatingButton on:click={displayExport} title="Export videos"
           ><ClipboardMultiple /></FloatingButton
         >
+        {#if videos.length > 1}
+        <FloatingButton
+          on:click={reversePlaylist}
+          title="Reverse order"><ReverseIcon /></FloatingButton
+        >
+        {/if}
         <FloatingButton
           on:click={savePlaylist}
           title="Save the playlist"

playlist-editor/src/components/icons/ReverseIcon.svelte

@@ -0,0 +1,4 @@
+<svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M 6.164062,0 3.0644531,4.8320311 0,9.6855465 4.0312497,9.7597654 V 23.999999 H 7.9902341 V 9.8183594 L 12,9.8632814 9.1015622,4.921875 Z" />
+    <path fill="currentColor" d="M 16.03125,0 V 14.240234 L 12,14.314452 l 3.064452,4.853517 3.09961,4.83203 2.937499,-4.921874 2.898438,-4.941406 -4.009765,0.04492 V 0 Z" />
+</svg>