@surfside/ads-core-web 0.1.0 → 0.1.1

package/lib/esm/rendering/Video.js

@@ -0,0 +1,295 @@
+import { Ctx, Ok, WrapValue } from '@surfside/ads-core-client';
+import { QuerySelectorResult, Template } from './Framework';
+;
+;
+export const RenderVideo = (logger, deviceInfo, geo, userAgent, builtVideo) => {
+    const log = Ctx(logger)?.with('RenderVideo');
+    log?.info('Rendering video');
+    log?.debug(builtVideo);
+    const videoContainer = document.createElement('div');
+    const shadow = videoContainer.attachShadow({ mode: 'open' });
+    const creativeContainerResult = Template(log, 'surfside-video', template, style);
+    if (!creativeContainerResult.ok) {
+        log?.error('Failed to load video player template', builtVideo, template, style);
+        return creativeContainerResult;
+    }
+    const creativeContainer = creativeContainerResult.value;
+    shadow.appendChild(creativeContainer);
+    const video = QuerySelectorResult(creativeContainer, '#surf-video-container');
+    if (!video.ok) {
+        log?.error('Failed to find video player element', builtVideo, creativeContainer);
+        return video;
+    }
+    const linearRes = WrapValue(builtVideo.video.ads[0]?.inline.creatives[0]);
+    if (!linearRes.ok) {
+        return linearRes;
+    }
+    const linear = linearRes.value;
+    for (const mediaFile of linear.mediaFiles) {
+        const source = document.createElement('source');
+        source.src = mediaFile.url;
+        source.type = mediaFile.type;
+        source.id = mediaFile.id;
+        video.value.appendChild(source);
+    }
+    // Attach callbacks
+    const surfVideoContainerRes = QuerySelectorResult(videoContainer, '#surf-video-container');
+    if (!surfVideoContainerRes.ok) {
+        return surfVideoContainerRes;
+    }
+    surfVideoContainerRes.value.addEventListener('loadeddata', () => loadInteractiveElements(logger, deviceInfo, geo, userAgent, videoContainer, linear));
+    return Ok(videoContainer);
+};
+const loadInteractiveElements = (logger, deviceInfo, geo, userAgent, element, linear) => {
+    const log = Ctx(logger)?.with('loadInteractiveElements');
+    log?.info('Video loaded. Adding interactive elements to the video player');
+    const videoElementRes = QuerySelectorResult(element, '#surf-video-container');
+    if (!videoElementRes.ok) {
+        return videoElementRes;
+    }
+    const videoElement = videoElementRes.value;
+    const duration = videoElement.duration;
+    const timerValueRes = QuerySelectorResult(element, '.timer-value');
+    if (!timerValueRes.ok) {
+        return timerValueRes;
+    }
+    const timerValue = timerValueRes.value;
+    timerValue.innerHTML = String(duration);
+    const trackersRes = initializeTrackers(log, linear.trackingEvents);
+    if (!trackersRes.ok) {
+        return trackersRes;
+    }
+    const trackers = trackersRes.value;
+    videoElement.onplay = () => fireTracker(log, deviceInfo, geo, userAgent, trackers, 'start');
+    videoElement.onended = () => fireTracker(log, deviceInfo, geo, userAgent, trackers, 'complete');
+    videoElement.ontimeupdate = async () => {
+        const currentTime = Math.floor(videoElement.currentTime);
+        timerValue.innerHTML = String(currentTime);
+        const percent = currentTime / videoElement.duration;
+        if (percent >= 0.25 && percent < 0.5) {
+            fireTracker(log, deviceInfo, geo, userAgent, trackers, 'firstQuartile');
+        }
+        else if (percent >= 0.5 && percent < 0.75) {
+            fireTracker(log, deviceInfo, geo, userAgent, trackers, 'midpoint');
+        }
+        else if (percent >= 0.75) {
+            fireTracker(log, deviceInfo, geo, userAgent, trackers, 'thirdQuartile');
+        }
+    };
+    const muteButton = QuerySelectorResult(element, '.mute-button');
+    if (muteButton.ok) {
+        log?.info('Adding mute handler');
+        muteButton.value.addEventListener('click', toggleMute.bind(undefined, log, videoElement));
+    }
+    else {
+        log?.info('Missing mute button');
+    }
+    const timerCircleRes = QuerySelectorResult(element, '.timer-circle');
+    if (!timerCircleRes.ok) {
+        return timerCircleRes;
+    }
+    const timerCircle = timerCircleRes.value;
+    timerCircle.style.animationDuration = `${videoElement.duration}s`;
+    log?.info('timerCircle.style.animationDuration', timerCircle.style.animationDuration);
+    videoElement.play()
+        .then(() => {
+        timerCircle.style.animationPlayState = 'running';
+    })
+        .catch(err => console.warn('User disallowed auto playing of video', err));
+    fireTracker(log, deviceInfo, geo, userAgent, trackers, 'impression');
+    return Ok(true);
+};
+const initializeTrackers = (logger, trackers) => {
+    const log = Ctx(logger)?.with('initializeTrackers');
+    log?.info('Initiailizing trackers', trackers);
+    const videoTrackers = {
+        start: { fired: false },
+        firstQuartile: { fired: false },
+        midpoint: { fired: false },
+        thirdQuartile: { fired: false },
+        complete: { fired: false },
+        impression: { fired: false },
+        stop: { fired: false }
+    };
+    for (const tracker of trackers) {
+        const eventName = tracker.event;
+        const url = tracker.url;
+        videoTrackers[eventName].url = url;
+    }
+    return Ok(videoTrackers);
+};
+const fireTracker = (logger, deviceInfo, geo, userAgent, trackers, trackerName) => {
+    const log = Ctx(logger)?.with('fireTracker');
+    log?.info('Firing video tracker [' + trackerName + ']');
+    const trackerData = trackers[trackerName];
+    if (trackerData.fired) {
+        return;
+    }
+    const urlString = trackerData.url;
+    if (urlString === undefined) {
+        log?.error('urlstring was undefined for tracker [' + trackerName + ']');
+        return;
+    }
+    const url = new URL(urlString);
+    const { os, osv, make, model } = deviceInfo ?? {};
+    const { latitude, longitude } = geo?.coords ?? {};
+    const addParam = (param, value) => value !== undefined
+        ? url.searchParams.set(param, value)
+        : undefined;
+    addParam('os', os);
+    addParam('os', osv);
+    addParam('make', make);
+    addParam('model', model);
+    addParam('ua', userAgent);
+    addParam('lat', latitude?.toString());
+    addParam('lon', longitude?.toString());
+    trackerData.fired = true;
+    fetch(url, {
+        method: 'GET',
+        mode: 'no-cors'
+    }).then(() => {
+        log?.debug('Successfully fired tracker [' + trackerName + ']');
+    }).catch(err => {
+        log?.error('Failed to fire tracker [' + trackerName + ']', err);
+    });
+};
+const toggleMute = (logger, videoElement, e) => {
+    const log = Ctx(logger)?.with('toggleMute');
+    log?.info('Toggling mute button');
+    videoElement.muted = !videoElement.muted;
+    const element = e.target;
+    if (videoElement.muted) {
+        log?.debug('Muted');
+        element.classList.add('muted');
+        element.classList.remove('unmuted');
+    }
+    else {
+        log?.debug('Unmuted');
+        element.classList.add('unmuted');
+        element.classList.remove('muted');
+    }
+};
+const template = `<div>
+    <video id="surf-video-container" autoplay muted></video>
+
+    <div class="timer">
+        <svg
+            width="36"
+            height="36"
+            viewBox="-2 2 36 36"
+        >
+            <circle
+                cx="16"
+                cy="16"
+                r="15"
+                stroke="#7b4af4"
+                stroke-width="4"
+                fill="none"
+                class="timer-circle"
+            />
+        </svg>
+        <div class="timer-value"></div>
+    </div>
+
+    <div class="watermark"></div>
+    <div class="mute-button muted"></div>
+</div>`;
+const style = `@keyframes grow-arc {
+    0% {
+        stroke-dasharray: 0 94;   /* 0% of the circumference */
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 47 94; /* 90 degrees of the circle */
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dasharray: 94 94; /* Full circle */
+        stroke-dashoffset: 0;
+    }
+}
+
+
+.surfside-video {
+    --icon-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M9.586 3.586C10.846 2.326 13 3.218 13 5v14c0 1.782-2.154 2.674-3.414 1.414L5.172 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1.172l4.414-4.414ZM11 5 6.293 9.707a1 1 0 0 1-.707.293H4v4h1.586a1 1 0 0 1 .707.293L11 19V5Zm5.293 4.293a1 1 0 0 1 1.414 0L19 10.586l1.293-1.293a1 1 0 1 1 1.414 1.414L20.414 12l1.293 1.293a1 1 0 0 1-1.414 1.414L19 13.414l-1.293 1.293a1 1 0 0 1-1.414-1.414L17.586 12l-1.293-1.293a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    --icon-unmuted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M9.586 3.586C10.846 2.326 13 3.218 13 5v14c0 1.782-2.154 2.674-3.414 1.414L5.172 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1.172l4.414-4.414ZM11 5 6.293 9.707a1 1 0 0 1-.707.293H4v4h1.586a1 1 0 0 1 .707.293L11 19V5Zm6.657-.071a1 1 0 0 1 1.414 0c3.905 3.905 3.905 10.237 0 14.142a1 1 0 0 1-1.414-1.414 8 8 0 0 0 0-11.314 1 1 0 0 1 0-1.414Zm-2.829 2.828a1 1 0 0 1 1.415 0 6 6 0 0 1 0 8.486 1 1 0 1 1-1.415-1.415 4 4 0 0 0 0-5.656 1 1 0 0 1 0-1.415Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+
+    position: relative;
+    overflow: hidden;
+
+    video {
+        width: 100%;
+        height: auto;
+    }
+
+    .timer {
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        width: 32px;
+        height: 32px;
+
+        .timer-value {
+            position: absolute;
+            top: 0px;
+            left: 0;
+            width: 36px;
+            height: 36px;
+
+            color: white;
+
+            font-family: Poppins, Arial;
+            text-align: center;
+            font-size: 12px;
+            line-height: 36px;
+        }
+
+        .timer-circle {
+            fill: none;
+            stroke-width: 4;
+            animation-name: grow-arc;
+            animation-iteration-count: 1;
+            animation-timing-function: linear;
+            animation-fill-mode: forwards;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+
+    }
+
+    .mute-button {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        right: 5px;
+        bottom: 5px;
+        cursor: pointer;
+        transition: transform 0.2s;
+        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white);
+
+        &:hover {
+            transform: scale(1.3);
+        }
+
+        &:active {
+            transform: scale(0.8);
+        }
+
+        &.muted {
+            background-image: var(--icon-muted);
+
+            &:hover {
+                background-image: var(--icon-unmuted);
+            }
+        }
+
+        &.unmuted {
+            background-image: var(--icon-unmuted);
+
+            &:hover {
+                background-image: var(--icon-muted);
+            }
+        }
+    }
+}`;
+//# sourceMappingURL=Video.js.map

package/lib/esm/rendering/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sourceRoot":"src/","sources":["rendering/Video.ts"],"names":[],"mappings":"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"}

package/lib/esm/rendering/Watermark.js

@@ -0,0 +1,55 @@
+import { Ctx, Ok } from '@surfside/ads-core';
+export const RenderWatermark = (logger) => {
+    const log = Ctx(logger)?.with('RenderWatermark');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(template, 'text/html');
+    const wrapper = document.createElement('div');
+    const shadow = wrapper.attachShadow({ mode: 'open' });
+    const stylesheet = document.createElement('style');
+    stylesheet.innerHTML = style;
+    shadow.appendChild(stylesheet);
+    for (let i = 0; i < doc.body.children.length; i++) {
+        const element = doc.body.children.item(i);
+        if (element === null) {
+            log?.warn('Child returned null for some reason', i);
+            continue;
+        }
+        shadow.appendChild(element);
+    }
+    return Ok(wrapper);
+};
+const template = `<div class="watermark">
+    <a href="https://surfside.io/contact" target="_blank">
+        <div class="watermark-svg">
+            <img src="https://cdn.surfside.io/assets/surfside-logo.svg" alt="Surfside logo"/>
+        </div>
+    </a>
+</div>
+`;
+const style = `.watermark {
+    background: rgba(255, 255, 255, 0.7);
+
+    position: absolute;
+    right: -67px;
+    width: 85px;
+    /* transform: scale(0.8); */
+    transform-origin: bottom right;
+    bottom: 0;
+
+    padding: 3px 2px 0px 6px;
+    border-radius: 5px 0 0 5px !important;
+    transition: right 300ms ease-out;
+
+    &:hover {
+        right: 0
+    }
+}
+
+.surfside-video .watermark {
+    top: 0;
+    height: auto;
+    bottom: initial;
+    overflow: hidden;
+}
+`;
+//# sourceMappingURL=Watermark.js.map

package/lib/esm/rendering/Watermark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Watermark.js","sourceRoot":"src/","sources":["rendering/Watermark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,EAAE,EAAe,MAAM,oBAAoB,CAAC;AAExE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAA2B,EAAuB,EAAE;IAChF,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACnD,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC;IAC7B,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAChD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACnB,GAAG,EAAE,IAAI,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAC;YACpD,SAAS;QACb,CAAC;QAED,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBb,CAAC"}

package/lib/esm/rendering/index.js

@@ -0,0 +1,7 @@
+export * from './Banner';
+export * from './Carousel';
+export * from './Framework';
+export * from './ProductCard';
+export * from './Video';
+export * from './Watermark';
+//# sourceMappingURL=index.js.map

package/lib/esm/rendering/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["rendering/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/package.json

@@ -1,27 +1,35 @@
-{
-  "name": "@surfside/ads-core-web",
-  "module": "./lib/esm/index.js",
-  "main": "./lib/cjs/index.js",
-  "types": "./lib/types/index.d.ts",
-  "version": "0.1.0",
-  "license": "UNLICENSED",
-  "files": [
-    "lib/",
-    "README.md"
-  ],
-  "type": "module",
-  "scripts": {
-    "build": "bun bun.build.ts",
-    "lint": "npx eslint"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.25.1",
-    "@types/bun": "latest",
-    "eslint": "^9.25.1",
-    "handlebars": "^4.7.8",
-    "typescript-eslint": "^8.31.0",
-    "@surfside/ads-core-client": "^0.1.0",
-    "@surfside/ads-core-mock": "^0.1.0",
-    "typescript": "^5.8.3"
-  }
-}
+{
+  "name": "@surfside/ads-core-web",
+  "module": "./lib/esm/index.js",
+  "main": "./lib/cjs/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "version": "0.1.1",
+  "license": "UNLICENSED",
+  "files": [
+    "lib/",
+    "README.md"
+  ],
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf ./lib",
+    "build": "tsc -p ./tsconfig.types.json && tsc -p ./tsconfig.esm.json && tsc -p tsconfig.cjs.json",
+    "lint": "npx eslint"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.1",
+    "@types/bun": "latest",
+    "eslint": "^9.25.1",
+    "handlebars": "^4.7.8",
+    "typescript-eslint": "^8.31.0",
+    "@surfside/ads-core-client": "^0.1.0",
+    "@surfside/ads-core-mock": "^0.1.0",
+    "typescript": "^5.8.3"
+  }
+}

package/lib/types/debug/dist/index-7was9ptg.d.ts

@@ -1,2 +0,0 @@
-declare const _exports: any;
-export = _exports;