Add support for local videos

components/Base/DirectusVideo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const {
+	public: { directusUrl, directusToken },
+} = useRuntimeConfig();
+
+export interface DirectusImageProps {
+	/**
+	 * Directus File ID
+	 */
+	uuid: string;
+}
+
+const props = defineProps<DirectusImageProps>();
+
+const src = computed(() => {
+	const url = new URL(`/assets/${props.uuid}`, directusUrl);
+	url.searchParams.set('token', directusToken);
+	return url.toString();
+});
+</script>
+
+<template>
+	<video :src="src" />
+</template>

components/Base/Video.vue

@@ -3,20 +3,33 @@ export interface BaseVideoProps {
 	/**
 	 * The url of the video.
 	 */
-	url: string;
+	url?: string;
+
+	/**
+	 * UUID of a Directus File
+	 */
+	uuid?: string;
 
 	/**
 	 * The title of the video.
 	 */
 	title?: string;
+
+	autoplay?: boolean;
+	controls?: boolean;
+	loop?: boolean;
 }
 
-const props = defineProps<BaseVideoProps>();
+const props = withDefaults(defineProps<BaseVideoProps>(), {
+	controls: true,
+});
 
 const iframeSrc = computed(() => {
 	const { url } = props;
 
-	if (props.url.includes('youtube.com')) {
+	if (!url) return null;
+
+	if (url.includes('youtube.com')) {
 		return `https://www.youtube.com/embed/${url.split('v=')[1]}`;
 	}
 
@@ -37,8 +50,17 @@ const iframeSrc = computed(() => {
 </script>
 
 <template>
+	<BaseDirectusVideo
+		v-if="uuid"
+		:uuid="uuid"
+		class="base-video"
+		:autoplay="autoplay"
+		:muted="autoplay"
+		:controls="controls"
+		:loop="loop"
+	/>
 	<iframe
-		v-if="iframeSrc"
+		v-else-if="iframeSrc"
 		class="base-video"
 		loading="lazy"
 		:src="iframeSrc"

components/Block/Media.vue

@@ -8,15 +8,29 @@ const props = defineProps<BlockProps>();
 const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_media', props.uuid, {
-			fields: ['type', 'embed', 'aspect_ratio', { video: ['url'], image: ['id', 'description'] }],
+			fields: [
+				'type',
+				'embed',
+				'aspect_ratio',
+				'frame',
+				{ video: ['url', 'autoplay', 'controls', 'loop', { file: ['id'] }], image: ['id', 'description'] },
+			],
 		})
 	)
 );
 </script>
 
 <template>
-	<BaseMedia v-if="block" class="block-media" :aspect="block.aspect_ratio ?? undefined">
-		<BaseVideo v-if="block.type === 'video' && block.video?.url" class="media" :url="block.video.url" />
+	<BaseMedia v-if="block" class="block-media" :aspect="block.aspect_ratio ?? undefined" :frame="block.frame">
+		<BaseVideo
+			v-if="block.type === 'video' && block.video"
+			class="media"
+			:url="block.video.url ?? undefined"
+			:uuid="block.video.file?.id ?? undefined"
+			:autoplay="block.video.autoplay"
+			:loop="block.video.loop"
+			:controls="block.video.controls"
+		/>
 
 		<BaseDirectusImage
 			v-else-if="block.type === 'image' && block.image"

types/schema/blocks/block-media.ts

@@ -8,4 +8,5 @@ export interface BlockMedia {
 	video: string | Video | null;
 	embed: string | null;
 	aspect_ratio: 'auto' | '1-1' | '16-9' | '4-3' | null;
+	frame: boolean;
 }

types/schema/content/video.ts

@@ -1,8 +1,13 @@
+import type { File } from '../system';
+
 export interface Video {
 	id: string;
 	transcript: string | null;
 	url: string | null;
-	thumbnail: string | File | null;
 	type: string | null;
+	thumbnail: string | File | null;
 	file: string | File | null;
+	autoplay: boolean;
+	controls: boolean;
+	loop: boolean;
 }