fix(front): fix duration (no uploads) errors for fakedata

This commit is contained in:
ArneBo 2025-02-23 16:22:10 +01:00
parent 5b7f5e6f97
commit 285b169d43
1 changed files with 24 additions and 11 deletions

View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Track, Artist, Library } from '~/types' import type { Track, Artist, Library } from '~/types'
import type { Operations } from '~/generated/types'
import { momentFormat } from '~/utils/filters' import { momentFormat } from '~/utils/filters'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
@ -79,7 +80,7 @@ const attributedToUrl = computed(() => router.resolve({
const artistCredit = track.value?.artist_credit const artistCredit = track.value?.artist_credit
const totalDuration = computed(() => track.value?.uploads[0]?.duration ?? 0) const totalDuration = computed(() => track.value?.uploads?.[0]?.duration ?? 0)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
@ -88,14 +89,26 @@ const labels = computed(() => ({
more: t('components.library.TrackBase.button.more') more: t('components.library.TrackBase.button.more')
})) }))
type TrackResponse = Operations['get_tracks_2']['responses']['200']['content']['application/json']
type TrackParams = Operations['get_tracks_2']['parameters']['query']
type ArtistResponse = Operations['get_artists_2']['responses']['200']['content']['application/json']
const params: TrackParams = {
refresh: 'true'
// TypeScript will now show all available parameters with their types
}
const isLoading = ref(false) const isLoading = ref(false)
const fetchData = async () => { const fetchData = async () => {
isLoading.value = true isLoading.value = true
logger.debug(`Fetching track "${props.id}"`) logger.debug(`Fetching track "${props.id}"`)
try { try {
const trackResponse = await axios.get(`tracks/${props.id}/`, { params: { refresh: 'true' } }) const trackResponse = await axios.get<TrackResponse>(`tracks/${props.id}/`, { params: { refresh: 'true' } })
track.value = trackResponse.data track.value = trackResponse.data
const artistResponse = await axios.get(`artists/${trackResponse.data.artist.id}/`) const artistResponse = await axios.get<ArtistResponse>(
`artists/${trackResponse.data.artist_credit[0].artist.id}/`
)
artist.value = artistResponse.data artist.value = artistResponse.data
} catch (error) { } catch (error) {
useErrorHandler(error as Error) useErrorHandler(error as Error)
@ -175,14 +188,14 @@ watch(showDeleteModal, (newValue) => {
:artist-credit="track.artist_credit" :artist-credit="track.artist_credit"
/> />
<div class="meta"> <div class="meta">
<span>{{ t('components.library.TrackBase.title') }}</span> <span>{{ t('components.library.TrackBase.title') }}</span>
<i class="bi bi-dot" /> <i class="bi bi-dot" />
<span>{{ track.album.title }}</span> <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 <human-duration
v-if="totalDuration > 0" v-if="totalDuration > 0"
:duration="totalDuration" :duration="totalDuration"
/> />
</div> </div>
<Layout flex> <Layout flex>