feat: request wrapper utility

web/src/components/player/QueueViewer.vue

@@ -56,7 +56,6 @@
                 <i class="fa-solid fa-xmark"></i>
                 Clear
             </button>
-            <!-- TODO: On save, copy the current queue into rawQueue! -->
             <button>
                 <i class="fa-solid fa-save"></i>
                 Save

web/src/composables/SearchView.vue

@@ -19,7 +19,6 @@
 
     const search = ( ev: KeyboardEvent ) => {
         if ( ev.key === 'Enter' ) {
-            // TODO: If no new input, instead of searching, add first song
             try {
                 clearTimeout( timeout );
             } catch { /* empty */ }

web/src/ts/player/plugins/musickit/index.ts

@@ -8,58 +8,51 @@ import {
 import {
     musicKitPlayback
 } from './playback';
+import request from '@/ts/request';
 
 export const useMusicKit: PlayerSourcePluginInitializer = ( storefront: string = 'ch' ): Promise<PlayerSourcePlugin> => {
     return new Promise( ( resolve, reject ) => {
         const init = async ( storefront: string ): Promise<PlayerSourcePlugin> => {
-            const res = await fetch( import.meta.env.VITE_BACKEND_URL + '/dev-token', {
+            const token = await ( await request.get( '/dev-token' ) ).text();
-                'credentials': 'include'
+            const instance = await window.MusicKit.configure( {
+                'developerToken': token,
+                'app': {
+                    'name': 'MusicPlayer',
+                    'build': '4'
+                    // 'icon': 'https://music.janishutz.com/logo.jpg'
+                },
+                'storefrontId': storefront.toUpperCase()
             } );
+            const controls = musicKitPlayback( instance );
 
-            if ( res.status === 200 ) {
+            const login = async (): Promise<boolean> => {
-                const token = await res.text();
+                try {
-                const instance = await window.MusicKit.configure( {
+                    await instance.authorize();
-                    'developerToken': token,
-                    'app': {
-                        'name': 'MusicPlayer',
-                        'build': '4'
-                        // 'icon': 'https://music.janishutz.com/logo.jpg'
-                    },
-                    'storefrontId': storefront.toUpperCase()
-                } );
-                const controls = musicKitPlayback( instance );
 
-                const login = async (): Promise<boolean> => {
+                    return true;
-                    try {
+                } catch {
-                        await instance.authorize();
+                    return false;
+                }
+            };
 
-                        return true;
+            return {
-                    } catch {
+                'authorized': controls.loggedIn,
-                        return false;
+                'play': controls.play,
-                    }
+                'pause': controls.pause,
-                };
+                'stop': controls.stop,
-
+                'playSong': controls.playSong,
-                return {
+                'getDuration': controls.getDuration,
-                    'authorized': controls.loggedIn,
+                'getPlaybackPos': controls.getPlaybackPos,
-                    'play': controls.play,
+                'id': 'applemusic',
-                    'pause': controls.pause,
+                'name': 'Apple Music',
-                    'stop': controls.stop,
+                'seekTo': controls.seekTo,
-                    'playSong': controls.playSong,
+                'login': login,
-                    'getDuration': controls.getDuration,
+                'addSongsFromThisSource': addFromAppleMusic,
-                    'getPlaybackPos': controls.getPlaybackPos,
+                'loading': {
-                    'id': 'applemusic',
+                    'requiresLocalFiles': false
-                    'name': 'Apple Music',
+                },
-                    'seekTo': controls.seekTo,
+                'songUnload': async () => {}
-                    'login': login,
+            };
-                    'addSongsFromThisSource': addFromAppleMusic,
-                    'loading': {
-                        'requiresLocalFiles': false
-                    },
-                    'songUnload': async () => {}
-                };
-            } else {
-                throw new Error( 'ERR_AUTH' );
-            }
         };
 
         if ( !window.MusicKit ) {

web/src/ts/request.ts

@@ -0,0 +1,39 @@
+export class AuthError extends Error {}
+
+export class UnownedError extends Error {}
+
+
+const get = async ( url: string ): Promise<Response> => {
+    return await wrapper( url, {
+        'credentials': 'include'
+    } );
+};
+
+const post = async ( url: string, payload: string, mime: string = 'application/json' ): Promise<Response> => {
+    return await wrapper( url, {
+        'credentials': 'include',
+        'body': payload,
+        'headers': {
+            'Content-Type': mime ?? 'application/json'
+        }
+    } );
+};
+
+const wrapper = async ( url: string, opts: RequestInit ): Promise<Response> => {
+    const res = await fetch( import.meta.env.VITE_BACKEND_URL + url, opts );
+
+    if ( res.ok ) {
+        return res;
+    } else if ( res.status === 403 || res.status === 401 ) {
+        throw new AuthError( 'ERR_USER_UNAUTHORIZED' );
+    } else if ( res.status === 402 ) {
+        throw new UnownedError( 'ERR_USER_UNOWNED' );
+    } else {
+        throw new Error( 'ERR_' + res.status );
+    }
+};
+
+export default {
+    get,
+    post
+};

web/src/views/AppView.vue

@@ -1,13 +1,33 @@
 <script setup lang="ts">
     import PlayerWrapper from '@/components/main/PlayerWrapper.vue';
     import PlaylistsComponent from '@/components/main/PlaylistsComponent.vue';
+    import {
+        ref
+    } from 'vue';
+    import request from '@/ts/request';
+    import router from '@/router';
 
+    const checkingStatus = ref( true );
+
+    const ownershipCheck = async () => {
+        const data = await ( await request.get( '/user/owned' ) ).json();
+
+        if ( data[ 'status' ] )
+            router.push( '/get' );
+    };
+
+    ownershipCheck();
 </script>
 
 <template>
     <div class="main-app">
-        <PlaylistsComponent />
+        <div v-if="checkingStatus">
-        <PlayerWrapper />
+            Loading...
+        </div>
+        <div v-else>
+            <PlaylistsComponent />
+            <PlayerWrapper />
+        </div>
     </div>
 </template>