2022-07-19 08:09:19 +00:00
|
|
|
<script setup lang="ts">
|
2022-09-08 14:32:45 +00:00
|
|
|
import { useI18n } from 'vue-i18n'
|
2022-08-09 01:08:31 +00:00
|
|
|
import { ref, computed } from 'vue'
|
|
|
|
|
2022-07-19 08:09:19 +00:00
|
|
|
import axios from 'axios'
|
2022-08-09 01:08:31 +00:00
|
|
|
|
2022-07-19 08:09:19 +00:00
|
|
|
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
|
2022-08-09 01:08:31 +00:00
|
|
|
import PlaylistWidget from '~/components/playlists/Widget.vue'
|
2022-07-19 08:09:19 +00:00
|
|
|
import TrackWidget from '~/components/audio/track/Widget.vue'
|
|
|
|
import AlbumWidget from '~/components/audio/album/Widget.vue'
|
2022-08-09 01:08:31 +00:00
|
|
|
|
|
|
|
import useErrorHandler from '~/composables/useErrorHandler'
|
2022-07-19 08:09:19 +00:00
|
|
|
import useLogger from '~/composables/useLogger'
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
scope?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
|
|
scope: 'all'
|
|
|
|
})
|
|
|
|
|
|
|
|
const artists = ref([])
|
|
|
|
|
|
|
|
const logger = useLogger()
|
|
|
|
|
2022-09-08 14:32:45 +00:00
|
|
|
const { t } = useI18n()
|
2022-07-19 08:09:19 +00:00
|
|
|
const labels = computed(() => ({
|
2022-09-17 02:14:35 +00:00
|
|
|
title: t('components.library.Home.title')
|
2022-07-19 08:09:19 +00:00
|
|
|
}))
|
|
|
|
|
|
|
|
const isLoading = ref(false)
|
|
|
|
const fetchData = async () => {
|
|
|
|
isLoading.value = true
|
|
|
|
logger.time('Loading latest artists')
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
ordering: '-creation_date',
|
|
|
|
playable: true
|
|
|
|
}
|
|
|
|
|
|
|
|
try {
|
2022-07-21 01:21:36 +00:00
|
|
|
const response = await axios.get('artists/', { params })
|
2022-07-19 08:09:19 +00:00
|
|
|
artists.value = response.data.results
|
|
|
|
} catch (error) {
|
2022-08-09 01:08:31 +00:00
|
|
|
useErrorHandler(error as Error)
|
2022-07-19 08:09:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
isLoading.value = false
|
|
|
|
logger.timeEnd('Loading latest artists')
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchData()
|
|
|
|
</script>
|
|
|
|
|
2017-06-23 21:00:42 +00:00
|
|
|
<template>
|
2021-12-06 10:35:20 +00:00
|
|
|
<main
|
2022-07-19 08:09:19 +00:00
|
|
|
:key="$route?.name ?? undefined"
|
2021-12-06 10:35:20 +00:00
|
|
|
v-title="labels.title"
|
|
|
|
>
|
2018-11-19 22:33:22 +00:00
|
|
|
<section class="ui vertical stripe segment">
|
2018-02-20 23:05:33 +00:00
|
|
|
<div class="ui stackable three column grid">
|
2017-06-23 21:00:42 +00:00
|
|
|
<div class="column">
|
2021-12-06 10:35:20 +00:00
|
|
|
<track-widget
|
|
|
|
:url="'history/listenings/'"
|
2022-07-19 08:09:19 +00:00
|
|
|
:filters="{ scope, ordering: '-creation_date' }"
|
|
|
|
:websocket-handlers="['Listen']"
|
2021-12-06 10:35:20 +00:00
|
|
|
>
|
2022-05-01 13:24:23 +00:00
|
|
|
<template #title>
|
2022-09-17 02:14:35 +00:00
|
|
|
{{ $t('components.library.Home.recentlyListenedLabel') }}
|
2021-12-06 10:35:20 +00:00
|
|
|
</template>
|
2018-07-17 11:09:13 +00:00
|
|
|
</track-widget>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
|
|
|
<div class="column">
|
2021-12-06 10:35:20 +00:00
|
|
|
<track-widget
|
|
|
|
:url="'favorites/tracks/'"
|
|
|
|
:filters="{scope: scope, ordering: '-creation_date'}"
|
|
|
|
>
|
2022-05-01 13:24:23 +00:00
|
|
|
<template #title>
|
2022-09-17 02:14:35 +00:00
|
|
|
{{ $t('components.library.Home.recentlyFavoritedLabel') }}
|
2021-12-06 10:35:20 +00:00
|
|
|
</template>
|
2018-07-17 11:09:13 +00:00
|
|
|
</track-widget>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
2018-02-20 23:05:33 +00:00
|
|
|
<div class="column">
|
2021-12-06 10:35:20 +00:00
|
|
|
<playlist-widget
|
|
|
|
:url="'playlists/'"
|
|
|
|
:filters="{scope: scope, playable: true, ordering: '-modification_date'}"
|
|
|
|
>
|
2022-05-01 13:24:23 +00:00
|
|
|
<template #title>
|
2022-09-17 02:14:35 +00:00
|
|
|
{{ $t('components.library.Home.playlistsLabel') }}
|
2021-12-06 10:35:20 +00:00
|
|
|
</template>
|
2018-07-17 11:09:13 +00:00
|
|
|
</playlist-widget>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-12-06 10:35:20 +00:00
|
|
|
<div class="ui section hidden divider" />
|
2019-03-06 16:40:26 +00:00
|
|
|
<div class="ui stackable one column grid">
|
|
|
|
<div class="column">
|
2019-12-26 10:38:26 +00:00
|
|
|
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
|
2022-05-01 13:24:23 +00:00
|
|
|
<template #title>
|
2022-09-17 02:14:35 +00:00
|
|
|
{{ $t('components.library.Home.recentlyAddedLabel') }}
|
2021-12-06 10:35:20 +00:00
|
|
|
</template>
|
2018-07-17 11:09:13 +00:00
|
|
|
</album-widget>
|
2018-02-20 23:05:33 +00:00
|
|
|
</div>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
2020-04-08 11:58:07 +00:00
|
|
|
<template v-if="scope === 'all'">
|
2021-12-06 10:35:20 +00:00
|
|
|
<h3 class="ui header">
|
2022-09-17 02:14:35 +00:00
|
|
|
{{ $t('components.library.Home.newChannelsLabel') }}
|
2020-04-08 11:58:07 +00:00
|
|
|
</h3>
|
2021-12-06 10:35:20 +00:00
|
|
|
<channels-widget
|
|
|
|
:show-modification-date="true"
|
|
|
|
:limit="12"
|
|
|
|
:filters="{ordering: '-creation_date', external: 'false'}"
|
|
|
|
/>
|
2020-04-08 11:58:07 +00:00
|
|
|
</template>
|
2018-11-19 22:33:22 +00:00
|
|
|
</section>
|
|
|
|
</main>
|
2017-06-23 21:00:42 +00:00
|
|
|
</template>
|