refactor: use the new useTemplateRef utility

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Sep 6, 2024 · 1970a7e · 1970a7e
1 parent 9dc36c0
commit 1970a7e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { transfer } from 'comlink';
-import { shallowRef, watch } from 'vue';
+import { shallowRef, watch, useTemplateRef } from 'vue';
 import { blurhashDecoder, canvasDrawer } from '@/plugins/workers';
 import { BLURHASH_DEFAULT_HEIGHT, BLURHASH_DEFAULT_WIDTH, BLURHASH_DEFAULT_PUNCH } from '@/store';
 
@@ -26,7 +26,7 @@ const props = withDefaults(
 );
 
 const error = shallowRef(false);
-const canvas = shallowRef<HTMLCanvasElement>();
+const canvas = useTemplateRef<HTMLCanvasElement>('canvas');
 let offscreen: OffscreenCanvas | undefined;
 
 watch([props, canvas], async () => {

diff --git a/frontend/src/components/Playback/DraggableQueue.vue b/frontend/src/components/Playback/DraggableQueue.vue
@@ -43,12 +43,12 @@
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import Sortable from 'sortablejs';
-import { onBeforeUnmount, shallowRef, watch } from 'vue';
+import { onBeforeUnmount, watch, useTemplateRef } from 'vue';
 import { isNumber } from '@/utils/validation';
 import { playbackManager } from '@/store/playback-manager';
 
 let sortable: Sortable | undefined;
-const container = shallowRef<HTMLSpanElement>();
+const container = useTemplateRef<HTMLSpanElement>('container');
 
 /**
  * Destroys the sortable instance

diff --git a/frontend/src/components/Playback/MusicVisualizer.vue b/frontend/src/components/Playback/MusicVisualizer.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, watch } from 'vue';
+import { onBeforeUnmount, useTemplateRef, watch } from 'vue';
 import AudioMotionAnalyzer from 'audiomotion-analyzer';
 import { mediaWebAudio } from '@/store';
 
 let visualizerInstance: AudioMotionAnalyzer | undefined;
-const visualizerElement = shallowRef<HTMLDivElement>();
+const visualizerElement = useTemplateRef<HTMLDivElement>('visualizerElement');
 
 /**
  * Destroy the visualizer instance.

diff --git a/frontend/src/components/lib/JVirtual/JVirtual.vue b/frontend/src/components/lib/JVirtual/JVirtual.vue
@@ -37,7 +37,8 @@ import {
   onBeforeUnmount,
   shallowRef,
   watch,
-  type StyleValue
+  type StyleValue,
+  useTemplateRef
 } from 'vue';
 import { wrap } from 'comlink';
 import {
@@ -118,8 +119,8 @@ const props = withDefaults(
 /**
  * == TEMPLATE REFS ==
  */
-const rootRef = shallowRef<HTMLElement>();
-const probeRef = shallowRef<HTMLElement>();
+const rootRef = useTemplateRef<HTMLElement>('rootRef');
+const probeRef = useTemplateRef<HTMLElement>('probeRef');
 
 /**
  * == STATE REFS ==