From 412845079d413a3f089c09085e5130cbba8d4196 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 12 Apr 2024 09:41:40 +0200
Subject: [PATCH 1/2] added copy download link button to details view

---
 frontend/src/components/Details/ActionBar.vue | 31 +++++++++-
 frontend/src/components/Details/Saves.vue     | 16 ++---
 .../src/components/Game/Card/ActionBar.vue    | 59 +++++++++----------
 frontend/src/services/api/rom.ts              | 37 ++++++------
 4 files changed, 87 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index d0624adf9..118277474 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -15,13 +15,37 @@ const emitter = inject<Emitter<Events>>("emitter");
 const auth = storeAuth();
 const emulation = ref(false);
 const playInfoIcon = ref("mdi-play");
-const emulationSupported = props.rom.platform_slug.toLowerCase() in platformSlugEJSCoreMap;
+const emulationSupported =
+  props.rom.platform_slug.toLowerCase() in platformSlugEJSCoreMap;
 
 function toggleEmulation() {
   emulation.value = !emulation.value;
   playInfoIcon.value = emulation.value ? "mdi-information" : "mdi-play";
   emitter?.emit("showEmulation", null);
 }
+
+async function copyDownloadLink(rom: Rom) {
+  const downloadLink = await romApi.downloadRom({
+    rom,
+    files: downloadStore.filesToDownloadMultiFileRom,
+    shareLink: true,
+  });
+  if (downloadLink) {
+    emitter?.emit("snackbarShow", {
+      msg: "Download link copied to clipboard!",
+      icon: "mdi-check-bold",
+      color: "green",
+      timeout: 2000,
+    });
+  } else {
+    emitter?.emit("snackbarShow", {
+      msg: `Unable to copy download link: ${downloadLink}`,
+      icon: "mdi-close-circle",
+      color: "red",
+      timeout: 4000,
+    });
+  }
+}
 </script>
 
 <template>
@@ -42,6 +66,11 @@ function toggleEmulation() {
         <v-icon icon="mdi-download" size="large" />
       </v-btn>
     </v-col>
+    <v-col>
+      <v-btn @click="copyDownloadLink(rom)" rounded="0" color="primary" block
+        ><v-icon icon="mdi-share-variant" size="large"
+      /></v-btn>
+    </v-col>
     <v-col>
       <v-tooltip
         class="tooltip"
diff --git a/frontend/src/components/Details/Saves.vue b/frontend/src/components/Details/Saves.vue
index 4515dd3d1..b1ff35a8d 100644
--- a/frontend/src/components/Details/Saves.vue
+++ b/frontend/src/components/Details/Saves.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { ref, inject } from "vue";
-import type { Emitter } from "mitt";
-
-import type { Events } from "@/types/emitter";
-import { formatBytes } from "@/utils";
+import type { SaveSchema } from "@/__generated__";
 import saveApi from "@/services/api/save";
 import storeRoms, { type Rom } from "@/stores/roms";
-
-import type { SaveSchema } from "@/__generated__";
+import type { Events } from "@/types/emitter";
+import { formatBytes } from "@/utils";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
 
 const props = defineProps<{ rom: Rom }>();
 const savesToUpload = ref<File[]>([]);
@@ -104,7 +102,9 @@ async function uploadSaves() {
       v-for="save in rom.user_saves"
       :key="save.id"
       :title="save.file_name"
-      :subtitle="`${save.emulator || 'unknown'} - ${formatBytes(save.file_size_bytes)}`"
+      :subtitle="`${save.emulator || 'unknown'} - ${formatBytes(
+        save.file_size_bytes
+      )}`"
     >
       <template v-slot:prepend>
         <v-checkbox
diff --git a/frontend/src/components/Game/Card/ActionBar.vue b/frontend/src/components/Game/Card/ActionBar.vue
index 038009abc..1b42a3a16 100644
--- a/frontend/src/components/Game/Card/ActionBar.vue
+++ b/frontend/src/components/Game/Card/ActionBar.vue
@@ -13,42 +13,41 @@ const downloadStore = storeDownload();
 </script>
 
 <template>
-    <v-row no-gutters>
-      <v-col class="pa-0">
+  <v-row no-gutters>
+    <v-col class="pa-0">
+      <v-btn
+        class="action-bar-btn"
+        @click="romApi.downloadRom({ rom })"
+        :disabled="downloadStore.value.includes(rom.id)"
+        icon="mdi-download"
+        size="x-small"
+        rounded="0"
+        variant="text"
+      />
+      <v-btn
+        class="action-bar-btn"
+        :href="`/play/${rom.id}`"
+        icon="mdi-play"
+        size="x-small"
+        rounded="0"
+        variant="text"
+      />
+    </v-col>
+    <v-menu location="bottom">
+      <template v-slot:activator="{ props }">
         <v-btn
           class="action-bar-btn"
-          @click="romApi.downloadRom({ rom })"
-          :disabled="downloadStore.value.includes(rom.id)"
-          icon="mdi-download"
+          :disabled="!auth.scopes.includes('roms.write')"
+          v-bind="props"
+          icon="mdi-dots-vertical"
           size="x-small"
           rounded="0"
           variant="text"
         />
-        <v-btn
-          v-if="rom.platform_slug.toLowerCase() in platformSlugEJSCoreMap"
-          class="action-bar-btn"
-          :href="`/play/${rom.id}`"
-          icon="mdi-play"
-          size="x-small"
-          rounded="0"
-          variant="text"
-        />
-      </v-col>
-      <v-menu location="bottom">
-        <template v-slot:activator="{ props }">
-          <v-btn
-            class="action-bar-btn"
-            :disabled="!auth.scopes.includes('roms.write')"
-            v-bind="props"
-            icon="mdi-dots-vertical"
-            size="x-small"
-            rounded="0"
-            variant="text"
-          />
-        </template>
-        <admin-menu :rom="rom" />
-      </v-menu>
-    </v-row>
+      </template>
+      <admin-menu :rom="rom" />
+    </v-menu>
+  </v-row>
 </template>
 
 <style scoped>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 09f55f79b..3edea620c 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -63,11 +63,7 @@ async function getRecentRoms(): Promise<{ data: CursorPage_RomSchema_ }> {
   });
 }
 
-async function getRom({
-  romId,
-}: {
-  romId: number;
-}): Promise<{ data: Rom }> {
+async function getRom({ romId }: { romId: number }): Promise<{ data: Rom }> {
   return api.get(`/roms/${romId}`);
 }
 
@@ -107,9 +103,11 @@ socket.on("download:complete", clearRomFromDownloads);
 async function downloadRom({
   rom,
   files = [],
+  shareLink = false,
 }: {
   rom: Rom;
   files?: string[];
+  shareLink?: boolean;
 }) {
   // Force download of all multirom-parts when no part is selected
   if (files.length == 0) {
@@ -123,17 +121,22 @@ async function downloadRom({
 
   const a = document.createElement("a");
   a.href = `/api/roms/${rom.id}/content/${rom.file_name}?${files_params}`;
-  a.click();
-
-  // Only connect socket if multi-file download
-  if (rom.multi && files.length > 1) {
-    if (!socket.connected) socket.connect();
-    storeDownload().add(rom.id);
-
-    // Clear download state after 60 seconds in case error/timeout
-    setTimeout(() => {
-      clearRomFromDownloads(rom);
-    }, 60 * 1000);
+  if (shareLink) {
+    navigator.clipboard.writeText(encodeURI(a.href));
+    return encodeURI(a.href);
+  } else {
+    a.click();
+
+    // Only connect socket if multi-file download
+    if (rom.multi && files.length > 1) {
+      if (!socket.connected) socket.connect();
+      storeDownload().add(rom.id);
+
+      // Clear download state after 60 seconds in case error/timeout
+      setTimeout(() => {
+        clearRomFromDownloads(rom);
+      }, 60 * 1000);
+    }
   }
 }
 
@@ -144,7 +147,7 @@ export type UpdateRom = Rom & {
 async function updateRom({
   rom,
   renameAsIGDB = false,
-  removeCover = false
+  removeCover = false,
 }: {
   rom: UpdateRom;
   renameAsIGDB?: boolean;

From b726bb5f5b6e006426f13ec37e27c2075442a26d Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Tue, 16 Apr 2024 23:47:39 +0200
Subject: [PATCH 2/2] extracted build download link to utils

---
 frontend/src/components/Details/ActionBar.vue | 39 ++++++++---------
 frontend/src/services/api/rom.ts              | 42 ++++++-------------
 frontend/src/utils/index.ts                   | 20 +++++++++
 3 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index 118277474..e1e18d0c8 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -5,7 +5,7 @@ import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import type { Rom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
-import { platformSlugEJSCoreMap } from "@/utils";
+import { getDownloadLink, platformSlugEJSCoreMap } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 
@@ -24,27 +24,22 @@ function toggleEmulation() {
   emitter?.emit("showEmulation", null);
 }
 
-async function copyDownloadLink(rom: Rom) {
-  const downloadLink = await romApi.downloadRom({
-    rom,
-    files: downloadStore.filesToDownloadMultiFileRom,
-    shareLink: true,
+function copyDownloadLink(rom: Rom) {
+  navigator.clipboard.writeText(
+    location.host +
+      encodeURI(
+        getDownloadLink({
+          rom,
+          files: downloadStore.filesToDownloadMultiFileRom,
+        })
+      )
+  );
+  emitter?.emit("snackbarShow", {
+    msg: "Download link copied to clipboard!",
+    icon: "mdi-check-bold",
+    color: "green",
+    timeout: 2000,
   });
-  if (downloadLink) {
-    emitter?.emit("snackbarShow", {
-      msg: "Download link copied to clipboard!",
-      icon: "mdi-check-bold",
-      color: "green",
-      timeout: 2000,
-    });
-  } else {
-    emitter?.emit("snackbarShow", {
-      msg: `Unable to copy download link: ${downloadLink}`,
-      icon: "mdi-close-circle",
-      color: "red",
-      timeout: 4000,
-    });
-  }
 }
 </script>
 
@@ -68,7 +63,7 @@ async function copyDownloadLink(rom: Rom) {
     </v-col>
     <v-col>
       <v-btn @click="copyDownloadLink(rom)" rounded="0" color="primary" block
-        ><v-icon icon="mdi-share-variant" size="large"
+        ><v-icon icon="mdi-content-copy" size="large"
       /></v-btn>
     </v-col>
     <v-col>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 3edea620c..03f78b7e5 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -9,6 +9,7 @@ import api from "@/services/api/index";
 import socket from "@/services/socket";
 import storeDownload from "@/stores/download";
 import type { Rom } from "@/stores/roms";
+import { getDownloadLink } from "@/utils";
 
 export const romApi = api;
 
@@ -103,40 +104,23 @@ socket.on("download:complete", clearRomFromDownloads);
 async function downloadRom({
   rom,
   files = [],
-  shareLink = false,
 }: {
   rom: Rom;
   files?: string[];
-  shareLink?: boolean;
 }) {
-  // Force download of all multirom-parts when no part is selected
-  if (files.length == 0) {
-    files = rom.files;
-  }
-
-  var files_params = "";
-  files.forEach((file) => {
-    files_params += `files=${file}&`;
-  });
-
   const a = document.createElement("a");
-  a.href = `/api/roms/${rom.id}/content/${rom.file_name}?${files_params}`;
-  if (shareLink) {
-    navigator.clipboard.writeText(encodeURI(a.href));
-    return encodeURI(a.href);
-  } else {
-    a.click();
-
-    // Only connect socket if multi-file download
-    if (rom.multi && files.length > 1) {
-      if (!socket.connected) socket.connect();
-      storeDownload().add(rom.id);
-
-      // Clear download state after 60 seconds in case error/timeout
-      setTimeout(() => {
-        clearRomFromDownloads(rom);
-      }, 60 * 1000);
-    }
+  a.href = getDownloadLink({ rom, files });
+  a.click();
+
+  // Only connect socket if multi-file download
+  if (rom.multi && files.length > 1) {
+    if (!socket.connected) socket.connect();
+    storeDownload().add(rom.id);
+
+    // Clear download state after 60 seconds in case error/timeout
+    setTimeout(() => {
+      clearRomFromDownloads(rom);
+    }, 60 * 1000);
   }
 }
 
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 031c8b7d5..05b3522aa 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,4 +1,5 @@
 import cronstrue from "cronstrue";
+import type { Rom } from "@/stores/roms";
 
 export const views: Record<
   number,
@@ -70,6 +71,25 @@ export function convertCronExperssion(expression: string) {
   return convertedExpression;
 }
 
+export function getDownloadLink({
+  rom,
+  files = [],
+}: {
+  rom: Rom;
+  files?: string[];
+}) {
+  // Force download of all multirom-parts when no part is selected
+  if (files.length == 0) {
+    files = rom.files;
+  }
+
+  var filesParams = "";
+  files.forEach((file) => {
+    filesParams += `files=${file}&`;
+  });
+  return `/api/roms/${rom.id}/content/${rom.file_name}?${filesParams}`;
+}
+
 /**
  * Format bytes as human-readable text.
  *