funkwhale/front/src/views/auth/ProfileActivity.vue

63 lines
1.7 KiB
Vue

<script setup lang="ts">
import type { Actor } from '~/types'
import { ref } from 'vue'
import PlaylistWidget from '~/components/playlists/Widget.vue'
import TrackWidget from '~/components/audio/track/Widget.vue'
import RadioButton from '~/components/radios/Button.vue'
interface Props {
object: Actor
}
defineProps<Props>()
const recentActivity = ref(0)
</script>
<template>
<section>
<div>
<radio-button
v-if="recentActivity > 0"
class="right floated"
type="account"
:object-id="{username: object.preferred_username, fullUsername: object.full_username}"
:client-only="true"
/>
<h2 class="ui header">
{{ $t('views.auth.ProfileActivity.header.recentlyListened') }}
</h2>
<div class="ui divider" />
<track-widget
:url="'history/listenings/'"
:filters="{scope: `actor:${object.full_username}`, ordering: '-creation_date'}"
@count="recentActivity = $event"
/>
</div>
<div class="ui hidden divider" />
<div>
<h2 class="ui header">
{{ $t('views.auth.ProfileActivity.header.recentlyFavorited') }}
</h2>
<div class="ui divider" />
<track-widget
:url="'favorites/tracks/'"
:filters="{scope: `actor:${object.full_username}`, ordering: '-creation_date'}"
/>
</div>
<div class="ui hidden divider" />
<div>
<h2 class="ui header">
{{ $t('views.auth.ProfileActivity.header.playlists') }}
</h2>
<div class="ui divider" />
<playlist-widget
:url="'playlists/'"
:filters="{scope: `actor:${object.full_username}`, playable: true, ordering: '-modification_date'}"
/>
</div>
</section>
</template>