Added video.js player with VR support for trailers.

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>