feat: use custom video player

assets/scss/main.scss

@@ -16,3 +16,6 @@
 
 // transitions
 @import "transitions/fade";
+
+// vendors
+@import "vendors/plyr";

components/molecules/VRoadizVideo/Background.stories.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import document from '~/assets/stories/fixtures/documents/vimeo-01.json'
+</script>
+
+<template>
+    <NuxtStory>
+        <NuxtStoryVariant title="Background">
+            <VRoadizVideo :document="document" :class="$style.video" background />
+        </NuxtStoryVariant>
+
+        <NuxtStoryVariant title="Background">
+            <VRoadizVideo :document="document" width="500" height="1200" :class="$style.video" background />
+        </NuxtStoryVariant>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.video {
+    max-width: rem(600);
+}
+</style>

components/molecules/VRoadizVideo/BackgroundCover.stories.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import document from '~/assets/stories/fixtures/documents/vimeo-01.json'
+</script>
+
+<template>
+    <NuxtStory>
+        <div :class="$style.wrapper">
+            <VRoadizVideo :document="document" fit="cover" :class="$style.video" background />
+        </div>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.root {
+    position: relative;
+}
+
+.wrapper {
+    --v-player-height: 100%;
+    --v-player-video-object-fit: cover;
+
+    position: absolute;
+    height: 100svh;
+    inset: 0;
+}
+</style>

components/molecules/VRoadizVideo/ThumbnailInteraction.stories.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import document from '~/assets/stories/fixtures/documents/vimeo-01.json'
+</script>
+
+<template>
+    <NuxtStory>
+        <NuxtStoryVariant title="Default">
+            <VRoadizVideo :document="document" :class="$style.video" />
+        </NuxtStoryVariant>
+        <NuxtStoryVariant title="Thumb slot">
+            <VRoadizVideo :document="{ ...document, thumbnail: undefined }" :class="$style.video">
+                <VRoadizImage :document="document.thumbnail" />
+            </VRoadizVideo>
+        </NuxtStoryVariant>
+        <NuxtStoryVariant title="Thumb slot with custom props">
+            <VRoadizVideo :document="document" :class="$style.video">
+                <VRoadizImage :document="document.thumbnail" width="600" height="600" sizes="600px" />
+            </VRoadizVideo>
+        </NuxtStoryVariant>
+    </NuxtStory>
+</template>
+
+<style lang="scss" module>
+.video {
+    width: rem(600);
+}
+</style>

components/molecules/VRoadizVideo/VRoadizVideo.vue

@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import type { RoadizDocument } from '@roadiz/types'
+import type { PropType } from 'vue'
+import { isImage } from '~/utils/roadiz/document'
+import { commonVideoProps, videoAttributes, videoSrc } from '~/utils/video/video-props'
+import { getVideoAttrsValues } from '~/utils/video/video-attributes'
+
+const props = defineProps({
+    ...commonVideoProps,
+    ...videoAttributes,
+    document: { type: Object as PropType<RoadizDocument>, required: true },
+    thumbnail: { type: Object as PropType<RoadizDocument> },
+    hideThumbnail: Boolean,
+})
+
+const hadInteraction = ref(false)
+const onClick = (event: Event) => {
+    if (event.defaultPrevented || !props.playsinline) return
+
+    hadInteraction.value = true
+}
+const onVideoEnded = () => (hadInteraction.value = false)
+
+const displayedThumbnail = computed(() => {
+    const documents = [props.thumbnail, props.document?.thumbnail, props.document]
+    return documents.find(document => isImage(document))
+})
+
+const filteredVideoProps = computed(() => {
+    return Object.keys(props).reduce((acc, key) => {
+        // @ts-expect-error TODO: use pick() here
+        if (commonVideoProps[key] || videoAttributes[key] || videoSrc[key]) acc[key] = props[key]
+        return acc
+    }, {})
+})
+
+const dimension = computed(() => {
+    return {
+        width: props.document.imageWidth,
+        height: props.document.imageHeight,
+    }
+})
+
+const videoRatio = computed(() => {
+    return Number(dimension.value.width) / Number(dimension.value.height)
+})
+
+const embedVideoAttrs = computed(() => {
+    return {
+        embedPlatform: props.document.embedPlatform,
+        embedId: props.document.embedId,
+        src: props.document.relativePath,
+        altSources: props.document.altSources,
+        ...dimension.value,
+        ...getVideoAttrsValues(props, !!props?.background),
+        ...filteredVideoProps.value,
+    }
+})
+</script>
+
+<template>
+    <VVideoPlayer
+        v-if="hideThumbnail || props.background"
+        v-bind="embedVideoAttrs"
+    />
+    <div
+        v-else
+        :class="[$style.root, hadInteraction && $style['root--had-interaction']]"
+    >
+        <VButton
+            :label="$t('watch_the_video')"
+            theme="dark"
+            icon-name="play"
+            filled
+            :class="$style.button"
+            @click="onClick"
+        />
+        <slot>
+            <VRoadizImage
+                v-if="displayedThumbnail"
+                :document="displayedThumbnail"
+                :class="$style.thumbnail"
+                @click="onClick"
+            />
+            <div
+                v-else
+                :class="[$style.thumbnail, $style['thumbnail--placeholder']]"
+                :style="{ aspectRatio: videoRatio || 16 / 9 }"
+            />
+        </slot>
+        <VVideoPlayer
+            v-if="hadInteraction"
+            v-bind="embedVideoAttrs"
+            :autoplay="true"
+            :plyr="{ listener: { ended: onVideoEnded } }"
+        />
+    </div>
+</template>
+
+<style lang="scss" module="">
+.root {
+    --v-player-position: absolute;
+    --v-player-height: 100%;
+    --v-player-width: 100%;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button {
+    --v-button-position: absolute;
+
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    @include v-button-size('m');
+
+    @include media('>=lg') {
+        @include v-button-size('l');
+    }
+
+    .root--had-interaction & {
+        pointer-events: none;
+        visibility: hidden;
+    }
+}
+
+.thumbnail {
+    width: 100%;
+    cursor: pointer;
+
+    .root--had-interaction & {
+        pointer-events: none;
+        visibility: hidden;
+    }
+
+    &--placeholder {
+        aspect-ratio: 16 / 9;
+        background-color: color(grey-50);
+    }
+}
+</style>

components/molecules/VVideo/Mp4.stories.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <NuxtStory>
+        <VVideoPlayer
+            src="/stories/videos/01.mp4"
+            width="640"
+            height="264"
+        />
+    </NuxtStory>
+</template>

components/molecules/VVideo/Mp4Background.stories.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <NuxtStory>
+        <VVideoPlayer
+            src="/stories/videos/01.mp4"
+            width="640"
+            height="264"
+            background
+        />
+    </NuxtStory>
+</template>

components/molecules/VVideo/Mp4BackgroundCover.stories.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <NuxtStory>
+        <div :class="$style.root">
+            <VVideoPlayer
+                src="/stories/videos/01.mp4"
+                width="640"
+                height="264"
+                background
+                fit="cover"
+                :class="$style.video"
+            />
+        </div>
+    </NuxtStory>
+</template>
+
+<style module lang="scss">
+.root {
+    --v-player-width: 100%;
+    --v-player-height: 100%;
+
+    --v-player-height: 100%;
+    --v-player-video-width: 100%;
+    --v-player-video-height: 100%;
+
+    width: 300px;
+    height: 300px;
+    border: 1px solid #000;
+}
+
+.video {
+
+}
+</style>