Skip to content

Commit ea702f2

Browse files
dannycoulombedannycoulombe
authored
Merge pull request #8 from JSON-ms/dev
Fix native video player
2 parents 968ab1e + 24fbd21 commit ea702f2

4 files changed

Lines changed: 93 additions & 85 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@jsonms/demo",
33
"private": true,
44
"type": "module",
5-
"version": "0.1.13",
5+
"version": "0.1.14",
66
"scripts": {
77
"dev": "vite",
88
"build": "run-p type-check \"build-only {@}\" --",

‎public/favicon.ico‎

264 Bytes
Binary file not shown.

‎src/components/Carousels.vue‎

Lines changed: 91 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,88 @@
11
<template>
2-
<v-sheet :color="slideColor" height="100%" style="transition: background-color 300ms ease-in-out">
3-
<v-carousel
4-
v-model="slide"
5-
:continuous="false"
6-
:show-arrows="true"
7-
:hide-delimiters="true"
8-
hide-delimiter-background
9-
height="100%"
10-
>
11-
<template #prev="{ props }">
12-
<v-btn v-bind="props" :icon="false" variant="text" height="33vh">
13-
<v-icon size="64" icon="mdi-chevron-left" />
14-
</v-btn>
15-
</template>
16-
<template #next="{ props }">
17-
<v-btn v-bind="props" :icon="false" variant="text" height="33vh">
18-
<v-icon size="64" icon="mdi-chevron-right" />
19-
</v-btn>
20-
</template>
21-
<v-carousel-item
22-
v-for="(presentation, presentationIdx) in data.home.presentation"
23-
:key="presentation.hash"
2+
<v-fade-transition>
3+
<v-sheet v-if="data.home.presentation.length > 0" class="main-container" :color="slideColor" height="100%" style="transition: background-color 300ms ease-in-out">
4+
<v-carousel
5+
v-model="slide"
6+
:continuous="false"
7+
:show-arrows="true"
8+
:hide-delimiters="true"
9+
hide-delimiter-background
10+
height="100%"
2411
>
25-
<div
26-
v-if="presentation.type === 'media'"
27-
class="media-responsive"
28-
@mousemove="onMouseMoveVideo"
12+
<template #prev="{ props }">
13+
<v-btn v-bind="props" :icon="false" variant="text" height="33vh">
14+
<v-icon size="64" icon="mdi-chevron-left" />
15+
</v-btn>
16+
</template>
17+
<template #next="{ props }">
18+
<v-btn v-bind="props" :icon="false" variant="text" height="33vh">
19+
<v-icon size="64" icon="mdi-chevron-right" />
20+
</v-btn>
21+
</template>
22+
<v-carousel-item
23+
v-for="(presentation, presentationIdx) in data.home.presentation"
24+
:key="presentation.hash"
2925
>
30-
<video
31-
ref="video"
32-
controlsList="nodownload"
33-
disablepictureinpicture
34-
preload="auto"
35-
@play="onVideoPlay"
36-
@pause="onVideoPause"
37-
@end="onVideoEnd"
38-
@loadedmetadata="onLoadedMetadata"
26+
<div
27+
v-if="presentation.type === 'media'"
28+
class="media-responsive"
29+
@mousemove="onMouseMoveVideo"
3930
>
40-
<source
41-
:src="getFilePath(presentation.media)"
42-
:type="presentation.media?.meta.type"
31+
<video
32+
ref="video"
33+
:controls="videoStarted"
34+
:poster="presentation.poster ? getFilePath(presentation.poster) : undefined"
35+
controlsList="nodownload"
36+
disablepictureinpicture
37+
@play="onVideoPlay"
38+
@pause="onVideoPause"
39+
@end="onVideoEnd"
4340
>
44-
Your browser does not support the video tag.
45-
</video>
46-
<div class="video-btn">
47-
<v-fade-transition>
48-
<v-btn v-if="hoveringVideo" :variant="videoPlaying ? 'tonal' : 'elevated'" color="primary" icon size="x-large" @click="toggleVideo">
49-
<v-icon v-if="!videoPlaying" icon="mdi-play" />
50-
<v-icon v-else icon="mdi-pause" />
51-
</v-btn>
52-
</v-fade-transition>
41+
<source
42+
:src="getFilePath(presentation.media)"
43+
:type="presentation.media?.meta.type"
44+
>
45+
Your browser does not support the video tag.
46+
</video>
47+
<div class="video-btn">
48+
<v-fade-transition>
49+
<v-btn v-if="!videoPlaying" :variant="videoPlaying ? 'tonal' : 'elevated'" color="primary" icon size="x-large" @click="toggleVideo">
50+
<v-icon v-if="!videoPlaying" icon="mdi-play" />
51+
<v-icon v-else icon="mdi-pause" />
52+
</v-btn>
53+
</v-fade-transition>
54+
</div>
55+
</div>
56+
<div v-if="presentation.type === 'youtube'" class="youtube-responsive">
57+
<iframe
58+
:src="getYoutubeUrl(presentation)"
59+
title="YouTube video player"
60+
frameborder="0"
61+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share"
62+
referrerpolicy="strict-origin-when-cross-origin"
63+
allowfullscreen
64+
/>
5365
</div>
54-
</div>
55-
<div v-if="presentation.type === 'youtube'" class="youtube-responsive">
56-
<iframe
57-
:src="getYoutubeUrl(presentation)"
58-
title="YouTube video player"
59-
frameborder="0"
60-
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share"
61-
referrerpolicy="strict-origin-when-cross-origin"
62-
allowfullscreen
63-
/>
64-
</div>
65-
<div v-else-if="presentation.type === 'text'" style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
66-
<div class="text-h5 text-sm-h4 mt-4">
67-
{{ presentation.title[locale] || 'Undefined' }}
66+
<div v-else-if="presentation.type === 'text'" style="max-width: 66%; margin: 0 auto" class="d-flex flex-column fill-height justify-center align-center text-center">
67+
<div class="text-h5 text-sm-h4 mt-4">
68+
{{ presentation.title[locale] || 'Undefined' }}
69+
</div>
70+
<p v-if="presentation.body[locale]" class="text-body-1 mt-4">
71+
{{ presentation.body[locale] }} <!-- HANDLE MARKDOWN -->
72+
</p>
73+
<template v-if="presentation.cta[locale]">
74+
<v-btn v-if="presentationIdx < data.home.presentation.length - 1" class="mt-6" size="x-large" variant="outlined" @click="onCtaClick">
75+
{{ presentation.cta[locale] }}
76+
</v-btn>
77+
<h1 v-else class="mt-6">
78+
{{ presentation.cta[locale] }}
79+
</h1>
80+
</template>
6881
</div>
69-
<p v-if="presentation.body[locale]" class="text-body-1 mt-4">
70-
{{ presentation.body[locale] }} <!-- HANDLE MARKDOWN -->
71-
</p>
72-
<template v-if="presentation.cta[locale]">
73-
<v-btn v-if="presentationIdx < data.home.presentation.length - 1" class="mt-6" size="x-large" variant="outlined" @click="onCtaClick">
74-
{{ presentation.cta[locale] }}
75-
</v-btn>
76-
<h1 v-else class="mt-6">
77-
{{ presentation.cta[locale] }}
78-
</h1>
79-
</template>
80-
</div>
81-
</v-carousel-item>
82-
</v-carousel>
83-
</v-sheet>
82+
</v-carousel-item>
83+
</v-carousel>
84+
</v-sheet>
85+
</v-fade-transition>
8486
</template>
8587

8688
<script setup lang="ts">
@@ -91,6 +93,7 @@ const slide = ref(0);
9193
const hoveringVideo = ref(true);
9294
const video = ref<HTMLVideoElement[]>([])
9395
const videoPlaying = ref(false);
96+
const videoStarted = ref(false);
9497
const { data, locale, getFilePath } = useJsonMs();
9598
9699
const onCtaClick = () => {
@@ -126,13 +129,8 @@ function onMouseMoveVideo() {
126129
}, 2000);
127130
}
128131
129-
const onLoadedMetadata = () => {
130-
if (!video.value) return
131-
const player = video.value[video.value.length - 1];
132-
player.currentTime = 0.01
133-
}
134-
135132
function onVideoPlay() {
133+
videoStarted.value = true;
136134
videoPlaying.value = true;
137135
hoveringVideo.value = false;
138136
}
@@ -145,6 +143,7 @@ function onVideoEnd() {
145143
videoPlaying.value = false;
146144
if (video.value.length > 0) {
147145
video.value[video.value.length - 1].currentTime = 0;
146+
video.value[video.value.length - 1].load();
148147
}
149148
}
150149
@@ -185,9 +184,13 @@ watch(() => slide.value, () => {
185184
overflow: hidden;
186185
}
187186
.media-responsive video {
188-
height: 100vh;
189-
min-width: 100%;
187+
width: 100%;
188+
height: 100%;
190189
float: left;
190+
object-fit: cover;
191+
object-position: center;
192+
position: absolute;
193+
inset: 0;
191194
}
192195
.media-responsive {
193196
.video-btn {
@@ -208,4 +211,8 @@ watch(() => slide.value, () => {
208211
top: 50%;
209212
transform: translate(-50%, -50%);
210213
}
214+
.main-container {
215+
max-height: 100vh;
216+
overflow: hidden;
217+
}
211218
</style>

‎src/jms/typings.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface JmsHomePresentationItem {
3131
type: 'text' | 'media' | 'youtube'
3232
title: JmsLocaleSet<string> | null
3333
media: JmsFile | null
34+
poster: JmsFile | null
3435
youtube: string | null
3536
body: JmsLocaleSet<string | null> | null
3637
cta: JmsLocaleSet<string> | null

0 commit comments

Comments
 (0)