refactor: minor refactors

* watch ref directly on MediaSourceSeelector
* Use useClipboard composable

frontend/locales/en-US.json

@@ -37,6 +37,7 @@
   "castAndCrew": "Cast & crew",
   "clipboardFail": "Failed to copy to clipboard",
   "clipboardSuccess": "Copied to clipboard",
+  "clipboardUnsupported": "Copying to clipboard is unsupported in this browser",
   "close": "Close",
   "collectionEmpty": "This collection is empty",
   "collections": "Collections",
@@ -209,10 +210,10 @@
   },
   "manualLogin": "Manual login",
   "mediaInfo": "Media Info",
+  "mediaInfoAspectRatio": "Aspect ratio",
   "mediaInfoAudioChannelLayout": "Layout",
   "mediaInfoAudioChannels": "Channels",
   "mediaInfoAudioSampleRate": "Sample rate",
-  "mediaInfoAspectRatio": "Aspect ratio",
   "mediaInfoFileContainer": "Container",
   "mediaInfoFileFormats": "Format",
   "mediaInfoFilePath": "Path",

frontend/src/components/Item/ItemMenu.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { computed, getCurrentInstance, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useClipboard } from '@vueuse/core';
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import IMdiPlaySpeed from 'virtual:icons/mdi/play-speed';
 import IMdiArrowExpandUp from 'virtual:icons/mdi/arrow-expand-up';
@@ -359,12 +359,20 @@ const copyStreamURLAction = {
   action: async (): Promise<void> => {
     if (menuProps.item.Id) {
       const downloadHref = getItemDownloadObject(menuProps.item.Id);
+      const clipboard = useClipboard();
 
-      if (downloadHref?.url) {
-        await useClipboardWrite(downloadHref.url);
-      } else {
-        console.error('Unable to get stream URL for selected item');
-        useSnackbar(errorMessage, 'error');
+      try {
+        if (clipboard.isSupported.value) {
+          if (downloadHref?.url) {
+            await clipboard.copy(downloadHref.url);
+          }
+        } else {
+          throw new ReferenceError('Unsupported clipboard operation');
+        }
+      } catch (error) {
+        error instanceof ReferenceError
+          ? useSnackbar(t('clipboardUnsupported'), 'error')
+          : useSnackbar(errorMessage, 'error');
       }
     }
   }

frontend/src/components/Item/MediaSourceSelector.vue

@@ -30,19 +30,16 @@ const emits = defineEmits<{
   (e: 'input', newIndex: number): void;
 }>();
 
-const defaultIndex = selectProps.defaultSourceIndex ?? 0;
-
-const currentSource = ref<MediaSourceInfo>(selectProps.sources[defaultIndex]);
+const currentSource = ref(
+  selectProps.sources[selectProps.defaultSourceIndex ?? 0]
+);
 const selectSources = computed(() => getItemizedSelect(selectProps.sources));
 
-watch(
-  () => currentSource.value,
-  (newSource) => {
-    const newIndex = selectProps.sources.findIndex(
-      (s) => s.Id === newSource.Id
-    );
+watch(currentSource, () => {
+  const newIndex = selectProps.sources.findIndex(
+    (s) => s.Id === currentSource.value.Id
+  );
 
-    emits('input', newIndex);
-  }
-);
+  emits('input', newIndex);
+});
 </script>

frontend/src/composables/index.ts

@@ -11,7 +11,7 @@ export { useRouter } from './use-router';
  * The definition of these composables are in the relevant components themselves,
  * so the code that tracks the sate of the component are alongside the component itself.
  *
- * We could re-define these functrions in this folder as well, but we would lose access to the
+ * We could re-define these functions in this folder as well, but we would lose access to the
  * JSDoc of the original functions
  */
 export { useConfirmDialog } from '@/components/Dialogs/ConfirmDialog.vue';