Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: carriage returns not rendered as new lines (#1585)

Browse source
This commit is contained in:
Phan An 2022-11-14 14:37:07 +01:00 committed by GitHub
parent 8f9eafe906
commit 02c5e79dac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/assets/js/components/ui/LyricsPane.vue
View file

@ -3,7 +3,7 @@
<div class="content">
<template v-if="song">
<div v-show="song.lyrics">
<pre ref="lyricsContainer">{{ song.lyrics }}</pre>
<pre ref="lyricsContainer">{{ lyrics }}</pre>
<Magnifier @in="zoomLevel++" @out="zoomLevel--" class="magnifier"/>
</div>
<p v-if="song.id && !song.lyrics" class="none text-secondary">
@ -22,22 +22,30 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent, onMounted, ref, toRefs, watch } from 'vue'
import { computed, 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'))
const { isAdmin } = useAuthorization()
const props = defineProps<{ song: Song }>()
const { song } = toRefs(props)
const { isAdmin } = useAuthorization()
const lyricsContainer = ref<HTMLElement>()
const zoomLevel = ref(preferences.lyricsZoomLevel || 1)
const showEditSongForm = () => eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', song.value, 'lyrics')
const lyrics = computed(() => {
// This trick converts CRs (\r) to LF (\n) using JavaScript's implicit DOM-writing behavior
const div = document.createElement('div')
div.innerHTML = song.value.lyrics
return div.innerHTML
})
const setFontSize = () => {
if (lyricsContainer.value) {
lyricsContainer.value.style.fontSize = `${1 + (zoomLevel.value - 1) * 0.2}rem`