From fb61cb2257928ee92f2478baaf9f55bb12ffd00f Mon Sep 17 00:00:00 2001
From: bryantgillespie <hey@bryantgillespie.com>
Date: Wed, 1 Apr 2026 14:03:05 -0400
Subject: [PATCH] refactor: robustify bunny TV chat feature

- Extract shows data to shared util (bunnyShows.ts)
- Fix WS lifecycle: persist across navigation, destroy on app:unmount
- Add message dedup to prevent subscription echo
- Add loading=lazy to thumbnails
- Fix player/chat height with CSS min() constraint
- Remove unused .disclaimer CSS
---
 app/composables/useBunnyChat.ts |   8 ++-
 app/pages/tv/bunny/[video].vue  | 108 +++++---------------------------
 app/pages/tv/bunny/index.vue    | 100 +++--------------------------
 app/plugins/tv.ts               |   8 +++
 app/utils/bunnyShows.ts         |  97 ++++++++++++++++++++++++++++
 5 files changed, 134 insertions(+), 187 deletions(-)
 create mode 100644 app/utils/bunnyShows.ts

diff --git a/app/composables/useBunnyChat.ts b/app/composables/useBunnyChat.ts
index 74396d36..feec91e9 100644
--- a/app/composables/useBunnyChat.ts
+++ b/app/composables/useBunnyChat.ts
@@ -113,7 +113,9 @@ async function init(tvUrl: string, tvToken: string) {
 				const items: ChatMessage[] = (message as any).data ?? [];
 
 				for (const item of items) {
-					messages.value.push(item);
+					if (!messages.value.some((m) => m.id === item.id)) {
+						messages.value.push(item);
+					}
 				}
 			}
 		})();
@@ -147,6 +149,8 @@ async function send(text: string, url: string) {
 	});
 }
 
+export { destroy };
+
 export function useBunnyChat() {
 	const {
 		public: { tvUrl, tvToken },
@@ -154,5 +158,5 @@ export function useBunnyChat() {
 
 	onMounted(() => init(tvUrl as string, tvToken as string));
 
-	return { messages, handle, visitorId, isConnected, send, destroy };
+	return { messages, handle, visitorId, isConnected, send };
 }
diff --git a/app/pages/tv/bunny/[video].vue b/app/pages/tv/bunny/[video].vue
index fd89bca8..4af356d6 100644
--- a/app/pages/tv/bunny/[video].vue
+++ b/app/pages/tv/bunny/[video].vue
@@ -1,97 +1,12 @@
 <script setup lang="ts">
+import { allVideos } from '~/utils/bunnyShows';
+
 definePageMeta({
 	layout: 'tv',
 });
 
 const route = useRoute();
 
-const shows = [
-	{
-		title: 'Bunnies Being Bunnies',
-		videos: [
-			{
-				slug: 'bunny-stream-1',
-				youtubeId: 'WtM4OW2qVjY',
-				title: 'The Great Hop',
-				description: 'A bunny does what bunnies do best.',
-			},
-			{
-				slug: 'bunny-stream-12',
-				youtubeId: 'aWYcjCt4cqc',
-				title: 'Live and Unfiltered',
-				description: 'No script. No plan. Pure bunny.',
-			},
-			{
-				slug: 'bunny-stream-4',
-				youtubeId: 'pguISUUXWHc',
-				title: 'Zoomies: Unlocked',
-				description: 'No warning. Full speed. No regrets.',
-			},
-			{
-				slug: 'bunny-stream-6',
-				youtubeId: 'HLL5uGs_mSg',
-				title: 'The Nose Twitch Chronicles',
-				description: 'Sniffing everything. Trusting nothing.',
-			},
-		],
-	},
-	{
-		title: 'Flop Era',
-		videos: [
-			{
-				slug: 'bunny-stream-2',
-				youtubeId: 'f_b_MtB2tws',
-				title: 'Flop Era',
-				description: 'Maximum flop. Minimum effort.',
-			},
-			{
-				slug: 'bunny-stream-3',
-				youtubeId: 'VjqBt9lbOT0',
-				title: 'Lettuce Dreams',
-				description: 'A meditation on greens.',
-			},
-			{
-				slug: 'bunny-stream-5',
-				youtubeId: 'urANZiTyBD4',
-				title: 'Binky Season',
-				description: 'Pure joy, no explanation needed.',
-			},
-			{
-				slug: 'bunny-stream-8',
-				youtubeId: 'EY89M2qRNlc',
-				title: 'Disapproving Stare',
-				description: 'You have been judged.',
-			},
-		],
-	},
-	{
-		title: 'Bad Bunny',
-		videos: [
-			{
-				slug: 'bunny-stream-7',
-				youtubeId: 'ouuPSxE1hK4',
-				title: 'Cardboard Palace',
-				description: 'One box. Infinite possibilities.',
-			},
-			{
-				slug: 'bunny-stream-9',
-				youtubeId: 'vmbyVU9w47Y',
-				title: 'Pelo Suave',
-				description: 'Softest fur in the game.',
-			},
-
-			{
-				slug: 'bunny-stream-11',
-				youtubeId: 'H7-7TXXnw8I',
-				title: 'Conejito Malcriado',
-				description: 'Raised in the wild. Answers to no one.',
-			},
-		],
-	},
-];
-
-const allVideos = shows.flatMap((s) => s.videos);
-
 const currentIndex = allVideos.findIndex((v) => v.slug === route.params.video);
 
 if (currentIndex === -1) {
@@ -175,7 +90,11 @@ const isChatOpen = ref(true);
 				</div>
 				<NuxtLink v-if="nextVideo" :to="`/tv/bunny/${nextVideo.slug}`" class="next-video">
 					<div class="next-thumbnail">
-						<img :src="`https://img.youtube.com/vi/${nextVideo.youtubeId}/maxresdefault.jpg`" :alt="nextVideo.title" />
+						<img
+							:src="`https://img.youtube.com/vi/${nextVideo.youtubeId}/maxresdefault.jpg`"
+							:alt="nextVideo.title"
+							loading="lazy"
+						/>
 						<div class="play-overlay">
 							<BaseIcon name="play_circle" size="large" />
 						</div>
@@ -240,17 +159,22 @@ const isChatOpen = ref(true);
 
 	@media (width > 60rem) {
 		flex-direction: row;
+		align-items: stretch;
+		height: min(75vh, calc((100vw - 340px) * 9 / 16));
 
 		.stream {
+			flex: 1 1 0;
 			min-width: 0;
+			min-height: 0;
+			height: 100%;
+			aspect-ratio: unset;
 		}
 
 		.chat {
-			flex-basis: 340px;
-			flex-shrink: 0;
-			height: auto;
+			flex: 0 0 340px;
+			height: 100%;
 			max-height: none;
-			min-height: 450px;
+			min-height: unset;
 		}
 
 		.chat-toggle-enter-from,
diff --git a/app/pages/tv/bunny/index.vue b/app/pages/tv/bunny/index.vue
index 91c2c478..6252be13 100644
--- a/app/pages/tv/bunny/index.vue
+++ b/app/pages/tv/bunny/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { shows } from '~/utils/bunnyShows';
+
 definePageMeta({
 	layout: 'tv',
 });
@@ -10,91 +12,6 @@ useSeoMeta({
 	ogDescription: 'Going down the rabbit hole... literally.',
 	twitterCard: 'summary_large_image',
 });
-
-const shows = [
-	{
-		title: 'Bunnies Being Bunnies',
-		videos: [
-			{
-				slug: 'bunny-stream-1',
-				youtubeId: 'WtM4OW2qVjY',
-				title: 'The Great Hop',
-				description: 'A bunny does what bunnies do best.',
-			},
-			{
-				slug: 'bunny-stream-12',
-				youtubeId: 'aWYcjCt4cqc',
-				title: 'Live and Unfiltered',
-				description: 'No script. No plan. Pure bunny.',
-			},
-			{
-				slug: 'bunny-stream-4',
-				youtubeId: 'pguISUUXWHc',
-				title: 'Zoomies: Unlocked',
-				description: 'No warning. Full speed. No regrets.',
-			},
-			{
-				slug: 'bunny-stream-6',
-				youtubeId: 'HLL5uGs_mSg',
-				title: 'The Nose Twitch Chronicles',
-				description: 'Sniffing everything. Trusting nothing.',
-			},
-		],
-	},
-	{
-		title: 'Flop Era',
-		videos: [
-			{
-				slug: 'bunny-stream-2',
-				youtubeId: 'f_b_MtB2tws',
-				title: 'Flop Era',
-				description: 'Maximum flop. Minimum effort.',
-			},
-			{
-				slug: 'bunny-stream-3',
-				youtubeId: 'VjqBt9lbOT0',
-				title: 'Lettuce Dreams',
-				description: 'A meditation on greens.',
-			},
-			{
-				slug: 'bunny-stream-5',
-				youtubeId: 'urANZiTyBD4',
-				title: 'Binky Season',
-				description: 'Pure joy, no explanation needed.',
-			},
-			{
-				slug: 'bunny-stream-8',
-				youtubeId: 'EY89M2qRNlc',
-				title: 'Disapproving Stare',
-				description: 'You have been judged.',
-			},
-		],
-	},
-	{
-		title: 'Bad Bunny',
-		videos: [
-			{
-				slug: 'bunny-stream-7',
-				youtubeId: 'ouuPSxE1hK4',
-				title: 'Cardboard Palace',
-				description: 'One box. Infinite possibilities.',
-			},
-			{
-				slug: 'bunny-stream-9',
-				youtubeId: 'vmbyVU9w47Y',
-				title: 'Pelo Suave',
-				description: 'Softest fur in the game.',
-			},
-
-			{
-				slug: 'bunny-stream-11',
-				youtubeId: 'H7-7TXXnw8I',
-				title: 'Conejito Malcriado',
-				description: 'Raised in the wild. Answers to no one.',
-			},
-		],
-	},
-];
 </script>
 
 <template>
@@ -127,7 +44,11 @@ const shows = [
 				<li v-for="video in show.videos" :key="video.slug">
 					<NuxtLink :to="`/tv/bunny/${video.slug}`" class="video-card">
 						<div class="thumbnail">
-							<img :src="`https://img.youtube.com/vi/${video.youtubeId}/maxresdefault.jpg`" :alt="video.title" />
+							<img
+								:src="`https://img.youtube.com/vi/${video.youtubeId}/maxresdefault.jpg`"
+								:alt="video.title"
+								loading="lazy"
+							/>
 						</div>
 						<h3>{{ video.title }}</h3>
 						<p>{{ video.description }}</p>
@@ -247,13 +168,6 @@ const shows = [
 	}
 }
 
-.disclaimer {
-	margin-top: 3rem;
-	text-align: center;
-	color: rgba(255, 255, 255, 0.4);
-	font-style: italic;
-}
-
 @media (width > 60rem) {
 	.featured {
 		margin: 7rem 0 10em;
diff --git a/app/plugins/tv.ts b/app/plugins/tv.ts
index 774ed91c..2f811729 100644
--- a/app/plugins/tv.ts
+++ b/app/plugins/tv.ts
@@ -1,6 +1,8 @@
 import { authentication, createDirectus, rest } from '@directus/sdk';
 import Queue from 'p-queue';
 
+import { destroy as destroyBunnyChat } from '~/composables/useBunnyChat';
+
 import type { Schema } from '~~/types/schema';
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -35,6 +37,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 		});
 	}
 
+	if (import.meta.client) {
+		nuxtApp.hook('app:unmount', () => {
+			destroyBunnyChat();
+		});
+	}
+
 	return { provide: { directusTv } };
 });
 
diff --git a/app/utils/bunnyShows.ts b/app/utils/bunnyShows.ts
new file mode 100644
index 00000000..b41721d7
--- /dev/null
+++ b/app/utils/bunnyShows.ts
@@ -0,0 +1,97 @@
+export interface BunnyVideo {
+	slug: string;
+	youtubeId: string;
+	title: string;
+	description: string;
+}
+
+export interface BunnyShow {
+	title: string;
+	videos: BunnyVideo[];
+}
+
+export const shows: BunnyShow[] = [
+	{
+		title: 'Bunnies Being Bunnies',
+		videos: [
+			{
+				slug: 'bunny-stream-1',
+				youtubeId: 'WtM4OW2qVjY',
+				title: 'The Great Hop',
+				description: 'A bunny does what bunnies do best.',
+			},
+			{
+				slug: 'bunny-stream-12',
+				youtubeId: 'aWYcjCt4cqc',
+				title: 'Live and Unfiltered',
+				description: 'No script. No plan. Pure bunny.',
+			},
+			{
+				slug: 'bunny-stream-4',
+				youtubeId: 'pguISUUXWHc',
+				title: 'Zoomies: Unlocked',
+				description: 'No warning. Full speed. No regrets.',
+			},
+			{
+				slug: 'bunny-stream-6',
+				youtubeId: 'HLL5uGs_mSg',
+				title: 'The Nose Twitch Chronicles',
+				description: 'Sniffing everything. Trusting nothing.',
+			},
+		],
+	},
+	{
+		title: 'Flop Era',
+		videos: [
+			{
+				slug: 'bunny-stream-2',
+				youtubeId: 'f_b_MtB2tws',
+				title: 'Flop Era',
+				description: 'Maximum flop. Minimum effort.',
+			},
+			{
+				slug: 'bunny-stream-3',
+				youtubeId: 'VjqBt9lbOT0',
+				title: 'Lettuce Dreams',
+				description: 'A meditation on greens.',
+			},
+			{
+				slug: 'bunny-stream-5',
+				youtubeId: 'urANZiTyBD4',
+				title: 'Binky Season',
+				description: 'Pure joy, no explanation needed.',
+			},
+			{
+				slug: 'bunny-stream-8',
+				youtubeId: 'EY89M2qRNlc',
+				title: 'Disapproving Stare',
+				description: 'You have been judged.',
+			},
+		],
+	},
+	{
+		title: 'Bad Bunny',
+		videos: [
+			{
+				slug: 'bunny-stream-7',
+				youtubeId: 'ouuPSxE1hK4',
+				title: 'Cardboard Palace',
+				description: 'One box. Infinite possibilities.',
+			},
+			{
+				slug: 'bunny-stream-9',
+				youtubeId: 'vmbyVU9w47Y',
+				title: 'Pelo Suave',
+				description: 'Softest fur in the game.',
+			},
+			{
+				slug: 'bunny-stream-11',
+				youtubeId: 'H7-7TXXnw8I',
+				title: 'Conejito Malcriado',
+				description: 'Raised in the wild. Answers to no one.',
+			},
+		],
+	},
+];
+
+export const allVideos = shows.flatMap((s) => s.videos);