kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
657 wiersze
21 KiB
Vue
657 wiersze
21 KiB
Vue
<script setup lang="ts">
|
|
import type { RouteRecordName } from 'vue-router'
|
|
|
|
import UserModal from '~/components/common/UserModal.vue'
|
|
import Logo from '~/components/Logo.vue'
|
|
import SearchBar from '~/components/audio/SearchBar.vue'
|
|
import UserMenu from '~/components/common/UserMenu.vue'
|
|
import SemanticModal from '~/components/semantic/Modal.vue'
|
|
|
|
import useThemeList from '~/composables/useThemeList'
|
|
import useTheme from '~/composables/useTheme'
|
|
import axios from 'axios'
|
|
import { useRoute } from 'vue-router'
|
|
import { computed, ref, watch, watchEffect, onMounted } from 'vue'
|
|
import { useGettext } from 'vue3-gettext'
|
|
import { useStore } from '~/store'
|
|
import { setupDropdown } from '~/utils/fomantic'
|
|
|
|
interface Props {
|
|
width: number
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const store = useStore()
|
|
const theme = useTheme()
|
|
const themes = useThemeList()
|
|
const { $pgettext } = useGettext()
|
|
|
|
const route = useRoute()
|
|
const isCollapsed = ref(true)
|
|
watch(() => route.path, () => (isCollapsed.value = true))
|
|
|
|
const additionalNotifications = computed(() => store.getters['ui/additionalNotifications'])
|
|
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
|
|
|
|
const labels = computed(() => ({
|
|
mainMenu: $pgettext('Sidebar/*/Hidden text', 'Main menu'),
|
|
selectTrack: $pgettext('Sidebar/Player/Hidden text', 'Play this track'),
|
|
pendingFollows: $pgettext('Sidebar/Notifications/Hidden text', 'Pending follow requests'),
|
|
pendingReviewEdits: $pgettext('Sidebar/Moderation/Hidden text', 'Pending review edits'),
|
|
pendingReviewReports: $pgettext('Sidebar/Moderation/Hidden text', 'Pending review reports'),
|
|
language: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Language'),
|
|
theme: $pgettext('Sidebar/Settings/Dropdown.Label/Short, Verb', 'Theme'),
|
|
addContent: $pgettext('*/Library/*/Verb', 'Add content'),
|
|
administration: $pgettext('Sidebar/Admin/Title/Noun', 'Administration')
|
|
}))
|
|
|
|
type SidebarMenuTabs = 'explore' | 'myLibrary'
|
|
const expanded = ref<SidebarMenuTabs>('explore')
|
|
|
|
const ROUTE_MAPPINGS: Record<SidebarMenuTabs, RouteRecordName[]> = {
|
|
explore: [
|
|
'search',
|
|
'library.index',
|
|
'library.podcasts.browse',
|
|
'library.albums.browse',
|
|
'library.albums.detail',
|
|
'library.artists.browse',
|
|
'library.artists.detail',
|
|
'library.tracks.detail',
|
|
'library.playlists.browse',
|
|
'library.playlists.detail',
|
|
'library.radios.browse',
|
|
'library.radios.detail'
|
|
],
|
|
myLibrary: [
|
|
'library.me',
|
|
'library.albums.me',
|
|
'library.artists.me',
|
|
'library.playlists.me',
|
|
'library.radios.me',
|
|
'favorites'
|
|
]
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (ROUTE_MAPPINGS.explore.includes(route.name as RouteRecordName)) {
|
|
expanded.value = 'explore'
|
|
return
|
|
}
|
|
|
|
if (ROUTE_MAPPINGS.myLibrary.includes(route.name as RouteRecordName)) {
|
|
expanded.value = 'myLibrary'
|
|
return
|
|
}
|
|
|
|
expanded.value = store.state.auth.authenticated ? 'myLibrary' : 'explore'
|
|
})
|
|
|
|
const moderationNotifications = computed(() =>
|
|
store.state.ui.notifications.pendingReviewEdits
|
|
+ store.state.ui.notifications.pendingReviewReports
|
|
+ store.state.ui.notifications.pendingReviewRequests
|
|
)
|
|
|
|
Promise.resolve().then(async () => {
|
|
const [edits, reports, requests] = await Promise.all([
|
|
axios.get('mutations/', { params: { page_size: 1 } }),
|
|
axios.get('manage/moderation/reports/', { params: { page_size: 1 } }),
|
|
axios.get('manage/moderation/requests/', { params: { page_size: 1 } })
|
|
])
|
|
|
|
store.commit('ui/incrementNotifications', {
|
|
type: 'pendingReviewEdits',
|
|
value: edits.data.count
|
|
})
|
|
|
|
store.commit('ui/incrementNotifications', {
|
|
type: 'pendingReviewRequests',
|
|
value: requests.data.count
|
|
})
|
|
|
|
store.commit('ui/incrementNotifications', {
|
|
type: 'pendingReviewReports',
|
|
value: reports.data.count
|
|
})
|
|
})
|
|
|
|
const isProduction = import.meta.env.PROD
|
|
const showUserModal = ref(false)
|
|
const showLanguageModal = ref(false)
|
|
const showThemeModal = ref(false)
|
|
|
|
// TODO (wvffle): Use current language this.$language.current
|
|
const languageSelection = undefined
|
|
// export default {
|
|
// watch: {
|
|
// languageSelection: function (v) {
|
|
// this.$store.dispatch('ui/currentLanguage', v)
|
|
// this.$refs.languageModal.closeModal()
|
|
// }
|
|
// },
|
|
// }
|
|
|
|
watch(() => store.state.auth.authenticated, (authenticated) => {
|
|
if (authenticated) {
|
|
setupDropdown('.admin-dropdown')
|
|
}
|
|
|
|
setupDropdown('.user-dropdown')
|
|
}, { immediate: true })
|
|
|
|
watch(() => store.state.auth.availablePermissions, () => {
|
|
if (store.state.auth.authenticated) {
|
|
setupDropdown('.admin-dropdown')
|
|
}
|
|
}, { immediate: true })
|
|
|
|
onMounted(() => {
|
|
document.getElementById('fake-sidebar')?.classList.add('loaded')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar', 'component-sidebar']">
|
|
<header class="ui basic segment header-wrapper">
|
|
<router-link
|
|
:title="'Funkwhale'"
|
|
:to="{name: logoUrl}"
|
|
>
|
|
<i class="logo bordered inverted vibrant big icon">
|
|
<logo class="logo" />
|
|
<span class="visually-hidden">Home</span>
|
|
</i>
|
|
</router-link>
|
|
<nav class="top ui compact right aligned inverted text menu">
|
|
<div class="right menu">
|
|
<div
|
|
v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']"
|
|
class="item"
|
|
:title="labels.administration"
|
|
>
|
|
<div class="item ui inline admin-dropdown dropdown">
|
|
<i class="wrench icon" />
|
|
<div
|
|
v-if="moderationNotifications > 0"
|
|
:class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
|
|
>
|
|
{{ moderationNotifications }}
|
|
</div>
|
|
<div class="menu">
|
|
<h3 class="header">
|
|
<translate translate-context="Sidebar/Admin/Title/Noun">
|
|
Administration
|
|
</translate>
|
|
</h3>
|
|
<div class="divider" />
|
|
<router-link
|
|
v-if="$store.state.auth.availablePermissions['library']"
|
|
class="item"
|
|
:to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
|
|
>
|
|
<div
|
|
v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
|
|
:title="labels.pendingReviewEdits"
|
|
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
|
|
>
|
|
{{ $store.state.ui.notifications.pendingReviewEdits }}
|
|
</div>
|
|
<translate translate-context="*/*/*/Noun">
|
|
Library
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
v-if="$store.state.auth.availablePermissions['moderation']"
|
|
class="item"
|
|
:to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
|
|
>
|
|
<div
|
|
v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0"
|
|
:title="labels.pendingReviewReports"
|
|
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
|
|
>
|
|
{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}
|
|
</div>
|
|
<translate translate-context="*/Moderation/*">
|
|
Moderation
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
v-if="$store.state.auth.availablePermissions['settings']"
|
|
class="item"
|
|
:to="{name: 'manage.users.users.list'}"
|
|
>
|
|
<translate translate-context="*/*/*/Noun">
|
|
Users
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
v-if="$store.state.auth.availablePermissions['settings']"
|
|
class="item"
|
|
:to="{path: '/manage/settings'}"
|
|
>
|
|
<translate translate-context="*/*/*/Noun">
|
|
Settings
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<router-link
|
|
v-if="$store.state.auth.authenticated"
|
|
class="item"
|
|
:to="{name: 'content.index'}"
|
|
>
|
|
<i class="upload icon" />
|
|
<span class="visually-hidden">{{ labels.addContent }}</span>
|
|
</router-link>
|
|
<template v-if="width > 768">
|
|
<div class="item">
|
|
<div class="ui user-dropdown dropdown">
|
|
<img
|
|
v-if="$store.state.auth.authenticated && $store.state.auth.profile.avatar && $store.state.auth.profile.avatar.urls.medium_square_crop"
|
|
class="ui avatar image"
|
|
alt=""
|
|
:src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.urls.medium_square_crop)"
|
|
>
|
|
<actor-avatar
|
|
v-else-if="$store.state.auth.authenticated"
|
|
:actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
|
|
/>
|
|
<i
|
|
v-else
|
|
class="cog icon"
|
|
/>
|
|
<div
|
|
v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
|
|
:class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
|
|
>
|
|
{{ $store.state.ui.notifications.inbox + additionalNotifications }}
|
|
</div>
|
|
<user-menu
|
|
v-bind="$attrs"
|
|
:width="width"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<a
|
|
href=""
|
|
class="item"
|
|
@click.prevent.exact="showUserModal = !showUserModal"
|
|
>
|
|
<img
|
|
v-if="$store.state.auth.authenticated && $store.state.auth.profile?.avatar.urls.medium_square_crop"
|
|
class="ui avatar image"
|
|
alt=""
|
|
:src="$store.getters['instance/absoluteUrl']($store.state.auth.profile?.avatar.urls.medium_square_crop)"
|
|
>
|
|
<actor-avatar
|
|
v-else-if="$store.state.auth.authenticated"
|
|
:actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username,}"
|
|
/>
|
|
<i
|
|
v-else
|
|
class="cog icon"
|
|
/>
|
|
<div
|
|
v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
|
|
:class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
|
|
>
|
|
{{ $store.state.ui.notifications.inbox + additionalNotifications }}
|
|
</div>
|
|
</a>
|
|
</template>
|
|
<user-modal
|
|
v-model:show="showUserModal"
|
|
@show-theme-modal-event="showThemeModal=true"
|
|
@show-language-modal-event="showLanguageModal=true"
|
|
/>
|
|
<semantic-modal
|
|
ref="languageModal"
|
|
v-model:show="showLanguageModal"
|
|
:fullscreen="false"
|
|
>
|
|
<i
|
|
role="button"
|
|
class="left chevron back inside icon"
|
|
@click.prevent.exact="showUserModal = !showUserModal"
|
|
/>
|
|
<div class="header">
|
|
<h3 class="title">
|
|
{{ labels.language }}
|
|
</h3>
|
|
</div>
|
|
<div class="content">
|
|
<fieldset
|
|
v-for="(language, key) in $language.available"
|
|
:key="key"
|
|
>
|
|
<input
|
|
:id="`${key}`"
|
|
v-model="languageSelection"
|
|
type="radio"
|
|
name="language"
|
|
:value="key"
|
|
>
|
|
<label :for="`${key}`">{{ language }}</label>
|
|
</fieldset>
|
|
</div>
|
|
</semantic-modal>
|
|
<semantic-modal
|
|
ref="themeModal"
|
|
v-model:show="showThemeModal"
|
|
:fullscreen="false"
|
|
>
|
|
<i
|
|
role="button"
|
|
class="left chevron back inside icon"
|
|
@click.prevent.exact="showUserModal = !showUserModal"
|
|
/>
|
|
<div class="header">
|
|
<h3 class="title">
|
|
{{ labels.theme }}
|
|
</h3>
|
|
</div>
|
|
<div class="content">
|
|
<fieldset
|
|
v-for="t in themes"
|
|
:key="t.key"
|
|
>
|
|
<input
|
|
:id="t.key"
|
|
v-model="theme"
|
|
type="radio"
|
|
name="theme"
|
|
:value="t.key"
|
|
>
|
|
<label :for="t.key">{{ t.name }}</label>
|
|
</fieldset>
|
|
</div>
|
|
</semantic-modal>
|
|
<div class="item collapse-button-wrapper">
|
|
<button
|
|
:class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']"
|
|
@click="isCollapsed = !isCollapsed"
|
|
>
|
|
<i class="sidebar icon" />
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div class="ui basic search-wrapper segment">
|
|
<search-bar @search="isCollapsed = false" />
|
|
</div>
|
|
<div
|
|
v-if="!$store.state.auth.authenticated"
|
|
class="ui basic signup segment"
|
|
>
|
|
<router-link
|
|
class="ui fluid tiny primary button"
|
|
:to="{name: 'login'}"
|
|
>
|
|
<translate translate-context="*/Login/*/Verb">
|
|
Login
|
|
</translate>
|
|
</router-link>
|
|
<div class="ui small hidden divider" />
|
|
<router-link
|
|
class="ui fluid tiny button"
|
|
:to="{path: '/signup'}"
|
|
>
|
|
<translate translate-context="*/Signup/Link/Verb">
|
|
Create an account
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
<nav
|
|
class="secondary"
|
|
role="navigation"
|
|
aria-labelledby="navigation-label"
|
|
>
|
|
<h1
|
|
id="navigation-label"
|
|
class="visually-hidden"
|
|
>
|
|
<translate translate-context="*/*/*">
|
|
Main navigation
|
|
</translate>
|
|
</h1>
|
|
<div class="ui small hidden divider" />
|
|
<section
|
|
:aria-label="labels.mainMenu"
|
|
class="ui bottom attached active tab"
|
|
>
|
|
<nav
|
|
class="ui vertical large fluid inverted menu"
|
|
role="navigation"
|
|
:aria-label="labels.mainMenu"
|
|
>
|
|
<div :class="[{ collapsed: expanded !== 'explore' }, 'collapsible item']">
|
|
<h2
|
|
class="header"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="expanded = 'explore'"
|
|
@focus="expanded = 'explore'"
|
|
>
|
|
<translate translate-context="*/*/*/Verb">
|
|
Explore
|
|
</translate>
|
|
<i
|
|
v-if="expanded !== 'explore'"
|
|
class="angle right icon"
|
|
/>
|
|
</h2>
|
|
<div class="menu">
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'search'}"
|
|
>
|
|
<i class="search icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
|
|
Search
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.index'}"
|
|
active-class="_active"
|
|
>
|
|
<i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
|
|
Browse
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.podcasts.browse'}"
|
|
>
|
|
<i class="podcast icon" /><translate translate-context="*/*/*">
|
|
Podcasts
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.albums.browse'}"
|
|
>
|
|
<i class="compact disc icon" /><translate translate-context="*/*/*">
|
|
Albums
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.artists.browse'}"
|
|
>
|
|
<i class="user icon" /><translate translate-context="*/*/*">
|
|
Artists
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.playlists.browse'}"
|
|
>
|
|
<i class="list icon" /><translate translate-context="*/*/*">
|
|
Playlists
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.radios.browse'}"
|
|
>
|
|
<i class="feed icon" /><translate translate-context="*/*/*">
|
|
Radios
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="$store.state.auth.authenticated"
|
|
:class="[{ collapsed: expanded !== 'myLibrary' }, 'collapsible item']"
|
|
>
|
|
<h3
|
|
class="header"
|
|
role="button"
|
|
tabindex="0"
|
|
@click="expanded = 'myLibrary'"
|
|
@focus="expanded = 'myLibrary'"
|
|
>
|
|
<translate translate-context="*/*/*/Noun">
|
|
My Library
|
|
</translate>
|
|
<i
|
|
v-if="expanded !== 'myLibrary'"
|
|
class="angle right icon"
|
|
/>
|
|
</h3>
|
|
<div class="menu">
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.me'}"
|
|
>
|
|
<i class="music icon" /><translate translate-context="Sidebar/Navigation/List item.Link/Verb">
|
|
Browse
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.albums.me'}"
|
|
>
|
|
<i class="compact disc icon" /><translate translate-context="*/*/*">
|
|
Albums
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.artists.me'}"
|
|
>
|
|
<i class="user icon" /><translate translate-context="*/*/*">
|
|
Artists
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.playlists.me'}"
|
|
>
|
|
<i class="list icon" /><translate translate-context="*/*/*">
|
|
Playlists
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'library.radios.me'}"
|
|
>
|
|
<i class="feed icon" /><translate translate-context="*/*/*">
|
|
Radios
|
|
</translate>
|
|
</router-link>
|
|
<router-link
|
|
class="item"
|
|
:to="{name: 'favorites'}"
|
|
>
|
|
<i class="heart icon" /><translate translate-context="Sidebar/Favorites/List item.Link/Noun">
|
|
Favorites
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<router-link
|
|
v-if="$store.state.auth.authenticated"
|
|
class="header item"
|
|
:to="{name: 'subscriptions'}"
|
|
>
|
|
<translate translate-context="*/*/*">
|
|
Channels
|
|
</translate>
|
|
</router-link>
|
|
<div class="item">
|
|
<h3 class="header">
|
|
<translate translate-context="Footer/About/List item.Link">
|
|
More
|
|
</translate>
|
|
</h3>
|
|
<div class="menu">
|
|
<router-link
|
|
class="item"
|
|
to="/about"
|
|
active-class="router-link-exact-active active"
|
|
>
|
|
<i class="info icon" /><translate translate-context="Sidebar/*/List item.Link">
|
|
About this pod
|
|
</translate>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="!isProduction"
|
|
class="item"
|
|
>
|
|
<a
|
|
role="button"
|
|
href=""
|
|
class="link item"
|
|
@click.prevent="$emit('show:set-instance-modal')"
|
|
>Switch instance</a>
|
|
</div>
|
|
</nav>
|
|
</section>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<style>
|
|
[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
[type="radio"] + label::after {
|
|
content: "";
|
|
font-size: 1.4em;
|
|
}
|
|
[type="radio"]:checked + label::after {
|
|
margin-left: 10px;
|
|
content: "\2713"; /* Checkmark */
|
|
font-size: 1.4em;
|
|
}
|
|
[type="radio"]:checked + label {
|
|
font-weight: bold;
|
|
}
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
.back {
|
|
font-size: 1.25em !important;
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
left: 0.5rem;
|
|
width: 2.25rem !important;
|
|
height: 2.25rem !important;
|
|
padding: 0.625rem 0 0 0;
|
|
}
|
|
</style>
|