@total_onion/onion-library 3.0.49 → 3.1.0

package/onion-videocontroller/onion-videocontroller.js

@@ -0,0 +1,240 @@
+import youtubeVideo from './youtube-video.mjs';
+import uploadVideo from './upload-video.mjs';
+import vimeoVideo from './vimeo-video.mjs';
+import {revealVideoElement, stopVideos, isWpAdmin} from './vcUtils.mjs';
+
+export default class videoController {
+	constructor(parentContainer) {
+		const SRC_BREAKPOINT = 768;
+		let defaultGlobalSettings = {
+			srcBreakpoint: SRC_BREAKPOINT,
+			bodyClass: 'video-playing',
+			playingState: false,
+			playingStateClass: 'video-playing',
+			originDomain: globalThis.location?.origin,
+			enableDebugLogs: false,
+			isMobileSize: window.innerWidth < SRC_BREAKPOINT
+		};
+		if (parentContainer) {
+			this.videoContainers =
+				parentContainer.querySelectorAll('[data-videoid]');
+		}
+		this.videoReadyState = false;
+		if (videoController.instance instanceof videoController) {
+			videoController.instance.setVideoObjects(
+				this.videoReadyState,
+				this.videoContainers,
+				parentContainer
+			);
+			return videoController.instance;
+		}
+		videoController.instance = this;
+		this.globalSettings = defaultGlobalSettings;
+		this.enableDebugLogs = this.globalSettings.enableDebugLogs;
+		this.containerCollection = {};
+		this.setVideoObjects(
+			this.videoReadyState,
+			this.videoContainers,
+			this.triggers,
+			parentContainer
+		);
+	}
+	/**
+	 * Method for setting up the video container objects and adding the listeners to the triggers
+	 * @param {array} videoContainers - The video containers you want to add to the controller
+	 * @param {array} triggers - The triggers you want to add to the controller
+	 * @param {HTMLElement} parentContainer - The parent container of the video containers/triggers
+	 */
+	setVideoObjects(videoReadyState, videoContainers, parentContainer) {
+		this.enableDebugLogs && console.log('Setting video Objects');
+		if (!videoContainers) {
+			this.enableDebugLogs &&
+				console.info(`Did not look for video containers`);
+			return;
+		}
+		if (videoContainers.length === 0) {
+			this.enableDebugLogs &&
+				console.info(
+					`could not find any video containers in ${parentContainer}`
+				);
+			return;
+		}
+
+		videoContainers.forEach((container) => {
+			if (!container) {
+				return;
+			}
+			const videoObject = {
+				videocontainer: container,
+				videotype: container.dataset?.videotype,
+				videoid: container.dataset?.videoid,
+				videoReadyState: videoReadyState,
+				videoplayer: false,
+				youtubeplayer: false,
+				vimeoplayer: false,
+				parentcontainer: parentContainer,
+				modalcontainer: '',
+				dataLayerPush: container.dataset.datalayerpush,
+				modal: Number(container.dataset?.modal),
+				isAdmin: isWpAdmin(),
+				fullscreen: Number(container.dataset?.fullscreen),
+				autoplay: this.setVideoAutoplay(container),
+				controls: Number(container.dataset?.controls),
+				loop: Number(container.dataset?.loop) || 0,
+				muted: Number(container.dataset?.muted) || 0,
+				sources: {
+					desktop: container.dataset?.desktopvideo,
+					mobile: container.dataset?.mobilevideo
+				},
+				instance: this,
+				globalSettings: this.getGlobalSettings()
+			};
+
+			if (this.containerCollection[videoObject.videoid]) {
+				let suffix = 1;
+				while (this.containerCollection[videoObject.videoid]) {
+					videoObject.videoid = videoObject.videoid + '-' + suffix;
+					suffix++;
+				}
+			}
+
+			let scopeEl = container.parentElement;
+			while (scopeEl && !scopeEl.hasAttribute('parentcontainer')) {
+				scopeEl = scopeEl.parentElement;
+			}
+
+			const triggerScope = scopeEl ?? document;
+			const triggers = triggerScope.querySelectorAll(
+				`[data-triggerid='${container.dataset?.videoid}']`
+			);
+
+			videoObject.triggerScope = triggerScope;
+
+			if (triggers.length === 0) {
+				this.enableDebugLogs &&
+					console.log(
+						`could not find any triggers in ${parentContainer}`
+					);
+			}
+
+			triggers.forEach((trigger) => {
+				if (trigger?.dataset?.triggerid) {
+					trigger.dataset.triggerid = videoObject.videoid;
+					trigger.addEventListener('click', () => {
+						this.triggerVideo(
+							this.containerCollection[trigger.dataset.triggerid]
+						);
+					});
+				} else {
+					this.enableDebugLogs &&
+						console.log(
+							trigger,
+							`was missing an id so the listener could not be attached`
+						);
+				}
+			});
+			videoObject.trigger = triggers;
+			this.containerCollection[videoObject.videoid] = videoObject;
+
+			if (!videoObject.videoReadyState) {
+				if (videoObject.autoplay == 1) {
+					this.loadingSpinner(videoObject);
+				}
+				if (videoObject.videotype === 'upload') {
+					console.log('id', videoObject.videoid);
+
+					uploadVideo.uploadedVideoInit(videoObject);
+				}
+				if (videoObject.videotype === 'youtube') {
+					youtubeVideo.youtubeInit(videoObject);
+				}
+				if (videoObject.videotype === 'vimeo') {
+					vimeoVideo.vimeoInit(videoObject);
+				}
+			}
+		});
+	}
+	setVideoReadyState(videoObject, isLoaded) {
+		videoObject.videoReadyState = isLoaded;
+	}
+	setVideoAutoplay(container) {
+		if (document.body.classList.contains('wp-admin')) {
+			return 0;
+		}
+
+		return this.globalSettings.isMobileSize
+			? Number(container.dataset?.autoplayMobile) || 0
+			: Number(container.dataset?.autoplay) || 0;
+	}
+	/**
+	 * Method to return the global settings for the video controller.
+	 * @returns {Object} - the global settings object.
+	 */
+	getGlobalSettings() {
+		return this.globalSettings;
+	}
+	/**
+	 * Method to add or override the global controller settings.
+	 * @param {Object} settings - Settings object that will be merged with the controller's existing settings.
+	 */
+	setGlobalSettings(settings = {}) {
+		this.globalSettings = {...this.globalSettings, ...settings};
+	}
+	/**
+	 * Method for getting the current collection of containers and triggers.
+	 * @returns {Object} - Object container the container and triggers collections.
+	 */
+	getObjects() {
+		const data = {
+			videos: this.containerCollection,
+			triggers: this.triggers
+		};
+		return data;
+	}
+	/**
+	 * Method to determine which video to play and what type it is.
+	 * @param {Object} videoObject - The video/trigger object that is used to identify which video element is being triggered.
+	 */
+	triggerVideo(videoObject) {
+		if (!videoObject.instance) {
+			videoObject.instance = this;
+		}
+		if (!videoObject.globalSettings) {
+			videoObject.globalSettings = this.getGlobalSettings();
+		}
+		this.loadingSpinner(videoObject);
+		stopVideos(videoObject);
+		switch (videoObject.videotype) {
+			case 'upload':
+				uploadVideo.triggerUploadedVideo(videoObject);
+				break;
+			case 'youtube':
+				youtubeVideo.triggerYoutube(videoObject);
+				break;
+			case 'vimeo':
+				vimeoVideo.triggerVimeo(videoObject);
+				break;
+			default:
+				break;
+		}
+	}
+	stopAllVideos() {
+		stopVideos({videoid: '', instance: this}, true);
+	}
+	loadingSpinner(videoObject) {
+		const loadingWrapper = document.createElement('div');
+		loadingWrapper.className = 'loading-wrapper';
+		if (!videoObject.videocontainer) {
+			return;
+		}
+		videoObject.videocontainer.appendChild(loadingWrapper);
+		revealVideoElement(videoObject);
+
+		const checkVideoReadyState = setInterval(() => {
+			if (videoObject.videoReadyState === true) {
+				clearInterval(checkVideoReadyState);
+				videoObject.videocontainer.removeChild(loadingWrapper);
+			}
+		}, 100);
+	}
+}

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;