Merge pull request #26

Library module

Author: T1GIT

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
         '@typescript-eslint/unbound-method': 'off',
         '@typescript-eslint/no-unsafe-return': 'off',
         '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-misused-promises': 'off'
     },
     ignorePatterns: [
         '*.yml',

package.json

@@ -16,18 +16,18 @@
     "test": "vitest run --coverage"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.9",
+    "@apollo/client": "^3.7.10",
     "@vue/apollo-composable": "^4.0.0-beta.4",
     "@vue/apollo-util": "^4.0.0-beta.4",
     "@vueuse/core": "^9.13.0",
+    "@vueuse/integrations": "^9.13.0",
     "axios": "^1.3.4",
     "bootstrap-icons": "^1.10.3",
-    "bootstrap-icons-vue": "^1.8.1",
     "color": "^4.2.3",
     "color-thief-ts": "^1.1.1",
     "graphql": "^16.5.0",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.11.2",
+    "graphql-ws": "^5.12.0",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "socket.io-client": "^4.6.1",
@@ -37,18 +37,18 @@
     "yandex-metrika-vue3": "^1.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.35.3",
+    "@antfu/eslint-config": "^0.36.0",
     "@types/color": "^3.0.3",
-    "@types/node": "^18.14.2",
+    "@types/node": "^18.15.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.29.2",
-    "@vue/test-utils": "^2.3.0",
+    "@vue/test-utils": "^2.3.1",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
-    "electron": "^23.1.1",
+    "electron": "^23.1.3",
     "electron-builder": "^23.6.0",
-    "eslint": "^8.35.0",
-    "sass": "^1.58.3",
+    "eslint": "^8.36.0",
+    "sass": "^1.59.2",
     "sass-loader": "^13.0.1",
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5",

schema.gql

@@ -56,8 +56,8 @@ type Query {
     me: UserObject!
     myPlaylist(playlistId: String!): PlaylistObject!
     myPlaylists(search: String): [PlaylistObject!]!
-    myTracks(cursor: String, limit: Float = 50.0): TracksWithCursorObject!
-    playlistTracks(cursor: String, limit: Float = 50.0, playlistId: String!): TracksWithCursorObject!
+    myTracks(cursor: String, limit: Float, search: String): TracksWithCursorObject!
+    playlistTracks(cursor: String, limit: Float, playlistId: String!): TracksWithCursorObject!
     publicPlaylist(playlistId: String!): PlaylistObject!
     publicPlaylists(search: String): [PlaylistObject!]!
     track(trackId: String!): TrackObject!

src/App.vue

@@ -2,44 +2,39 @@
 import {
   breakpointsTailwind,
   tryOnMounted,
-  useBreakpoints, useLocalStorage,
-  watchOnce,
+  useBreakpoints,
+  useLocalStorage,
   whenever,
 } from '@vueuse/core'
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useQueue } from '@/core/stores/queue'
 import { Platform, platform } from '@/shared/constants/platform'
 import TheTitleBar from '@/core/components/TheTitleBar.vue'
 import TheSideMenu from '@/core/components/TheSideMenu.vue'
 import ThePlayer from '@/player/components/ThePlayer.vue'
 import TheIntroLoader from '@/core/components/TheIntroLoader.vue'
-import TheQueue from '@/core/components/TheQueue.vue'
+import TheQueue from '@/queue/components/TheQueue.vue'
 import { useAuthentication } from '@/auth/stores/authentication'
 import { useOffline } from '@/core/stores/offline'
 import { useMetrika } from '@/core/hooks/metrika'
-import { useCurrentTrack } from '@/player/stores/current-track'
 import TheBottomMenu from '@/core/components/TheBottomMenu.vue'
 import { usePlayer } from '@/player/stores/player'
-import { useColors } from '@/core/stores/colors'
+import { useColors } from '@/themes/stores/colors'
+import { useUrlTrack } from '@/player/hooks/url-track'
 import { serializer } from '@/shared/utils/serializer'
+import { useCurrentTrack } from '@/player/stores/current-track'
 
 const { greater } = useBreakpoints(breakpointsTailwind)
 const greaterSm = greater('sm')
 
 useMetrika()
 useColors()
-
-const { check } = useOffline()
-tryOnMounted(check)
+useCurrentTrack()
+useUrlTrack()
 
 const { authenticated } = useAuthentication()
 const { loading } = useOffline()
 
-const { queue } = useQueue()
-const { trackId } = useCurrentTrack()
-watchOnce(queue, () => (trackId.value = queue.value[0]?.id))
-
 const { track } = usePlayer()
 
 const menuShowed = ref(false)
@@ -134,7 +129,7 @@ tryOnMounted(() => {
 
 .app-component {
   @include mixins.size(fill);
-  flex: auto;
+  flex: 1;
   display: flex;
   flex-direction: column;
 
@@ -143,9 +138,9 @@ tryOnMounted(() => {
   }
 
   .window {
-    flex: auto;
-    overflow: hidden;
+    flex: 1;
     display: flex;
+    overflow: hidden;
 
     .body,
     .loader {
@@ -157,48 +152,36 @@ tryOnMounted(() => {
     }
 
     .loader {
-      flex: auto;
+      flex: 1;
     }
 
     .body {
-      flex: auto;
+      flex: 1;
       display: flex;
-      gap: 10px;
-      overflow: auto;
       background-color: rgb(constants.$clr-secondary);
-
-      .side-menu {
-        flex: none;
-      }
+      overflow: hidden;
 
       .main-section {
+        flex: 1;
         display: flex;
-        flex: auto;
         flex-direction: column;
-        gap: 10px;
         overflow: hidden;
 
         .page-container {
-          padding: 0 20px;
-          overflow: auto;
-          flex: auto;
+          flex: 1;
+          display: flex;
+          overflow: hidden;
 
           .page {
             @include transitions.fade();
-
-            &.v-leave-active {
-              transition: constants.$trn-fast-out;
-            }
+            flex: 1;
           }
         }
 
         .player {
-          margin-bottom: 10px;
+          margin: 0 10px 10px 10px;
         }
       }
-
-      .queue {
-      }
     }
   }
 }
@@ -211,31 +194,16 @@ tryOnMounted(() => {
         gap: 0;
 
         .main-section {
-          gap: 0;
-
           .queue, .side-menu, .page-container {
             @include transitions.fade();
-
-            &.v-leave-active {
-              transition: constants.$trn-fast-out;
-            }
           }
 
           .queue, .side-menu {
             margin: 10px;
-            flex: auto;
+            flex: 1;
             border-radius: constants.$cmn-border-radius;
             box-shadow: constants.$cmn-shadow-block;
           }
-
-          .player {
-            flex: none;
-            margin: 0 10px 10px;
-          }
-        }
-
-        .bottom-menu {
-          flex: none;
         }
       }
     }
@@ -247,7 +215,7 @@ tryOnMounted(() => {
 @use 'shared/styles/mixins';
 
 @import 'core/styles/globals';
-@import 'core/styles/fonts';
+@import 'core/styles/typography';
 
 :root {
   --color-primary: 0, 0, 0;

src/auth/stores/authentication.ts

@@ -39,11 +39,6 @@ export const useAuthentication = createSharedComposable(() => {
     })
   }
 
-  function reset() {
-    refreshToken.value = undefined
-    window.location.reload()
-  }
-
   function redirect() {
     const query = new URLSearchParams({
       redirect_url: location.origin,
@@ -65,13 +60,9 @@ export const useAuthentication = createSharedComposable(() => {
   const authenticationService = useAuthenticationService()
   async function rotate() {
     if (refreshToken.value) {
-      const timeout = setTimeout(reset, 5000)
-
       const { access_token, refresh_token }
           = await authenticationService.rotate(refreshToken.value)
 
-      clearTimeout(timeout)
-
       accessToken.value = access_token
       refreshToken.value = refresh_token
 
@@ -82,27 +73,28 @@ export const useAuthentication = createSharedComposable(() => {
   const route = useRoute()
   const router = useRouter()
 
-  function isUrlClaimable() {
-    const params = new URLSearchParams(window.location.search)
-    return params.has('access_token') && params.has('refresh_token')
+  async function isUrlClaimable() {
+    await router.isReady()
+    return route.query.access_token && route.query.refresh_token
   }
 
   const authenticated = computed(() => refreshToken.value || isUrlClaimable())
 
   async function claimUrl() {
-    const params = new URLSearchParams(window.location.search)
-    accessToken.value = params.get('access_token')!
-    refreshToken.value = params.get('refresh_token')
+    await router.isReady()
+
+    accessToken.value = route.query.access_token as string
+    refreshToken.value = route.query.refresh_token as string
 
     await router.replace({
-      query: omit(route.query, ['access_token', 'refresh_token']),
+      query: omit(route.query, ['access_token', 'refresh_token', 'state']),
     })
 
     schedule()
   }
 
   async function login(): Promise<void> {
-    if (isUrlClaimable())
+    if (await isUrlClaimable())
       await claimUrl()
     else if (refreshToken.value)
       await rotate()
@@ -125,7 +117,6 @@ export const useAuthentication = createSharedComposable(() => {
     onLogout: readonly(onLogout),
 
     getToken,
-    reset,
     login,
     logout,
   }

src/core/components/TheBottomMenu.vue

@@ -56,9 +56,9 @@ const items: BottomMenuItem[] = [
 </template>
 
 <style lang="scss" scoped>
-@use '../src/shared/styles/mixins';
-@use '../src/shared/styles/constants';
-@use '../src/shared/styles/transitions';
+@use '../../shared/styles/mixins';
+@use '../../shared/styles/constants';
+@use '../../shared/styles/transitions';
 
 .bottom-menu-component {
   min-width: max-content;

src/core/components/TheIntroLoader.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style scoped lang="scss">
-@use 'src/shared/styles/mixins';
+@use '../../shared/styles/mixins';
 
 .intro-loader-component {
   --color-osu: #fa94b2;