Migrate fabric video to svelte

src/templates/components/Fabric.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { CLICK_MACRO, DEST_URL, isValidReplacedVariable } from '$lib/gam';
+	import { writable, type Writable } from 'svelte/store';
+	import {
+		CLICK_MACRO,
+		DEST_URL,
+		type GAMVariable,
+		isValidReplacedVariable,
+	} from '$lib/gam';
 	import { post } from '$lib/messenger';
 	import Pixel from '$templates/components/Pixel.svelte';
 
@@ -26,34 +32,78 @@
 	export let MobileLayer2BackgroundPosition: string;
 	export let MobileLayer3BackgroundImage: string;
 	export let MobileLayer3BackgroundPosition: string;
-	export let isXL = false;
+	export let VideoURL: GAMVariable | undefined = undefined;
+	export let VideoBackupImage: GAMVariable | undefined = undefined;
+	export let MobileVideoBackupImage: GAMVariable | undefined = undefined;
+	export let VideoURLMobile: GAMVariable | undefined = undefined;
+	export let VideoAlignment: GAMVariable | undefined = undefined;
+	export let showVideo: boolean = false;
+	export let isXL: boolean = false;
 
 	const isMobile = window.matchMedia('(max-width: 739px)').matches;
 	const isTablet = window.matchMedia(
 		'(min-width: 740px) and (max-width: 979px)',
 	).matches;
 
-	const [backgroundImage, backgroundPosition, backgroundRepeat] = isMobile
-		? [
-				MobileBackgroundImage,
-				MobileBackgroundImagePosition,
-				MobileBackgroundImageRepeat,
-			]
-		: [BackgroundImage, BackgroundImagePosition, BackgroundImageRepeat];
-
-	const checkScrollType = (scrollType: string): string =>
-		scrollType === 'parallax' && (isMobile || isTablet) ? 'fixed' : scrollType;
-
-	post({
-		type: 'background',
-		value: {
-			scrollType: checkScrollType(BackgroundScrollType),
-			backgroundColor: BackgroundColour,
-			backgroundImage: `url('${backgroundImage}')`,
-			backgroundRepeat,
-			backgroundPosition,
-		},
-	});
+	const video: Writable<HTMLVideoElement | undefined> = writable();
+	let played = false;
+
+	const posterImage = isMobile ? MobileVideoBackupImage : VideoBackupImage;
+	const videoSrc = isMobile ? VideoURLMobile : VideoURL;
+
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- https://github.com/sveltejs/eslint-plugin-svelte/issues/476
+	if (showVideo) {
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- https://github.com/sveltejs/eslint-plugin-svelte/issues/476
+		if (isXL) {
+			post({ type: 'resize', value: { height: 524 } });
+		}
+		video.subscribe((video) => {
+			if (video) {
+				if (!VideoURL || !VideoURLMobile) return;
+
+				video.load();
+				void video.play();
+
+				const observer = new IntersectionObserver(
+					(entries) => {
+						entries.forEach((entry) => {
+							if (entry.isIntersecting && !played) {
+								video.paused && void video.play();
+							} else {
+								!video.paused && video.pause();
+							}
+						});
+					},
+					{ root: null, rootMargin: '0px', threshold: 0.2 },
+				);
+				observer.observe(video);
+			}
+		});
+	} else {
+		const [backgroundImage, backgroundPosition, backgroundRepeat] = isMobile
+			? [
+					MobileBackgroundImage,
+					MobileBackgroundImagePosition,
+					MobileBackgroundImageRepeat,
+				]
+			: [BackgroundImage, BackgroundImagePosition, BackgroundImageRepeat];
+
+		const checkScrollType = (scrollType: string): string =>
+			scrollType === 'parallax' && (isMobile || isTablet)
+				? 'fixed'
+				: scrollType;
+
+		post({
+			type: 'background',
+			value: {
+				scrollType: checkScrollType(BackgroundScrollType),
+				backgroundColor: BackgroundColour,
+				backgroundImage: `url('${backgroundImage}')`,
+				backgroundRepeat,
+				backgroundPosition,
+			},
+		});
+	}
 </script>
 
 <a
@@ -84,6 +134,20 @@
 		style:--mobile-background-image={`url('${MobileLayer3BackgroundImage}')`}
 		style:--mobile-background-position={MobileLayer3BackgroundPosition}
 	/>
+
+	{#if showVideo}
+		<video
+			bind:this={$video}
+			muted
+			autoplay
+			playsinline
+			class="video video--{VideoAlignment}"
+			class:isMobile
+			on:ended={() => (played = true)}
+			src={videoSrc}
+			poster={posterImage}
+		></video>
+	{/if}
 </a>
 
 {#if isValidReplacedVariable(TrackingPixel)}
@@ -99,6 +163,44 @@
 		background-color: var(--background-color);
 		margin: 0;
 	}
+	.isMobile {
+		width: 740px;
+	}
+
+	.video,
+	.poster,
+	.alt,
+	.layer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.video {
+		width: 1920px;
+		height: 250px;
+	}
+
+	.video--left {
+		top: 50%;
+		left: 0%;
+		transform: translate(0%, -50%);
+	}
+
+	.video--right {
+		top: 50%;
+		right: 0%;
+		left: unset;
+		transform: translate(0%, -50%);
+	}
+
+	.video--center {
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
 
 	.fabric-container {
 		display: block;

src/templates/csr/fabric-video/index.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { GAMVariable } from '$lib/gam';
+	import Fabric from '$templates/components/Fabric.svelte';
+
+	export let Trackingpixel: GAMVariable;
+	export let Researchpixel: GAMVariable;
+	export let Viewabilitypixel: GAMVariable;
+
+	export let BackgroundScrollType: GAMVariable<'parallax' | 'none' | 'fixed'>;
+	export let BackgroundColour: GAMVariable;
+
+	export let BackgroundImage: GAMVariable;
+	export let BackgroundImagePosition: GAMVariable;
+	export let BackgroundImageRepeat: GAMVariable;
+	export let Layer1BackgroundImage: GAMVariable;
+	export let Layer1BackgroundPosition: GAMVariable;
+	export let Layer2BackgroundImage: GAMVariable;
+	export let Layer2BackgroundPosition: GAMVariable;
+	export let Layer3BackgroundImage: GAMVariable;
+	export let Layer3BackgroundPosition: GAMVariable;
+
+	export let MobileBackgroundImage: GAMVariable;
+	export let MobileBackgroundImagePosition: GAMVariable;
+	export let MobileBackgroundImageRepeat: GAMVariable;
+	export let MobileLayer1BackgroundImage: GAMVariable;
+	export let MobileLayer1BackgroundPosition: GAMVariable;
+	export let MobileLayer2BackgroundImage: GAMVariable;
+	export let MobileLayer2BackgroundPosition: GAMVariable;
+	export let MobileLayer3BackgroundImage: GAMVariable;
+	export let MobileLayer3BackgroundPosition: GAMVariable;
+
+	export let VideoURL: GAMVariable;
+	export let VideoBackupImage: GAMVariable;
+	export let MobileVideoBackupImage: GAMVariable;
+	export let VideoURLMobile: GAMVariable;
+	export let VideoAlignment: GAMVariable;
+</script>
+
+<Fabric
+	TrackingPixel={Trackingpixel}
+	ResearchPixel={Researchpixel}
+	ViewabilityPixel={Viewabilitypixel}
+	{BackgroundScrollType}
+	{BackgroundColour}
+	{BackgroundImage}
+	{BackgroundImagePosition}
+	{BackgroundImageRepeat}
+	{MobileBackgroundImage}
+	{MobileBackgroundImagePosition}
+	{MobileBackgroundImageRepeat}
+	{Layer1BackgroundImage}
+	{Layer1BackgroundPosition}
+	{Layer2BackgroundImage}
+	{Layer2BackgroundPosition}
+	{Layer3BackgroundImage}
+	{Layer3BackgroundPosition}
+	{MobileLayer1BackgroundImage}
+	{MobileLayer1BackgroundPosition}
+	{MobileLayer2BackgroundImage}
+	{MobileLayer2BackgroundPosition}
+	{MobileLayer3BackgroundImage}
+	{MobileLayer3BackgroundPosition}
+	{VideoURL}
+	{VideoBackupImage}
+	{MobileVideoBackupImage}
+	{VideoURLMobile}
+	{VideoAlignment}
+	showVideo={true}
+/>

src/templates/csr/fabric-video/test.json

@@ -0,0 +1,31 @@
+{
+	"ClickthroughUrl": "http://www.armani.com/gb/giorgioarmani/women/new-normal_section",
+	"BackgroundColour": "transparent",
+	"BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLn4zhRRABGAEyCNF40kFrzoD3",
+	"BackgroundRepeat": "no-repeat",
+	"BackgroundPosition": "center center",
+	"Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLn4zxIRABGAEyCDODMrRrZ8kQ",
+	"Layer1BackgroundPosition": "right top",
+	"Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLn4zxIRABGAEyCDODMrRrZ8kQ",
+	"Layer2BackgroundPosition": "right top",
+	"Layer3BackgroundImage": "",
+	"Layer3BackgroundPosition": "left top",
+	"MobileBackgroundImage": "",
+	"MobileBackgroundRepeat": "no-repeat",
+	"MobileBackgroundPosition": "center top",
+	"MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLn4zxIRABGAEyCDODMrRrZ8kQ",
+	"MobileLayer1BackgroundPosition": "center center",
+	"MobileLayer2BackgroundImage": "",
+	"MobileLayer2BackgroundPosition": "left top",
+	"MobileLayer3BackgroundImage": "",
+	"MobileLayer3BackgroundPosition": "left top",
+	"VideoURL": "https://player.vimeo.com/external/541626129.hd.mp4?s=e112d0d886a6eaa850b8be46a6369ec710439a1f&profile_id=175",
+	"VideoURLMobile": "https://player.vimeo.com/external/541626059.sd.mp4?s=cd36645eeddda5668ddcd6bf524cef0c3ea756eb&profile_id=165",
+	"VideoBackupImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLn8ywtAEQARgBMgilQLMRCw4e5A",
+	"MobileVideoBackupImage": "",
+	"VideoAlignment": "center",
+	"Trackingpixel": "",
+	"Researchpixel": "",
+	"Viewabilitypixel": "",
+	"thirdPartyJSTracking": ""
+}

src/templates/csr/fabric-xl/index.svelte

@@ -54,5 +54,5 @@
 	{MobileLayer2BackgroundPosition}
 	{MobileLayer3BackgroundImage}
 	{MobileLayer3BackgroundPosition}
-	isXL
+	isXL={true}
 />