Merge pull request #846 from rommapp/feature/copy-download-link

Copy download link dialog

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   mariadb:
     image: mariadb:latest

frontend/package-lock.json

@@ -4106,9 +4106,9 @@
       }
     },
     "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "dev": true,
       "dependencies": {
         "jake": "^10.8.5"

frontend/src/components/Details/ActionBar.vue

@@ -24,22 +24,28 @@ function toggleEmulation() {
   emitter?.emit("showEmulation", null);
 }
 
-function copyDownloadLink(rom: Rom) {
-  navigator.clipboard.writeText(
+async function copyDownloadLink(rom: Rom) {
+  const downloadLink =
+    location.protocol +
+    "//" +
     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,
-  });
+    encodeURI(
+      getDownloadLink({
+        rom,
+        files: downloadStore.filesToDownloadMultiFileRom,
+      })
+    );
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(downloadLink);
+    emitter?.emit("snackbarShow", {
+      msg: "Download link copied to clipboard!",
+      icon: "mdi-check-bold",
+      color: "green",
+      timeout: 2000,
+    });
+  } else {
+    emitter?.emit("showCopyDownloadLinkDialog", downloadLink);
+  }
 }
 </script>
 

frontend/src/components/Dialog/Rom/CopyDownloadLink.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+const { xs, mdAndDown, lgAndUp } = useDisplay();
+const show = ref(false);
+const link = ref("");
+
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showCopyDownloadLinkDialog", (downloadLink) => {
+  show.value = true;
+  link.value = downloadLink;
+});
+
+function closeDialog() {
+  show.value = false;
+  link.value = "";
+}
+</script>
+
+<template>
+  <v-dialog
+    :modelValue="show"
+    width="auto"
+    @click:outside="closeDialog"
+    @keydown.esc="closeDialog"
+    no-click-animation
+  >
+    <v-card
+      rounded="0"
+      :class="{
+        'delete-content': lgAndUp,
+        'delete-content-tablet': mdAndDown,
+        'delete-content-mobile': xs,
+      }"
+    >
+      <v-toolbar density="compact" class="bg-terciary">
+        <v-row class="align-center" no-gutters>
+          <v-col cols="9" xs="9" sm="10" md="10" lg="11">
+            <v-icon icon="mdi-content-copy" class="ml-5" />
+          </v-col>
+          <v-col>
+            <v-btn
+              @click="closeDialog"
+              class="bg-terciary"
+              rounded="0"
+              variant="text"
+              icon="mdi-close"
+              block
+            />
+          </v-col>
+        </v-row>
+      </v-toolbar>
+      <v-divider class="border-opacity-25" :thickness="1" />
+      <v-card-text>
+        <v-row class="justify-center pa-2" no-gutters>
+          <span>Can't copy link to clipboard, copy it manually:</span>
+        </v-row>
+        <v-row class="justify-center pa-2" no-gutters>
+          <span class="bg-terciary py-3 px-5">{{ link }}</span>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.delete-content {
+  width: 900px;
+  max-height: 600px;
+}
+
+.delete-content-tablet {
+  width: 570px;
+  max-height: 600px;
+}
+
+.delete-content-mobile {
+  width: 85vw;
+  max-height: 600px;
+}
+.scroll {
+  overflow-y: scroll;
+}
+</style>

frontend/src/types/emitter.d.ts

@@ -21,6 +21,7 @@ export type Events = {
   showSelectSourceDialog: SearchRomSchema;
   showSearchRomDialog: null;
   showEditRomDialog: Rom;
+  showCopyDownloadLinkDialog: string;
   showDeleteRomDialog: Rom[];
   showUploadRomDialog: Platform | null;
   showAddPlatformDialog: null;

frontend/src/views/Home.vue

@@ -11,6 +11,7 @@ import DeletePlatformDialog from "@/components/Dialog/Platform/DeletePlatform.vu
 import DeleteRomDialog from "@/components/Dialog/Rom/DeleteRom.vue";
 import EditRomDialog from "@/components/Dialog/Rom/EditRom.vue";
 import MatchRomDialog from "@/components/Dialog/Rom/MatchRom/MatchRom.vue";
+import CopyRomDownloadLinkDialog from "@/components/Dialog/Rom/CopyDownloadLink.vue";
 import SearchRomDialog from "@/components/Dialog/Rom/SearchRom.vue";
 import UploadRomDialog from "@/components/Dialog/Rom/UploadRom.vue";
 import CreateUserDialog from "@/components/Dialog/User/CreateUser.vue";
@@ -82,6 +83,7 @@ onMounted(() => {
   <delete-platform-dialog />
   <search-rom-dialog />
   <match-rom-dialog />
+  <copy-rom-download-link-dialog />
   <upload-rom-dialog />
   <edit-rom-dialog />
   <delete-rom-dialog />