62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { computed } from 'vue'
|
|
|
|
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] }>()
|
|
|
|
const { track, user } = defineProps<{ track: Track, user: User }>()
|
|
|
|
const artist_credit = track.artist_credit || []
|
|
const firstArtist = artist_credit.length > 0 ? artist_credit[0].artist : null
|
|
|
|
const profileParams = computed(() => {
|
|
const [username, domain] = user.full_username.split('@')
|
|
return { username, domain }
|
|
})
|
|
|
|
let navigate = (to: 'track' | 'artist' | 'user') => { }
|
|
|
|
if (import.meta.env.PROD) {
|
|
const router = useRouter()
|
|
navigate = (to: 'track' | 'artist' | 'user') => to === 'track'
|
|
? router.push({ name: 'library.tracks.detail', params: { id: track.id } })
|
|
: to === 'artist'
|
|
? router.push({ name: 'library.artists.detail', params: { id: firstArtist?.id } /* TODO: Multi-Artist! */ })
|
|
: router.push({ name: 'profile.full', params: profileParams.value })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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" />
|
|
</div>
|
|
<div class="activity-content">
|
|
<div class="track-title">{{ track.title }}</div>
|
|
<a @click.stop="navigate('artist')" class="funkwhale link artist">
|
|
{{ firstArtist?.name /* TODO: Multi-Artist! */ }}
|
|
</a>
|
|
<a @click.stop="navigate('user')" class="funkwhale link user">
|
|
{{ t('vui.by-user', { username: user.username }) }}
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<OptionsButton />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './activity.scss'
|
|
</style>
|