chore: skeleton for MusicKitJS abstractions

web/src/ts/dtype/playlist.d.ts

@@ -0,0 +1,44 @@
+// NOTE: For re-associating files with details here, can use dropdown in UI
+
+export type Playlist = Song[];
+
+export interface UrlToFileMapping {
+    [key: string]: string
+}
+
+export interface Song {
+    /**
+     * Where the song can be found
+     */
+    'source': 'local' | 'applemusic';
+
+    /**
+     * The identifier for the song so it can be found again (such as Apple Music ID or filename)
+     */
+    'identifier': string;
+
+    /**
+     * Additional info, such as dance type to be displayed on remote screens
+     */
+    'additional-info': string;
+
+    /**
+     * The artist of the song
+     */
+    'artist': string;
+
+    /**
+     * The name of the song
+     */
+    'name': string;
+
+    /**
+     * The cover image as a URL
+     */
+    'cover': string;
+
+    /**
+     * Song duration
+     */
+    'duration': string;
+}

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

@@ -0,0 +1,17 @@
+export const useMusicKit = () => {
+    const init = () => {
+        isInit = true;
+    };
+
+    let isInit = false;
+
+    if ( !window.MusicKit ) {
+        document.addEventListener( 'musickitloaded', () => {
+            init();
+        } );
+    } else {
+        init();
+    }
+
+    return {};
+};

web/src/ts/player/musickit/playback.ts

@@ -0,0 +1,9 @@
+export const play = () => {};
+
+export const pause = () => {};
+
+export const skip10 = () => {};
+
+export const back10 = () => {};
+
+export const playSong = ( id: string ) => {};

web/src/ts/player/musickit/user.ts

@@ -0,0 +1,3 @@
+export const login = async () => {
+
+};

web/src/ts/player/state.ts

@@ -0,0 +1,21 @@
+import {
+    type Ref,
+    ref
+} from 'vue';
+import type {
+    Playlist
+} from '../dtype/playlist';
+
+export const queueIdx = ref( 0 );
+
+export const queue: Ref<Playlist> = ref( [] );
+
+export const isPlaying = ref( false );
+
+export const shuffle = ref( false );
+
+export const repeat: Ref<'off' | 'one' | 'all'> = ref( 'off' );
+
+export const playbackPercentage = ref( 0 );
+
+export const duration = ref( 0 );