Use toRefs to preserve reactivity of props.audio

WordPress · Sep 5, 2023 · 2219a4e · 2219a4e
1 parent b84cea0
commit 2219a4e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { ref, onMounted, defineComponent, PropType } from "vue"
+import { toRefs, ref, onMounted, defineComponent, PropType } from "vue"
 
 import { rand, hash } from "~/utils/prng"
 import { lerp, dist, bezier, Point } from "~/utils/math"
@@ -60,7 +60,8 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
+    const { audio } = toRefs(props)
+    const { isHidden: shouldBlur } = useSensitiveMedia(audio)
 
     const i18n = useI18n()
     const helpText = (

diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue"
+import { toRefs, defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 
@@ -42,7 +42,8 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.audio)
+    const { audio } = toRefs(props)
+    const { isHidden: shouldBlur } = useSensitiveMedia(audio)
 
     return {
       shouldBlur,

diff --git a/frontend/src/composables/use-sensitive-media.ts b/frontend/src/composables/use-sensitive-media.ts
@@ -1,4 +1,4 @@
-import { computed } from "vue"
+import { computed, unref, Ref } from "vue"
 
 import type { Media } from "~/types/media"
 
@@ -7,14 +7,17 @@ import { useAnalytics } from "~/composables/use-analytics"
 
 import type { SensitiveMediaVisibility } from "~/constants/content-safety"
 
+type SensitiveFields = Pick<Media, "id" | "sensitivity" | "isSensitive">
+
 /**
  * A helper composable for working with sensitive media.
  * Provides the current visibility of a sensitive media,
  * along with toggles for hiding/revealing the media.
  */
 export function useSensitiveMedia(
-  media: Pick<Media, "id" | "sensitivity" | "isSensitive"> | null
+  rawMedia: SensitiveFields | Ref<SensitiveFields> | null
 ) {
+  const media = unref(rawMedia)
   const uiStore = useUiStore()
   const { sendCustomEvent } = useAnalytics()