@total_onion/onion-library 3.0.49 → 3.2.0

package/onion-videocontroller/upload-video.mjs

@@ -0,0 +1,251 @@
+import {
+	hideVideoElement,
+	revealVideoElement,
+	generateModal,
+	resizeDebouncer,
+	stopVideos,
+	dataLayerPush,
+} from "./vcUtils.mjs";
+
+function uploadedVideoInit(videoObject) {
+	const {
+		videocontainer,
+		globalSettings,
+		fullscreen,
+		autoplay,
+		controls,
+		muted,
+		loop,
+	} = videoObject;
+	globalSettings.enableDebugLogs && console.log("running uploaded init");
+
+	const videoPlayer = videocontainer.querySelector(
+		".cblvc-video-container__video-player",
+	);
+	videoObject.videoplayer = videoPlayer;
+	videoObject.elementType = "video";
+	if (loop) {
+		videoPlayer.setAttribute("loop", true);
+	}
+	if (controls) {
+		videoPlayer.setAttribute("controls", true);
+	}
+	if (muted) {
+		videoPlayer.setAttribute("muted", true);
+	}
+	if (autoplay) {
+		videoPlayer.setAttribute("autoplay", true);
+	}
+
+	if (fullscreen) {
+		videoPlayer.removeAttribute("playsinline");
+	}
+
+	videoPlayer.addEventListener("play", () => {
+		videoObject.instance.setVideoReadyState(videoObject, true);
+		if (!autoplay) {
+			stopVideos(videoObject);
+		}
+		revealVideoElement(videoObject, false);
+		if (videoObject.dataLayerPush) {
+			if (!videoPlayer.duration) {
+				videoPlayer.addEventListener("durationchange", () => {
+					dataLayerPush({ eventname: "play", videoObject });
+				});
+			} else {
+				dataLayerPush({ eventname: "play", videoObject });
+			}
+		}
+	});
+	videoPlayer.addEventListener("pause", (e) => {
+		const target = e.target;
+		if (videoObject.dataLayerPush) {
+			dataLayerPush({ eventname: "pause", videoObject });
+		}
+	});
+
+	videoPlayer.addEventListener("ended", () => {
+		if (document.fullscreenElement !== null) {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			}
+		}
+		hideVideoElement(videoObject);
+		if (videoObject.dataLayerPush) {
+			dataLayerPush({ eventname: "ended", videoObject });
+		}
+	});
+
+	let quarterFired = false;
+	let halfwayFired = false;
+	let threeQuartersFired = false;
+	let completedFired = false;
+	videoPlayer.addEventListener("timeupdate", () => {
+		if (
+			!quarterFired &&
+			videoPlayer.currentTime >= videoPlayer.duration * 0.25
+		) {
+			quarterFired = true;
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "progress", videoObject });
+			}
+		}
+		if (!halfwayFired && videoPlayer.currentTime >= videoPlayer.duration / 2) {
+			halfwayFired = true;
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "progress", videoObject });
+			}
+		}
+		if (
+			!threeQuartersFired &&
+			videoPlayer.currentTime >= videoPlayer.duration * 0.75
+		) {
+			threeQuartersFired = true;
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "progress", videoObject });
+			}
+		}
+		if (quarterFired && !completedFired && videoPlayer.currentTime < 0.2) {
+			completedFired = true;
+			if (videoObject.dataLayerPush) {
+				videoObject.completed = true;
+				dataLayerPush({ eventname: "progress", videoObject });
+			}
+		}
+	});
+
+	if (videoObject.autoplay) {
+		triggerUploadedVideo(videoObject);
+	}
+}
+function triggerUploadedVideo(videoObject) {
+	const { videocontainer, modal, sources, globalSettings, isAdmin } =
+		videoObject;
+	globalSettings.enableDebugLogs && console.log("triggering upload video");
+
+	if (modal && !isAdmin) {
+		console.log("modal video");
+
+		globalSettings.enableDebugLogs && console.log("triggering modal");
+		generateModal(videoObject);
+		const modalVideoElement = videoObject.modalcontainer.querySelector("video");
+		modalVideoElement.addEventListener("play", () => {
+			revealVideoElement(videoObject, true);
+		});
+		modalVideoElement.addEventListener("ended", () => {
+			hideVideoElement(videoObject, true);
+		});
+		let currentSource = setSrc(modalVideoElement, sources, false, videoObject);
+		resizeDebouncer(() => {
+			currentSource = setSrc(
+				modalVideoElement,
+				sources,
+				currentSource,
+				videoObject,
+			);
+		});
+		togglePlay(videoObject);
+	} else {
+		const videoPlayer = videocontainer.querySelector(
+			".cblvc-video-container__video-player",
+		);
+		globalSettings.enableDebugLogs && console.log("triggering inline video");
+		let currentSource = setSrc(videoPlayer, sources, false, videoObject);
+		resizeDebouncer(() => {
+			currentSource = setSrc(videoPlayer, sources, currentSource, videoObject);
+		});
+		togglePlay(videoObject);
+	}
+}
+
+function togglePlay(videoObject) {
+	const {
+		videocontainer,
+		fullscreen,
+		isAdmin,
+		modalcontainer,
+		modal,
+		muted,
+		autoplay,
+		globalSettings,
+	} = videoObject;
+	globalSettings.enableDebugLogs && console.log("running togglePlay");
+	let videoPlayer;
+	if (modal && !isAdmin) {
+		videoPlayer = modalcontainer.querySelector("video");
+	} else {
+		videoPlayer = videocontainer.querySelector(
+			".cblvc-video-container__video-player",
+		);
+	}
+	if (videoPlayer.paused) {
+		if (autoplay) {
+			videoPlayer.muted = true;
+		}
+		if (fullscreen && !isAdmin) {
+			document.addEventListener("fullscreenchange", () => {
+				if (
+					document.fullscreenElement !== null &&
+					document.fullscreenElement === videoPlayer
+				) {
+					setTimeout(() => {
+						videoPlayer.play();
+					}, 500);
+				}
+			});
+			if (videoPlayer.requestFullscreen) {
+				videoPlayer.requestFullscreen();
+			} else {
+				videoPlayer.play();
+			}
+		} else {
+			videoPlayer.play();
+		}
+	} else {
+		videoPlayer.pause();
+	}
+}
+
+/**
+ * Set Source function :
+ * this function is important for mobile/desktop responsiveness as it checks whether to
+ * switch to the mobile or desktop video src when the page loads or
+ * the screen size changes.
+ *
+ * @param {HTMLElement} player - this is the selected video element
+ * @param {Object} sources - the mobile and desktop video source urls
+ * @param {string} source - this is the currently playing video source url
+ * @param {Object} videoObject - the current video and its various properties
+ */
+function setSrc(player, sources, source = false, videoObject) {
+	const globalSettings = videoObject.instance.getGlobalSettings();
+	let newVideoUrl;
+	if (window.innerWidth >= globalSettings.srcBreakpoint) {
+		newVideoUrl = sources.desktop;
+		if (source && source !== newVideoUrl) {
+			player.setAttribute("src", newVideoUrl);
+		} else if (player.paused) {
+			player.setAttribute("src", newVideoUrl);
+			player.pause();
+		}
+	} else {
+		newVideoUrl = sources.mobile;
+		if (!newVideoUrl) {
+			newVideoUrl = sources.desktop;
+		}
+		if (source && source !== newVideoUrl) {
+			player.setAttribute("src", newVideoUrl);
+		} else if (player.paused) {
+			player.setAttribute("src", newVideoUrl);
+			player.pause();
+		}
+	}
+	return newVideoUrl;
+}
+
+const api = {
+	triggerUploadedVideo,
+	uploadedVideoInit,
+};
+
+export default api;

package/onion-videocontroller/vc-styles.scss

@@ -0,0 +1,282 @@
+@use './core-mixins-v3';
+@use './core-functions-v3';
+@use './breakpoints';
+
+@mixin basic() {
+	&__video-container {
+		display: grid;
+		grid-template: 'video' / 1fr;
+		grid-area: main;
+		opacity: 0;
+		pointer-events: none;
+		height: 100%;
+		width: 100%;
+		background-color: black;
+		transition: opacity 0.5s, background-color 1s;
+		z-index: -1;
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			object-fit: cover;
+			grid-area: main;
+		}
+
+		&.video-playing {
+			pointer-events: all;
+			opacity: 1;
+			z-index: 10;
+		}
+
+		&.lock-video-aspect-to-image {
+			iframe,
+			video {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		&.set-video-to-cover {
+			iframe,
+			video {
+				object-fit: cover;
+				object-position: center;
+			}
+		}
+
+		.loading-wrapper {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			width: core-functions-v3.fluidSize(84);
+			height: core-functions-v3.fluidSize(84);
+
+			--spinner-bg-colour: #ffffff54;
+			--spinner-colour: white;
+
+			&:before {
+				content: '';
+				top: 0;
+				left: 0;
+				width: core-functions-v3.fluidSize(84);
+				height: core-functions-v3.fluidSize(84);
+				position: absolute;
+				border-radius: 50%;
+				border-right: solid core-functions-v3.fluidSize(5)
+					var(--spinner-bg-colour);
+				border-left: solid core-functions-v3.fluidSize(5)
+					var(--spinner-bg-colour);
+				border-top: solid core-functions-v3.fluidSize(5)
+					var(--spinner-bg-colour);
+				border-bottom: solid core-functions-v3.fluidSize(5)
+					var(--spinner-colour);
+				animation: rotate 1s linear infinite;
+			}
+		}
+	}
+
+	&__video-play-button {
+		grid-area: main;
+		place-self: center;
+		@include playButtonDefault();
+		transform: scale(1);
+		transition: transform 0.3s 0.5s;
+
+		&.video-playing {
+			transform: scale(0);
+			transition: transform 0.5s;
+			opacity: 0;
+			pointer-events: none;
+			max-height: 0px;
+		}
+	}
+
+	&__video-inner-container {
+		grid-area: video;
+		display: flex;
+		width: 100%;
+		position: relative;
+
+		iframe {
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&__video-player {
+		height: auto;
+		object-fit: contain;
+		width: 100%;
+	}
+}
+
+@mixin modal() {
+	&.modal-video-playing {
+		overflow-y: hidden;
+	}
+
+	.cblvc-modal-container {
+		position: fixed;
+		z-index: 10;
+		inset: 0;
+		display: grid;
+		pointer-events: none;
+		grid-template: 'main' / 1fr;
+		place-items: center;
+		background-color: rgba(0, 0, 0, 0.601);
+		padding: var(--global-block-spacing) var(--global-inline-spacing);
+
+		@include core-mixins-v3.device(breakpoints.$desktop) {
+			padding: core-functions-v3.fluidSize(100);
+		}
+
+		&.video-playing {
+			z-index: 999;
+			pointer-events: all;
+
+			.cblvc-modal-container__modal-close {
+				opacity: 1;
+				transition: opacity 1s 1s;
+			}
+
+			.cblvc-modal-container__modal-inner {
+				opacity: 1;
+				transition: opacity 1s 1s;
+			}
+		}
+
+		&__modal-inner {
+			grid-area: main;
+			display: grid;
+			grid-template: 'modal' / 1fr;
+			background: var(--black);
+			opacity: 0;
+			transition: opacity 1s;
+			width: 100%;
+			max-width: core-functions-v3.fluidSize(1000);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: auto;
+				max-width: core-functions-v3.fluidSize(1000);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				max-width: core-functions-v3.fluidSize(1000);
+			}
+		}
+
+		&__video-player {
+			grid-area: modal;
+			height: auto;
+			width: 100%;
+			max-height: 90vh;
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				max-height: 80vh;
+				min-height: 50vh;
+			}
+		}
+
+		&__modal-close {
+			grid-area: modal;
+			align-self: flex-start;
+			justify-self: flex-end;
+			z-index: 99;
+			transform: translate(50%, -50%);
+			@include closeButtonDefault();
+		}
+	}
+}
+
+@mixin playButtonDefault() {
+	display: grid;
+	place-items: center;
+	background-color: white;
+	opacity: 1;
+	border-radius: 50px;
+	width: core-functions-v3.fluidSize(84);
+	height: core-functions-v3.fluidSize(84);
+	border: none;
+	z-index: 100;
+	padding: 0;
+	position: relative;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&::before {
+		position: absolute;
+		content: '';
+		height: core-functions-v3.fluidSize(34);
+		width: core-functions-v3.fluidSize(25);
+		transform: translateX(18%);
+		clip-path: polygon(100% 50%, 0 0, 0 100%);
+		background-color: black;
+
+		@supports not (aspect-ratio: 1/1) {
+			top: 50%;
+			left: 50%;
+			transform: translate(-25%, -50%);
+		}
+	}
+}
+
+@mixin closeButtonDefault() {
+	transition: opacity 1s;
+	display: grid;
+	place-items: center;
+	background-color: white;
+	opacity: 1;
+	border-radius: 50px;
+	width: core-functions-v3.fluidSize(35);
+	height: core-functions-v3.fluidSize(35);
+	border: none;
+	z-index: 100;
+	padding: 0;
+	position: relative;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&::before {
+		position: absolute;
+		content: '';
+		height: core-functions-v3.fluidSize(20);
+		width: core-functions-v3.fluidSize(20);
+		clip-path: polygon(
+			15% 0,
+			0 15%,
+			35% 50%,
+			0 85%,
+			15% 100%,
+			50% 65%,
+			85% 100%,
+			100% 85%,
+			65% 50%,
+			100% 15%,
+			85% 0,
+			50% 35%
+		);
+		background-color: black;
+
+		@supports not (aspect-ratio: 1/1) {
+			top: 50%;
+			left: 50%;
+			transform: translate(-25%, -50%);
+		}
+	}
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}