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

chore(eslint): apply automatic fixes to format front/src

This commit is contained in:
jon r 2025-02-22 22:00:32 +01:00
parent d333b79ee1
commit 8b2a5e54ce
181 changed files with 6692 additions and 5513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
front/src/App.vue
View File

@ -5,7 +5,7 @@ import { type QueueTrack, useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import useLogger from '~/composables/useLogger'
import { useStyleTag, useIntervalFn } from '@vueuse/core'
import { color } from '~/composables/color';
import { color } from '~/composables/color'
import { generateTrackCreditStringFromQueue } from '~/utils/utils'
@ -80,8 +80,15 @@ store.dispatch('auth/fetchUser')
<template>
<div class="funkwhale responsive">
<Sidebar />
<RouterView v-bind="color({}, ['default', 'solid'])()" v-slot="{ Component }">
<Transition v-if="Component" name="main" mode="out-in">
<RouterView
v-slot="{ Component }"
v-bind="color({}, ['default', 'solid'])()"
>
<Transition
v-if="Component"
name="main"
mode="out-in"
>
<KeepAlive :max="10">
<Suspense>
<component :is="Component" />

1
front/src/LegacyLayout.vue
View File

@ -6,7 +6,6 @@ import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import { useI18n } from 'vue-i18n'
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
const { t } = useI18n()

59
front/src/components/About.vue
View File

@ -24,7 +24,7 @@ const labels = computed(() => ({
title: t('components.About.title')
}))
const podName = computed(() => (n => n === "" ? "No name" : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName')))
const podName = computed(() => (n => n === '' ? 'No name' : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName')))
const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription'))
@ -84,13 +84,20 @@ const federationEnabled = computed(() => {
</script>
<template>
<Layout stack main
<Layout
v-title="labels.title"
stack
main
style="align-items: center;"
>
<!-- About funkwhale -->
<Link to="/" width="full" alignText="stretch" style="width:min(480px, 100%)">
<Link
to="/"
width="full"
align-text="stretch"
style="width:min(480px, 100%)"
>
<logo-text />
</Link>
@ -102,13 +109,15 @@ const federationEnabled = computed(() => {
{{ t('components.About.description.funkwhale') }}
</p>
<Layout flex style="justify-content: center;">
<Card :title="t('components.About.header.signup')"
<Layout
flex
style="justify-content: center;"
>
<Card
v-if="!store.state.auth.authenticated"
:title="t('components.About.header.signup')"
width="256px"
>
<template v-if="openRegistrations">
<p>
{{ t('components.About.description.signup') }}
@ -155,23 +164,27 @@ const federationEnabled = computed(() => {
</div>
</Card>
<Card :title="t('components.About.message.greeting', {username: store.state.auth.username})"
<Card
v-else
:title="t('components.About.message.greeting', {username: store.state.auth.username})"
width="256px"
>
<p v-if="defaultUploadQuota">
{{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
</p>
<template #action>
<Button full disabled>
<Button
full
disabled
>
{{ t('components.About.message.loggedIn') }}
</Button>
</template>
</Card>
<Card :title="podName"
<Card
:title="podName"
width="256px"
>
<section
@ -222,20 +235,22 @@ const federationEnabled = computed(() => {
</div>
<template #action>
<Link alignText="center"
<Link
align-text="center"
to="/about/pod"
>
{{ t('components.About.link.learnMore') }}
</Link>
</template>
</Card>
</Layout>
<Layout flex style="justify-content: center;">
<Card width="256px"
<Layout
flex
style="justify-content: center;"
>
<Card
width="256px"
to="/"
:title="t('components.About.header.publicContent')"
icon="bi-box-arrow-up-right"
@ -244,7 +259,8 @@ const federationEnabled = computed(() => {
{{ t('components.About.description.publicContent') }}
</Card>
<Card width="256px"
<Card
width="256px"
:title="t('components.About.link.findOtherPod')"
to="https://funkwhale.audio/#get-started"
icon="bi-box-arrow-up-right"
@ -252,18 +268,16 @@ const federationEnabled = computed(() => {
{{ t('components.About.description.publicContent') }}
</Card>
<Card width="256px"
<Card
width="256px"
:title="t('components.About.header.findApp')"
to="https://funkwhale.audio/apps"
icon="bi-box-arrow-up-right"
>
{{ t('components.About.description.findApp') }}
</Card>
</Layout>
<section
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
:style="headerStyle"
@ -274,7 +288,6 @@ const federationEnabled = computed(() => {
</h1>
</section>
<!-- About Pod -->
<div class="about-pod-info-container">
<div class="about-pod-info-toc">

22
front/src/components/Queue.vue
View File

@ -246,8 +246,8 @@ if (!isWebGLSupported) {
@click="enter"
/>
<Button
secondary
v-else
secondary
:aria-label="labels.exitFullscreen"
:title="labels.exitFullscreen"
icon="bi-fullscreen-exit"
@ -305,7 +305,10 @@ if (!isWebGLSupported) {
@click.stop.prevent=""
>
<Pill>
<template #image v-if="ac.artist.cover">
<template
v-if="ac.artist.cover"
#image
>
<img v-lazy="ac.artist.cover?.urls.medium_square_crop">
</template>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
@ -341,8 +344,14 @@ if (!isWebGLSupported) {
<i class="loading spinner icon" />
</p>
</div>
<Spacer :size="16" class="desktop-and-below" />
<Layout flex class="additional-controls desktop-and-below">
<Spacer
:size="16"
class="desktop-and-below"
/>
<Layout
flex
class="additional-controls desktop-and-below"
>
<track-favorite-icon
v-if="store.state.auth.authenticated"
:track="currentTrack"
@ -428,7 +437,10 @@ if (!isWebGLSupported) {
</template>
</i18n-t>
<span class="middle pipe symbol" />
<span style="margin-right: 8px;" v-t="'components.Queue.meta.end'" />
<span
v-t="'components.Queue.meta.end'"
style="margin-right: 8px;"
/>
<span :title="labels.duration">
{{ endsIn }}
</span>

22
front/src/components/RemoteSearchForm.vue
View File

@ -170,8 +170,9 @@ watch(() => props.initialId, () => {
</script>
<template>
<Layout stack
<Layout
v-if="type === 'both'"
stack
>
<Button
secondary
@ -188,18 +189,23 @@ watch(() => props.initialId, () => {
{{ t('components.RemoteSearchForm.button.rss') }}
</Button>
</Layout>
<Layout form
<Layout
v-else
id="remote-search"
form
:class="['ui', {loading: isLoading}, 'form']"
@submit.stop.prevent="submit"
>
<Alert red
<Alert
v-if="errors.length > 0"
red
role="alert"
title="t('components.RemoteSearchForm.header.fetchFailed')"
>
<ul class="list" v-if="errors.length > 1">
<ul
v-if="errors.length > 1"
class="list"
>
<li
v-for="(error, key) in errors"
:key="key"
@ -207,7 +213,9 @@ watch(() => props.initialId, () => {
{{ error }}
</li>
</ul>
<p v-else>{{ errors[0] }}</p>
<p v-else>
{{ errors[0] }}
</p>
</Alert>
<p v-if="type === 'rss'">
{{ t('components.RemoteSearchForm.description.rss') }}
@ -216,7 +224,6 @@ watch(() => props.initialId, () => {
{{ t('components.RemoteSearchForm.description.fediverse') }}
</p>
<Input
id="object-id"
v-model="id"
@ -237,8 +244,9 @@ watch(() => props.initialId, () => {
{{ t('components.RemoteSearchForm.button.search') }}
</Button>
</Layout>
<Alert red
<Alert
v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
red
>
{{ t('components.RemoteSearchForm.warning.unsupported') }}
</Alert>

3
front/src/components/SetInstanceModal.vue
View File

@ -65,8 +65,9 @@ const checkAndSwitch = async (url: string) => {
</script>
<template>
<Modal :title="t('views.ChooseInstance.header.chooseInstance')"
<Modal
v-model="show"
:title="t('views.ChooseInstance.header.chooseInstance')"
@update="isError = false"
>
<h3 class="header">

4
front/src/components/Sidebar.vue
View File

@ -273,9 +273,9 @@ onMounted(() => {
@show-language-modal-event="isLanguageModalOpen=true"
/>
<Modal
:title="labels.language"
ref="languageModal"
v-model="isLanguageModalOpen"
:title="labels.language"
:fullscreen="false"
>
<!-- TODO: Is this actually a popover menu, not a modal? -->
@ -306,9 +306,9 @@ onMounted(() => {
</div>
</Modal>
<Modal
:title="labels.theme"
ref="themeModal"
v-model:show="isThemeModalOpen"
:title="labels.theme"
:fullscreen="false"
>
<i

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

@ -192,8 +192,8 @@ const move = (idx: number, increment: number) => {
</table>
<div class="ui hidden divider" />
<Button
color = "primary"
v-if="value.fields?.length < maxFields"
color="primary"
@click.stop.prevent="addField"
>
{{ t('components.admin.SignupFormBuilder.button.add') }}

8
front/src/components/album/Card.vue
View File

@ -51,8 +51,9 @@ const imageUrl = computed(() => props.album.cover?.urls.original
/>
</template>
<template #default
<template
v-for="ac in album.artist_credit"
#default
:key="ac.artist.id"
>
<Link
@ -72,7 +73,10 @@ const imageUrl = computed(() => props.album.cover?.urls.original
<span>
{{ t('components.audio.album.Card.meta.tracks', album.tracks_count) }}
</span>
<Spacer h grow />
<Spacer
h
grow
/>
<PlayButton
:dropdown-only="true"
discrete

5
front/src/components/album/Widget.vue
View File

@ -14,7 +14,6 @@ import Section from '~/components/ui/Section.vue'
import Loader from '~/components/ui/Loader.vue'
import Pagination from '~/components/ui/Pagination.vue'
interface Props {
filters: Record<string, string | boolean>
showCount?: boolean
@ -82,8 +81,8 @@ watch(
>
<inline-search-bar
v-if="search"
style="grid-column: 1 / -1;"
v-model="query"
style="grid-column: 1 / -1;"
@search="performSearch"
/>
<Loader v-if="isLoading" />
@ -100,8 +99,8 @@ watch(
>
<empty-state
:refresh="true"
@refresh="fetchData"
style="grid-column: 1 / -1;"
@refresh="fetchData"
/>
</slot>
<Pagination

3
front/src/components/artist/Card.vue
View File

@ -67,7 +67,7 @@ const cover = computed(() => {
v-lazy="cover.urls.medium_square_crop"
:alt="artist.name"
class="channel-image"
/>
>
</template>
<template #footer>
@ -85,7 +85,6 @@ const cover = computed(() => {
discrete
/>
</template>
</Card>
</template>

4
front/src/components/artist/Widget.vue
View File

@ -4,7 +4,6 @@ import type { Artist } from '~/types'
import { reactive, ref, watch, onMounted } from 'vue'
import { useStore } from '~/store'
import axios from 'axios'
import useErrorHandler from '~/composables/useErrorHandler'
@ -14,7 +13,6 @@ import ArtistCard from '~/components/artist/Card.vue'
import Section from '~/components/ui/Section.vue'
import Pagination from '~/components/ui/Pagination.vue'
interface Props {
filters: Record<string, string | boolean>
search?: boolean
@ -97,8 +95,8 @@ watch(
<inline-search-bar
v-if="!isLoading && search"
v-model="query"
@search="performSearch"
style="grid-column: 1 / -1;"
@search="performSearch"
/>
<artist-card
v-for="artist in artists"

6
front/src/components/audio/ArtistCreditLabel.vue
View File

@ -28,7 +28,11 @@ const getRoute = (ac: ArtistCredit) => {
v-for="ac in props.artistCredit"
:key="ac.artist.id"
>
<Link solid secondary round min-content
<Link
solid
secondary
round
min-content
:to="getRoute(ac)"
>
<img

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

@ -66,7 +66,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
v-lazy="imageUrl"
:alt="object.artist?.name"
class="channel-image"
/>
>
</template>
<template #default>
@ -89,7 +89,10 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
<span v-else>
{{ t('components.audio.ChannelCard.meta.tracks', object.artist?.tracks_count ?? 0) }}
</span>
<Spacer h grow />
<Spacer
h
grow
/>
<PlayButton
:dropdown-only="true"
:is-playable="true"

1
front/src/components/audio/ChannelEntryCard.vue
View File

@ -8,7 +8,6 @@ import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import { useRouter } from 'vue-router'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
import PlayButton from '~/components/audio/PlayButton.vue'

3
front/src/components/audio/ChannelForm.vue
View File

@ -164,7 +164,8 @@ defineExpose({
</script>
<template>
<Layout form
<Layout
form
class="ui form"
@submit.prevent.stop="submit"
>

2
front/src/components/audio/ChannelSeries.vue
View File

@ -76,8 +76,8 @@ fetchData()
</template>
<template v-if="nextPage">
<Button
secondary
v-if="nextPage"
secondary
@click="fetchData(nextPage)"
>
{{ t('components.audio.ChannelSeries.button.showMore') }}

11
front/src/components/audio/ChannelsWidget.vue
View File

@ -26,7 +26,7 @@ interface Props {
const emit = defineEmits<Events>()
const props = withDefaults(defineProps<Props>(), {
limit: 5,
limit: 5
})
const result = ref<PaginatedChannelList>()
@ -43,7 +43,7 @@ const fetchData = async (url = 'channels/') => {
const params: operations['get_channels_2']['parameters']['query'] = {
...clone(props.filters),
page: page.value,
page_size: props.limit,
page_size: props.limit
}
try {
@ -75,14 +75,17 @@ watch([() => props.filters, page],
small-items
:h2="title || undefined"
>
<Loader v-if="isLoading" style="grid-column: 1 / -1;" />
<Loader
v-if="isLoading"
style="grid-column: 1 / -1;"
/>
<template
v-if="!isLoading && result?.count === 0"
>
<empty-state
:refresh="true"
@refresh="fetchData('channels/')"
style="grid-column: 1 / -1;"
@refresh="fetchData('channels/')"
/>
</template>
<Pagination

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

@ -14,7 +14,6 @@ import OptionsButton from '~/components/ui/button/Options.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
interface Props extends PlayOptionsProps {
split?: boolean
dropdownIconClasses?: string[]
@ -110,8 +109,8 @@ const isOpen = ref(false)
<OptionsButton
v-if="dropdownOnly"
v-bind="$attrs"
:is-ghost="discrete"
@click="isOpen = !isOpen"
:isGhost="discrete"
/>
<Button
v-else
@ -124,7 +123,7 @@ const isOpen = ref(false)
:aria-label="labels.replacePlay"
:class="[...buttonClasses, 'play-button']"
:isloading="isLoading"
:dropdownOnly="dropdownOnly"
:dropdown-only="dropdownOnly"
@click.stop.prevent="replacePlay()"
@split-click="isOpen = !isOpen"
>
@ -137,7 +136,9 @@ const isOpen = ref(false)
v-else
:class="['bi', playIconClass]"
/>
<template v-if="!discrete && !iconOnly">&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot></template>
<template v-if="!discrete && !iconOnly">
&nbsp;<slot>{{ t('components.audio.PlayButton.button.discretePlay') }}</slot>
</template>
</template>
</Button>
@ -200,7 +201,7 @@ const isOpen = ref(false)
</span>
</PopoverItem>
<hr v-if="filterableArtists || Object.keys(getReportableObjects({track, album, artist, playlist, account, channel})).length > 0" />
<hr v-if="filterableArtists || Object.keys(getReportableObjects({track, album, artist, playlist, account, channel})).length > 0">
<PopoverItem
v-if="filterableArtists"

13
front/src/components/audio/Player.vue
View File

@ -51,8 +51,10 @@ const { t } = useI18n()
/** Toggle between null and player */
const togglePlayer = () => {
store.commit('ui/queueFocused',
store.state.ui.queueFocused === 'queue' ? null
: store.state.ui.queueFocused === 'player' ? null
store.state.ui.queueFocused === 'queue'
? null
: store.state.ui.queueFocused === 'player'
? null
: 'player'
)
}
@ -169,8 +171,8 @@ const hideArtist = () => {
<!-- TODO: Use smaller covers -->
<img
ref="cover"
alt=""
v-lazy="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
alt=""
>
</div>
<div
@ -220,8 +222,8 @@ const hideArtist = () => {
<!-- TODO: Use smaller covers -->
<img
ref="cover"
alt=""
v-lazy="store.getters['instance/absoluteUrl'](currentTrack.coverUrl)"
alt=""
>
</div>
<div class="middle aligned content ellipsis">
@ -358,8 +360,7 @@ const hideArtist = () => {
class="close-control desktop-and-below"
icon="bi-x"
@click.stop="store.commit('ui/queueFocused', null)"
>
</Button>
/>
</div>
</div>
</div>

1
front/src/components/audio/podcast/MobileRow.vue
View File

@ -9,7 +9,6 @@ import { usePlayer } from '~/composables/audio/player'
import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import usePlayOptions from '~/composables/audio/usePlayOptions'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'

2
front/src/components/audio/podcast/Modal.vue
View File

@ -93,9 +93,9 @@ const labels = computed(() => ({
<template>
<Modal
:title="track.title"
ref="modal"
v-model="show"
:title="track.title"
:scrolling="true"
class="scrolling-track-options"
>

1
front/src/components/audio/track/MobileRow.vue
View File

@ -9,7 +9,6 @@ import { usePlayer } from '~/composables/audio/player'
import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import usePlayOptions from '~/composables/audio/usePlayOptions'
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'

3
front/src/components/audio/track/Modal.vue
View File

@ -93,9 +93,10 @@ const labels = computed(() => ({
</script>
<template>
<Modal :title="track.title"
<Modal
ref="modal"
v-model="show"
:title="track.title"
:scrolling="true"
class="scrolling-track-options"
>

6
front/src/components/audio/track/Row.vue
View File

@ -13,7 +13,6 @@ import { usePlayer } from '~/composables/audio/player'
import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
const store = useStore()
interface Props extends PlayOptionsProps {
@ -65,10 +64,10 @@ const hover = ref(false)
<template>
<div
:class="[{ active }, 'track-row row', $style.row]"
style="display: contents;"
@dblclick="activateTrack(track, index)"
@mousemove="hover = true"
@mouseout="hover = false"
style="display: contents;"
>
<!-- 1. column: Play button or track position -->
@ -182,8 +181,8 @@ const hover = ref(false)
class="content ellipsis column"
>
<template
v-if="showArtist"
v-for="ac in track.artist_credit"
v-if="showArtist"
:key="ac.artist.id"
>
<router-link
@ -199,7 +198,6 @@ const hover = ref(false)
</template>
</div>
<!-- 6. column: favorite icon -->
<div
class="meta column"

16
front/src/components/audio/track/Table.vue
View File

@ -2,11 +2,9 @@
import type { Track } from '~/types'
import { useI18n } from 'vue-i18n'
import { clone, uniqBy } from 'lodash-es'
import { clone, uniqBy, sortedUniq } from 'lodash-es'
import { ref, computed } from 'vue'
import { useStore } from '~/store'
import { sortedUniq } from 'lodash-es'
import axios from 'axios'
@ -151,15 +149,15 @@ const updatePage = (page: number) => {
<template>
<div>
<!-- Show the search bar if search is true -->
<Input search
<Input
v-if="search"
v-model="query"
@search="performSearch"
search
autofocus
:placeholder="labels.searchPlaceholder"
@search="performSearch"
/>
<Spacer v-if="search" />
@ -206,7 +204,10 @@ const updatePage = (page: number) => {
</label>
<label />
<label>
<i v-if="showDuration" class="bi bi-clock" />
<i
v-if="showDuration"
class="bi bi-clock"
/>
</label>
<label />
</template>
@ -225,7 +226,6 @@ const updatePage = (page: number) => {
:show-duration="showDuration"
:is-podcast="isPodcast"
/>
</Table>
<!-- Pagination -->

30
front/src/components/audio/track/Widget.vue
View File

@ -22,7 +22,6 @@ import Pagination from '~/components/ui/Pagination.vue'
import useErrorHandler from '~/composables/useErrorHandler'
interface Events {
(e: 'count', count: number): void
}
@ -97,19 +96,19 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
// Handle WebSocket events for "Listen"
// Add the event to `objects` reactively
objects.unshift(event as Listening);
objects.unshift(event as Listening)
// Keep the array size within limits (e.g., remove the last item if needed)
if (objects.length > props.limit) {
objects.pop();
objects.pop()
}
// Recompute coverUrl for the updated `objects`
console.log('WebSocket event received:', event);
console.log('Updated cover URL:', coverUrl.value);
});
console.log('WebSocket event received:', event)
console.log('Updated cover URL:', coverUrl.value)
})
}
}, { immediate: true });
}, { immediate: true })
</script>
<template>
@ -118,7 +117,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
medium-items
align-left
>
<Loader v-if="isLoading"
<Loader
v-if="isLoading"
style="grid-column: 1 / -1;"
/>
<Alert
@ -133,11 +133,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
</h4>
</Alert>
<!-- TODO: Use activity.vue -->
<div class="funkwhale activity"
v-if="count > 0"
<div
v-for="object in objects"
v-if="count > 0"
:key="object.id"
:class="['item', itemClasses]">
class="funkwhale activity"
:class="['item', itemClasses]"
>
<div class="activity-image">
<img
v-if="object.track.album && object.track.album.cover"
@ -165,7 +167,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
class="funkwhale link artist"
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
>
<Heading :h3="object.track.title" title />
<Heading
:h3="object.track.title"
title
/>
</router-link>
<Spacer :size="2" />
<div
@ -222,7 +227,6 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
</Section>
</template>
<style lang="scss" scoped>
.funkwhale {
&.activity {

6
front/src/components/auth/Authorize.vue
View File

@ -114,8 +114,9 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
</script>
<template>
<layout main
<layout
v-title="labels.title"
main
class="main"
>
<section class="ui vertical stripe segment">
@ -123,8 +124,9 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
<h2>
<i class="bi bi-unlock-fill" />{{ t('components.auth.Authorize.header.authorize') }}
</h2>
<Alert red
<Alert
v-if="errors.length > 0"
red
role="alert"
>
<h4

33
front/src/components/auth/LoginForm.vue
View File

@ -75,27 +75,39 @@ const submit = async () => {
</script>
<template>
<Layout form stack
<Layout
form
stack
style="max-width: 600px"
@submit.prevent="submit()"
>
<Alert red
<Alert
v-if="errors.length > 0"
red
>
<h4 class="header">
{{ t('components.auth.LoginForm.header.loginFailure') }}
</h4>
<component :is="errors.length>1 ? 'ul' : 'div'" class="list">
<component :is="errors.length>1 ? 'li' : 'div'"
<component
:is="errors.length>1 ? 'ul' : 'div'"
class="list"
>
<component
:is="errors.length>1 ? 'li' : 'div'"
v-if="errors[0] == 'invalid_credentials' && store.state.instance.settings.moderation.signup_approval_enabled.value"
>
{{ t('components.auth.LoginForm.help.approvalRequired') }}
</component>
<component :is="errors.length>1 ? 'li' : 'div'"
v-else-if="errors[0] == 'invalid_credentials'">
<component
:is="errors.length>1 ? 'li' : 'div'"
v-else-if="errors[0] == 'invalid_credentials'"
>
{{ t('components.auth.LoginForm.help.invalidCredentials') }}
</component>
<component :is="errors.length>1 ? 'li' : 'div'" v-else>
<component
:is="errors.length>1 ? 'li' : 'div'"
v-else
>
{{ errors[0] }}
</component>
</component>
@ -105,8 +117,8 @@ const submit = async () => {
<Input
id="username-field"
ref="username"
autocomplete="username"
v-model="credentials.username"
autocomplete="username"
required
name="username"
type="text"
@ -123,10 +135,11 @@ const submit = async () => {
</template>
</template>
</Input>
<Input password
<Input
v-model="credentials.password"
password
name="password-field"
autocomplete="current-password"
v-model="credentials.password"
field-id="password-field"
required
>

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

@ -40,8 +40,9 @@ const labels = computed(() => ({
{{ t('components.auth.Logout.button.logout') }}
</Button>
</div>
<Alert yellow
<Alert
v-else
yellow
>
<h2>
{{ t('components.auth.Logout.header.unauthenticated') }}
@ -49,7 +50,7 @@ const labels = computed(() => ({
<Link
solid
secondary
buttonWidth
button-width
to="/login"
>
{{ t('components.auth.Logout.link.login') }}

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

@ -272,23 +272,27 @@ fetchOwnedApps()
</script>
<template>
<Layout main stack
<Layout
v-title="labels.title"
main
stack
>
<Header :h1="t('components.auth.Settings.header.accountSettings')">
</Header>
<Layout form
<Header :h1="t('components.auth.Settings.header.accountSettings')" />
<Layout
form
@submit.prevent="submitSettings()"
>
<Alert green
<Alert
v-if="settings.success"
green
>
<h4 class="header">
{{ t('components.auth.Settings.header.settingsUpdated') }}
</h4>
</Alert>
<Alert red
<Alert
v-if="settings.errors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -345,8 +349,9 @@ fetchOwnedApps()
{{ t('components.auth.Settings.header.avatar') }}
</h2>
<Layout form>
<Alert red
<Alert
v-if="avatarErrors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -379,7 +384,8 @@ fetchOwnedApps()
<div class="ui message">
{{ t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ t('components.auth.Settings.description.changePassword.paragraph2') }}
</div>
<Layout form
<Layout
form
@submit.prevent="submitPassword()"
>
<Alert
@ -555,8 +561,8 @@ fetchOwnedApps()
<td>
<dangerous-button
:class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
@confirm="revokeApp(app.client_id)"
:title="t('components.auth.Settings.modal.revokeApp.header', {app: app.name})"
@confirm="revokeApp(app.client_id)"
>
{{ t('components.auth.Settings.button.revoke') }}
<template #modal-content>
@ -641,8 +647,8 @@ fetchOwnedApps()
<DangerousButton
:is-loading="isDeleting.has(app.client_id)"
class="tiny"
@confirm="deleteApp(app.client_id)"
:title="t('components.auth.Settings.modal.deleteApp.header', {app: app.name})"
@confirm="deleteApp(app.client_id)"
>
{{ t('components.auth.Settings.button.remove') }}
<template #modal-content>
@ -699,11 +705,13 @@ fetchOwnedApps()
<p>
{{ t('components.auth.Settings.message.currentEmail', { email: store.state.auth.profile?.email }) }}
</p>
<Layout form
<Layout
form
@submit.prevent="changeEmail"
>
<Alert red
<Alert
v-if="changeEmailErrors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -754,14 +762,16 @@ fetchOwnedApps()
<p>
{{ t('components.auth.Settings.description.deleteAccount') }}
</p>
<Alert yellow
<Alert
yellow
role="alert"
>
{{ t('components.auth.Settings.warning.deleteAccount') }}
</Alert>
<Layout form>
<Alert red
<Alert
v-if="accountDeleteErrors.length > 0"
red
role="alert"
>
<h4 class="header">

46
front/src/components/auth/SignupForm.vue
View File

@ -92,10 +92,16 @@ fetchInstanceSettings()
<template>
<div v-if="submitted">
<Alert yellow v-if="signupRequiresApproval">
<Alert
v-if="signupRequiresApproval"
yellow
>
{{ t('components.auth.SignupForm.message.awaitingReview') }}
</Alert>
<Alert green v-else>
<Alert
v-else
green
>
{{ t('components.auth.SignupForm.message.accountCreated') }}
</Alert>
<h2>
@ -107,18 +113,22 @@ fetchInstanceSettings()
:show-signup="false"
/>
</div>
<Layout form stack
<Layout
v-else
form
stack
style="max-width: 600px"
@submit.prevent="submit()"
>
<Alert red
<Alert
v-if="!store.state.instance.settings.users.registration_enabled.value"
red
>
{{ t('components.auth.SignupForm.message.registrationClosed') }}
</Alert>
<Alert yellow
<Alert
v-else-if="signupRequiresApproval"
yellow
>
{{ t('components.auth.SignupForm.message.requiresReview') }}
</Alert>
@ -129,8 +139,9 @@ fetchInstanceSettings()
:permissive="true"
/>
</template>
<Alert red
<Alert
v-if="errors.length > 0"
red
>
<h4 class="header">
{{ t('components.auth.SignupForm.header.signupFailure') }}
@ -146,9 +157,9 @@ fetchInstanceSettings()
</Alert>
<Input
id="username-field"
:label = "t('components.auth.SignupForm.label.username')"
ref="username"
v-model="payload.username"
:label="t('components.auth.SignupForm.label.username')"
name="username"
required
type="text"
@ -156,49 +167,52 @@ fetchInstanceSettings()
:placeholder="labels.usernamePlaceholder"
/>
<Input
:label="t('components.auth.SignupForm.label.email')"
id="email-field"
autocomplete="email"
ref="email"
v-model="payload.email"
:label="t('components.auth.SignupForm.label.email')"
autocomplete="email"
name="email"
required
type="email"
:placeholder="labels.emailPlaceholder"
/>
<Input password
<Input
v-model="payload.password1"
password
autocomplete="new-password"
:label="t('components.auth.SignupForm.label.password')"
v-model="payload.password1"
field-id="password-field"
/>
<Input v-if="!store.state.instance.settings.users.registration_enabled.value"
:label="t('components.auth.SignupForm.label.invitation')"
<Input
v-if="!store.state.instance.settings.users.registration_enabled.value"
id="invitation-code"
v-model="payload.invitation"
:label="t('components.auth.SignupForm.label.invitation')"
required
type="text"
name="invitation"
:placeholder="labels.placeholder"
/>
<div v-if="signupRequiresApproval && (formCustomization?.fields.length ?? 0) > 0"
<div
v-for="(field, idx) in formCustomization?.fields"
v-if="signupRequiresApproval && (formCustomization?.fields.length ?? 0) > 0"
:key="idx"
:class="[{required: field.required}, 'field']"
>
<Textarea
:label="field.label"
v-if="field.input_type === 'long_text'"
:id="`custom-field-${idx}`"
v-model="payload.request_fields[field.label]"
:label="field.label"
:required="field.required"
rows="5"
/>
<Input
v-else
:id="`custom-field-${idx}`"
:label="field.label"
v-model="payload.request_fields[field.label]"
:label="field.label"
type="text"
:required="field.required"
/>

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

@ -108,15 +108,17 @@ fetchToken()
{{ t('components.auth.SubsonicTokenForm.link.apps') }}
</a>
</p>
<Alert green
<Alert
v-if="success"
green
>
<h4 class="header">
{{ successMessage }}
</h4>
</Alert>
<Alert red
<Alert
v-if="subsonicEnabled && errors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -164,8 +166,8 @@ fetchToken()
</template>
</DangerousButton>
<Button
primary
v-else
primary
:is-loading="isLoading"
@click="requestNewToken"
>

3
front/src/components/channels/AlbumForm.vue
View File

@ -53,7 +53,8 @@ defineExpose({
</script>
<template>
<Layout form
<Layout
form
:class="['ui', {loading: isLoading}, 'form']"
@submit.stop.prevent
>

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

@ -56,8 +56,9 @@ const submit = async () => {
</script>
<template>
<Modal :title="t(channel?.artist?.content_category === 'podcast' ? 'components.channels.AlbumModal.header.newSeries' : 'components.channels.AlbumModal.header.newAlbum')"
<Modal
v-model="show"
:title="t(channel?.artist?.content_category === 'podcast' ? 'components.channels.AlbumModal.header.newSeries' : 'components.channels.AlbumModal.header.newAlbum')"
class="small"
:cancel="t('components.channels.AlbumModal.button.cancel')"
>
@ -80,7 +81,8 @@ const submit = async () => {
</Alert>
</template>
<Layout form
<Layout
form
:class="['ui', {loading: isLoading}, 'form']"
@submit.stop.prevent
>

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

@ -27,15 +27,14 @@ const fetchAlbums = async () => {
}
})
console.log("I found another album with artist", model.value.channel.artist.name, ":", response.data.results)
console.log('I found another album with artist', model.value.channel.artist.name, ':', response.data.results)
albums.value = response.data.results
isLoading.value = false
}
watch(() => model.value.channel, fetchAlbums, { immediate: true })
watch(albums, (value) => {
if (value.length === 1)
selectedAlbumId.value = albums.value[0].id
if (value.length === 1) { selectedAlbumId.value = albums.value[0].id }
})
</script>

4
front/src/components/channels/SubscribeButton.vue
View File

@ -6,11 +6,11 @@ import { computed, ref } from 'vue'
import { useStore } from '~/store'
import { useRoute } from 'vue-router'
const route = useRoute()
import LoginModal from '~/components/common/LoginModal.vue'
import Button from '~/components/ui/Button.vue'
const route = useRoute()
interface Events {
(e: 'unsubscribed'): void
(e: 'subscribed'): void

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

@ -27,7 +27,6 @@ import Link from '~/components/ui/Link.vue'
import Loader from '~/components/ui/Loader.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Events {
(e: 'status', status: UploadStatus): void
}
@ -107,9 +106,12 @@ const channelDropdownId = ref<Channel['artist']['id'] | null>(null)
const isLoading = ref(false)
const selectedChannel = computed(() =>
props.channel ? props.channel
: availableChannels.value.length===0 ? (createEmptyChannel(), null)
: availableChannels.value.length===1 ? availableChannels.value[0]
props.channel
? props.channel
: availableChannels.value.length === 0
? (createEmptyChannel(), null)
: availableChannels.value.length === 1
? availableChannels.value[0]
: availableChannels.value.find(({ artist }) => artist.id === channelDropdownId.value)
)
@ -118,7 +120,7 @@ const emptyChannelCreateRequest:components['schemas']['ChannelCreateRequest'] =
username: store.state.auth.username,
description: null,
tags: [],
content_category: 'music',
content_category: 'music'
}
const createEmptyChannel = async () => {
@ -127,10 +129,10 @@ const createEmptyChannel = async () => {
'channels/',
(emptyChannelCreateRequest satisfies operations['create_channel_2']['requestBody']['content']['application/json'])
)
console.log("Created Channel: ", response.data)
console.log('Created Channel: ', response.data)
} catch (error) {
errors.value = (error as BackendError).backendErrors
console.log("Error:", error)
console.log('Error:', error)
}
}
@ -150,8 +152,9 @@ const fetchChannels = async () => {
const albumSelection = ref<{channel: Channel, albumId: Album['id'] | '', albums: Album[]}>
watch(selectedChannel, (channel) =>
albumSelection.value =
{ channel: channel,
albumSelection.value
= {
channel,
albumId: '',
albums: []
}
@ -409,7 +412,7 @@ const labels = computed(() => ({
}))
const publish = async () => {
console.log("starting publish...")
console.log('starting publish...')
isLoading.value = true
errors.value = []
@ -432,8 +435,7 @@ const publish = async () => {
// headers: { 'Authorization': `Bearer ${store.state.auth.oauth}` }
// })
console.log("Channels Store Before: ", store.state.channels)
console.log('Channels Store Before: ', store.state.channels)
// Tell the store that the uploaded files are pending import
store.commit('channels/publish', {
@ -441,17 +443,16 @@ const publish = async () => {
channel: selectedChannel.value
})
console.log("Channels Store After: ", store.state.channels)
console.log('Channels Store After: ', store.state.channels)
} catch (error) {
// TODO: Use inferred error type instead of typecasting
errors.value = (error as BackendError).backendErrors
console.log("Error:", error)
console.log('Error:', error)
}
isLoading.value = false
console.log("...finished publish")
console.log('...finished publish')
}
defineExpose({
@ -520,7 +521,6 @@ ChannelCreateRequest: {
*/
</script>
<template>
<Layout
form
@ -548,19 +548,28 @@ ChannelCreateRequest: {
<!-- Select Album and License -->
<div :class="['ui', 'required', 'field']">
<label v-if="availableChannels.length === 1" for="channel-dropdown">
<label
v-if="availableChannels.length === 1"
for="channel-dropdown"
>
{{ t('components.channels.UploadForm.label.channel') }}: {{ selectedChannel?.artist.name }}
</label>
<label v-else for="channel-dropdown">
<label
v-else
for="channel-dropdown"
>
{{ t('components.channels.UploadForm.label.channel') }}
</label>
<select
v-if="availableChannels.length > 1"
v-model="channelDropdownId"
id="channel-dropdown"
v-model="channelDropdownId"
class="dropdown"
>
<option v-for="channel in availableChannels" :value="channel.artist.id">
<option
v-for="channel in availableChannels"
:value="channel.artist.id"
>
{{ channel.artist.name }}
</option>
</select>
@ -690,10 +699,14 @@ ChannelCreateRequest: {
v-model:values="uploadImportData[selectedUploadId]"
:upload="selectedUpload"
/>
<Alert blue
<Alert
blue
class="ui message"
>
<Layout flex gap-8>
<Layout
flex
gap-8
>
<i class="bi bi-info-circle-fill" />
{{ t('components.channels.UploadForm.description.extensions', {extensions: store.state.ui.supportedExtensions.join(', ')}) }}
</Layout>
@ -710,10 +723,16 @@ ChannelCreateRequest: {
{{ t('components.channels.UploadForm.message.dragAndDrop') }}
</div>
<div class="ui very small divider" />
<Button primary icon="bi-folder2-open">
<Button
primary
icon="bi-folder2-open"
>
{{ t('components.channels.UploadForm.label.openBrowser') }}
</Button>
<Spacer class="divider" :size="32" />
<Spacer
class="divider"
:size="32"
/>
</file-upload-widget>
</Layout>
</template>

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

@ -54,8 +54,8 @@ const open = ref(false)
<template>
<Modal
:title="t(`components.channels.UploadModal.header.${['', 'publish', 'uploadFiles', 'uploadDetails', 'processing'][step]}`)"
v-model="store.state.channels.showUploadModal"
:title="t(`components.channels.UploadModal.header.${['', 'publish', 'uploadFiles', 'uploadDetails', 'processing'][step]}`)"
class="small"
>
<div class="scrolling content">

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

@ -206,11 +206,11 @@ const launchAction = async () => {
<dangerous-button
v-if="selectAll || currentAction?.isDangerous"
:disabled="checked.length === 0 || undefined"
:isLoading="isLoading"
:is-loading="isLoading"
:confirm-color="currentAction?.confirmColor ?? 'success'"
:aria-label="labels.performAction"
@confirm="launchAction"
:title="t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount)"
@confirm="launchAction"
>
{{ t('components.common.ActionTable.button.go') }}
<template #modal-content>

2
front/src/components/common/ActorAvatar.vue
View File

@ -5,7 +5,7 @@ import { hashCode, intToRGB } from '~/utils/color'
import { computed } from 'vue'
interface Props {
actor: { full_username : string; preferred_username?:string; icon?:Actor["icon"] }
actor: { full_username : string; preferred_username?:string; icon?:Actor['icon'] }
}
const props = defineProps<Props>()

5
front/src/components/common/AttachmentInput.vue
View File

@ -107,8 +107,9 @@ const getAttachmentUrl = (uuid: string) => {
<template>
<div class="ui form">
<Alert red
<Alert
v-if="errors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -160,7 +161,7 @@ const getAttachmentUrl = (uuid: string) => {
type="file"
accept="image/png,image/jpeg"
@change="submit"
/>
>
</div>
<div class="ui very small hidden divider" />
<p>

7
front/src/components/common/DangerousButton.vue
View File

@ -32,16 +32,17 @@ const confirm = () => {
</script>
<template>
<component :is="props.popoverItem ? PopoverItem : Button"
<component
:is="props.popoverItem ? PopoverItem : Button"
destructive
@click.prevent.stop="showModal = true"
v-bind="$attrs"
@click.prevent.stop="showModal = true"
>
<slot />
<Modal
destructive
v-model="showModal"
destructive
:title="title || t('components.common.DangerousButton.header.confirm')"
:cancel="t('components.common.DangerousButton.button.cancel')"
>

7
front/src/components/common/EmptyState.vue
View File

@ -22,7 +22,10 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<Alert blue align-items="center">
<Alert
blue
align-items="center"
>
<h4 class="ui header">
<div class="content">
<slot name="title">
@ -35,8 +38,8 @@ withDefaults(defineProps<Props>(), {
<slot />
<Spacer :size="16" />
<Button
primary
v-if="refresh"
primary
@click="emit('refresh')"
>
{{ t('components.common.EmptyState.button.refresh') }}

3
front/src/components/common/InlineSearchBar.vue
View File

@ -36,7 +36,8 @@ const search = () => {
</script>
<template>
<Layout form
<Layout
form
@submit.stop.prevent="emit('search', value)"
>
<div :class="['ui', 'action', {icon: value}, 'input']">

5
front/src/components/common/LoginModal.vue
View File

@ -32,7 +32,10 @@ const labels = computed(() => ({
</script>
<template>
<Modal v-model="show" :title="labels.header">
<Modal
v-model="show"
:title="labels.header"
>
<div
v-if="cover"
class="image content"

5
front/src/components/common/RenderedDescription.vue
View File

@ -119,8 +119,9 @@ const submit = async () => {
v-if="isUpdating"
@submit.prevent="submit()"
>
<Alert red
<Alert
v-if="errors.length > 0"
red
title="{{ t('components.common.RenderedDescription.header.failure') }}"
role="alert"
>
@ -139,9 +140,9 @@ const submit = async () => {
/>
<Button
class="left floated"
@click.prevent="isUpdating = false"
solid
secondary
@click.prevent="isUpdating = false"
>
{{ t('components.common.RenderedDescription.button.cancel') }}
</Button>

41
front/src/components/favorites/List.vue
View File

@ -107,8 +107,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</script>
<template>
<Layout main stack no-gap align-left
<Layout
v-title="labels.title"
main
stack
no-gap
align-left
>
<Header :h1="labels.title">
<template #action>
@ -127,8 +131,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
:class="['ui', { 'loading': isLoading }, 'form']"
>
<Spacer :size="16" />
<Layout flex style="justify-content: flex-end;">
<Layout stack noGap label for="favorites-ordering">
<Layout
flex
style="justify-content: flex-end;"
>
<Layout
stack
no-gap
label
for="favorites-ordering"
>
<span class="label">
{{ t('components.favorites.List.ordering.label') }}
</span>
@ -146,7 +158,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="favorites-ordering-direction">
<Layout
stack
no-gap
label
for="favorites-ordering-direction"
>
<span class="label">
{{ t('components.favorites.List.ordering.direction.label') }}
</span>
@ -163,7 +180,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="favorites-results">
<Layout
stack
no-gap
label
for="favorites-results"
>
<span class="label">
{{ t('components.favorites.List.pagination.results') }}
</span>
@ -190,10 +212,15 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
:tracks="results"
/>
</Layout>
<Alert blue align-items="center"
<Alert
v-else
blue
align-items="center"
>
<i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
<i
class="bi bi-heartbreak-fill"
style="font-size: 100px;"
/>
<Spacer />
{{ t('components.favorites.List.empty.noFavorites') }}
<Spacer :size="32" />

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

@ -55,6 +55,5 @@ const title = computed(() => isFavorite.value
:aria-label="title"
:title="title"
@click.stop="store.dispatch('favorites/toggle', track.id)"
>
</Button>
/>
</template>

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

@ -80,8 +80,9 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
<div>
<slot />
</div>
<Modal :title="t('components.federation.FetchButton.header.refresh')"
<Modal
v-model="showModal"
:title="t('components.federation.FetchButton.header.refresh')"
class="small"
:cancel="t('components.federation.FetchButton.button.close')"
>

8
front/src/components/federation/LibraryWidget.vue
View File

@ -69,9 +69,13 @@ watch(() => props.url, () => {
align-left
small-items
>
<Loader v-if="isLoading" style="grid-column: 1 / -1;" />
<Alert blue
<Loader
v-if="isLoading"
style="grid-column: 1 / -1;"
/>
<Alert
v-if="!isLoading && libraries.length === 0"
blue
style="grid-column: 1 / -1;"
>
{{ t('components.federation.LibraryWidget.empty.noMatch') }}

3
front/src/components/forms/PasswordInput.vue
View File

@ -45,9 +45,10 @@ const copyPassword = () => {
<template>
<div>
<Input password
<Input
:id="fieldId"
v-model="value"
password
required
>
<template #input-right>

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

@ -69,7 +69,7 @@ const labels = computed(() => ({
const {
isShuffled,
shuffle,
shuffle
} = useQueue()
const isLoading = ref(false)
@ -150,7 +150,10 @@ const remove = async () => {
</script>
<template>
<Layout stack main>
<Layout
stack
main
>
<Loader
v-if="isLoading"
v-title="labels.title"
@ -162,22 +165,25 @@ const remove = async () => {
v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.large_square_crop)"
:alt="object.title"
class="channel-image"
/>
>
<img
v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
v-lazy="object.artist_credit[0].artist.cover.urls.large_square_crop"
:alt="object.artist_credit[0].artist.name"
class="channel-image"
v-lazy="object.artist_credit[0].artist.cover.urls.large_square_crop"
/>
>
<img
v-else
alt=""
class="channel-image"
src="../../assets/audio/default-cover.png"
/>
>
<!-- ({target}) => target -->
<!-- Header (TODO: Put into Header component) Hint: Header is heavier fontweight than h1! -->
<Layout stack style="flex: 1; gap: 8px;">
<Layout
stack
style="flex: 1; gap: 8px;"
>
<h1>{{ object.title }}</h1>
<!-- <Header :h1="object.title" /> -->
<artist-credit-label
@ -198,7 +204,10 @@ const remove = async () => {
{{ t('components.library.AlbumBase.meta.tracks', totalTracks) }}
</span>
</template>
<i v-if="totalDuration > 0" class="bi bi-dot" />
<i
v-if="totalDuration > 0"
class="bi bi-dot"
/>
<human-duration
v-if="totalDuration > 0"
:duration="totalDuration"
@ -233,14 +242,23 @@ const remove = async () => {
artistCredit[0].artist.channel &&
artistCredit[0].artist.attributed_to?.full_username === store.state.auth.fullUsername"
:is-loading="isLoading"
@confirm="remove()"
icon="bi-trash"
@confirm="remove()"
>
{{ t('components.library.AlbumDropdown.button.delete') }}
</DangerousButton>
<Spacer h grow />
<TrackFavoriteIcon v-if="store.state.auth.authenticated" :album="object" />
<TrackPlaylistIcon v-if="store.state.auth.authenticated" :album="object" />
<Spacer
h
grow
/>
<TrackFavoriteIcon
v-if="store.state.auth.authenticated"
:album="object"
/>
<TrackPlaylistIcon
v-if="store.state.auth.authenticated"
:album="object"
/>
<!-- TODO: Share Button -->
<album-dropdown
:object="object"

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

@ -139,8 +139,8 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
<Spacer />
<library-widget
:url="'albums/' + object.id + '/libraries/'"
@loaded="emit('libraries-loaded', $event)"
:title="t('components.library.AlbumDetail.header.libraries')"
@loaded="emit('libraries-loaded', $event)"
>
{{ t('components.library.AlbumDetail.description.libraries') }}
</library-widget>

13
front/src/components/library/AlbumDropdown.vue
View File

@ -16,7 +16,7 @@ import Button from '~/components/ui/Button.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import DangerousButton from '~/components/common/DangerousButton.vue'
import OptionsButton from "~/components/ui/button/Options.vue"
import OptionsButton from '~/components/ui/button/Options.vue'
interface Events {
(e: 'remove'): void
@ -60,9 +60,10 @@ const open = ref(false)
<template>
<span>
<Modal :title="t('components.library.AlbumDropdown.modal.embed.header')"
<Modal
v-if="isEmbedable"
v-model="showEmbedModal"
:title="t('components.library.AlbumDropdown.modal.embed.header')"
:cancel="t('components.library.AlbumDropdown.button.cancel')"
>
<div class="scrolling content">
@ -78,7 +79,7 @@ const open = ref(false)
<template #default="{ toggleOpen }">
<OptionsButton
:title="labels.more"
isSquare
is-square
@click="toggleOpen()"
/>
</template>
@ -95,8 +96,8 @@ const open = ref(false)
<PopoverItem
v-if="isEmbedable"
@click="showEmbedModal = !showEmbedModal"
icon="bi-code"
@click="showEmbedModal = !showEmbedModal"
>
{{ t('components.library.AlbumDropdown.button.embed') }}
</PopoverItem>
@ -137,8 +138,8 @@ const open = ref(false)
>
<DangerousButton
:is-loading="isLoading"
@confirm="remove()"
icon="bi-trash"
@confirm="remove()"
>
{{ t('components.library.AlbumDropdown.button.delete') }}
</DangerousButton>
@ -152,8 +153,8 @@ const open = ref(false)
channel: artistCredit[0]?.artist.channel
})"
:key="obj.target.type + obj.target.id"
@click="report(obj)"
icon="bi-flag"
@click="report(obj)"
>
{{ obj.label }}
</PopoverItem>

47
front/src/components/library/Albums.vue
View File

@ -131,27 +131,38 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</script>
<template>
<Layout stack main v-title="labels.title">
<Layout
v-title="labels.title"
stack
main
>
<Header :h1="t('components.library.Albums.header.browse')" />
<Layout form flex
<Layout
form
flex
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search"
>
<Input search
<Input
id="album-search"
v-model="query"
search
name="search"
:label="t('components.library.Albums.label.search')"
autofocus
:placeholder="labels.searchPlaceholder"
>
</Input>
/>
<Pills
v-model="tagList"
:label="t('components.library.Albums.label.tags')"
style="max-width: 150px;"
/>
<Layout stack noGap label for="album-ordering">
<Layout
stack
no-gap
label
for="album-ordering"
>
<span class="label">
{{ t('components.library.Albums.ordering.label') }}
</span>
@ -169,7 +180,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="album-ordering-direction">
<Layout
stack
no-gap
label
for="album-ordering-direction"
>
<span class="label">
{{ t('components.library.Albums.ordering.direction.label') }}
</span>
@ -186,7 +202,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="album-results">
<Layout
stack
no-gap
label
for="album-results"
>
<span class="label">
{{ t('components.library.Albums.pagination.results') }}
</span>
@ -211,8 +232,9 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
v-model:page="page"
:pages="Math.ceil((result.count || 0)/paginateBy)"
/>
<Layout grid
<Layout
v-if="result && result.results.length > 0"
grid
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
>
<AlbumCard
@ -222,8 +244,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
/>
</Layout>
<Layout
stack
v-else-if="result && result.results.length === 0"
stack
>
<Alert blue>
<i class="bi bi-disc" />
@ -239,7 +261,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:to="useModal('upload').to"
>
<template #image>
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
<i
class="bi bi-upload"
style="font-size: 100px; position: relative; top: 50px;"
/>
</template>
</Card>
</Layout>

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

@ -25,7 +25,6 @@ import Layout from '~/components/ui/Layout.vue'
import Modal from '~/components/ui/Modal.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Props {
id: number
}
@ -56,7 +55,6 @@ const musicbrainzUrl = computed(() => object.value?.mbid ? `https://musicbrainz.
const discogsUrl = computed(() => `https://discogs.com/search/?type=artist&title=${encodeURI(object.value?.name ?? '')}`)
const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
const cover = computed(() => {
const artistCover: Cover | undefined = object.value?.cover
@ -122,7 +120,11 @@ watch(() => props.id, fetchData, { immediate: true })
</script>
<template>
<Layout stack main v-title="labels.title">
<Layout
v-title="labels.title"
stack
main
>
<Loader v-if="isLoading" />
<template v-if="object && !isLoading">
<Layout flex>
@ -131,9 +133,16 @@ watch(() => props.id, fetchData, { immediate: true })
:alt="object.name"
class="channel-image"
>
<Layout stack style="flex: 1; gap: 8px;">
<Layout
stack
style="flex: 1; gap: 8px;"
>
<h1>{{ object.name }}</h1>
<Layout flex class="meta" style="gap: 0;">
<Layout
flex
class="meta"
style="gap: 0;"
>
<div
v-if="albums"
>
@ -181,8 +190,8 @@ watch(() => props.id, fetchData, { immediate: true })
<PopoverItem
v-if="publicLibraries.length > 0"
@click="showEmbedModal = true"
icon="bi-code-square"
@click="showEmbedModal = true"
>
{{ t('components.library.ArtistBase.button.embed') }}
</PopoverItem>

31
front/src/components/library/ArtistDetail.vue
View File

@ -6,7 +6,6 @@ import { ref, computed, reactive } from 'vue'
import { useStore } from '~/store'
import { useI18n } from 'vue-i18n'
import axios from 'axios'
import LibraryWidget from '~/components/federation/LibraryWidget.vue'
@ -14,7 +13,7 @@ import TrackTable from '~/components/audio/track/Table.vue'
import TagsList from '~/components/tags/List.vue'
import AlbumCard from '~/components/album/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Heading from "~/components/ui/Heading.vue";
import Heading from '~/components/ui/Heading.vue'
import Loader from '~/components/ui/Loader.vue'
import Link from '~/components/ui/Link.vue'
import Spacer from '~/components/ui/Spacer.vue'
@ -69,14 +68,18 @@ const loadMoreAlbums = async () => {
</script>
<template>
<Layout stack v-if="object">
<Layout
v-if="object"
stack
>
<TagsList
v-if="object.tags && object.tags.length > 0"
style="margin-top: -16px;"
:tags="object.tags"
/>
<Alert blue
<Alert
v-if="contentFilter"
blue
>
<p>
{{ t('components.library.ArtistDetail.message.filter') }}
@ -96,7 +99,10 @@ const loadMoreAlbums = async () => {
</Alert>
<Loader v-if="isLoadingAlbums" />
<template v-else-if="albums && albums.length > 0">
<Heading h2 section-heading>
<Heading
h2
section-heading
>
{{ t('components.library.ArtistDetail.header.album') }}
</Heading>
<Layout flex>
@ -105,7 +111,10 @@ const loadMoreAlbums = async () => {
:key="album.id"
:album="album"
/>
<Spacer h grow />
<Spacer
h
grow
/>
<Button
v-if="loadMoreAlbumsUrl !== null"
primary
@ -117,7 +126,10 @@ const loadMoreAlbums = async () => {
</Layout>
</template>
<template v-if="tracks.length > 0">
<Heading h2 section-heading>
<Heading
h2
section-heading
>
{{ t('components.library.ArtistDetail.header.track') }}
</Heading>
<TrackTable
@ -127,7 +139,10 @@ const loadMoreAlbums = async () => {
:tracks="tracks.slice(0,5)"
/>
</template>
<Heading h2 section-heading>
<Heading
h2
section-heading
>
{{ t('components.library.ArtistDetail.header.library') }}
</Heading>
<LibraryWidget

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

@ -28,14 +28,17 @@ const canEdit = store.state.auth.availablePermissions.library
<template>
<Layout stack>
<Spacer />
<Section no-items alignLeft
<Section
no-items
align-left
:h2="canEdit
? t('components.library.ArtistEdit.header.edit')
: t('components.library.ArtistEdit.header.suggest')
"
/>
<Alert yellow
<Alert
v-if="!object.is_local"
yellow
>
{{ t('components.library.ArtistEdit.message.remote') }}
</Alert>

49
front/src/components/library/Artists.vue
View File

@ -130,27 +130,38 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</script>
<template>
<Layout stack main v-title="labels.title">
<Layout
v-title="labels.title"
stack
main
>
<Header :h1="t('components.library.Artists.header.browse')" />
<Layout form flex
<Layout
form
flex
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search"
>
<Input search
<Input
id="artist-search"
v-model="query"
search
name="search"
:label="t('components.library.Artists.label.search')"
autofocus
:placeholder="labels.searchPlaceholder"
>
</Input>
/>
<Pills
v-model="tagList"
:label="t('components.library.Artists.label.tags')"
style="max-width: 150px;"
/>
<Layout stack noGap label for="artist-ordering">
<Layout
stack
no-gap
label
for="artist-ordering"
>
<span class="label">
{{ t('components.library.Artists.ordering.label') }}
</span>
@ -168,7 +179,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-ordering-direction">
<Layout
stack
no-gap
label
for="artist-ordering-direction"
>
<span class="label">
{{ t('components.library.Artists.ordering.direction.label') }}
</span>
@ -185,7 +201,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-results">
<Layout
stack
no-gap
label
for="artist-results"
>
<span class="label">
{{ t('components.library.Artists.pagination.results') }}
</span>
@ -204,9 +225,9 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select>
</Layout>
<Toggle
:label="t('components.library.Artists.label.excludeCompilation')"
id="exclude-compilation"
v-model="excludeCompilation"
:label="t('components.library.Artists.label.excludeCompilation')"
true-value="true"
false-value="null"
type="checkbox"
@ -218,8 +239,9 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
v-model:page="page"
:pages="Math.ceil(result.count / paginateBy)"
/>
<Layout grid
<Layout
v-if="result && result.results.length > 0"
grid
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
>
<ArtistCard
@ -229,8 +251,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
/>
</Layout>
<Layout
stack
v-else-if="result && result.results.length === 0"
stack
>
<Alert yellow>
<i class="compact disc icon" />
@ -246,7 +268,10 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:to="useModal('upload').to"
>
<template #image>
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
<i
class="bi bi-upload"
style="font-size: 100px; position: relative; top: 50px;"
/>
</template>
</Card>
</Layout>

12
front/src/components/library/EditCard.vue
View File

@ -169,7 +169,7 @@ const alertProps = computed(() => {
<template>
<Card
:alertProps="alertProps"
:alert-props="alertProps"
:to="detailUrl"
:title="t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)})"
>
@ -183,7 +183,6 @@ const alertProps = computed(() => {
<i class="bi bi-file-music-fill" />
{{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
</router-link>
</div>
</div>
<div
@ -313,13 +312,14 @@ const alertProps = computed(() => {
/>
</template>
<template #action
<template
v-if="canDelete || canApprove"
#action
>
<Button
v-if="canApprove && obj.is_approved !== true"
primary
:isLoading="isLoading"
:is-loading="isLoading"
@click="approve(true)"
>
{{ t('components.library.EditCard.button.approve') }}
@ -327,7 +327,7 @@ const alertProps = computed(() => {
<Button
v-if="canApprove && obj.is_approved === null"
destructive
:isLoading="isLoading"
:is-loading="isLoading"
@click="approve(false)"
>
{{ t('components.library.EditCard.button.reject') }}
@ -335,7 +335,7 @@ const alertProps = computed(() => {
<!--TODO: Make Dangerous Button hand through isLoading prop -->
<dangerous-button
v-if="canDelete"
:isLoading="isLoading"
:is-loading="isLoading"
:action="remove"
:title="t('components.library.EditCard.modal.delete.header')"
>

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

@ -13,9 +13,9 @@ import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Input from '~/components/ui/Input.vue'
import Textarea from "~/components/ui/Textarea.vue"
import Pills from "~/components/ui/Pills.vue"
import Alert from "~/components/ui/Alert.vue"
import Textarea from '~/components/ui/Textarea.vue'
import Pills from '~/components/ui/Pills.vue'
import Alert from '~/components/ui/Alert.vue'
import AttachmentInput from '~/components/common/AttachmentInput.vue'
import useEditConfigs from '~/composables/moderation/useEditConfigs'
@ -137,7 +137,10 @@ const resetField = (fieldId: string) => {
</script>
<template>
<Alert green v-if="submittedMutation">
<Alert
v-if="submittedMutation"
green
>
<h4 class="header">
{{ t('components.library.EditForm.header.success') }}
</h4>
@ -146,14 +149,17 @@ const resetField = (fieldId: string) => {
:current-state="currentState"
/>
<Button
solid primary
solid
primary
@click.prevent="submittedMutation = null"
>
{{ t('components.library.EditForm.button.new') }}
</Button>
</Alert>
<Layout gap-32 v-else>
<Layout
v-else
gap-32
>
<!-- Previous edits -->
<edit-list
@ -196,11 +202,14 @@ const resetField = (fieldId: string) => {
<!-- Add new edits -->
<form class="ui form" style="display: contents;"
<form
class="ui form"
style="display: contents;"
@submit.prevent="submit()"
>
<Alert red
<Alert
v-if="errors.length > 0"
red
role="alert"
>
<h4 class="header">
@ -215,15 +224,18 @@ const resetField = (fieldId: string) => {
</li>
</ul>
</Alert>
<Alert red
<Alert
v-if="!canEdit"
red
>
{{ t('components.library.EditForm.message.noPermission') }}
</Alert>
<Layout stack gap-8
v-if="values"
<Layout
v-for="fieldConfig in config.fields"
v-if="values"
:key="fieldConfig.id"
stack
gap-8
class="ui field"
>
<template v-if="fieldConfig.type === 'text'">
@ -259,10 +271,10 @@ const resetField = (fieldId: string) => {
</template>
<template v-else-if="fieldConfig.type === 'content'">
<Textarea
:label="fieldConfig.label"
v-model="values[fieldConfig.id].text"
:label="fieldConfig.label"
:field-id="fieldConfig.id"
initialLines="3"
initial-lines="3"
/>
</template>
<!-- TODO: Style Attachment Input -->
@ -281,9 +293,9 @@ const resetField = (fieldId: string) => {
<template v-else-if="fieldConfig.type === 'tags'">
<Pills
:id="fieldConfig.id"
:label="fieldConfig.label"
ref="tags"
v-model="values[fieldConfig.id]"
:label="fieldConfig.label"
required="fieldConfig.required"
>
<Button
@ -298,7 +310,7 @@ const resetField = (fieldId: string) => {
<Button
low-height
secondary
alignSelf="end"
align-self="end"
icon="bi-arrow-counterclockwise"
form="noop"
:disabled="fieldValuesChanged(fieldConfig.id) ? undefined : true"
@ -312,7 +324,7 @@ const resetField = (fieldId: string) => {
id="change-summary"
v-model="summary"
name="change-summary"
initialLines="3"
initial-lines="3"
:label="t('components.library.EditForm.label.summary')"
:placeholder="labels.summaryPlaceholder"
>
@ -327,7 +339,7 @@ const resetField = (fieldId: string) => {
</Button>
</Textarea>
<Button
:isLoading="isLoading"
:is-loading="isLoading"
primary
:disabled="isLoading || !mutationPayload"
>

10
front/src/components/library/EditList.vue
View File

@ -61,11 +61,10 @@ watchEffect(() => fetchData())
:disabled="!previousPage"
primary
round
alignSelf="center"
align-self="center"
icon="bi-chevron-left"
@click="fetchData(previousPage)"
>
</Button>
/>
<Loader v-if="isLoading" />
<edit-card
v-for="obj in objects"
@ -78,12 +77,11 @@ watchEffect(() => fetchData())
<Button
v-if="nextPage || previousPage"
:disabled="!nextPage"
alignSelf="center"
align-self="center"
primary
round
icon="bi-chevron-right"
@click="fetchData(nextPage)"
>
</Button>
/>
</Layout>
</template>

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

@ -97,7 +97,8 @@ const library = ref<Library>()
// Old implementation:
watch(privacyLevel, async(newValue) => { try {
watch(privacyLevel, async (newValue) => {
try {
const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
params: {
privacy_level: privacyLevel.value,
@ -108,8 +109,8 @@ watch(privacyLevel, async(newValue) => { try {
library.value = response.data.results.find(({ name }) => name === privacyLevel.value)
} catch (error) {
useErrorHandler(error as Error)
}}, { immediate: true })
}
}, { immediate: true })
//
// File counts
@ -355,14 +356,21 @@ useEventListener(window, 'beforeunload', (event) => {
</div>
</div>
</div>
<Slider :options="options" v-model="privacyLevel" :label="t('components.manage.library.UploadsTable.label.visibility')" />
<Slider
v-model="privacyLevel"
:options="options"
:label="t('components.manage.library.UploadsTable.label.visibility')"
/>
<file-upload-widget
ref="upload"
v-model="files"
:data="uploadData"
@input-file="inputFile"
>
<Button primary icon="bi bi-upload" >
<Button
primary
icon="bi bi-upload"
>
{{ t('components.library.FileUpload.label.uploadWidget') }}
</Button>
<p>
@ -602,11 +610,10 @@ useEventListener(window, 'beforeunload', (event) => {
<template v-else-if="!file.success">
<Button
tiny
@click.prevent="upload.remove(file)"
style="float: right;"
icon="bi-trash-fill"
>
</Button>
@click.prevent="upload.remove(file)"
/>
</template>
</td>
</tr>

1
front/src/components/library/FsBrowser.vue
View File

@ -9,7 +9,6 @@ import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
interface Events {
(e: 'update:modelValue', value: string[]): void
(e: 'import'): void

1
front/src/components/library/FsLogs.vue
View File

@ -2,7 +2,6 @@
import type { FSLogs } from '~/types'
import { useI18n } from 'vue-i18n'
interface Props {
data: FSLogs
}

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

@ -62,9 +62,11 @@ fetchData()
</script>
<template>
<Layout main stack
<Layout
:key="route?.name ?? undefined"
v-title="labels.title"
main
stack
>
<Header :h1="t('components.Sidebar.header.explore')" />
<playlist-widget

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

@ -76,8 +76,9 @@ const getErrorData = (upload: Upload) => {
</script>
<template>
<Modal :title="t('components.library.ImportStatusModal.header.importDetail')"
<Modal
v-model="show"
:title="t('components.library.ImportStatusModal.header.importDetail')"
:cancel="t('components.library.ImportStatusModal.button.close')"
>
<div

53
front/src/components/library/Podcasts.vue
View File

@ -133,29 +133,39 @@ const { to:upload } = useModal('upload')
</script>
<template>
<Layout stack main>
<Layout
stack
main
>
<Header
:h1="t('components.library.Podcasts.header.browse')"
/>
<Layout form flex
<Layout
form
flex
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search"
>
<Input search
<Input
id="artist-search"
v-model="query"
search
name="search"
:label="t('components.library.Podcasts.label.search')"
autofocus
:placeholder="labels.searchPlaceholder"
>
</Input>
/>
<Pills
v-model="tagList"
:label="t('components.library.Podcasts.label.tags')"
style="max-width: 150px;"
/>
<Layout stack noGap label for="artist-ordering">
<Layout
stack
no-gap
label
for="artist-ordering"
>
<span class="label">
{{ t('components.library.Podcasts.ordering.label') }}
</span>
@ -173,7 +183,12 @@ const { to:upload } = useModal('upload')
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-ordering-direction">
<Layout
stack
no-gap
label
for="artist-ordering-direction"
>
<span class="label">
{{ t('components.library.Podcasts.ordering.direction.label') }}
</span>
@ -190,7 +205,12 @@ const { to:upload } = useModal('upload')
</option>
</select>
</Layout>
<Layout stack noGap label for="artist-results">
<Layout
stack
no-gap
label
for="artist-results"
>
<span class="label">
{{ t('components.library.Podcasts.pagination.results') }}
</span>
@ -209,8 +229,9 @@ const { to:upload } = useModal('upload')
</select>
</Layout>
</Layout>
<Layout grid
<Layout
v-if="result && result.results.length > 0"
grid
style="display:flex; flex-wrap:wrap; gap: 32px; margin-top:32px;"
>
<Loader v-if="isLoading" />
@ -221,8 +242,8 @@ const { to:upload } = useModal('upload')
/>
</Layout>
<Layout
stack
v-else-if="result && result.results.length === 0"
stack
>
<Alert yellow>
{{ t('components.library.Podcasts.empty.noResults') }}
@ -238,7 +259,10 @@ const { to:upload } = useModal('upload')
:to="subscribe"
>
<template #image>
<i class="bi bi-plus" style="font-size: 100px; position: relative; top: 50px;" />
<i
class="bi bi-plus"
style="font-size: 100px; position: relative; top: 50px;"
/>
</template>
</Card>
<Card
@ -251,7 +275,10 @@ const { to:upload } = useModal('upload')
:to="upload"
>
<template #image>
<i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
<i
class="bi bi-upload"
style="font-size: 100px; position: relative; top: 50px;"
/>
</template>
</Card>
</Layout>
@ -290,7 +317,5 @@ const { to:upload } = useModal('upload')
</Button>
</template>
</Modal>
</Layout>
</template>

49
front/src/components/library/Radios.vue
View File

@ -114,9 +114,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</script>
<template>
<Layout main stack gap-64>
<Layout
main
stack
gap-64
>
<Header :h1="t('components.library.Radios.header.browse')" />
<Section alignLeft :h2="t('components.library.Radios.header.instance')">
<Section
align-left
:h2="t('components.library.Radios.header.instance')"
>
<radio-card
v-if="isAuthenticated"
:type="'actor-content'"
@ -157,18 +164,26 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('components.library.Radios.button.create') }}
</Link>
</h2>
<Layout flex form
<Layout
flex
form
:class="['ui', {'loading': isLoading}, 'form']"
@submit.prevent="search"
>
<Input search
<Input
id="radios-search"
v-model="query"
search
name="search"
:label="t('components.library.Radios.label.search')"
:placeholder="labels.searchPlaceholder"
/>
<Layout stack noGap label for="radios-ordering">
<Layout
stack
no-gap
label
for="radios-ordering"
>
<span class="label">
{{ t('components.library.Radios.ordering.label') }}
</span>
@ -186,7 +201,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="radios-ordering-direction">
<Layout
stack
no-gap
label
for="radios-ordering-direction"
>
<span class="label">
{{ t('components.library.Radios.ordering.direction.label') }}
</span>
@ -203,7 +223,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</option>
</select>
</Layout>
<Layout stack noGap label for="radios-results">
<Layout
stack
no-gap
label
for="radios-results"
>
<span class="label">
{{ t('components.library.Radios.pagination.results') }}
</span>
@ -223,11 +248,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</Layout>
</Layout>
<Alert
v-if="result && result.results.length === 0"
blue
style="align-items: center;"
v-if="result && result.results.length === 0"
>
<i class="bi bi-broadcast-pin" style="font-size: 80px" />
<i
class="bi bi-broadcast-pin"
style="font-size: 80px"
/>
<Spacer />
{{ t('components.library.Radios.empty.noResults') }}
<Spacer />
@ -241,8 +269,9 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
{{ t('components.library.Radios.button.add') }}
</Button>
</Alert>
<Layout flex
<Layout
v-if="result && result.results.length > 0"
flex
>
<Pagination
v-if="result && result.count > paginateBy"

11
front/src/components/library/TagDetail.vue
View File

@ -27,7 +27,11 @@ const labels = computed(() => ({
</script>
<template>
<Layout main stack v-title="labels.title">
<Layout
v-title="labels.title"
main
stack
>
<h1 class="ui header">
<span class="funkwhale solid raised secondary pill">
<span class="pill-content">
@ -35,7 +39,10 @@ const labels = computed(() => ({
</span>
</span>
</h1>
<Layout flex class="buttons">
<Layout
flex
class="buttons"
>
<radio-button
type="tag"
:object-id="id"

43
front/src/components/library/TrackBase.vue
View File

@ -126,7 +126,10 @@ watch(showDeleteModal, (newValue) => {
</script>
<template>
<Layout stack main>
<Layout
stack
main
>
<Loader
v-if="isLoading"
v-title="labels.title"
@ -152,8 +155,15 @@ watch(showDeleteModal, (newValue) => {
src="../../assets/audio/default-cover.png"
>
<Layout stack style="flex: 1; gap: 8px;">
<Layout flex no-gap style="align-items: baseline; margin-bottom: 24px;">
<Layout
stack
style="flex: 1; gap: 8px;"
>
<Layout
flex
no-gap
style="align-items: baseline; margin-bottom: 24px;"
>
<h1>{{ track.title }}</h1>
<Spacer grow />
<Button
@ -172,7 +182,10 @@ watch(showDeleteModal, (newValue) => {
<span>{{ t('components.library.TrackBase.title') }}</span>
<i class="bi bi-dot" />
<span>{{ track.album.title }}</span>
<i v-if="totalDuration > 0" class="bi bi-dot" />
<i
v-if="totalDuration > 0"
class="bi bi-dot"
/>
<human-duration
v-if="totalDuration > 0"
:duration="totalDuration"
@ -187,10 +200,19 @@ watch(showDeleteModal, (newValue) => {
:track="track"
/>
<Spacer h grow />
<Spacer
h
grow
/>
<TrackFavoriteIcon v-if="store.state.auth.authenticated" :track="track" />
<TrackPlaylistIcon v-if="store.state.auth.authenticated" :track="track" />
<TrackFavoriteIcon
v-if="store.state.auth.authenticated"
:track="track"
/>
<TrackPlaylistIcon
v-if="store.state.auth.authenticated"
:track="track"
/>
<Popover v-model:open="open">
<template #default="{ toggleOpen }">
<OptionsButton @click="toggleOpen" />
@ -207,8 +229,8 @@ watch(showDeleteModal, (newValue) => {
<PopoverItem
v-if="isEmbedable"
@click="showEmbedModal = !showEmbedModal"
icon="bi-code-slash"
@click="showEmbedModal = !showEmbedModal"
>
{{ t('components.library.TrackBase.button.embed') }}
</PopoverItem>
@ -245,8 +267,8 @@ watch(showDeleteModal, (newValue) => {
store.state.auth.authenticated &&
artist.channel &&
artist.attributed_to.full_username === store.state.auth.fullUsername"
@click="showDeleteModal = true"
icon="bi-trash"
@click="showDeleteModal = true"
>
{{ t('components.library.TrackBase.button.delete') }}
</PopoverItem>
@ -256,8 +278,8 @@ watch(showDeleteModal, (newValue) => {
<PopoverItem
v-for="obj in getReportableObjects({ track })"
:key="obj.target.type + obj.target.id"
@click="report(obj)"
icon="bi-flag"
@click="report(obj)"
>
{{ obj.label }}
</PopoverItem>
@ -369,7 +391,6 @@ watch(showDeleteModal, (newValue) => {
@libraries-loaded="libraries = $event"
/>
</template>
</Layout>
</template>

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

@ -98,7 +98,7 @@ const release_details: {
},
{
label: t('components.library.TrackDetail.table.release.license'),
release_value: license?.name || t('components.library.TrackDetail.notApplicable'),
release_value: license.value?.name || t('components.library.TrackDetail.notApplicable')
}
]
@ -135,17 +135,26 @@ const track_details: {
</script>
<template>
<Layout stack v-if="track">
<Layout
v-if="track"
stack
>
<TagsList
v-if="track.tags && track.tags.length > 0"
style="margin-top: -16px;"
:tags="track.tags"
/>
<Layout flex style="gap: 24px;">
<Layout stack style="flex: 1; gap: 0;">
<Layout
flex
style="gap: 24px;"
>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Section
alignLeft
align-left
h2="Release Details"
:action="{
text:'View on MusicBrainz',
@ -153,28 +162,63 @@ const track_details: {
}"
icon="bi-box-arrow-up-right"
/>
<Layout flex class="details" v-for="item in release_details" key="label"
<Layout
v-for="item in release_details"
key="label"
flex
class="details"
style="min-width: 120px;"
>
<span class="label">{{ item.label }}</span>
<Spacer h grow />
<Link v-if="item.link" class="value" :to="item.link">{{ item.release_value }}</Link>
<span v-else class="value">{{ item.release_value }}</span>
<Spacer
h
grow
/>
<Link
v-if="item.link"
class="value"
:to="item.link"
>
{{ item.release_value }}
</Link>
<span
v-else
class="value"
>{{ item.release_value }}</span>
</Layout>
</Layout>
<Layout stack style="flex: 1; gap: 0;">
<Layout
stack
style="flex: 1; gap: 0;"
>
<Section
alignLeft
align-left
h2="Track Details"
/>
<Layout flex class="details" v-for="item in track_details" key="label"
<Layout
v-for="item in track_details"
key="label"
flex
class="details"
style="min-width: 120px;"
>
<span class="label">{{ item.label }}</span>
<Spacer h grow />
<Link v-if="item.link" class="value" :to="item.link">{{ item.track_value }}</Link>
<span v-else class="value">{{ item.track_value }}</span>
<Spacer
h
grow
/>
<Link
v-if="item.link"
class="value"
:to="item.link"
>
{{ item.track_value }}
</Link>
<span
v-else
class="value"
>{{ item.track_value }}</span>
</Layout>
</Layout>
</Layout>

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

@ -5,7 +5,6 @@ import type { Library } from '~/types'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import store from '~/store'
import axios from 'axios'
@ -50,8 +49,9 @@ fetchLicenses()
<template>
<Header :h2="canEdit ? t('components.library.TrackEdit.header.edit') : t('components.library.TrackEdit.header.suggest')" />
<Alert yellow
<Alert
v-if="!object.is_local"
yellow
>
{{ t('components.library.TrackEdit.message.remote') }}
</Alert>

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

@ -195,9 +195,9 @@ const save = async () => {
<template>
<Layout
v-title="labels.title"
stack
main
v-title="labels.title"
>
<section>
<h1>

3
front/src/components/library/radios/Filter.vue
View File

@ -186,9 +186,10 @@ fetchCandidates()
>
{{ t('components.library.radios.Filter.matchingTracks', checkResult.candidates.count) }}
</a>
<Modal :title="t('components.library.radios.Filter.matchingTracksModalHeader')"
<Modal
v-if="checkResult"
v-model:show="showCandidadesModal"
:title="t('components.library.radios.Filter.matchingTracksModalHeader')"
>
<div class="content">
<div class="description">

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

@ -340,8 +340,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
icon="bi-question-circle"
:title="sharedLabels.fields.import_status.label"
@click="detailedUpload = scope.obj; showUploadDetailModal = true"
>
</Button>
/>
</td>
<td>
<span v-if="scope.obj.size">{{ humanSize(scope.obj.size) }}</span>

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

@ -241,8 +241,8 @@ const remove = async () => {
<dangerous-button
v-if="object"
style="float: right;"
@confirm="remove"
:title="t('components.manage.moderation.InstancePolicyForm.modal.delete.header')"
@confirm="remove"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
<template #modal-content>

3
front/src/components/manage/moderation/InstancePolicyModal.vue
View File

@ -72,8 +72,9 @@ const fetchData = async () => {
<slot>
{{ t('components.manage.moderation.InstancePolicyModal.button.show') }}
</slot>
<Modal :title="t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target})"
<Modal
v-model="show"
:title="t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target})"
:cancel="t('components.manage.moderation.InstancePolicyModal.button.close')"
>
<div class="content">

2
front/src/components/manage/moderation/NotesThread.vue
View File

@ -67,9 +67,9 @@ const remove = async (note: Note) => {
<dangerous-button
:is-loading="isLoading"
low-height
@confirm="remove(note)"
icon="bi-trash"
:title="t('components.manage.moderation.NotesThread.modal.delete.header')"
@confirm="remove(note)"
>
{{ t('components.manage.moderation.NotesThread.button.delete') }}

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

@ -5,7 +5,6 @@ import { useStore } from '~/store'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import axios from 'axios'
import NotesThread from '~/components/manage/moderation/NotesThread.vue'

6
front/src/components/moderation/FilterModal.vue
View File

@ -60,14 +60,16 @@ const hide = async () => {
</script>
<template>
<Modal v-model="show"
<Modal
v-model="show"
:title="type==='artist' ? t('components.moderation.FilterModal.header.modal', {name: target?.name}) : errors.length > 0 ? t('components.moderation.FilterModal.header.failure') : ''"
:cancel="t('components.moderation.FilterModal.button.cancel')"
>
<div class="scrolling content">
<div class="description">
<Alert red
<Alert
v-if="errors.length > 0"
red
>
<ul class="list">
<li

9
front/src/components/moderation/ReportModal.vue
View File

@ -125,8 +125,9 @@ watchEffect(async () => {
</script>
<template>
<Modal :title="target ? t('components.moderation.ReportModal.header.modal') : errors.length > 0 ? t('components.moderation.ReportModal.header.submissionFailure') : ''"
<Modal
v-model="show"
:title="target ? t('components.moderation.ReportModal.header.modal') : errors.length > 0 ? t('components.moderation.ReportModal.header.submissionFailure') : ''"
:cancel="t('components.moderation.ReportModal.button.cancel')"
>
<h2
@ -141,8 +142,9 @@ watchEffect(async () => {
</h2>
<div class="scrolling content">
<div class="description">
<Alert red
<Alert
v-if="errors.length > 0"
red
>
<ul class="list">
<li
@ -241,8 +243,9 @@ watchEffect(async () => {
</div>
</div>
<template #actions>
<Button destructive
<Button
v-if="canSubmit"
destructive
:is-loading="isLoading"
type="submit"
form="report-form"

6
front/src/components/playlist/Card.vue
View File

@ -36,15 +36,15 @@ if (import.meta.env.PROD) {
<template>
<Card
:title="playlist.name"
@click="navigate('playlist')"
class="playlist-card"
@click="navigate('playlist')"
>
<template #image>
<img
v-for="src in covers"
:key="src"
:src="src"
/>
>
<div
v-for="i in Math.max(0, 4 - covers.length)"
:key="i"
@ -54,8 +54,8 @@ if (import.meta.env.PROD) {
<PlayButton @play="play(playlist)" />
<a
@click.stop="navigate('user')"
class="funkwhale link"
@click.stop="navigate('user')"
>
{{ t('vui.by-user', playlist.actor.full_username) }}
</a>

10
front/src/components/playlists/Card.vue
View File

@ -45,13 +45,13 @@ const bgcolors = ref([
'#292525',
'#403a3b',
'#322f2f'
]);
])
function shuffleArray (array: string[]): string[] {
return [...array].sort(() => Math.random() - 0.5);
return [...array].sort(() => Math.random() - 0.5)
}
const randomizedColors = computed(() => shuffleArray(bgcolors.value));
const randomizedColors = computed(() => shuffleArray(bgcolors.value))
const goToPlaylist = () => {
router.push({ name: 'library.playlists.detail', params: { id: props.playlist.id } })
@ -72,7 +72,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
>
<template #topright>
<PlayButton
iconOnly
icon-only
:is-playable="playlist.is_playable"
:playlist="playlist"
/>
@ -86,7 +86,7 @@ const updatedAgo = computed(() => moment(props.playlist.modification_date).fromN
v-lazy="url"
:alt="playlist.name"
:style="{ backgroundColor: randomizedColors[idx % randomizedColors.length] }"
/>
>
</div>
</template>

5
front/src/components/playlists/CardList.vue
View File

@ -12,7 +12,10 @@ defineProps<Props>()
</script>
<template>
<Layout grid v-if="playlists.length > 0">
<Layout
v-if="playlists.length > 0"
grid
>
<PlaylistsCard
v-for="playlist in playlists"
:key="playlist.id"

4
front/src/components/playlists/Editor.vue
View File

@ -184,8 +184,8 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
<i class="dangerclose icon" />
{{ t('components.playlists.Editor.error.sync') }}
<Alert
red
v-if="errors.length > 0"
red
role="alert"
>
<ul class="list">
@ -199,8 +199,8 @@ const insertMany = async (insertedTracks: number[], allowDuplicates: boolean) =>
</Alert>
</template>
<Alert
red
v-else-if="status === 'confirmDuplicateAdd'"
red
role="alert"
>
<p>

11
front/src/components/playlists/Form.vue
View File

@ -55,7 +55,7 @@ const privacyLevelChoices = {
me: sharedLabels.fields.privacy_level.choices.me,
instance: sharedLabels.fields.privacy_level.choices.instance,
everyone: sharedLabels.fields.privacy_level.choices.everyone
} as const satisfies Record<PrivacyLevel, string>;
} as const satisfies Record<PrivacyLevel, string>
const el = useCurrentElement()
@ -95,7 +95,8 @@ const submit = async () => {
</script>
<template>
<Layout form
<Layout
form
@submit.prevent="submit()"
>
<h3
@ -145,7 +146,11 @@ const submit = async () => {
/>
</div>
<div class="field">
<Slider :options="privacyLevelChoices" v-model="privacyLevel" :label="t('components.playlists.Form.label.visibility')" />
<Slider
v-model="privacyLevel"
:options="privacyLevelChoices"
:label="t('components.playlists.Form.label.visibility')"
/>
</div>
<div class="field">
<span id="updatePlaylistLabel" />

4
front/src/components/playlists/PlaylistDropdown.vue
View File

@ -114,8 +114,9 @@ const showDeleteModal = ref(false)
>
{{ t('views.playlists.Detail.button.embed') }}
</PopoverItem>
<PopoverItem destructive
<PopoverItem
v-if="store.state.auth.profile && playlist.actor.full_username === store.state.auth.fullUsername"
destructive
icon="bi-trash"
:action="deletePlaylist"
@click="showDeleteModal = !showDeleteModal"
@ -192,5 +193,4 @@ const showDeleteModal = ref(false)
</Button>
</template>
</Modal>
</template>

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

@ -91,7 +91,7 @@ store.dispatch('playlists/fetchOwn')
v-model="store.state.playlists.showModal"
:title="t('components.playlists.PlaylistModal.header.addToPlaylist')"
:cancel="t('components.playlists.PlaylistModal.button.cancel')"
overPopover
over-popover
>
<template v-if="track">
<h3 class="ui header">

3
front/src/components/playlists/TrackPlaylistIcon.vue
View File

@ -45,6 +45,5 @@ const labels = computed(() => ({
:aria-label="labels.addToPlaylist"
:title="labels.addToPlaylist"
@click.stop="store.commit('playlists/chooseTrack', track)"
>
</Button>
/>
</template>

6
front/src/components/playlists/Widget.vue
View File

@ -5,7 +5,6 @@ import { ref, reactive, watch } from 'vue'
import { useStore } from '~/store'
import { useI18n } from 'vue-i18n'
import axios from 'axios'
import useErrorHandler from '~/composables/useErrorHandler'
@ -74,7 +73,10 @@ watch(
small-items
:h2="title"
>
<Loader v-if="isLoading" style="grid-column: 1 / -1;" />
<Loader
v-if="isLoading"
style="grid-column: 1 / -1;"
/>
<Alert
v-if="!isLoading && objects.length === 0"
style="grid-column: 1 / -1;"

4
front/src/components/podcast/Card.vue
View File

@ -15,12 +15,12 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
<Card
:title="podcast.uuid"
:image="podcast.artist?.cover?.urls.original"
@click="navigate"
class="podcast-card"
@click="navigate"
>
<a
@click.stop="navigate"
class="funkwhale link"
@click.stop="navigate"
>
{{ podcast.artist?.name }}
</a>

2
front/src/components/radio/Card.vue
View File

@ -23,8 +23,8 @@ const pastel = usePastel(() => props.color)
<fw-card
:title="radio.name"
:class="pastel"
@click="navigate"
class="radio-card"
@click="navigate"
>
<template #image>
<div class="cover-name">

4
front/src/components/radios/Button.vue
View File

@ -88,6 +88,8 @@ const toggleRadio = () => {
:square="store.state.auth.authenticated && type === 'custom'"
@click="toggleRadio"
>
<div v-if="!playOnly">{{ buttonLabel }}</div>
<div v-if="!playOnly">
{{ buttonLabel }}
</div>
</Button>
</template>

4
front/src/components/radios/Card.vue
View File

@ -48,7 +48,7 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
:type="type"
:custom-radio-id="customRadioId"
:object-id="objectId"
playOnly
play-only
/>
</template>
@ -89,7 +89,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
icon="bi-boombox-fill"
:title="radio.name"
>
<template #default>
<user-link
v-if="radio.user"
@ -125,7 +124,6 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
</Card>
</template>
<style lang="scss" scoped>
.play-button.is-icon-only {
top: 16px;

6
front/src/components/tags/List.vue
View File

@ -36,7 +36,11 @@ const tags = computed(() => {
</script>
<template>
<Layout flex gap-8 class="component-tags-list">
<Layout
flex
gap-8
class="component-tags-list"
>
<router-link
v-for="tag in tags"
:key="tag"

28
front/src/components/ui/Activity.vue
View File

@ -8,7 +8,6 @@ import { type Track, type User } from '~/types'
import OptionsButton from '~/components/ui/button/Options.vue'
import PlayButton from '~/components/ui/button/Play.vue'
const { t } = useI18n()
const emit = defineEmits<{ play: [track: Track] }>()
@ -25,17 +24,32 @@ const profileParams = computed(() => {
</script>
<template>
<div class="funkwhale activity" @click="navigate('track')">
<div
class="funkwhale activity"
@click="navigate('track')"
>
<div class="activity-image">
<img :src="track.cover?.urls.original" />
<PlayButton @play="emit('play', track)" :round="false" :shadow="false" />
<img :src="track.cover?.urls.original">
<PlayButton
:round="false"
:shadow="false"
@play="emit('play', track)"
/>
</div>
<div class="activity-content">
<div class="track-title">{{ track.title }}</div>
<a @click.stop="navigate('artist')" class="funkwhale link artist">
<div class="track-title">
{{ track.title }}
</div>
<a
class="funkwhale link artist"
@click.stop="navigate('artist')"
>
{{ firstArtist?.name /* TODO: Multi-Artist! */ }}
</a>
<a @click.stop="navigate('user')" class="funkwhale link user">
<a
class="funkwhale link user"
@click.stop="navigate('user')"
>
{{ t('vui.by-user', { username: user.username }) }}
</a>
</div>

5
front/src/components/ui/Alert.vue
View File

@ -19,7 +19,10 @@ const props = defineProps<Props>()
>
<slot />
<div v-if="$slots.actions" class="actions">
<div
v-if="$slots.actions"
class="actions"
>
<slot name="actions" />
</div>
</div>

42
front/src/components/ui/Button.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, computed, useSlots, onMounted } from 'vue'
import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, type PastelProps, color } from '~/composables/color';
import { type ColorProps, type VariantProps, type DefaultProps, type RaisedProps, type PastelProps, color } from '~/composables/color'
import { type WidthProps, width } from '~/composables/width'
import { type AlignmentProps, align } from '~/composables/alignment'
@ -59,12 +59,15 @@ const click = async (...args: any[]) => {
}
}
onMounted(() => {
if (props.autofocus) button.value.focus();
if (props.autofocus) button.value.focus()
})
</script>
<template>
<div v-if="split" class="funkwhale split-button">
<div
v-if="split"
class="funkwhale split-button"
>
<button
v-if="!dropdownOnly"
ref="button"
@ -87,17 +90,25 @@ onMounted(() => {
}"
@click="click"
>
<slot name="main">
<i v-if="icon && !icon.startsWith('right ')" :class="['bi', icon]" />
<i
v-if="icon && !icon.startsWith('right ')"
:class="['bi', icon]"
/>
<span v-if="!isIconOnly">
<slot />
</span>
<i v-if="icon && icon.startsWith('right ')" :class="['bi', icon.replace('right ', '')]" />
<i
v-if="icon && icon.startsWith('right ')"
:class="['bi', icon.replace('right ', '')]"
/>
</slot>
<Loader v-if="isLoading" :container="false" />
<Loader
v-if="isLoading"
:container="false"
/>
</button>
<button
v-bind="{
@ -144,15 +155,24 @@ onMounted(() => {
'is-round': round,
'is-shadow': shadow,
}"
@click="click"
:type="onClick ? 'button' : 'submit' /* Prevents default `submit` if onCLick is set */"
@click="click"
>
<i v-if="icon && !icon.startsWith('right ')" :class="['bi', icon]" />
<i
v-if="icon && !icon.startsWith('right ')"
:class="['bi', icon]"
/>
<span v-if="!isIconOnly">
<slot />
</span>
<i v-if="icon && icon.startsWith('right ')" :class="['bi', icon.replace('right ', '')]" />
<Loader v-if="isLoading" :container="false" />
<i
v-if="icon && icon.startsWith('right ')"
:class="['bi', icon.replace('right ', '')]"
/>
<Loader
v-if="isLoading"
:container="false"
/>
</button>
</template>

Some files were not shown because too many files have changed in this diff Show More