mirror of
https://github.com/maciejpedzich/spotifyplaylistarchive.com.git
synced 2024-09-19 18:16:19 +02:00
Display an info tooltip if URLs cannot be copied
This commit is contained in:
parent
58f406115f
commit
7d1538a35e
@ -11,7 +11,8 @@ const route = useRoute();
|
|||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
|
|
||||||
const { copy } = useClipboard();
|
const { copy } = useClipboard();
|
||||||
const { canCopyToClipboard } = useCanCopyToClipboard();
|
const { isSupported, clipboardWirtePermission, canCopyToClipboard } =
|
||||||
|
useCanCopyToClipboard();
|
||||||
|
|
||||||
const playlistId = route.params.playlistId as string;
|
const playlistId = route.params.playlistId as string;
|
||||||
const commitSha = route.params.commitSha 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 numberFormatter = new Intl.NumberFormat('en-US');
|
||||||
const humanizeNumber = (num: number) => numberFormatter.format(num);
|
const humanizeNumber = (num: number) => numberFormatter.format(num);
|
||||||
|
|
||||||
@ -86,12 +95,20 @@ const copyTrackUrls = async () => {
|
|||||||
</ul>
|
</ul>
|
||||||
<div class="my-2 flex justify-content-center">
|
<div class="my-2 flex justify-content-center">
|
||||||
<Button
|
<Button
|
||||||
v-if="canCopyToClipboard"
|
v-tooltip.hover="copyTrackUrlsTooltip"
|
||||||
class="p-button-text"
|
class="p-button-text"
|
||||||
label="Copy track URLs"
|
label="Copy track URLs"
|
||||||
icon="pi pi-clone"
|
icon="pi pi-clone"
|
||||||
|
:disabled="!canCopyToClipboard"
|
||||||
@click="copyTrackUrls"
|
@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
|
<a
|
||||||
id="export-to-json"
|
id="export-to-json"
|
||||||
class="p-component p-button p-button-text"
|
class="p-component p-button p-button-text"
|
||||||
|
@ -2,8 +2,10 @@ import { defineNuxtPlugin } from '#app';
|
|||||||
|
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
import ToastService from 'primevue/toastservice';
|
import ToastService from 'primevue/toastservice';
|
||||||
|
import Tooltip from 'primevue/tooltip';
|
||||||
|
|
||||||
export default defineNuxtPlugin((nuxtApp) => {
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
|
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
|
||||||
nuxtApp.vueApp.use(ToastService);
|
nuxtApp.vueApp.use(ToastService);
|
||||||
|
nuxtApp.vueApp.directive('tooltip', Tooltip);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user