@total_onion/onion-library 3.0.49 → 3.1.0

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);
+	}
+}

package/onion-videocontroller/vcUtils.mjs

@@ -0,0 +1,281 @@
+const enableDebugLogs = false;
+
+export function dataLayerPush(eventData = { eventname: "", videoObject }) {
+	const videoType = eventData.videoObject.videotype;
+	let currentTime;
+	let duration;
+	let title;
+	let src;
+	let provider = "MediaLibrary";
+
+	if (videoType == "upload") {
+		currentTime = eventData.videoObject?.videoplayer?.currentTime;
+		duration = eventData.videoObject?.videoplayer?.duration;
+		src = eventData.videoObject?.videoplayer?.src;
+		title = src?.split("/").pop();
+	}
+	if (videoType == "youtube") {
+		provider = "YouTube";
+		currentTime = eventData.videoObject?.youtubeplayer?.getCurrentTime();
+		duration = eventData.videoObject?.youtubeplayer?.getDuration();
+		title = eventData.videoObject.youtubeplayer?.videoTitle;
+		src = eventData.videoObject.youtubeplayer.getVideoUrl();
+	}
+	if (videoType == "vimeo") {
+		provider = "Vimeo";
+		src = eventData.videoObject?.vimeoplayer?.src;
+	}
+	if (src.includes("imagekit")) {
+		provider = "ImageKit";
+	}
+
+	const timeDiv = Math.floor((currentTime / duration) * 100);
+	let percent;
+	if (timeDiv < 25 || !duration) {
+		percent = 0;
+		if (eventData.videoObject.completed == true) {
+			percent = 100;
+		}
+	}
+	if (timeDiv >= 25 && timeDiv < 50) {
+		percent = 25;
+	}
+	if (timeDiv >= 50 && timeDiv < 75) {
+		percent = 50;
+	}
+	if (timeDiv >= 75 && timeDiv < 100) {
+		percent = 75;
+	}
+	if (currentTime == duration) {
+		percent = 100;
+	}
+
+	let status = eventData.eventname;
+	if (eventData.eventname == "play") {
+		status = "start";
+	}
+	if (eventData.eventname == "ended") {
+		status = "complete";
+	}
+	const autoplay = eventData.videoObject.autoplay;
+	const loop = eventData.videoObject.loop;
+	if (eventData.eventname == "pause" && currentTime == duration) {
+		return;
+	}
+
+	const dataObj = {
+		event: "gcms_video",
+		video_title: title,
+		video_status: status,
+		video_provider: provider,
+		video_url: src,
+		video_percent: percent,
+		video_visible: true,
+		video_current_time: currentTime,
+		video_duration: duration,
+		video_autoplay: autoplay ? true : false,
+		video_loop: loop ? true : false,
+	};
+
+	window.dataLayer = window.dataLayer || [];
+	window.dataLayer.push(dataObj);
+	enableDebugLogs && console.log("🚀 ~ dataLayerPush ~ dataObj:", dataObj);
+}
+export function generateModal(videoObject) {
+	const { videocontainer, elementType } = videoObject;
+	let videoElementType = "";
+	switch (videoObject.videotype) {
+		case "upload":
+			videoElementType = "video";
+			break;
+		case "youtube":
+			videoElementType = "iframe";
+			break;
+		case "vimeo":
+			videoElementType = "iframe";
+			break;
+
+		default:
+			break;
+	}
+	let modalVideoElement = document.createElement(videoElementType);
+	if (videocontainer) {
+		let videoPlayer = videocontainer.querySelector(elementType);
+		modalVideoElement = videoPlayer.cloneNode();
+	}
+	const modalContainer = document.createElement("div");
+	const modalInner = document.createElement("div");
+	const modalClose = document.createElement("button");
+	modalClose.addEventListener("click", () => {
+		stopVideos(videoObject, true);
+	});
+	modalVideoElement.classList.add("cblvc-modal-container__video-player");
+	modalContainer.classList.add("cblvc-modal-container");
+	modalInner.classList.add("cblvc-modal-container__modal-inner");
+	modalClose.classList.add("cblvc-modal-container__modal-close");
+	modalInner.appendChild(modalVideoElement);
+	modalInner.appendChild(modalClose);
+	modalContainer.appendChild(modalInner);
+	document.body.appendChild(modalContainer);
+	videoObject.modalcontainer = modalContainer;
+}
+
+export function destroyModal(videoObject) {
+	const { modalcontainer } = videoObject;
+	modalcontainer.remove();
+}
+
+export function isWpAdmin() {
+	return document.body.classList.contains("wp-admin") ? true : false;
+}
+
+export function revealVideoElement(videoObject) {
+	const {
+		videocontainer,
+		modal,
+		modalcontainer,
+		videoid,
+		isAdmin,
+		parentcontainer,
+	} = videoObject;
+	if (modal && !isAdmin) {
+		document.documentElement.classList.add("modal-video-playing");
+		addTriggerClass(videoObject, "video-playing");
+		modalcontainer.classList.add("video-playing");
+	} else {
+		document.body.classList.add("video-playing");
+		addTriggerClass(videoObject, "video-playing");
+		if (parentcontainer) {
+			parentcontainer.classList.add("video-playing");
+		}
+		videocontainer.classList.add("video-playing");
+	}
+}
+
+export function hideVideoElement(videoObject) {
+	const {
+		videocontainer,
+		modal,
+		modalcontainer,
+		isAdmin,
+		parentcontainer,
+		videoid,
+	} = videoObject;
+	if (modal && !isAdmin) {
+		document.documentElement.classList.remove("modal-video-playing");
+		modalcontainer.classList.remove("video-playing");
+		setTimeout(() => {
+			modalcontainer.remove();
+		}, 1000);
+		videoObject.youtubeplayer = false;
+		removeTriggerClass(videoObject, "video-playing");
+	} else {
+		document.body.classList.remove("video-playing");
+		if (parentcontainer) {
+			parentcontainer.classList.remove("video-playing");
+		}
+		videocontainer.classList.remove("video-playing");
+		removeTriggerClass(videoObject, "video-playing");
+	}
+}
+export function stopVideos(videoObject, stopEverything = false) {
+	const { videoid, instance } = videoObject;
+	enableDebugLogs && console.log("stopping all vids", stopEverything);
+	if (videoObject.modal && videoObject.modalcontainer && stopEverything) {
+		hideVideoElement(videoObject);
+		return;
+	}
+	if (!instance.containerCollection) {
+		return;
+	}
+	const keys = Object.keys(instance.containerCollection);
+	keys.forEach((key) => {
+		const collectionObject = instance.containerCollection[key];
+		if (
+			stopEverything ||
+			(collectionObject.videoid !== videoid && !collectionObject.autoplay)
+		) {
+			switch (collectionObject.videotype) {
+				case "upload":
+					collectionObject.videocontainer.querySelector("video").pause();
+					break;
+				case "youtube":
+					if (collectionObject.youtubeplayer) {
+						collectionObject.youtubeplayer.pauseVideo();
+					}
+					break;
+				case "vimeo":
+					if (collectionObject.vimeoplayer) {
+						collectionObject.vimeoplayer.pause();
+					}
+					break;
+				default:
+					break;
+			}
+		}
+	});
+}
+
+export function removeTriggerClass(videoObject, classname) {
+	const { videoid, triggerScope } = videoObject;
+	triggerScope
+		.querySelectorAll(`[data-triggerid="${videoid}"]`)
+		.forEach((trigger) => {
+			trigger.classList.remove(classname);
+		});
+}
+export function addTriggerClass(videoObject, classname) {
+	const { videoid, triggerScope } = videoObject;
+	triggerScope
+		.querySelectorAll(`[data-triggerid="${videoid}"]`)
+		.forEach((trigger) => {
+			trigger.classList.add(classname);
+		});
+}
+export function addPlayingStateClasses(elements, classname) {
+	elements.forEach((element) => {
+		element.classList.add(classname);
+	});
+}
+export function removePlayingStateClasses(elements, classname) {
+	elements.forEach((element) => {
+		element.classList.add(classname);
+	});
+}
+
+/**
+ * Function for adding a link tag with preconnect to the head of the document. Very useful if you need to add this dynamically.
+ * @param {string} domain The domain you wish to preconnect to.
+ * @returns {void} The preconnect will be appended to the head tag.
+ */
+export function appendPreconnect(domain) {
+	try {
+		if (!domain) {
+			console.log("The domain was missing or broken...");
+			return;
+		}
+		const link = document.createElement("link");
+		link.rel = "preconnect";
+		link.href = domain;
+		document.head.appendChild(link);
+		return;
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+/**
+ * Run a function after a window resize event, but only after the alloted time has ended.
+ * If another resize even occurs it resets the time window.
+ * @param {function} debouncedFunction The function you want to run after a window resize event.
+ * @param {number} time The time in ms.
+ */
+export function resizeDebouncer(debouncedFunction, time = 250) {
+	let resizeTimer;
+	window.addEventListener("resize", () => {
+		clearTimeout(resizeTimer);
+		resizeTimer = setTimeout(() => {
+			debouncedFunction();
+		}, time);
+	});
+}

package/onion-videocontroller/vimeo-video.mjs

@@ -0,0 +1,106 @@
+import Player from "@vimeo/player";
+import {
+	generateModal,
+	revealVideoElement,
+	hideVideoElement,
+	stopVideos,
+	resizeDebouncer
+} from "./vcUtils.mjs";
+
+const players = new Map();
+
+function vimeoInit(videoObject) {
+	updateVimeoSource(videoObject);
+}
+
+function updateVimeoSource(videoObject) {
+	const { videocontainer, autoplay, muted, controls, loop, globalSettings } = videoObject;
+	const desktopUrl = videocontainer.dataset.vimeoDesktopUrl;
+	const mobileUrl = videocontainer.dataset.vimeoMobileUrl;
+	const srcDesktop = videocontainer.dataset.vimeodesktopid;
+	const srcMobile = videocontainer.dataset.vimeomobileid;
+
+	const vimeoUrl = window.innerWidth < globalSettings.srcBreakpoint && mobileUrl ? mobileUrl : desktopUrl;
+	const vimeoId = window.innerWidth < globalSettings.srcBreakpoint && srcMobile ? srcMobile : srcDesktop;
+
+	if (!vimeoId) {
+		console.error("No Vimeo ID found");
+		return;
+	}
+
+	const playerId = `vimeo-${videoObject.videoid}-${srcDesktop}`;
+	videoObject.playerId = playerId;
+
+	const options = {
+		url: vimeoUrl,
+		autopause: autoplay === 1 ? 0 : 1,
+		autoplay,
+		muted,
+		controls,
+		loop,
+	};
+
+	if (players.has(playerId)) {
+		const playerData = players.get(playerId);
+		playerData.player.loadVideo(vimeoId);
+	} else {
+		const player = new Player(playerId, options);
+		players.set(playerId, { initialized: true, player, videoObject });
+		setupEventListeners(videoObject);
+	}
+}
+
+function triggerVimeo(videoObject) {
+	const { playerId, modal, isAdmin, globalSettings } = videoObject;
+
+	if (modal && !isAdmin) {
+		generateModal(videoObject);
+	}
+
+	const playerData = players.get(playerId);
+	if (playerData) {
+		playerData.player.play();
+		globalSettings.enableDebugLogs &&
+			console.log(`Playing Vimeo video: ${playerId}`);
+	} else {
+		console.error(`Vimeo player not initialized for ${playerId}`);
+	}
+}
+
+function setupEventListeners(videoObject) {
+	const { playerId, globalSettings } = videoObject;
+	const player = players.get(playerId).player;
+	
+	player.on("loadedmetadata", () => {
+		videoObject.instance.setVideoReadyState(videoObject, true);
+	});
+	
+	player.on("play", () => {
+		globalSettings.enableDebugLogs && console.log("Playing the video");
+		stopVideos(videoObject);
+		revealVideoElement(videoObject);
+	});
+
+	player.on("pause", () => {
+		globalSettings.enableDebugLogs && console.log("Pausing the video");
+		hideVideoElement(videoObject);
+	});
+
+	player.on("ended", () => {
+		globalSettings.enableDebugLogs && console.log("Video ended");
+		hideVideoElement(videoObject);
+	});
+}
+
+resizeDebouncer(() => {
+	players.forEach(({ videoObject }) => {
+		updateVimeoSource(videoObject);
+	});
+});
+
+const api = {
+	vimeoInit,
+	triggerVimeo,
+};
+
+export default api;