feat: persist lyrics zoom level (#1556)

resources/assets/js/components/ui/LyricsPane.vue

@@ -22,9 +22,10 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, toRefs, watch } from 'vue'
+import { defineAsyncComponent, onMounted, ref, toRefs, watch } from 'vue'
 import { eventBus } from '@/utils'
 import { useAuthorization } from '@/composables'
+import { preferenceStore as preferences } from '@/stores'
 
 const Magnifier = defineAsyncComponent(() => import('@/components/ui/Magnifier.vue'))
 
@@ -33,11 +34,22 @@ const props = defineProps<{ song: Song }>()
 const { song } = toRefs(props)
 
 const lyricsContainer = ref<HTMLElement>()
-const zoomLevel = ref(0)
+const zoomLevel = ref(preferences.lyricsZoomLevel || 1)
 
 const showEditSongForm = () => eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', song.value, 'lyrics')
 
-watch(zoomLevel, level => lyricsContainer.value && (lyricsContainer.value.style.fontSize = `${1 + level * 0.2}em`))
+const setFontSize = () => {
+  if (lyricsContainer.value) {
+    lyricsContainer.value.style.fontSize = `${1 + (zoomLevel.value - 1) * 0.2}rem`
+  }
+}
+
+watch(zoomLevel, level => {
+  setFontSize()
+  preferences.lyricsZoomLevel = level
+})
+
+onMounted(() => setFontSize())
 </script>
 
 <style lang="scss" scoped>

resources/assets/js/components/ui/__snapshots__/LyricsPane.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`renders 1`] = `
 <article id="lyrics" data-v-22adf296="">
   <div class="content" data-v-22adf296="">
-    <div data-v-22adf296=""><pre data-v-22adf296="">Foo bar baz qux</pre><span class="magnifier" data-v-fcc3eddd="" data-v-22adf296=""><button title="Zoom out" type="button" data-v-fcc3eddd=""><br data-testid="icon" icon="[object Object]" data-v-fcc3eddd=""></button><button title="Zoom in" type="button" data-v-fcc3eddd=""><br data-testid="icon" icon="[object Object]" data-v-fcc3eddd=""></button></span></div>
+    <div data-v-22adf296=""><pre data-v-22adf296="" style="font-size: 1rem;">Foo bar baz qux</pre><span class="magnifier" data-v-fcc3eddd="" data-v-22adf296=""><button title="Zoom out" type="button" data-v-fcc3eddd=""><br data-testid="icon" icon="[object Object]" data-v-fcc3eddd=""></button><button title="Zoom in" type="button" data-v-fcc3eddd=""><br data-testid="icon" icon="[object Object]" data-v-fcc3eddd=""></button></span></div>
     <!--v-if-->
   </div>
 </article>

resources/assets/js/stores/preferenceStore.ts

@@ -14,6 +14,7 @@ interface Preferences extends Record<string, any> {
   transcodeOnMobile: boolean
   supportBarNoBugging: boolean
   showAlbumArtOverlay: boolean
+  lyricsZoomLevel: number | null
   theme?: Theme['id'] | null
 }
 
@@ -35,6 +36,7 @@ const preferenceStore = {
     transcodeOnMobile: false,
     supportBarNoBugging: false,
     showAlbumArtOverlay: true,
+    lyricsZoomLevel: 1,
     theme: null
   }),