MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleanup HTML templates

This commit is contained in:
Kasper Seweryn 2022-11-26 23:16:46 +00:00
parent fb298be9a5
commit c2f351ea6b
34 changed files with 113 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/admin/SignupFormBuilder.vue
View File

@ -45,7 +45,7 @@ if (!value.value?.fields) {
const addField = () => {
value.value.fields.push({
label: t('components.admin.SignupFormBuilder.label.additionalField') + ' ' + (value.value.fields.length + 1),
label: t('components.admin.SignupFormBuilder.label.additionalField', { fieldNumber: value.value.fields.length + 1 }),
required: true,
input_type: 'short_text'
})

4
front/src/components/audio/ChannelCard.vue
View File

@ -70,9 +70,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
>
{{ $t('components.audio.ChannelCard.meta.episodes', {episode_count: object.artist.tracks_count}) }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.audio.ChannelCard.meta.tracks', {tracks_count: object.artist?.tracks_count}) }}
</span>
<tags-list

12
front/src/components/audio/LibraryFollowButton.vue
View File

@ -38,19 +38,13 @@ const toggle = () => {
@click.stop="toggle"
>
<i class="heart icon" />
<span
v-if="isApproved"
>
<span v-if="isApproved">
{{ $t('components.audio.LibraryFollowButton.button.unfollow') }}
</span>
<span
v-else-if="isPending"
>
<span v-else-if="isPending">
{{ $t('components.audio.LibraryFollowButton.button.cancel') }}
</span>
<span
v-else
>
<spanv-else>
{{ $t('components.audio.LibraryFollowButton.button.follow') }}
</span>
</button>

12
front/src/components/audio/PlayButton.vue
View File

@ -198,12 +198,12 @@ const openMenu = () => {
@click.stop.prevent="$router.push(`/library/tracks/${track?.id}/`)"
>
<i class="info icon" />
<span
v-if="track.artist?.content_category === 'podcast'"
>{{ $t('components.audio.PlayButton.button.episodeDetails') }}</span>
<span
v-else
>{{ $t('components.audio.PlayButton.button.trackDetails') }}</span>
<span v-if="track.artist?.content_category === 'podcast'">
{{ $t('components.audio.PlayButton.button.episodeDetails') }}
</span>
<span v-else>
{{ $t('components.audio.PlayButton.button.trackDetails') }}
</span>
</button>
<div class="divider" />
<button

8
front/src/components/audio/artist/Card.vue
View File

@ -62,14 +62,10 @@ const imageUrl = computed(() => cover.value?.urls.original
/>
</div>
<div class="extra content">
<span
v-if="artist.content_category === 'music'"
>
<span v-if="artist.content_category === 'music'">
{{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
</span>
<play-button

8
front/src/components/auth/ApplicationForm.vue
View File

@ -202,14 +202,10 @@ const allScopes = computed(() => {
:class="['ui', {'loading': isLoading}, 'success', 'button']"
type="submit"
>
<span
v-if="app !== null"
>
<span v-if="app !== null">
{{ $t('components.auth.ApplicationForm.button.update') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.auth.ApplicationForm.button.create') }}
</span>
</button>

5
front/src/components/auth/Settings.vue
View File

@ -665,8 +665,9 @@ fetchOwnedApps()
>
{{ $t('components.auth.Settings.button.remove') }}
<template #modal-header>
<p />
{{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
<p>
{{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
</p>
</template>
<template #modal-content>
<p>

8
front/src/components/channels/AlbumModal.vue
View File

@ -33,14 +33,10 @@ const albumForm = ref()
class="small"
>
<h4 class="header">
<span
v-if="channel.content_category === 'podcast'"
>
<span v-if="channel.content_category === 'podcast'">
{{ $t('components.channels.AlbumModal.header.newSeries') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.channels.AlbumModal.header.newAlbum') }}
</span>
</h4>

12
front/src/components/channels/AlbumSelect.vue
View File

@ -47,12 +47,12 @@ watch(() => props.channel, fetchData, { immediate: true })
<template>
<div>
<label for="album-dropdown">
<span
v-if="channel && channel.artist && channel.artist.content_category === 'podcast'"
>{{ $t('components.channels.AlbumSelect.label.series') }}</span>
<span
v-else
>{{ $t('components.channels.AlbumSelect.label.album') }}</span>
<span v-if="channel && channel.artist && channel.artist.content_category === 'podcast'">
{{ $t('components.channels.AlbumSelect.label.series') }}
</span>
<span v-else>
{{ $t('components.channels.AlbumSelect.label.album') }}
</span>
</label>
<select
id="album-dropdown"

16
front/src/components/channels/UploadForm.vue
View File

@ -530,25 +530,17 @@ const labels = computed(() => ({
{{ humanSize(file.size ?? 0) }}
<template v-if="file.response.duration">
<span class="middle middledot symbol" />
<human-duration
:duration="file.response.duration"
/>
<human-duration :duration="file.response.duration" />
</template>
</template>
<template v-else>
<span
v-if="file.active"
>
<span v-if="file.active">
{{ $t('components.channels.UploadForm.status.uploading') }}
</span>
<span
v-else-if="file.error"
>
<span v-else-if="file.error">
{{ $t('components.channels.UploadForm.status.errored') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.channels.UploadForm.status.pending') }}
</span>
<span class="middle middledot symbol" />

16
front/src/components/channels/UploadModal.vue
View File

@ -54,24 +54,16 @@ const isLoading = ref(false)
class="small"
>
<h4 class="header">
<span
v-if="step === 1"
>
<span v-if="step === 1">
{{ $t('components.channels.UploadModal.header.publish') }}
</span>
<span
v-else-if="step === 2"
>
<span v-else-if="step === 2">
{{ $t('components.channels.UploadModal.header.uploadFiles') }}
</span>
<span
v-else-if="step === 3"
>
<span v-else-if="step === 3">
{{ $t('components.channels.UploadModal.header.uploadDetails') }}
</span>
<span
v-else-if="step === 4"
>
<span v-else-if="step === 4">
{{ $t('components.channels.UploadModal.header.processing') }}
</span>
</h4>

26
front/src/components/common/ActionTable.vue
View File

@ -211,9 +211,7 @@ const launchAction = async () => {
{{ $t('components.common.ActionTable.button.go') }}
<template #modal-header>
<p>
<span
key="1"
>
<span key="1">
{{ $t('components.common.ActionTable.modal.performAction.header', {action: currentActionName, count: affectedObjectsCount} ) }}
</span>
</p>
@ -223,9 +221,7 @@ const launchAction = async () => {
<template v-if="currentAction?.confirmationMessage">
{{ currentAction?.confirmationMessage }}
</template>
<span
v-else
>
<span v-else>
{{ $t('components.common.ActionTable.modal.performAction.content.warning') }}
</span>
</p>
@ -247,14 +243,10 @@ const launchAction = async () => {
</button>
</div>
<div class="count field">
<span
v-if="selectAll"
>
<span v-if="selectAll">
{{ $t('components.common.ActionTable.button.allSelected', {count: objectsData.count}) }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.common.ActionTable.button.selected', {count: checked.length, total: objectsData.count}) }}
</span>
<template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
@ -263,9 +255,7 @@ const launchAction = async () => {
href=""
@click.prevent="selectAll = true"
>
<span
key="3"
>
<span key="3">
{{ $t('components.common.ActionTable.button.selectElement', {total: objectsData.count}) }}
</span>
</a>
@ -274,9 +264,9 @@ const launchAction = async () => {
href=""
@click.prevent="selectAll = false"
>
<span
key="4"
>{{ $t('components.common.ActionTable.button.selectCurrentPage') }}</span>
<span key="4">
{{ $t('components.common.ActionTable.button.selectCurrentPage') }}
</span>
</a>
</template>
</div>

8
front/src/components/common/CollapseLink.vue
View File

@ -20,14 +20,10 @@ const value = useVModel(props, 'modelValue', emit)
class="collapse link"
@click.prevent="value = !value"
>
<span
v-if="value"
>
<span v-if="value">
{{ $t('components.common.CollapseLink.button.expand') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.common.CollapseLink.button.collapse') }}
</span>
<i :class="[{ down: !value, right: value }, 'angle', 'icon']" />

12
front/src/components/common/Duration.vue
View File

@ -18,11 +18,11 @@ const duration = computed(() => {
<template>
<span>
<span
v-if="duration.hours > 0"
>{{ $t('components.common.Duration.meta.hours', {hours: duration.hours, minutes: duration.minutes}) }}</span>
<span
v-else
>{{ $t('components.common.Duration.meta.minutes', {minutes: duration.minutes}) }}</span>
<span v-if="duration.hours > 0">
{{ $t('components.common.Duration.meta.hours', duration) }}
</span>
<span v-else>
{{ $t('components.common.Duration.meta.minutes', duration) }}
</span>
</span>
</template>

12
front/src/components/common/ExpandableDiv.vue
View File

@ -26,12 +26,12 @@ const truncated = computed(() => props.content.slice(0, props.length))
@click.prevent="toggleExpanded()"
>
<br>
<span
v-if="expanded"
>{{ $t('components.common.ExpandableDiv.button.less') }}</span>
<span
v-else
>{{ $t('components.common.ExpandableDiv.button.more') }}</span>
<span v-if="expanded">
{{ $t('components.common.ExpandableDiv.button.less') }}
</span>
<span v-else>
{{ $t('components.common.ExpandableDiv.button.more') }}
</span>
</a>
</div>
</template>

8
front/src/components/favorites/TrackFavoriteIcon.vue
View File

@ -35,14 +35,10 @@ const title = computed(() => isFavorite.value
@click.stop="$store.dispatch('favorites/toggle', track.id)"
>
<i class="heart icon" />
<span
v-if="isFavorite"
>
<span v-if="isFavorite">
{{ $t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.favorites.TrackFavoriteIcon.button.add') }}
</span>
</button>

32
front/src/components/federation/FetchButton.vue
View File

@ -131,44 +131,28 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
{{ $t('components.federation.FetchButton.table.error.label.detail') }}
</td>
<td>
<span
v-if="data.detail.error_code === 'http' && data.detail.status_code"
>
<span v-if="data.detail.error_code === 'http' && data.detail.status_code">
{{ $t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
</span>
<span
v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1"
>
<span v-else-if="['http', 'request'].includes(data.detail.error_code)">
{{ $t('components.federation.FetchButton.table.error.value.httpError') }}
</span>
<span
v-else-if="data.detail.error_code === 'timeout'"
>
<span v-else-if="data.detail.error_code === 'timeout'">
{{ $t('components.federation.FetchButton.table.error.value.timeoutError') }}
</span>
<span
v-else-if="data.detail.error_code === 'connection'"
>
<span v-else-if="data.detail.error_code === 'connection'">
{{ $t('components.federation.FetchButton.table.error.value.connectionError') }}
</span>
<span
v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1"
>
<span v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].includes(data.detail.error_code)">
{{ $t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
</span>
<span
v-else-if="data.detail.error_code === 'validation'"
>
<span v-else-if="data.detail.error_code === 'validation'">
{{ $t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
</span>
<span
v-else-if="data.detail.error_code === 'unhandled'"
>
<span v-else-if="data.detail.error_code === 'unhandled'">
{{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
</span>
</td>

16
front/src/components/library/AlbumBase.vue
View File

@ -177,14 +177,10 @@ const remove = async () => {
/>
<template v-if="totalTracks > 0">
<div class="ui hidden very small divider" />
<span
v-if="isSerie"
>
<span v-if="isSerie">
{{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
</span>
</template>
@ -260,14 +256,10 @@ const remove = async () => {
<span class="middle middledot symbol" />
</template>
<template v-if="totalTracks > 0">
<span
v-if="isSerie"
>
<span v-if="isSerie">
{{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
</span>
<span class="middle middledot symbol" />

3
front/src/components/library/AlbumDetail.vue
View File

@ -56,9 +56,6 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
v-if="isLoadingTracks"
class="ui vertical segment"
>
<div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
</div>
<div v-else-if="object">
<h2 class="ui header">
<span v-if="isSerie">
{{ $t('components.library.AlbumDetail.header.episodes') }}

8
front/src/components/library/AlbumEdit.vue
View File

@ -22,14 +22,10 @@ const canEdit = store.state.auth.availablePermissions.library
<section class="ui vertical stripe segment">
<div class="ui text container">
<h2>
<span
v-if="canEdit"
>
<span v-if="canEdit">
{{ $t('components.library.AlbumEdit.header.edit') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.AlbumEdit.header.suggest') }}
</span>
</h2>

4
front/src/components/library/ArtistBase.vue
View File

@ -117,9 +117,7 @@ watch(() => props.id, fetchData, { immediate: true })
v-if="albums"
class="sub header"
>
<div>
{{ $t('components.library.ArtistBase.meta.tracks', {count: totalTracks, albums: totalAlbums}) }}
</div>
{{ $t('components.library.ArtistBase.meta.tracks', {count: totalTracks, albums: totalAlbums}) }}
</div>
</div>
</h2>

8
front/src/components/library/ArtistEdit.vue
View File

@ -22,14 +22,10 @@ const canEdit = store.state.auth.availablePermissions.library
<section class="ui vertical stripe segment">
<div class="ui text container">
<h2>
<span
v-if="canEdit"
>
<span v-if="canEdit">
{{ $t('components.library.ArtistEdit.header.edit') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.ArtistEdit.header.suggest') }}
</span>
</h2>

8
front/src/components/library/EditForm.vue
View File

@ -340,14 +340,10 @@ const resetField = (fieldId: string) => {
type="submit"
:disabled="isLoading || !mutationPayload"
>
<span
v-if="canEdit"
>
<span v-if="canEdit">
{{ $t('components.library.EditForm.button.submit') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.EditForm.button.suggest') }}
</span>
</button>

15
front/src/components/library/FileUpload.vue
View File

@ -462,28 +462,25 @@ useEventListener(window, 'beforeunload', (event) => {
v-else-if="file.success"
class="ui success label"
>
<span
key="1"
>{{ $t('components.library.FileUpload.table.upload.status.uploaded') }}</span>
<span key="1">
{{ $t('components.library.FileUpload.table.upload.status.uploaded') }}
</span>
</span>
<span
v-else-if="file.active"
class="ui warning label"
>
<span
key="2"
>
<span key="2">
{{ $t('components.library.FileUpload.table.upload.status.uploading') }}
</span>
{{ $t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
</span>
<span
v-else
class="ui label"
>
<span
key="3"
>
<span key="3">
{{ $t('components.library.FileUpload.table.upload.status.pending') }}
</span>
</span>

36
front/src/components/library/TrackDetail.vue
View File

@ -76,14 +76,10 @@ watchEffect(() => {
class="ui fluid image track-cover-image"
>
<h3 class="ui header">
<span
v-if="track.artist?.content_category === 'music'"
>
<span v-if="track.artist?.content_category === 'music'">
{{ $t('components.library.TrackDetail.header.track') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.header.episode') }}
</span>
</h3>
@ -97,9 +93,7 @@ watchEffect(() => {
<template v-if="upload.duration">
{{ time.parse(upload.duration) }}
</template>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.notApplicable') }}
</span>
</td>
@ -112,9 +106,7 @@ watchEffect(() => {
<template v-if="upload.size">
{{ humanSize(upload.size) }}
</template>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.notApplicable') }}
</span>
</td>
@ -127,9 +119,7 @@ watchEffect(() => {
<template v-if="upload.extension">
{{ upload.extension }}
</template>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.notApplicable') }}
</span>
</td>
@ -142,9 +132,7 @@ watchEffect(() => {
<template v-if="upload.bitrate">
{{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
</template>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.notApplicable') }}
</span>
</td>
@ -188,14 +176,10 @@ watchEffect(() => {
</tr>
<tr v-if="track.album">
<td>
<span
v-if="track.album.artist.content_category === 'music'"
>
<span v-if="track.album.artist.content_category === 'music'">
{{ $t('components.library.TrackDetail.table.release.album') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.table.release.series') }}
</span>
</td>
@ -243,9 +227,7 @@ watchEffect(() => {
target="_blank"
rel="noopener noreferrer"
>{{ license.name }}</a>
<span
v-else
>
<span v-else>
{{ $t('components.library.TrackDetail.notApplicable') }}
</span>
</td>

8
front/src/components/library/TrackEdit.vue
View File

@ -44,14 +44,10 @@ fetchLicenses()
<section class="ui vertical stripe segment">
<div class="ui text container">
<h2>
<span
v-if="canEdit"
>
<span v-if="canEdit">
{{ $t('components.library.TrackEdit.header.edit') }}
</span>
<span
key="2"
>
<span key="2">
{{ $t('components.library.TrackEdit.header.suggest') }}
</span>
</h2>

4
front/src/components/library/radios/Builder.vue
View File

@ -334,9 +334,7 @@ onMounted(() => {
</tbody>
</table>
<template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
<h3
class="ui header"
>
<h3 class="ui header">
{{ $t('components.library.radios.Builder.header.matches', {count: checkResult.candidates.count}) }}
</h3>
<track-table

4
front/src/components/manage/library/AlbumsTable.vue
View File

@ -233,9 +233,7 @@ const labels = computed(() => ({
v-if="scope.obj.release_date"
:date="scope.obj.release_date"
/>
<span
v-else
>
<span v-else>
{{ $t('components.manage.library.AlbumsTable.notApplicable') }}
</span>
</td>

4
front/src/components/manage/library/TracksTable.vue
View File

@ -243,9 +243,7 @@ const labels = computed(() => ({
:title="scope.obj.license"
@click.prevent="addSearchToken('license', scope.obj.license)"
>{{ scope.obj.license }}</a>
<span
v-else
>
<span v-else>
{{ $t('components.manage.library.TracksTable.notApplicable') }}
</span>
</td>

8
front/src/components/manage/library/UploadsTable.vue
View File

@ -344,9 +344,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</td>
<td>
<span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>
<span
v-else
>
<span v-else>
{{ $t('components.manage.library.UploadsTable.notApplicable') }}
</span>
</td>
@ -358,9 +356,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
v-if="scope.obj.accessed_date"
:date="scope.obj.accessed_date"
/>
<span
v-else
>
<span v-else>
{{ $t('components.manage.library.UploadsTable.notApplicable') }}
</span>
</td>

20
front/src/components/manage/moderation/InstancePolicyForm.vue
View File

@ -162,12 +162,12 @@ const remove = async () => {
type="checkbox"
>
<label for="policy-is-active">
<span
v-if="current.isActive"
>{{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}</span>
<span
v-else
>{{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}</span>
<span v-if="current.isActive">
{{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}
</span>
<span v-else>
{{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}
</span>
<tooltip :content="labels.isActiveHelp" />
</label>
</div>
@ -229,14 +229,10 @@ const remove = async () => {
:class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
:disabled="isLoading"
>
<span
v-if="object"
>
<span v-if="object">
{{ $t('components.manage.moderation.InstancePolicyForm.button.update') }}
</span>
<span
v-else
>
<span v-else>
{{ $t('components.manage.moderation.InstancePolicyForm.button.create') }}
</span>
</button>

8
front/src/components/manage/moderation/ReportCard.vue
View File

@ -227,9 +227,7 @@ const handleRemovedNote = (uuid: string) => {
:actor="obj.assigned_to"
/>
</div>
<span
v-else
>
<span v-else>
{{ $t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>
@ -244,9 +242,7 @@ const handleRemovedNote = (uuid: string) => {
:date="obj.handled_date"
:icon="true"
/>
<span
v-else
>
<span v-else>
{{ $t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>

8
front/src/components/manage/moderation/UserRequestCard.vue
View File

@ -155,9 +155,7 @@ const handleRemovedNote = (uuid: string) => {
:date="obj.handled_date"
:icon="true"
/>
<span
v-else
>
<span v-else>
{{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
</span>
</td>
@ -199,9 +197,7 @@ const handleRemovedNote = (uuid: string) => {
<p v-if="value">
{{ value }}
</p>
<span
v-else
>
<span v-else>
{{ $t('components.manage.moderation.UserRequestCard.notApplicable') }}
</span>
<div class="ui hidden divider" />

8
front/src/components/playlists/PlaylistModal.vue
View File

@ -86,16 +86,12 @@ store.dispatch('playlists/fetchOwn')
<template v-if="track">
<h2 class="ui header">
{{ $t('components.playlists.PlaylistModal.header.addToPlaylist') }}
<div
class="ui sub header"
>
<div class="ui sub header">
{{ $t('components.playlists.PlaylistModal.header.track', {artist: track.artist?.name, title: track.title}) }}
</div>
</h2>
</template>
<span
v-else
>
<span v-else>
{{ $t('components.playlists.PlaylistModal.header.manage') }}
</span>
</h4>