From 7d1538a35ecb41391a28e6e8d815e6463dd378a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <dnalop.me@gmail.com>
Date: Mon, 5 Sep 2022 04:23:05 +0200
Subject: [PATCH] Display an info tooltip if URLs cannot be copied

---
 .../snapshots/show/[commitSha].vue            | 21 +++++++++++++++++--
 plugins/primevue.ts                           |  2 ++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue b/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue
index 91fdd1b..40ed135 100644
--- a/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue
+++ b/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue
@@ -11,7 +11,8 @@ const route = useRoute();
 const toast = useToast();
 
 const { copy } = useClipboard();
-const { canCopyToClipboard } = useCanCopyToClipboard();
+const { isSupported, clipboardWirtePermission, canCopyToClipboard } =
+  useCanCopyToClipboard();
 
 const playlistId = route.params.playlistId as string;
 const commitSha = route.params.commitSha as string;
@@ -46,6 +47,14 @@ const totalTrackDuration = computed(() =>
   )
 );
 
+const copyTrackUrlsTooltip = computed(() =>
+  !isSupported.value
+    ? "Your browser doesn't support this feature"
+    : clipboardWirtePermission.value !== 'granted'
+    ? 'You need to grant this website permission to copy to clipboard'
+    : null
+);
+
 const numberFormatter = new Intl.NumberFormat('en-US');
 const humanizeNumber = (num: number) => numberFormatter.format(num);
 
@@ -86,12 +95,20 @@ const copyTrackUrls = async () => {
         </ul>
         <div class="my-2 flex justify-content-center">
           <Button
-            v-if="canCopyToClipboard"
+            v-tooltip.hover="copyTrackUrlsTooltip"
             class="p-button-text"
             label="Copy track URLs"
             icon="pi pi-clone"
+            :disabled="!canCopyToClipboard"
             @click="copyTrackUrls"
           />
+          <span
+            v-if="!canCopyToClipboard"
+            v-tooltip.top="copyTrackUrlsTooltip"
+            class="flex align-items-center text-blue-300"
+          >
+            <i class="pi pi-info-circle"></i>
+          </span>
           <a
             id="export-to-json"
             class="p-component p-button p-button-text"
diff --git a/plugins/primevue.ts b/plugins/primevue.ts
index c796b12..e625cbf 100644
--- a/plugins/primevue.ts
+++ b/plugins/primevue.ts
@@ -2,8 +2,10 @@ import { defineNuxtPlugin } from '#app';
 
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
+import Tooltip from 'primevue/tooltip';
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
   nuxtApp.vueApp.use(ToastService);
+  nuxtApp.vueApp.directive('tooltip', Tooltip);
 });