Finish dir-tv embed

Author: rijkvanzanten

app/components/TvLogo.vue

@@ -0,0 +1,30 @@
+<template>
+	<svg
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		viewBox="0 0 104 36"
+		class="fill-none h-5 inline-block"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<g clip-path="url(#clip0_28_7)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M47.4244 22.7181C47.1509 22.6497 46.923 22.5813 46.7179 22.4902C46.5722 22.4254 46.4495 22.3492 46.3416 22.2614C46.2589 22.1941 46.2239 22.0866 46.2339 21.9805C46.3411 20.8425 46.2218 19.837 46.3305 18.7072C46.7863 14.1038 49.6805 15.5623 52.2785 14.8102C53.756 14.394 55.2335 13.5788 55.7913 11.9827C55.8943 11.6881 55.8062 11.3661 55.5998 11.132C53.9065 9.21229 52.0335 7.51504 49.9995 6.05916C43.1565 1.18709 34.269 -0.844273 26.0976 0.320581C25.7527 0.369746 25.5719 0.751614 25.762 1.04362C26.7654 2.58571 28.0723 3.85715 29.5676 4.8089C29.8821 5.00908 29.7534 5.42922 29.3912 5.34092C28.6501 5.16025 27.7347 4.82903 26.8688 4.22184C26.769 4.15185 26.6408 4.1342 26.5275 4.17935C26.1308 4.33755 25.5739 4.55953 25.0985 4.76318C24.7807 4.89929 24.716 5.30812 24.9785 5.53308C29.0527 9.02474 34.9338 9.5725 39.5799 6.8194C39.8995 6.63007 40.4184 7.03418 40.3198 7.39223C40.182 7.89243 40.0247 8.55654 39.8583 9.43196C38.6961 15.3116 35.3461 14.8558 31.1984 13.3745C22.9487 10.3845 18.2521 12.9124 14.0863 7.92748C13.7607 7.53786 13.1918 7.40033 12.8155 7.74119C11.993 8.48609 11.5086 9.55011 11.5086 10.6854C11.5086 12.0548 12.2097 13.2294 13.2519 13.9392C13.398 14.0387 13.5932 13.9967 13.7033 13.8584C13.9138 13.5942 14.0941 13.4042 14.2995 13.2713C14.6014 13.0761 14.7618 13.5222 14.501 13.7697C13.6913 14.5381 13.4342 15.4722 12.8759 17.2487C11.9643 20.1429 12.3518 23.1055 8.09017 23.8803C5.83404 23.9943 5.87962 25.5211 5.05921 27.8001C4.11558 30.5261 2.88254 31.7471 0.614391 34.1085C0.263635 34.4737 0.23175 35.0601 0.624886 35.3792C1.52536 36.1101 2.45298 36.1416 3.39559 35.7535C5.78846 34.7508 7.63439 31.6515 9.36637 29.646C11.3035 27.4127 15.9525 28.3698 19.462 26.182C21.2873 25.0628 22.4099 23.6442 22.1615 21.5529C22.114 21.1529 22.5687 20.9208 22.7205 21.2938C22.9455 21.8464 23.0965 22.4288 23.1665 23.0282C23.19 23.2296 23.3703 23.3787 23.5729 23.3689C27.3404 23.1861 32.195 27.296 36.7433 28.4565C37.0528 28.5355 37.2745 28.1779 37.1018 27.9092C36.8327 27.4904 36.6026 27.0572 36.4172 26.615C36.251 26.2162 36.1178 25.827 36.0152 25.4487C35.9087 25.0554 36.4855 24.9408 36.6943 25.2907C37.9093 27.3267 40.2097 29.189 43.3679 29.4181C44.4846 29.5093 45.7152 29.3725 46.9914 28.9851C48.5182 28.5293 49.9312 27.9368 51.6176 28.2559C52.871 28.4837 54.0332 29.1218 54.7625 30.1929C55.7776 31.6732 57.9112 32.0743 59.0692 30.5583C59.2472 30.3254 59.2616 30.0093 59.1454 29.7402C56.5979 23.8383 50.1847 23.4304 47.4244 22.7181Z"
+				class="fill-slate-800 dark:fill-white"
+			/>
+			<path
+				d="M81.6533 16.4131L80.584 22.3604C80.3398 23.7373 80.7988 24.4258 81.9609 24.4258C82.5176 24.4258 83.0449 24.2354 83.543 23.8545L83.8506 24.0449L84.5977 26.8281L84.3926 27.1943C83.2891 27.9756 82.0391 28.3662 80.6426 28.3662C79.0215 28.3662 77.752 27.9023 76.834 26.9746C75.916 26.0371 75.6133 24.6504 75.9258 22.8145L77.0977 16.4131H74.5195L75.1201 13H77.7275L78.5332 8.47363L82.7959 8.10742L83.1328 8.32715L82.2832 13H86.5752L85.9746 16.4131H81.6533Z"
+				class="fill-slate-800 dark:fill-white"
+			/>
+			<path
+				d="M103.165 13L103.311 13.3369L94.2879 28H90.9188L87.1102 13.3369L87.3885 13H91.7684L93.4822 22.5654L98.8436 13H103.165Z"
+				class="fill-slate-800 dark:fill-white"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_28_7">
+				<rect width="104" height="36" class="fill-slate-800 dark:fill-white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>

app/components/content/VideoEmbed.vue

@@ -1,6 +1,55 @@
 <script setup lang="ts">
+const props = defineProps<{ videoId: string }>();
+
+interface Show {
+	data: {
+		vimeo_id: string;
+		slug: string;
+		season: {
+			show: {
+				slug: string;
+				title: string;
+			};
+		};
+	};
+}
+
+const show = await $fetch<Show>(
+	`https://tv.directus.app/items/episodes/${props.videoId}?fields=vimeo_id,slug,season.show.slug,season.show.title`
+);
 </script>
 
 <template>
-	<span>TODO: VIDEO</span>
+	<UCard class="w-full">
+		<ScriptVimeoPlayer
+			:id="show.data.vimeo_id"
+			:root-attrs="{ style: { width: '100%' } }"
+		>
+			<template #awaitingLoad>
+				<div class="absolute inset-0 flex items-center justify-center">
+					<UButton icon="material-symbols:play-circle-outline" size="xl" />
+				</div>
+			</template>
+
+			<template #loading>
+				<div class="absolute inset-0 flex items-center justify-center">
+					<UButton loading size="xl" />
+				</div>
+			</template>
+
+			<template #error>
+				<UAlert
+					color="red"
+					title="Video player failed to load"
+					description="Please refresh the page to try again."
+				/>
+			</template>
+		</ScriptVimeoPlayer>
+
+		<template #footer>
+			<NuxtLink :href="`https://directus.io/tv/${show.data.season.show.slug}`">
+				Watch {{ show.data.season.show.title }} on <TvLogo />
+			</NuxtLink>
+		</template>
+	</UCard>
 </template>