Added trailers. Improved scene page scaling.

2024-03-24 04:22:37 +01:00
parent 8a32febb8a
commit 08e4146d91
23 changed files with 3204 additions and 413 deletions
--- a/components/video/player.vue
+++ b/components/video/player.vue
@@ -0,0 +1,148 @@
+<template>
+	<video
+		ref="player"
+		:poster="poster"
+		crossorigin="anonymous"
+		class="player video-js vjs-big-play-centered"
+		@playing="emit('play')"
+		@pause="emit('pause')"
+	/>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import videoJs from 'video.js';
+// import 'videojs-vr/dist/videojs-vr.min';
+
+import getPath from '#/src/get-path.js';
+
+const props = defineProps({
+	video: {
+		type: Object,
+		default: null,
+	},
+	poster: {
+		type: String,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['play', 'pause']);
+
+const player = ref(null);
+
+function updatePlayer() {
+	player.value.src(getPath(props.video));
+	player.value.poster(props.poster);
+}
+
+function initPlayer() {
+	player.value = videoJs(player.value, {
+		controls: true,
+		inactivityTimeout: 1000,
+		controlBar: {
+			pictureInPictureToggle: false,
+			volumePanel: {
+				inline: false,
+			},
+		},
+	}, () => {
+		player.value.src(getPath(props.video));
+
+		if (props.video.isVr) {
+			player.value.vr({ projection: '180' });
+		}
+	});
+}
+
+onMounted(() => {
+	if (typeof window !== 'undefined') {
+		window.HELP_IMPROVE_VIDEOJS = false;
+	}
+
+	initPlayer();
+});
+
+watch(() => props.video, () => updatePlayer());
+watch(() => props.poster, () => updatePlayer());
+</script>
+
+<style>
+.player.video-js {
+	.vjs-poster {
+		background-size: cover;
+	}
+
+	.vjs-control-bar {
+		background-color: var(--shadow);
+	}
+
+	.vjs-slider {
+		background-color: var(--shadow-weak-10);
+	}
+
+	.vjs-play-progress {
+		background-color: var(--primary);
+
+		.vjs-time-tooltip {
+			color: var(--shadow-strong-10);
+		}
+	}
+
+	.vjs-load-progress {
+		background-color: var(--highlight-weak-10);
+
+		div {
+			background-color: var(--shadow-weak-10);
+		}
+	}
+
+	.vjs-mouse-display .vjs-time-tooltip {
+		background-color: var(--shadow-strong-10);
+	}
+
+	.vjs-remaining-time {
+		line-height: 2rem;
+		font-size: .75rem;
+		font-weight: bold;
+	}
+
+	.vjs-big-play-button {
+		background-color: var(--shadow);
+		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(--highlight-strong-10);
+	}
+
+	.vjs-error-display {
+		overflow: hidden;
+	}
+
+	.vjs-modal-dialog-content {
+		white-space: normal;
+	}
+
+	&:hover {
+		.vjs-big-play-button {
+			background-color: var(--primary);
+		}
+	}
+}
+</style>