Merge pull request #810 from rommapp/feature/copy_download_link

Added a button to copy download link
rommapp · Apr 17, 2024 · fdac52a · fdac52a
2 parents c65e530 + df68141
commit fdac52a
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 57 deletions.
diff --git 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";
 
@@ -15,13 +15,32 @@ 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);
 }
+
+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,
+  });
+}
 </script>
 
 <template>
@@ -42,6 +61,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-content-copy" 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
@@ -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
@@ -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
@@ -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;
 
@@ -63,11 +64,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}`);
 }
 
@@ -111,18 +108,8 @@ async function downloadRom({
   rom: Rom;
   files?: string[];
 }) {
-  // 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}`;
+  a.href = getDownloadLink({ rom, files });
   a.click();
 
   // Only connect socket if multi-file download
@@ -144,7 +131,7 @@ export type UpdateRom = Rom & {
 async function updateRom({
   rom,
   renameAsIGDB = false,
-  removeCover = false
+  removeCover = false,
 }: {
   rom: UpdateRom;
   renameAsIGDB?: boolean;

diff --git 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.
  *