WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Migrate fabric video to svelte #410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dskamiotis merged 7 commits into from
Nov 14, 2024
Merged

Migrate fabric video to svelte #410

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
885bc12
initial migration steps
dskamiotis Sep 26, 2024
5267643
refactor onMount with observer
dskamiotis Sep 27, 2024
3a421fc
remove ad.json from legacy template directory
dskamiotis Sep 27, 2024
fa4fd96
refactor Fabric component to include video with prop changes to other…
dskamiotis Oct 25, 2024
790317d
refactor props as optional or default undefined to reduce code
dskamiotis Nov 5, 2024
d0369e8
remove onmount and keep subscribe
dskamiotis Nov 12, 2024
e2b7531
update and refine props
dskamiotis Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 123 additions & 22 deletions src/templates/components/Fabric.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
<script lang="ts">
import { CLICK_MACRO, DEST_URL, isValidReplacedVariable } from '$lib/gam';
import { onMount } from 'svelte';
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';
export let showVideo: boolean;
export let TrackingPixel: string;
export let ResearchPixel: string;
export let ViewabilityPixel: string;
Expand All @@ -26,33 +34,74 @@
export let MobileLayer2BackgroundPosition: string;
export let MobileLayer3BackgroundImage: string;
export let MobileLayer3BackgroundPosition: string;
export let VideoURL: GAMVariable;
export let VideoBackupImage: GAMVariable;
export let MobileVideoBackupImage: GAMVariable;
export let VideoURLMobile: GAMVariable;
export let VideoAlignment: GAMVariable;
export let isXL = false;
const isMobile = window.matchMedia('(max-width: 739px)').matches;
const isMobile = window.innerWidth < 740;
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;
onMount(() => {
if (showVideo) {
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);
}
});
post({ type: 'resize', value: { height: 524 } });
} 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>

Expand Down Expand Up @@ -84,6 +133,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)}
Expand All @@ -99,6 +162,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;
Expand Down
0 legacy/src/fabric-video/web/ad.json → src/templates/csr/fabric-video/ad.json
View file
Open in desktop
File renamed without changes.
73 changes: 73 additions & 0 deletions src/templates/csr/fabric-video/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<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;
export let isXL = false;
export let showVideo = true;
</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}
{isXL}
{showVideo}
/>
31 changes: 31 additions & 0 deletions src/templates/csr/fabric-video/test.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": ""
}
15 changes: 14 additions & 1 deletion src/templates/csr/fabric-xl/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@
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;
export let isXL = false;
export let showVideo = true;
</script>

<Fabric
Expand All @@ -54,5 +61,11 @@
{MobileLayer2BackgroundPosition}
{MobileLayer3BackgroundImage}
{MobileLayer3BackgroundPosition}
isXL
{VideoURL}
{VideoBackupImage}
{MobileVideoBackupImage}
{VideoURLMobile}
{isXL}
{VideoAlignment}
{showVideo}
/>
16 changes: 16 additions & 0 deletions src/templates/csr/fabric/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,15 @@
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;

export let isXL = false;
export let showVideo = true;
</script>

<Fabric
Expand All @@ -54,4 +63,11 @@
{MobileLayer2BackgroundPosition}
{MobileLayer3BackgroundImage}
{MobileLayer3BackgroundPosition}
{VideoURL}
{VideoBackupImage}
{MobileVideoBackupImage}
{VideoURLMobile}
{VideoAlignment}
{isXL}
{showVideo}
/>
Loading