Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: merge useScreen into useRouter

Browse source
This commit is contained in:
Phan An 2022-11-18 19:56:21 +01:00
parent bc5081cd0f
commit 758322988a
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
10 changed files with 38 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/js/components/album/AlbumContextMenu.vue
View file

@ -43,8 +43,8 @@ const shuffle = () => trigger(async () => {
go('queue')
})
const viewAlbumDetails = () => trigger(() => router.go(`album/${album.value!.id}`))
const viewArtistDetails = () => trigger(() => router.go(`artist/${album.value!.artist_id}`))
const viewAlbumDetails = () => trigger(() => go(`album/${album.value!.id}`))
const viewArtistDetails = () => trigger(() => go(`artist/${album.value!.artist_id}`))
const download = () => trigger(() => downloadService.fromAlbum(album.value!))
eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e, _album) => {

4
resources/assets/js/components/screens/AlbumListScreen.vue
View file

@ -28,7 +28,7 @@
<script lang="ts" setup>
import { computed, ref, toRef, watch } from 'vue'
import { albumStore, preferenceStore as preferences } from '@/stores'
import { useInfiniteScroll, useScreen } from '@/composables'
import { useInfiniteScroll, useRouter } from '@/composables'
import AlbumCard from '@/components/album/AlbumCard.vue'
import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
@ -63,7 +63,7 @@ const fetchAlbums = async () => {
loading.value = false
}
useScreen('Albums').onScreenActivated(async () => {
useRouter().onScreenActivated('Albums', async () => {
if (!initialized) {
viewMode.value = preferences.albumsViewMode || 'thumbnails'
initialized = true

6
resources/assets/js/components/screens/AllSongsScreen.vue
View file

@ -39,7 +39,7 @@ import { computed, ref, toRef } from 'vue'
import { logger, pluralize, secondsToHumanReadable } from '@/utils'
import { commonStore, queueStore, songStore } from '@/stores'
import { playbackService } from '@/services'
import { useMessageToaster, useRouter, useScreen, useSongList } from '@/composables'
import { useMessageToaster, useRouter, useSongList } from '@/composables'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
@ -65,7 +65,7 @@ const {
} = useSongList(toRef(songStore.state, 'songs'))
const { toastError } = useMessageToaster()
const { go } = useRouter()
const { go, onScreenActivated } = useRouter()
let initialized = false
const loading = ref(false)
@ -111,7 +111,7 @@ const playAll = async (shuffle: boolean) => {
await playbackService.playFirstInQueue()
}
useScreen('Songs').onScreenActivated(async () => {
onScreenActivated('Songs', async () => {
if (!initialized) {
initialized = true
await fetchSongs()

4
resources/assets/js/components/screens/ArtistListScreen.vue
View file

@ -28,7 +28,7 @@
<script lang="ts" setup>
import { computed, ref, toRef, watch } from 'vue'
import { artistStore, preferenceStore as preferences } from '@/stores'
import { useInfiniteScroll, useScreen } from '@/composables'
import { useInfiniteScroll, useRouter } from '@/composables'
import ArtistCard from '@/components/artist/ArtistCard.vue'
import ArtistCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
@ -63,7 +63,7 @@ const fetchArtists = async () => {
loading.value = false
}
useScreen('Artists').onScreenActivated(async () => {
useRouter().onScreenActivated('Artists', async () => {
if (!initialized) {
viewMode.value = preferences.artistsViewMode || 'thumbnails'
initialized = true

4
resources/assets/js/components/screens/FavoritesScreen.vue
View file

@ -63,7 +63,7 @@ import { faHeart } from '@fortawesome/free-regular-svg-icons'
import { pluralize } from '@/utils'
import { commonStore, favoriteStore } from '@/stores'
import { downloadService } from '@/services'
import { useScreen, useSongList } from '@/composables'
import { useRouter, useSongList } from '@/composables'
import { nextTick, ref, toRef } from 'vue'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
@ -106,7 +106,7 @@ const fetchSongs = async () => {
sort()
}
useScreen('Favorites').onScreenActivated(async () => {
useRouter().onScreenActivated('Favorites', async () => {
if (!initialized) {
initialized = true
await fetchSongs()

4
resources/assets/js/components/screens/HomeScreen.vue
View file

@ -39,7 +39,7 @@ import { sample } from 'lodash'
import { computed, ref } from 'vue'
import { eventBus, logger, noop } from '@/utils'
import { commonStore, overviewStore, userStore } from '@/stores'
import { useAuthorization, useDialogBox, useInfiniteScroll, useScreen } from '@/composables'
import { useAuthorization, useDialogBox, useInfiniteScroll, useRouter } from '@/composables'
import MostPlayedSongs from '@/components/screens/home/MostPlayedSongs.vue'
import RecentlyPlayedSongs from '@/components/screens/home/RecentlyPlayedSongs.vue'
@ -75,7 +75,7 @@ let initialized = false
eventBus.on('SONGS_DELETED', () => overviewStore.refresh())
.on('SONGS_UPDATED', () => overviewStore.refresh())
useScreen('Home').onScreenActivated(async () => {
useRouter().onScreenActivated('Home', async () => {
if (!initialized) {
loading.value = true
try {

4
resources/assets/js/components/screens/RecentlyPlayedScreen.vue
View file

@ -40,7 +40,7 @@
import { faClock } from '@fortawesome/free-regular-svg-icons'
import { pluralize } from '@/utils'
import { recentlyPlayedStore } from '@/stores'
import { useScreen, useSongList } from '@/composables'
import { useRouter, useSongList } from '@/composables'
import { ref, toRef } from 'vue'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
@ -70,7 +70,7 @@ const {
let initialized = false
let loading = ref(false)
useScreen('RecentlyPlayed').onScreenActivated(async () => {
useRouter().onScreenActivated('RecentlyPlayed', async () => {
if (!initialized) {
loading.value = true
initialized = true

23
resources/assets/js/composables/index.ts
View file

@ -1,17 +1,16 @@
export * from './useAuthorization'
export * from './useContextMenu'
export * from './useDialogBox'
export * from './useDragAndDrop'
export * from './useFloatingUi'
export * from './useInfiniteScroll'
export * from './useMessageToaster'
export * from './useNetworkStatus'
export * from './useNewVersionNotification'
export * from './usePlaylistManagement'
export * from './useRouter'
export * from './useSmartPlaylistForm'
export * from './useSongList'
export * from './useSongMenuMethods'
export * from './useContextMenu'
export * from './useAuthorization'
export * from './useNewVersionNotification'
export * from './useThirdPartyServices'
export * from './useDragAndDrop'
export * from './useUpload'
export * from './useScreen'
export * from './usePlaylistManagement'
export * from './useNetworkStatus'
export * from './useFloatingUi'
export * from './useMessageToaster'
export * from './useDialogBox'
export * from './useSmartPlaylistForm'
export * from './useRouter'

15
resources/assets/js/composables/useRouter.ts
View file

@ -4,13 +4,22 @@ import { requireInjection } from '@/utils'
export const useRouter = () => {
const router = requireInjection(RouterKey)
const getRouteParam = (name: string) => router.$currentRoute.value?.params?.[name]
const getCurrentScreen = () => router.$currentRoute.value?.screen
const isCurrentScreen = (...screens: ScreenName[]) => screens.includes(router.$currentRoute.value?.screen!)
const onScreenActivated = (screen: ScreenName, cb: Closure) => {
router.onRouteChanged(route => route.screen === screen && cb())
}
return {
getRouteParam,
getCurrentScreen,
isCurrentScreen,
onScreenActivated,
go: router.go.bind(router),
onRouteChanged: router.onRouteChanged.bind(router),
resolveRoute: router.resolve.bind(router),
triggerNotFound: router.triggerNotFound.bind(router),
getRouteParam: (name: string) => router.$currentRoute.value?.params?.[name],
getCurrentScreen: () => router.$currentRoute.value?.screen,
isCurrentScreen: (...screens: ScreenName[]) => screens.includes(router.$currentRoute.value?.screen!)
}
}

10
resources/assets/js/composables/useScreen.ts
View file

@ -1,10 +0,0 @@
import { useRouter } from '@/composables'
export const useScreen = (screen: ScreenName) => {
const { onRouteChanged } = useRouter()
const onScreenActivated = (cb: Closure) => onRouteChanged(route => route.screen === screen && cb())
return {
onScreenActivated
}
}