Use v-show instead of v-if for width-based condition (#884)

* Use v-show instead of v-if for width-based condition

Use v-show instead of v-if to fix server-client mismatch

* Fix waveform not loading on SSR

src/components/License/VLicense.vue

@@ -17,7 +17,7 @@
         :size="4"
       />
     </div>
-    <span v-if="!hideName" class="name" :aria-label="licenseName.readable">
+    <span v-show="!hideName" class="name" :aria-label="licenseName.readable">
       {{ licenseName.full }}
     </span>
   </div>

src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { ref, onMounted } from '@nuxtjs/composition-api'
+import { ref, onMounted, useContext, computed } from '@nuxtjs/composition-api'
 
 import { rand, hash } from '~/utils/prng'
 import { lerp, dist, bezier } from '~/utils/math'
@@ -49,6 +49,14 @@ export default {
     },
   },
   setup(props) {
+    const { i18n } = useContext()
+    const helpText = computed(() =>
+      i18n.t('audio-thumbnail.alt', {
+        title: props.audio.title,
+        creator: props.audio.creator,
+      })
+    )
+
     /* Switching */
 
     const imgEl = ref(null)
@@ -95,15 +103,8 @@ export default {
       dotCount,
       offset,
       radius,
+      helpText,
     }
   },
-  computed: {
-    helpText() {
-      return this.$t('audio-thumbnail.alt', {
-        title: this.audio.title,
-        creator: this.audio.creator,
-      })
-    },
-  },
 }
 </script>

src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -8,7 +8,7 @@
       :class="isLarge ? 'w-30 me-6' : 'w-20 me-4'"
     >
       <VAudioThumbnail :audio="audio" />
-      <div v-if="isSmall" class="absolute bottom-0 rtl:left-0 ltr:right-0">
+      <div v-show="isSmall" class="absolute bottom-0 rtl:left-0 ltr:right-0">
         <slot name="play-pause" size="tiny" />
       </div>
     </div>
@@ -43,11 +43,11 @@
           <div class="part-a">
             <i18n tag="span" path="audio-track.creator">
               <template #creator>{{ audio.creator }}</template> </i18n
-            ><span v-if="isLarge" class="mx-2">{{ $t('interpunct') }}</span>
+            ><span v-show="isLarge" class="mx-2">{{ $t('interpunct') }}</span>
           </div>
 
           <div class="part-b inline-flex flex-row items-center">
-            <span v-if="isSmall">
+            <span v-show="isSmall">
               <span
                 class="inline-block text-dark-charcoal font-semibold bg-dark-charcoal-06 p-1 rounded-sm"
                 >{{ timeFmt(audio.duration) }}</span

src/pages/search/audio.vue

@@ -31,6 +31,7 @@ import {
 } from '@nuxtjs/composition-api'
 import { useLoadMore } from '~/composables/use-load-more'
 import { isMinScreen } from '~/composables/use-media-query'
+import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 import { propTypes } from './search-page.types'
 
 import VAudioTrack from '~/components/VAudioTrack/VAudioTrack.vue'
@@ -56,8 +57,15 @@ const AudioSearch = defineComponent({
       Object.values(props.mediaResults?.audio?.items ?? [])
     )
     const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: false })
+
+    // On SSR, we set the size to small if the User Agent is mobile, otherwise we set the size to medium.
+    const isMobile = useBrowserIsMobile()
     const audioTrackSize = computed(() => {
-      return !isMinScreenMd.value ? 's' : props.isFilterVisible ? 'l' : 'm'
+      return !isMinScreenMd.value && isMobile
+        ? 's'
+        : props.isFilterVisible
+        ? 'l'
+        : 'm'
     })
 
     const isError = computed(() => !!props.fetchState.fetchingError)

test/unit/specs/components/AudioTrack/audio-track.spec.js

@@ -114,6 +114,9 @@ describe('AudioTrack', () => {
     options = {
       propsData: props,
       stubs,
+      mocks: {
+        $nuxt: { context: { i18n: { t: jest.fn() } } },
+      },
     }
   })
 

test/unit/specs/components/v-license.spec.js

@@ -27,7 +27,7 @@ describe('VLicense', () => {
     options.props.hideName = true
     const { container } = render(VLicense, options)
     const licenseName = screen.queryByLabelText('license-readable-names.by')
-    expect(licenseName).not.toBeInTheDocument()
+    expect(licenseName).not.toBeVisible()
     const licenseIcons = container.querySelectorAll('svg')
     expect(licenseIcons).toHaveLength(2)
   })