strip highlights // refactor animation

Author: bryantgillespie

pages/tv/live.vue

@@ -1,51 +1,25 @@
 <script setup>
-import { createDirectus, rest, realtime, readItems, readSingleton, authentication } from '@directus/sdk';
+import { createDirectus, rest, readItems, readSingleton } from '@directus/sdk';
 
 const {
 	public: { tvUrl, baseUrl },
 } = useRuntimeConfig();
 
-const directus = createDirectus(tvUrl).with(rest()).with(realtime()).with(authentication());
-const live = await directus.request(readSingleton('live'));
-const globals = await directus.request(readSingleton('globals', { fields: ['realtime_public_user_token'] }));
+const directus = createDirectus(tvUrl).with(rest());
 
-const shows = await directus.request(
-	readItems('shows', {
-		filter: { id: { _in: live.offline_featured } },
-	}),
-);
-
-const highlights = ref([]);
-const highlightsLoaded = ref(false);
-
-onMounted(async () => {
-	await directus.connect();
-	directus.sendMessage({ type: 'auth', access_token: globals.realtime_public_user_token });
-
-	directus.onWebSocket('message', async (message) => {
-		if (message.type === 'auth' && message.status === 'ok') {
-			await subscribe();
-		}
-	});
-
-	async function subscribe() {
-		const { subscription } = await directus.subscribe('live', {
-			query: { fields: ['highlights'] },
-			uid: 'highlights',
-		});
+const { data: live } = await useAsyncData('live', () => directus.request(readSingleton('live')));
 
-		for await (const item of subscription) {
-			if (item.event === 'init' && item.uid === 'highlights') {
-				highlights.value = item.data[0].highlights.filter((highlight) => highlight.show).reverse();
-				highlightsLoaded.value = true;
-			}
+const { data: globals } = await useAsyncData('globals', () =>
+	directus.request(readSingleton('globals', { fields: ['realtime_public_user_token'] })),
+);
 
-			if (item.event === 'update' && item.uid === 'highlights') {
-				highlights.value = item.data[0].highlights.filter((highlight) => highlight.show).reverse();
-			}
-		}
-	}
-});
+const { data: shows } = await useAsyncData('shows', () =>
+	directus.request(
+		readItems('shows', {
+			filter: { id: { _in: live.value.offline_featured } },
+		}),
+	),
+);
 
 definePageMeta({
 	layout: 'tv',
@@ -104,15 +78,17 @@ const isChatOpen = ref(true);
 							frameborder="0"
 							referrerpolicy="strict-origin-when-cross-origin"
 						></iframe>
-						<div class="chat" :class="{ collapsed: !isChatOpen }">
-							<iframe
-								:src="`https://www.youtube.com/live_chat?v=${live.youtube_id}&embed_domain=localhost`"
-								allow="autoplay"
-								allowfullscreen
-								frameborder="0"
-								referrerpolicy="strict-origin-when-cross-origin"
-							></iframe>
-						</div>
+						<transition name="chat-toggle">
+							<div v-show="isChatOpen" class="chat">
+								<iframe
+									:src="`https://www.youtube.com/live_chat?v=${live.youtube_id}&embed_domain=localhost`"
+									allow="autoplay"
+									allowfullscreen
+									frameborder="0"
+									referrerpolicy="strict-origin-when-cross-origin"
+								></iframe>
+							</div>
+						</transition>
 					</div>
 				</template>
 			</BaseContainer>
@@ -128,7 +104,7 @@ const isChatOpen = ref(true);
 						size="small"
 						outline
 					/>
-					<!-- Vimeo already has chat baked in to events -->
+					<!-- Vimeo already has chat baked in to events so only show for YouTube -->
 					<BaseButton
 						v-if="live.youtube_id"
 						color="primary"
@@ -142,18 +118,6 @@ const isChatOpen = ref(true);
 					<BaseHeading :content="live.title" size="medium" />
 					<BaseText :content="live.description" color="foreground" />
 				</div>
-
-				<div v-if="highlights.length" class="highlights">
-					<h2>Live Highlights</h2>
-					<ol v-if="highlights.length">
-						<li v-for="(highlight, index) in highlights" :key="highlight.label">
-							<a :href="highlight.url" target="_blank">
-								<BaseBadge v-if="index === 0" label="Latest" color="gray" />
-								<span>{{ highlight.label }}</span>
-							</a>
-						</li>
-					</ol>
-				</div>
 			</BaseContainer>
 		</div>
 	</div>
@@ -224,47 +188,9 @@ const isChatOpen = ref(true);
 	gap: 1rem;
 }
 
-.highlights {
-	margin-top: 2rem;
-	ol {
-		padding-left: 0;
-		list-style-type: none;
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		a {
-			display: block;
-			background: rgba(255, 255, 255, 0.12);
-			border-radius: 8px;
-			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-			backdrop-filter: blur(1.8px);
-			-webkit-backdrop-filter: blur(1.8px);
-			border: 1px solid rgba(255, 255, 255, 0.33);
-			color: white;
-			text-decoration: none;
-			padding: 1rem;
-			display: flex;
-			gap: 1rem;
-			.base-badge {
-				display: none;
-			}
-		}
-		li:not(:first-child) {
-			opacity: 0.5;
-		}
-	}
-	@media (width > 60rem) {
-		ol a {
-			font-size: 1.25rem;
-			.base-badge {
-				display: block !important;
-			}
-		}
-	}
-}
-
 .player-container {
 	display: flex;
+	flex-direction: column;
 	gap: 1rem;
 
 	.stream {
@@ -278,17 +204,48 @@ const isChatOpen = ref(true);
 	.chat {
 		flex-basis: 300px;
 		flex-shrink: 0;
-		height: 100%;
-		transition: flex-basis 0.4s ease;
-
-		&.collapsed {
-			flex-basis: 0;
-		}
+		height: 400px;
+		max-height: 65vh;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow: visible;
 
 		iframe {
 			width: 100%;
 			height: 100%;
 			border-radius: 8px;
+			min-height: 380px;
+		}
+	}
+
+	.chat-toggle-enter-active,
+	.chat-toggle-leave-active {
+		transition: all 0.4s ease;
+		overflow: hidden;
+	}
+
+	.chat-toggle-enter-from,
+	.chat-toggle-leave-to {
+		opacity: 0;
+		height: 0;
+		margin-bottom: 0;
+	}
+
+	@media (width > 60rem) {
+		flex-direction: row;
+
+		.chat {
+			height: auto;
+			max-height: none;
+			min-height: 450px;
+		}
+
+		.chat-toggle-enter-from,
+		.chat-toggle-leave-to {
+			width: 0;
+			flex-basis: 0;
+			margin-right: 0;
 		}
 	}
 }