Add spotify player

Author: spearcat

components.d.ts

@@ -13,13 +13,15 @@ declare module 'vue' {
     'AtStyle.ce': typeof import('./src/components/custom-elements/AtStyle.ce.vue')['default']
     'AtWebStylesheet.ce': typeof import('./src/components/custom-elements/AtWebStylesheet.ce.vue')['default']
     'AtWebTitle.ce': typeof import('./src/components/custom-elements/AtWebTitle.ce.vue')['default']
+    copy: typeof import('./src/components/custom-elements/AtAnchor.ce copy.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     MModal: typeof import('./src/components/MModal.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
     'OmitVanillaCss.ce': typeof import('./src/components/custom-elements/OmitVanillaCss.ce.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SignInGate: typeof import('./src/components/SignInGate.vue')['default']
+    SpotifyPlayer: typeof import('./src/components/custom-elements/SpotifyPlayer.vue')['default']
     VaButton: typeof import('vuestic-ui')['VaButton']
     'WebampPlayer.ce': typeof import('./src/components/custom-elements/WebampPlayer.ce.vue')['default']
   }

package.json

@@ -27,6 +27,7 @@
     "@atproto/syntax": "^0.3.1",
     "@mdx-js/mdx": "^3.1.0",
     "@noble/hashes": "^1.6.1",
+    "@vue/reactivity": "3.5.13",
     "@vueuse/core": "^12.0.0",
     "bluesky-post-embed": "^1.0.5",
     "bluesky-profile-card-embed": "^1.0.0",
@@ -40,7 +41,6 @@
     "mime-type": "^5.0.0",
     "monaco-themes": "^0.4.4",
     "music-metadata": "^10.6.4",
-    "music-metadata-browser": "^2.5.11",
     "path-browserify": "^1.0.1",
     "rehype": "^13.0.2",
     "uint8arrays": "^5.1.0",
@@ -72,6 +72,7 @@
     "sass-embedded": "^1.80.2",
     "typescript": "~5.6.3",
     "vite": "^6.0.1",
+    "vite-plugin-https-imports": "^0.1.0",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-vue-devtools": "^7.6.5",
     "vue-tsc": "^2.1.10"

pnpm-lock.yaml

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type EmbedController, useSpotifyIFrameAPI } from '@/lib/spotify';
+import { useScriptTag, watchImmediate } from '@vueuse/core';
+import { onBeforeUnmount, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue';
+
+const props = defineProps<{
+    uri?: string;
+    width?: number;
+    height?: number;
+}>();
+
+const spotifyElement = useTemplateRef('spotifyElement');
+const IFrameAPI = useSpotifyIFrameAPI();
+const EmbedController = shallowRef<EmbedController>();
+
+onMounted(() => {
+    watchImmediate(IFrameAPI, IFrameAPI => {
+        if (!IFrameAPI) return;
+
+        IFrameAPI.createController(spotifyElement.value!, {
+            uri: props.uri,
+            width: props.width,
+            height: props.height,
+        }, controller => {
+            EmbedController.value = controller;
+        });
+    });
+});
+
+onBeforeUnmount(() => {
+    EmbedController.value?.destroy();
+});
+
+</script>
+
+<template>
+    <component :is="'script'"><slot></slot></component>
+    <div v-bind="$attrs" ref="spotifyElement"></div>
+</template>

src/components/custom-elements/SpotifyPlayer.vue

@@ -14,6 +14,7 @@ import AtWebTitle from '@/components/custom-elements/AtWebTitle.ce.vue';
 import { type Slot } from 'vue';
 import type { JSX } from 'vue/jsx-runtime';
 import WebampPlayer from '@/components/custom-elements/WebampPlayer.ce.vue';
+import SpotifyPlayer from '@/components/custom-elements/SpotifyPlayer.vue';
 
 type Props = Record<string, any>;
 
@@ -62,5 +63,6 @@ export const components: MDXComponents = {
     BlueskyProfileCard: 'bluesky-profile-card',
     BlueskyProfileFeed: 'bluesky-profile-feed',
     Webamp: WebampPlayer,
+    Spotify: SpotifyPlayer,
     ...(extraComponents as unknown as MDXComponents)
 };

src/lib/markdown/components.tsx

@@ -0,0 +1,36 @@
+import { useScriptTag } from '@vueuse/core';
+import { shallowRef } from 'vue';
+
+export interface IFrameAPI {
+    createController(element: Element, options: { uri?: string, width?: number, height?: number }, callback: (EmbedController: EmbedController) => void): void;
+}
+export interface EmbedController {
+    loadUri(spotifyUri: string, preferVideo?: boolean, startAt?: number): void;
+    play(): void;
+    pause(): void;
+    resume(): void;
+    togglePlay(): void;
+    restart(): void;
+    seek(seconds: number): void;
+    destroy(): void;
+
+    addListener(event: 'ready', callback: () => void): void;
+    addListener(event: 'playback_update', callback: (e: {data: {isPaused: boolean, isBuffering: boolean, duration: number, position: number }}) => void): void;
+}
+
+declare global {
+    interface Window {
+        onSpotifyIframeApiReady: (IFrameAPI: IFrameAPI) => void;
+    }
+}
+
+const IFrameAPI = shallowRef<IFrameAPI>();
+window.onSpotifyIframeApiReady = api => {
+    IFrameAPI.value = api;
+};
+const { load: loadSpotify } = useScriptTag('https://open.spotify.com/embed/iframe-api/v1', () => {}, { manual: true });
+loadSpotify();
+
+export function useSpotifyIFrameAPI() {
+    return IFrameAPI;
+}

src/lib/spotify.ts

@@ -5,3 +5,5 @@ declare module '#webamp-lazy' {
     import Webamp from '@/external/webamp/built/types/js/webampLazy';
     export default Webamp;
 }
+
+declare module 'https://open.spotify.com/embed/iframe-api/v1';

src/webamp.d.ts renamed to src/modules.d.ts

@@ -14,6 +14,7 @@
 
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node"]
+    "types": ["node"],
+    "esModuleInterop": true
   }
 }

tsconfig.node.json

@@ -6,6 +6,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import vueDevTools from 'vite-plugin-vue-devtools';
 import Components from 'unplugin-vue-components/vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import httpsImports from 'vite-plugin-https-imports';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -30,6 +31,8 @@ export default defineConfig({
             ],
         }),
         nodePolyfills(),
+        // @ts-expect-error broken commonjs
+        (httpsImports.default as typeof httpsImports)(),
 
         // // @quasar/plugin-vite options list:
         // // https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts