From 025e13fbfd5ca6af3ba0ea97d3a4ca353efe0350 Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Tue, 11 Jun 2024 21:23:19 +0300
Subject: [PATCH] kruto

---
 .../dashboard/src/api/overlays/now-playing.ts | 112 +++++++++--------
 .../overlays/now-playing/now-playing-form.vue |  22 ++--
 .../overlays/now-playing/now-playing.vue      |  40 +++---
 .../now-playing/use-now-playing-form.ts       |  15 ++-
 .../now-playing/use-now-playing-socket.ts     | 114 +++++++++---------
 .../src/pages/overlays/now-playing.vue        |  38 +++---
 libs/frontend-now-playing/package.json        |   1 -
 libs/frontend-now-playing/src/index.ts        |   6 +-
 libs/frontend-now-playing/src/now-playing.vue |  11 +-
 .../src/presets/aiden-redesign.vue            |  37 +++---
 .../src/presets/simple-line.vue               |  24 ++--
 .../src/presets/transparent.vue               |   8 +-
 libs/frontend-now-playing/src/types.ts        |  24 +++-
 pnpm-lock.yaml                                |   5 +-
 14 files changed, 237 insertions(+), 220 deletions(-)

diff --git a/frontend/dashboard/src/api/overlays/now-playing.ts b/frontend/dashboard/src/api/overlays/now-playing.ts
index 0b68103f9..48796741c 100644
--- a/frontend/dashboard/src/api/overlays/now-playing.ts
+++ b/frontend/dashboard/src/api/overlays/now-playing.ts
@@ -1,57 +1,63 @@
-import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query';
-import type {
-	UpdateRequest,
-	GetAllResponse,
-	CreateRequest,
-} from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-import { unref } from 'vue';
-import type { MaybeRef } from 'vue';
+import { useQuery } from '@urql/vue'
 
-import { protectedApiClient } from '@/api/twirp.js';
+import { useMutation } from '@/composables/use-mutation'
+import { graphql } from '@/gql'
 
-export const useNowPlayingOverlayManager = () => {
-	const queryClient = useQueryClient();
-	const queryKey = 'nowPlayingOverlay';
+export function useNowPlayingOverlayApi() {
+	const cacheKey = ['nowPlayingOverlay']
+
+	const useNowPlayingQuery = () => useQuery({
+		query: graphql(`
+			query NowPlayingOverlays {
+				nowPlayingOverlays {
+					id
+					channelId
+					preset
+					hideTimeout
+					fontWeight
+					fontFamily
+					backgroundColor
+					showImage
+				}
+			}
+		`),
+		context: {
+			additionalTypenames: cacheKey,
+		},
+		variables: {},
+	})
+
+	const useNowPlayingCreate = () => useMutation(
+		graphql(`
+			mutation NowPlayingOverlayCreate($input: NowPlayingOverlayMutateOpts!) {
+				nowPlayingOverlayCreate(opts: $input)
+			}
+		`),
+		cacheKey,
+	)
+
+	const useNowPlayingUpdate = () => useMutation(
+		graphql(`
+			mutation NowPlayingOverlayUpdate($id: String!, $input: NowPlayingOverlayMutateOpts!) {
+				nowPlayingOverlayUpdate(id: $id, opts: $input)
+			}
+		`),
+		cacheKey,
+	)
+
+	const useNowPlayingDelete = () => useMutation(
+		graphql(`
+			mutation NowPlayingOverlayDelete($id: String!) {
+				nowPlayingOverlayDelete(id: $id)
+			}
+		`),
+		cacheKey,
+	)
 
 	return {
-		useGetAll: () => useQuery({
-			queryKey: [queryKey],
-			queryFn: async (): Promise<GetAllResponse> => {
-				const call = await protectedApiClient.overlaysNowPlayingGetAll({});
-				return call.response;
-			},
-		}),
-		useCreate: () => useMutation({
-			mutationKey: ['nowPlayingOverlayCreate'],
-			mutationFn: async (opts: CreateRequest) => {
-				const call = await protectedApiClient.overlaysNowPlayingCreate(opts);
-				return call.response;
-			},
-			onSuccess: async () => {
-				await queryClient.invalidateQueries([queryKey]);
-			},
-		}),
-		useUpdate: () => useMutation({
-			mutationKey: ['nowPlayingOverlayUpdate'],
-			mutationFn: async (opts: MaybeRef<UpdateRequest>) => {
-				const data = unref(opts);
-				await protectedApiClient.overlaysNowPlayingUpdate(data);
-			},
-			onSuccess: async (_, opts) => {
-				const data = unref(opts);
-				await queryClient.invalidateQueries([queryKey, data.id]);
-			},
-		}),
-		useDelete: () => useMutation({
-			mutationKey: ['nowPlayingOverlayDelete'],
-			mutationFn: async (id: MaybeRef<string>) => {
-				await protectedApiClient.overlaysNowPlayingDelete({
-					id: unref(id),
-				});
-			},
-			onSuccess: async () => {
-				await queryClient.invalidateQueries([queryKey]);
-			},
-		}),
-	};
-};
+		useNowPlayingQuery,
+		useNowPlayingCreate,
+		useNowPlayingUpdate,
+		useNowPlayingDelete,
+	}
+}
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue b/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
index 0c0e601f9..8ca040cae 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
+++ b/frontend/dashboard/src/pages/overlays/now-playing/now-playing-form.vue
@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n'
 import { useNowPlayingForm } from './use-now-playing-form'
 
 import {
-	useNowPlayingOverlayManager,
+	useNowPlayingOverlayApi,
 	useProfile,
 	useUserAccessFlagChecker,
 } from '@/api'
@@ -29,20 +29,22 @@ const canCopyLink = computed(() => {
 	return profile?.value?.selectedDashboardId === profile.value?.id && userCanEditOverlays
 })
 
-const manager = useNowPlayingOverlayManager()
-const updater = manager.useUpdate()
+const manager = useNowPlayingOverlayApi()
+const updater = manager.useNowPlayingUpdate()
 
 async function save() {
 	if (!formValue.value?.id) return
 
-	await updater.mutateAsync({
+	await updater.executeMutation({
 		id: formValue.value.id,
-		preset: formValue.value.preset,
-		fontFamily: formValue.value.fontFamily,
-		fontWeight: formValue.value.fontWeight,
-		backgroundColor: formValue.value.backgroundColor,
-		showImage: formValue.value.showImage,
-		hideTimeout: formValue.value.hideTimeout,
+		input: {
+			preset: formValue.value.preset,
+			fontFamily: formValue.value.fontFamily,
+			fontWeight: formValue.value.fontWeight,
+			backgroundColor: formValue.value.backgroundColor,
+			showImage: formValue.value.showImage,
+			hideTimeout: formValue.value.hideTimeout,
+		},
 	})
 
 	discrete.notification.success({
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue b/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
index d2b1573a0..d01c516ed 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
+++ b/frontend/dashboard/src/pages/overlays/now-playing/now-playing.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { NowPlaying } from '@twir/frontend-now-playing'
+import { NowPlaying, Preset } from '@twir/frontend-now-playing'
 import { NA, NAlert, NResult, NTabPane, NTabs, useThemeVars } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {
 	useLastfmIntegration,
-	useNowPlayingOverlayManager,
+	useNowPlayingOverlayApi,
 	useSpotifyIntegration,
 	useUserAccessFlagChecker,
 	useVKIntegration,
@@ -24,9 +24,9 @@ const { t } = useI18n()
 const { dialog } = useNaiveDiscrete()
 
 const userCanEditOverlays = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageOverlays)
-const nowPlayingOverlayManager = useNowPlayingOverlayManager()
-const creator = nowPlayingOverlayManager.useCreate()
-const deleter = nowPlayingOverlayManager.useDelete()
+const nowPlayingOverlayManager = useNowPlayingOverlayApi()
+const creator = nowPlayingOverlayManager.useNowPlayingCreate()
+const deleter = nowPlayingOverlayManager.useNowPlayingDelete()
 
 const { data: spotifyData } = useSpotifyIntegration().useData()
 const { data: lastFmData } = useLastfmIntegration().useData()
@@ -43,21 +43,23 @@ const {
 
 const {
 	data: entities,
-} = nowPlayingOverlayManager.useGetAll()
+} = nowPlayingOverlayManager.useNowPlayingQuery()
 
 const openedTab = ref<string>()
 
 function resetTab() {
-	if (!entities.value?.settings.at(0)) {
+	if (!entities.value?.nowPlayingOverlays.at(0)) {
 		openedTab.value = undefined
 		return
 	}
 
-	openedTab.value = entities.value.settings.at(0)?.id
+	openedTab.value = entities.value.nowPlayingOverlays.at(0)?.id
 }
 
 async function handleAdd() {
-	await creator.mutateAsync(defaultSettings)
+	await creator.executeMutation({
+		input: defaultSettings,
+	})
 }
 
 async function handleClose(id: string) {
@@ -68,21 +70,23 @@ async function handleClose(id: string) {
 		negativeText: 'Cancel',
 		showIcon: false,
 		onPositiveClick: async () => {
-			const entity = entities.value?.settings.find(s => s.id === id)
+			const entity = entities.value?.nowPlayingOverlays.find(s => s.id === id)
 			if (!entity?.id) return
 
-			await deleter.mutateAsync(entity.id)
+			await deleter.executeMutation({
+				id: entity.id,
+			})
 			resetTab()
 		},
 	})
 }
 
 const addable = computed(() => {
-	return userCanEditOverlays.value && (entities.value?.settings.length ?? 0) < 5
+	return userCanEditOverlays.value && (entities.value?.nowPlayingOverlays.length ?? 0) < 5
 })
 
 watch(openedTab, async (v) => {
-	const entity = entities.value?.settings.find(s => s.id === v)
+	const entity = entities.value?.nowPlayingOverlays.find(s => s.id === v)
 	if (!entity) return
 	setData(entity)
 })
@@ -96,9 +100,9 @@ watch(entities, () => {
 	<div class="flex flex-col gap-3">
 		<div>
 			<NowPlaying
-				:settings="settings ?? { preset: 'TRANSPARENT' }"
+				:settings="settings ?? { preset: Preset.TRANSPARENT }"
 				:track="{
-					image_url: 'https://i.scdn.co/image/ab67616d0000b273e7fbc0883149094912559f2c',
+					imageUrl: 'https://i.scdn.co/image/ab67616d0000b273e7fbc0883149094912559f2c',
 					artist: 'Slipknot',
 					title: 'Psychosocial',
 				}"
@@ -134,9 +138,9 @@ watch(entities, () => {
 					<template #prefix>
 						{{ t('overlays.chat.presets') }}
 					</template>
-					<template v-if="entities?.settings.length">
+					<template v-if="entities?.nowPlayingOverlays.length">
 						<NTabPane
-							v-for="(entity, entityIndex) in entities?.settings"
+							v-for="(entity, entityIndex) in entities?.nowPlayingOverlays"
 							:key="entity.id"
 							:tab="`#${entityIndex + 1}`"
 							:name="entity.id!"
@@ -145,7 +149,7 @@ watch(entities, () => {
 						</NTabPane>
 					</template>
 				</NTabs>
-				<NAlert v-if="!entities?.settings.length" type="info" class="mt-2">
+				<NAlert v-if="!entities?.nowPlayingOverlays.length" type="info" class="mt-2">
 					Create new overlay for edit settings
 				</NAlert>
 			</template>
diff --git a/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts b/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
index 8113782ac..9eeba199a 100644
--- a/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
+++ b/frontend/dashboard/src/pages/overlays/now-playing/use-now-playing-form.ts
@@ -1,10 +1,13 @@
-import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing'
 import { createGlobalState } from '@vueuse/core'
 import { ref, toRaw } from 'vue'
 
-export const defaultSettings: Settings = {
+import type { NowPlayingOverlay } from '@/gql/graphql'
+
+import { NowPlayingOverlayPreset } from '@/gql/graphql'
+
+export const defaultSettings: NowPlayingOverlay = {
 	id: '',
-	preset: 'TRANSPARENT',
+	preset: NowPlayingOverlayPreset.Transparent,
 	backgroundColor: 'rgba(0, 0, 0, 0)',
 	channelId: '',
 	fontFamily: 'inter',
@@ -14,14 +17,14 @@ export const defaultSettings: Settings = {
 }
 
 export const useNowPlayingForm = createGlobalState(() => {
-	const data = ref<Settings>(structuredClone(defaultSettings))
+	const data = ref<NowPlayingOverlay>(structuredClone(defaultSettings))
 
-	function setData(d: Settings) {
+	function setData(d: NowPlayingOverlay) {
 		data.value = structuredClone(toRaw(d))
 	}
 
 	function getDefaultSettings() {
-		return structuredClone(Settings)
+		return structuredClone(defaultSettings)
 	}
 
 	return {
diff --git a/frontend/overlays/src/composables/now-playing/use-now-playing-socket.ts b/frontend/overlays/src/composables/now-playing/use-now-playing-socket.ts
index d57065bfc..f9744f30c 100644
--- a/frontend/overlays/src/composables/now-playing/use-now-playing-socket.ts
+++ b/frontend/overlays/src/composables/now-playing/use-now-playing-socket.ts
@@ -1,63 +1,67 @@
-import type { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-import type { Track } from '@twir/frontend-now-playing';
-import type { ChannelOverlayNowPlayingPreset } from '@twir/types/api';
-import { useWebSocket } from '@vueuse/core';
-import { ref, watch } from 'vue';
-
-import type { TwirWebSocketEvent } from '@/api.js';
-import { generateSocketUrlWithParams } from '@/helpers.js';
-
-type Options = {
-	apiKey: string,
-	overlayId: string,
+import { useSubscription } from '@urql/vue'
+import { ref, watch } from 'vue'
+
+import type { Settings, Track } from '@twir/frontend-now-playing'
+
+import { graphql } from '@/gql'
+
+interface Options {
+	apiKey: string
+	overlayId: string
 }
 
-type SettingsWithTypedPreset = Settings & { preset: ChannelOverlayNowPlayingPreset }
-
-export const useNowPlayingSocket = (options: Options) => {
-	const brbUrl = generateSocketUrlWithParams('/overlays/nowplaying', {
-		apiKey: options.apiKey,
-		id: options.overlayId,
-	});
-	const currentTrack = ref<Track | null | undefined>();
-	const settings = ref<SettingsWithTypedPreset>();
-
-	const { data, open, close } = useWebSocket(
-		brbUrl,
-		{
-			immediate: false,
-			autoReconnect: {
-				delay: 500,
-			},
+export function useNowPlayingSocket(options: Options) {
+	const settingsSub = useSubscription({
+		query: graphql(`
+			subscription NowPlayingOverlaySettings($overlayId: String!, $apiKey: String!) {
+				nowPlayingOverlaySettings(id: $overlayId, apiKey: $apiKey) {
+					id
+					backgroundColor
+					channelId
+					fontFamily
+					fontWeight
+					hideTimeout
+					preset
+					showImage
+				}
+			}
+		`),
+		variables: {
+			apiKey: options.apiKey,
+			overlayId: options.overlayId,
 		},
-	);
-
-	watch(data, (v) => {
-		const parsedData = JSON.parse(v) as TwirWebSocketEvent;
-		if (parsedData.eventName === 'settings') {
-			settings.value = parsedData.data as SettingsWithTypedPreset;
-		}
-
-		if (parsedData.eventName === 'nowplaying') {
-			const track = parsedData.data as Track | null;
-			if (!track) return;
-			if (track.artist == currentTrack.value?.artist && track.title == currentTrack.value?.title) return;
-			currentTrack.value = parsedData.data as Track | null;
-		}
-	});
-
-	function connect(): void {
-		open();
-	}
+	})
 
-	function destroy(): void {
-		close();
-	}
+	const currentTrackSub = useSubscription({
+		query: graphql(`
+			subscription NowPlayingOverlayNowPlaying($apiKey: String!) {
+				nowPlayingCurrentTrack(apiKey: $apiKey) {
+					title
+					artist
+					imageUrl
+				}
+			}
+		`),
+		variables: {
+			apiKey: options.apiKey,
+		},
+	})
+
+	const currentTrack = ref<Track | null | undefined>()
+	const settings = ref<Settings>()
+
+	watch(currentTrackSub.data, (data) => {
+		currentTrack.value = data?.nowPlayingCurrentTrack
+	}, { immediate: true })
+
+	watch(settingsSub.data, (data) => {
+		if (!data?.nowPlayingOverlaySettings) return
+
+		settings.value = data.nowPlayingOverlaySettings
+	}, { immediate: true })
 
 	return {
-		connect,
-		destroy,
 		currentTrack,
 		settings,
-	};
-};
+	}
+}
diff --git a/frontend/overlays/src/pages/overlays/now-playing.vue b/frontend/overlays/src/pages/overlays/now-playing.vue
index 9714d50a4..f4196a596 100644
--- a/frontend/overlays/src/pages/overlays/now-playing.vue
+++ b/frontend/overlays/src/pages/overlays/now-playing.vue
@@ -1,43 +1,33 @@
 <script setup lang="ts">
-import { NowPlaying, type Track } from '@twir/frontend-now-playing';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { NowPlaying, type Track } from '@twir/frontend-now-playing'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
-import { useNowPlayingSocket } from '@/composables/now-playing/use-now-playing-socket.ts';
+import { useNowPlayingSocket } from '@/composables/now-playing/use-now-playing-socket.ts'
 
-const route = useRoute();
+const route = useRoute()
 
-const { connect, destroy, currentTrack, settings } = useNowPlayingSocket({
+const { currentTrack, settings } = useNowPlayingSocket({
 	apiKey: route.params.apiKey as string,
 	overlayId: route.query.id as string,
-});
+})
 
-onMounted(() => {
-	if (route.params.apiKey && route.query.id) {
-		connect();
-	}
-});
-
-onUnmounted(() => {
-	destroy();
-});
-
-const showedTrack = ref<Track | null | undefined>(null);
+const showedTrack = ref<Track | null | undefined>(null)
 
-const timerId = ref<number | null>(null);
+const timerId = ref<number | null>(null)
 watch(currentTrack, (track) => {
 	if (timerId.value != null) {
-		clearTimeout(timerId.value);
+		clearTimeout(timerId.value)
 	}
 
-	showedTrack.value = track;
+	showedTrack.value = track
 
 	if (settings.value?.hideTimeout) {
 		timerId.value = setTimeout(() => {
-			showedTrack.value = null;
-		}, settings.value.hideTimeout * 1000) as unknown as number;
+			showedTrack.value = null
+		}, settings.value.hideTimeout * 1000) as unknown as number
 	}
-});
+})
 </script>
 
 <template>
diff --git a/libs/frontend-now-playing/package.json b/libs/frontend-now-playing/package.json
index b1297bac5..b9a11bec0 100644
--- a/libs/frontend-now-playing/package.json
+++ b/libs/frontend-now-playing/package.json
@@ -16,7 +16,6 @@
     "vue": "3.4.21"
   },
   "devDependencies": {
-    "@twir/api": "workspace:*",
     "vue-tsc": "2.0.13"
   },
   "peerDependencies": {
diff --git a/libs/frontend-now-playing/src/index.ts b/libs/frontend-now-playing/src/index.ts
index 0706e00af..9d3000e41 100644
--- a/libs/frontend-now-playing/src/index.ts
+++ b/libs/frontend-now-playing/src/index.ts
@@ -1,7 +1,7 @@
-import NowPlaying from './now-playing.vue';
+import NowPlaying from './now-playing.vue'
 
-export * from './types.js';
+export * from './types.js'
 
 export {
 	NowPlaying,
-};
+}
diff --git a/libs/frontend-now-playing/src/now-playing.vue b/libs/frontend-now-playing/src/now-playing.vue
index 24c2b6295..c9b666952 100644
--- a/libs/frontend-now-playing/src/now-playing.vue
+++ b/libs/frontend-now-playing/src/now-playing.vue
@@ -2,15 +2,14 @@
 import './assets/style.css'
 
 import { useFontSource } from '@twir/fontsource'
-import { ChannelOverlayNowPlayingPreset } from '@twir/types/api'
 import { computed, watch } from 'vue'
 
 import PresetAidenRedesign from './presets/aiden-redesign.vue'
 import PresetSimpleLine from './presets/simple-line.vue'
 import PresetTransparent from './presets/transparent.vue'
+import { Preset } from './types.js'
 
-import type { Track } from './types.js'
-import type { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing'
+import type { Settings, Track } from './types.js'
 
 const props = defineProps<{
 	settings: Settings
@@ -19,11 +18,11 @@ const props = defineProps<{
 
 const presetComponent = computed(() => {
 	switch (props.settings.preset) {
-		case ChannelOverlayNowPlayingPreset.TRANSPARENT:
+		case Preset.TRANSPARENT:
 			return PresetTransparent
-		case ChannelOverlayNowPlayingPreset.AIDEN_REDESIGN:
+		case Preset.AIDEN_REDESIGN:
 			return PresetAidenRedesign
-		case ChannelOverlayNowPlayingPreset.SIMPLE_LINE:
+		case Preset.SIMPLE_LINE:
 			return PresetSimpleLine
 		default:
 			return PresetTransparent
diff --git a/libs/frontend-now-playing/src/presets/aiden-redesign.vue b/libs/frontend-now-playing/src/presets/aiden-redesign.vue
index c9aac338f..09b58f3ee 100644
--- a/libs/frontend-now-playing/src/presets/aiden-redesign.vue
+++ b/libs/frontend-now-playing/src/presets/aiden-redesign.vue
@@ -1,45 +1,44 @@
 <script setup lang="ts">
-import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-import { useElementSize } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { useElementSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
-import type { Track } from '../types.js';
+import type { Settings, Track } from '../types.js'
 
 const props = defineProps<{
 	track?: Track | null
 	settings: Settings
-}>();
+}>()
 
 const bgColor = computed(() => {
 	if (props.settings.backgroundColor === 'rgba(0, 0, 0, 0)') {
-		return '#1E1E1E';
+		return '#1E1E1E'
 	}
 
-	return props.settings.backgroundColor;
-});
+	return props.settings.backgroundColor
+})
 
-const infoRef = ref<HTMLElement>();
-const nameRef = ref<HTMLElement>();
-const artistRef = ref<HTMLElement>();
+const infoRef = ref<HTMLElement>()
+const nameRef = ref<HTMLElement>()
+const artistRef = ref<HTMLElement>()
 
-const { width: infoWidth } = useElementSize(infoRef);
-const { width: nameWidth } = useElementSize(nameRef);
-const { width: artistWidth } = useElementSize(artistRef);
+const { width: infoWidth } = useElementSize(infoRef)
+const { width: nameWidth } = useElementSize(nameRef)
+const { width: artistWidth } = useElementSize(artistRef)
 
 const nameMarqueEnabled = computed(() => {
-	return nameWidth.value > infoWidth.value;
-});
+	return nameWidth.value > infoWidth.value
+})
 
 const artistMarqueEnabled = computed(() => {
-	return artistWidth.value > infoWidth.value;
-});
+	return artistWidth.value > infoWidth.value
+})
 </script>
 
 <template>
 	<div v-if="track" class="spotify">
 		<img
 			v-if="settings.showImage" class="cover"
-			:src="track.image_url ?? '/overlays/images/play.png'"
+			:src="track.imageUrl ?? '/overlays/images/play.png'"
 		/>
 		<div ref="infoRef" class="info">
 			<div ref="artistRef" class="artist" :class="{ marque: artistMarqueEnabled }">
diff --git a/libs/frontend-now-playing/src/presets/simple-line.vue b/libs/frontend-now-playing/src/presets/simple-line.vue
index 55f43ba98..686863777 100644
--- a/libs/frontend-now-playing/src/presets/simple-line.vue
+++ b/libs/frontend-now-playing/src/presets/simple-line.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
-import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-import { useElementSize } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { useElementSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
-import type { Track } from '../types.js';
+import type { Settings, Track } from '../types.js'
 
 defineProps<{
 	track?: Track | null
 	settings: Settings
-}>();
+}>()
 
-const spotifyRef = ref<HTMLElement>();
-const infoRef = ref<HTMLElement>();
+const spotifyRef = ref<HTMLElement>()
+const infoRef = ref<HTMLElement>()
 
-
-const { width: spotifyWidth } = useElementSize(spotifyRef);
-const { width: infoWidth } = useElementSize(infoRef);
+const { width: spotifyWidth } = useElementSize(spotifyRef)
+const { width: infoWidth } = useElementSize(infoRef)
 
 const nameMarqueEnabled = computed(() => {
-	return infoWidth.value > spotifyWidth.value;
-});
+	return infoWidth.value > spotifyWidth.value
+})
 </script>
 
 <template>
 	<div v-if="track" ref="spotifyRef" class="spotify">
 		<img
 			v-if="settings.showImage" class="cover"
-			:src="track.image_url ?? '/overlays/images/play.png'"
+			:src="track.imageUrl ?? '/overlays/images/play.png'"
 		/>
 		<div ref="infoRef" class="info" :class="{ marque: nameMarqueEnabled }">
 			<div class="name">
diff --git a/libs/frontend-now-playing/src/presets/transparent.vue b/libs/frontend-now-playing/src/presets/transparent.vue
index 0a90e2d45..a716d983e 100644
--- a/libs/frontend-now-playing/src/presets/transparent.vue
+++ b/libs/frontend-now-playing/src/presets/transparent.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { Settings } from '@twir/api/messages/overlays_now_playing/overlays_now_playing';
-
-import type { Track } from '../types.js';
+import type { Settings, Track } from '../types.js'
 
 defineProps<{
 	track?: Track | null
 	settings: Settings
-}>();
+}>()
 </script>
 
 <template>
 	<div v-if="track" class="spotify">
 		<img
 			v-if="settings.showImage" class="image"
-			:src="track.image_url ?? '/overlays/images/play.png'"
+			:src="track.imageUrl ?? '/overlays/images/play.png'"
 		/>
 		<div class="info">
 			<span class="name">{{ track.title }}</span>
diff --git a/libs/frontend-now-playing/src/types.ts b/libs/frontend-now-playing/src/types.ts
index 49d85b916..20922c0d8 100644
--- a/libs/frontend-now-playing/src/types.ts
+++ b/libs/frontend-now-playing/src/types.ts
@@ -1,5 +1,21 @@
-export type Track = {
-	artist: string,
-	title: string,
-	image_url?: string,
+export interface Track {
+	artist: string
+	title: string
+	imageUrl?: string | null
+}
+
+export const Preset = {
+	TRANSPARENT: 'TRANSPARENT',
+	AIDEN_REDESIGN: 'AIDEN_REDESIGN',
+	SIMPLE_LINE: 'SIMPLE_LINE',
+} as const
+
+export interface Settings {
+	id: string
+	preset: keyof typeof Preset
+	fontFamily: string
+	fontWeight: number
+	backgroundColor: string
+	showImage: boolean
+	hideTimeout?: number | null
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c723b92d..bb4429146 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -673,9 +673,6 @@ importers:
         specifier: 3.4.21
         version: 3.4.21(typescript@5.4.5)
     devDependencies:
-      '@twir/api':
-        specifier: workspace:*
-        version: link:../api
       vue-tsc:
         specifier: 2.0.13
         version: 2.0.13(typescript@5.4.5)
@@ -2956,6 +2953,7 @@ packages:
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
       debug: 4.3.5
@@ -2971,6 +2969,7 @@ packages:
 
   /@humanwhocodes/object-schema@2.0.3:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
     dev: true
 
   /@interactjs/types@1.10.27: