Added video.js player with VR support for trailers.

assets/components/releases/banner.vue

@@ -8,29 +8,26 @@
 				v-if="release.trailer || release.teaser"
 				class="trailer-container"
 			>
-				<video
+				<Player
 					v-if="release.trailer"
-					:src="`/media/${release.trailer.path}`"
+					:video="release.trailer"
 					:poster="poster"
-					:alt="release.title"
-					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>
 
-				<video
+
+				<Player
 					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-					:src="`/media/${release.teaser.path}`"
+					:video="release.teaser"
 					:poster="poster"
 					:alt="release.title"
 					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>
 
 				<img
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
@@ -110,6 +107,8 @@
 </template>
 
 <script>
+import Player from '../video/player.vue';
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -151,6 +150,9 @@ function photos() {
 }
 
 export default {
+	components: {
+		Player,
+	},
 	props: {
 		release: {
 			type: Object,
@@ -167,6 +169,7 @@ export default {
 	},
 	data() {
 		return {
+			player: null,
 			playing: false,
 			paused: false,
 		};

assets/components/video/player.vue

@@ -0,0 +1,122 @@
+<template>
+	<video
+		ref="player"
+		:poster="poster"
+		class="player video-js vjs-big-play-centered"
+		@playing="$emit('play')"
+		@pause="$emit('pause')"
+	>
+		<source
+			:src="`/media/${video.path}`"
+			type="video/mp4"
+		>
+	</video>
+</template>
+
+<script>
+import videoJs from 'video.js';
+import 'videojs-vr/dist/videojs-vr.min';
+
+function mounted() {
+	this.player = videoJs(this.$refs.player, {
+		controls: true,
+		inactivityTimeout: 1000,
+		controlBar: {
+			pictureInPictureToggle: false,
+			volumePanel: {
+				inline: false,
+			},
+		},
+	}, () => {
+		if (this.video.isVr) {
+			this.player.vr({ projection: '180' });
+		}
+	});
+}
+
+export default {
+	props: {
+		video: {
+			type: Object,
+			default: null,
+		},
+		poster: {
+			type: String,
+			default: null,
+		},
+	},
+	mounted,
+};
+</script>
+
+<style lang="scss">
+.player.video-js {
+	.vjs-poster {
+		background-size: cover;
+	}
+
+	.vjs-control-bar {
+		background-color: var(--darken);
+	}
+
+	.vjs-slider {
+		background-color: var(--darken-weak);
+	}
+
+	.vjs-play-progress {
+		background-color: var(--primary);
+
+		.vjs-time-tooltip {
+			color: var(--darken-strong);
+		}
+	}
+
+	.vjs-load-progress {
+		background-color: var(--lighten-weak);
+
+		div {
+			background-color: var(--darken-weak);
+		}
+	}
+
+	.vjs-mouse-display .vjs-time-tooltip {
+		background-color: var(--darken-strong);
+	}
+
+	.vjs-remaining-time {
+		line-height: 2rem;
+		font-size: .75rem;
+		font-weight: bold;
+	}
+
+	.vjs-big-play-button {
+		background-color: var(--darken);
+		width: 4rem;
+		height: 4rem;
+		margin: -2rem 0 0 -2rem;
+		border: none;
+		border-radius: 50%;
+
+		.vjs-icon-placeholder {
+			font-size: 2.5rem;
+			line-height: 4rem;
+		}
+
+		&:hover {
+			background-color: var(--primary);
+		}
+	}
+
+	.vjs-control:focus::before,
+	.vjs-control:hover::before,
+	.vjs-control:focus {
+		text-shadow: 0 0 .5rem var(--lighten-strong);
+	}
+
+	&:hover {
+		.vjs-big-play-button {
+			background-color: var(--primary);
+		}
+	}
+}
+</style>