add twitch user from watch page, box art fix

Author: Kevin Souza

src/main/twitch/stream.ts

@@ -96,6 +96,8 @@ export async function fetchStreamInfo(username: string): Promise<StreamInfo> {
 			const response = await fetch(box_art_url)
 			if (response.redirected) {
 				box_art = `https://static-cdn.jtvnw.net/ttv-boxart/${stream.game.id}_IGDB-144x192.jpg`
+			} else if (response.status === 200) {
+				box_art = box_art_url
 			}
 		} catch (err) {
 			console.error(`Error fetching box art: ${err}`)

src/renderer/src/pages/streams/Watch.svelte

@@ -4,10 +4,12 @@
 	import TwitchPlayer from '$lib/components/players/Twitch.svelte'
 	import Chat from '$lib/components/Chat.svelte'
 	import { notify } from '$lib/components/Notification.svelte'
+	import { Platform } from '$shared/enums'
 
 	let username = $state('')
 	let url = $state('')
 	let streamInfo = $state() as StreamInfo
+	let subscribed = $state(false)
 
 	let loading = $state(true)
 
@@ -52,13 +54,38 @@
 		return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
 	}
 
+	async function handleSubscription() {
+		try {
+			if (subscribed) {
+				const deleted = await window.user.remove(Platform.Twitch, username)
+				notify(`Unsubscribed from ${deleted}`)
+				subscribed = false
+			} else {
+				const deleted = await window.user.add(Platform.Twitch, username)
+				notify(`Subscribed to ${deleted}`)
+				subscribed = true
+			}
+		} catch (err) {
+			notify('Error updating subscription', err)
+		}
+	}
+
+	async function getPossibleUser() {
+		const user = await window.user.get(Platform.Twitch, username)
+		if (user) {
+			subscribed = true
+		}
+	}
+
 	onMount(async () => {
 		const routeURL = new URL(window.location.href)
 		username = routeURL.searchParams.get('username')!
 
 		try {
 			const data = await window.stream.get(username, false)
 			url = data
+
+			await getPossibleUser()
 		} catch {
 			notify('Stream not found')
 			loading = false
@@ -146,6 +173,15 @@
 				</span>
 			</div>
 
+			<div class="flex">
+				<button
+					class="cursor-pointer border border-white/25 p-1 px-2 hover:bg-neutral-400/50"
+					onclick={async () => await handleSubscription()}
+				>
+					{subscribed ? 'SUBSCRIBED' : 'SUBSCRIBE'}
+				</button>
+			</div>
+
 			<div class="flex items-center gap-2">
 				<img src={streamInfo.box_art} alt={streamInfo.game} width={72} height={96} />
 

src/renderer/src/pages/videos/Watch.svelte

@@ -27,7 +27,7 @@
 				subscribed = true
 			}
 		} catch (err) {
-			notify(`Error subscribing to ${player.channel.name}`, err)
+			notify('Error updating subscription', err)
 		}
 	}
 
@@ -128,7 +128,7 @@
 						</span>
 
 						<button
-							class="cursor-pointer p-1 px-2 hover:bg-neutral-400/50"
+							class="cursor-pointer border border-white/25 p-1 px-2 hover:bg-neutral-400/50"
 							onclick={async () => await handleSubscription()}
 						>
 							{subscribed ? 'SUBSCRIBED' : 'SUBSCRIBE'}