@total_onion/onion-library 3.0.49 → 3.2.0

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;

package/onion-videocontroller/youtube-video.mjs

@@ -0,0 +1,157 @@
+import {
+	generateModal,
+	stopVideos,
+	revealVideoElement,
+	hideVideoElement,
+	dataLayerPush,
+} from "./vcUtils.mjs";
+
+const players = new Map();
+
+function youtubeInit(videoObject) {
+	const autoplay = videoObject.autoplay;
+	const playerId = `yt-${videoObject.videoid}`;
+	videoObject.playerId = playerId;
+	if (autoplay) {
+		triggerYoutube(videoObject);
+	}
+}
+
+async function triggerYoutube(videoObject) {
+	const { playerId, modal, isAdmin } = videoObject;
+	videoObject.elementType = "iframe";
+
+	if (!window.YT) {
+		console.log("YT not loaded yet in triggerYoutube");
+		await injectYouTubeIframeScript();
+		console.log("YT loaded in triggerYoutube");
+	}
+
+	if (modal && !isAdmin) {
+		generateModal(videoObject);
+	}
+	if (!players.get(playerId)) {
+		initializePlayer(videoObject);
+		return;
+	}
+
+	const playerData = players.get(playerId);
+	if (!playerData) {
+		console.error(`no player data found for ${playerId}`);
+		return;
+	}
+
+	const { player } = playerData;
+	if (playerData.initialized) {
+		player.playVideo();
+	} else {
+		console.error(`YouTube player not initialized for ${playerId}`);
+	}
+}
+
+async function initializePlayer(videoObject) {
+	const playerId = videoObject.playerId;
+	const player = createYouTubePlayer(videoObject);
+	videoObject.youtubeplayer = player;
+	players.set(playerId, { initialized: true, player, videoObject });
+}
+
+function createYouTubePlayer(videoObject) {
+	const playerId = videoObject.playerId;
+	const srcDesktop = videoObject.videocontainer.dataset.youtubedesktop;
+	const srcMobile = videoObject.videocontainer.dataset.youtubemobile;
+	const videoSrc =
+		window.innerWidth < videoObject.globalSettings.srcBreakpoint && srcMobile
+			? srcMobile
+			: srcDesktop;
+
+	return new YT.Player(playerId, {
+		videoId: videoSrc,
+		playerVars: {
+			autoplay: videoObject.autoplay ? 1 : 0,
+			mute: videoObject.muted ? 1 : 0,
+			controls: videoObject.controls ? 1 : 0,
+			loop: videoObject.loop ? 1 : 0,
+		},
+		events: {
+			onStateChange: (event) => onPlayerStateChange(event, videoObject),
+			onReady: (event) => {
+				videoObject.instance.setVideoReadyState(videoObject, true);
+				event.target.playVideo();
+			},
+		},
+	});
+}
+
+function onPlayerStateChange(event, videoObject) {
+	const { globalSettings } = videoObject;
+	switch (event.data) {
+		case YT.PlayerState.PLAYING:
+			globalSettings.enableDebugLogs && console.log("Playing the video");
+			stopVideos(videoObject);
+			revealVideoElement(videoObject);
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "play", videoObject });
+			}
+			break;
+		case YT.PlayerState.PAUSED:
+			globalSettings.enableDebugLogs && console.log("Pausing the video");
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "pause", videoObject });
+			}
+			break;
+
+		case YT.PlayerState.ENDED:
+			if (videoObject.loop) {
+				const player = players.get(videoObject.playerId).player;
+				player.playVideo();
+				return;
+			}
+			globalSettings.enableDebugLogs && console.log("Video ended");
+			hideVideoElement(videoObject);
+			if (videoObject.dataLayerPush) {
+				dataLayerPush({ eventname: "ended", videoObject });
+			}
+			break;
+	}
+}
+
+/**
+ * Injects the youtube iframe api script and waits for the YT object to be instantiated before resolving the promise
+ * @returns {promise} Resolves once the YT object is available.
+ */
+function injectYouTubeIframeScript() {
+	const prom = new Promise((resolve) => {
+		if (globalThis.YT) {
+			return resolve();
+		}
+		const tag = document.createElement("script");
+		tag.id = "iframe-api";
+		tag.src = "https://www.youtube.com/iframe_api";
+
+		const firstScriptTag = document.getElementsByTagName("script")[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+		tag.addEventListener("load", () => {
+			if (!YT.loaded) {
+				const loadingCheck = setInterval(() => {
+					if (YT.loaded) {
+						clearInterval(loadingCheck);
+						return resolve(true);
+					}
+				}, 50);
+			} else {
+				return resolve(true);
+			}
+		});
+	});
+
+	return prom;
+}
+
+const api = {
+	youtubeInit,
+	triggerYoutube,
+};
+
+export default api;

package/package.json

@@ -1,8 +1,31 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.0.49",
+	"version": "3.2.0",
 	"description": "Component library",
-	"main": "index.js",
+	"type": "module",
+	"main": "./index.js",
+	"module": "./index.js",
+	"exports": {
+		".": "./index.js",
+		"./onion-utils": "./onion-utils.mjs",
+		"./onion-utils.mjs": "./onion-utils.mjs",
+		"./onion-loader": "./onion-loader.js",
+		"./onion-loader.js": "./onion-loader.js",
+		"./entry-animation-observer": "./entry-animation-observer.js",
+		"./entry-animation-observer.js": "./entry-animation-observer.js",
+		"./onion-videocontroller": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-videocontroller.js": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-modalcontroller": "./onion-modalcontroller/onion-modalcontroller.js",
+		"./onion-modalcontroller.js": "./onion-modalcontroller/onion-modalcontroller.js"
+	},
+	"files": [
+		"index.js",
+		"onion-utils.mjs",
+		"onion-loader.js",
+		"entry-animation-observer.js",
+		"onion-videocontroller",
+		"onion-modalcontroller"
+	],
 	"scripts": {
 		"build": "node build-library.js",
 		"test": ""
@@ -18,10 +41,7 @@
 	},
 	"homepage": "https://github.com/TotalOnion/onion-library#readme",
 	"dependencies": {
-		"@total_onion/onion-modalcontroller": "^1.2.4",
-		"@total_onion/onion-videocontroller": "^1.2.6",
-		"lottie-web": "^5.13.0",
-		"swiper": "^12.1.3"
+		"@vimeo/player": "^2.26.0"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.27",
@@ -38,6 +58,8 @@
 		"postcss-preset-env": "^11.2.0",
 		"prettier": "^2.6.2",
 		"url-loader": "^4.1.1",
-		"yargs": "^17.4.1"
+		"yargs": "^17.4.1",
+		"lottie-web": "^5.13.0",
+		"swiper": "^14.1.0"
 	}
 }

package/.github/workflows/npm-publish.yml

@@ -1,38 +0,0 @@
-# This workflow will run tests using node and then publish a package to NPM when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [published]
-    branches:
-      - master
-permissions:
-  id-token: write  # Required for OIDC
-  contents: read
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 24
-      # Ensure npm 11.5.1 or later is installed
-      - name: Update npm
-        run: npm install -g npm@latest
-      - run: npm ci
-
-
-  publish:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-      - run: npm publish