@surfside/ads-core-web 0.1.0 → 0.1.1

package/lib/cjs/rendering/ProductCard.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingTrackersError = exports.RenderProductCard = void 0;
+const ads_core_client_1 = require("@surfside/ads-core-client");
+const Framework_1 = require("./Framework");
+const Trackers_1 = require("../helpers/Trackers");
+const RenderProductCard = (logger, stylesheet, javascriptCallbacks, evaluateProductCardTemplate, productCard) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('RenderProductCard');
+    log?.info('Rendering product card');
+    log?.debug(productCard);
+    const container = document.createElement('div');
+    log?.info('product card container', container);
+    const shadow = container.attachShadow({ mode: 'open' });
+    const productCardHtml = evaluateProductCardTemplate(productCard.product, productCard.clickthrough);
+    if (!productCardHtml.ok) {
+        return productCardHtml;
+    }
+    logger?.info('productCardHtml', productCardHtml);
+    const productCardDomRes = (0, Framework_1.Template)(log, 'surf-product-card', productCardHtml.value, style + '\n' + stylesheet, {
+        callbacks: javascriptCallbacks,
+        product: productCard.product
+    });
+    if (!productCardDomRes.ok) {
+        return productCardDomRes;
+    }
+    if (productCard.sponsored) {
+        productCardDomRes.value.classList.add('sponsored');
+    }
+    else {
+        log?.debug('Recommended', productCard);
+    }
+    productCardDomRes.value.style.display = 'flex';
+    log?.debug('Product Card Rendered');
+    shadow.appendChild(productCardDomRes.value);
+    attachClickthroughNotifiers(log, productCardDomRes.value, productCard.clickthrough);
+    if (productCard.trackers !== undefined) {
+        appendTrackers(log, productCardDomRes.value, productCard.trackers);
+    }
+    else if (productCard.sponsored) {
+        return (0, ads_core_client_1.Err)(new MissingTrackersError(productCard));
+    }
+    container.productData = productCard;
+    return (0, ads_core_client_1.Ok)(container);
+};
+exports.RenderProductCard = RenderProductCard;
+const attachClickthroughNotifiers = (logger, root, clickthrough) => root.querySelectorAll('[_click]').forEach(e => e.addEventListener('click', callClickthroughNotifier(logger)(clickthrough)));
+const callClickthroughNotifier = (logger) => (clickthrough) => () => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('callClickthroughNotifier');
+    fetch(clickthrough)
+        .then(() => log?.debug('Called clickthrough notification'))
+        .catch(() => log?.debug('Called clickthrough handler, but got an error code. This is not ' +
+        'necessarily a problem, the clickthrough probably fired correctly.'));
+};
+const appendTrackers = (logger, root, trackers) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('appendTrackers');
+    log?.info('Appending trackers', trackers);
+    log?.debug('Appending win tracker', trackers.win);
+    root.appendChild((0, Trackers_1.PixelTracker)(trackers.win));
+    log?.debug('Appending impression trackers', trackers.imp);
+    trackers.imp
+        .map(Trackers_1.PixelTracker)
+        .forEach(tracker => root.appendChild(tracker));
+    // Other javascript trackers
+    log?.debug('Appending other js trackers', trackers.others);
+    trackers.others.filter(t => t.type === ads_core_client_1.EventTrackingMethods.JS)
+        .map(t => t.url)
+        .map(Trackers_1.ScriptTracker)
+        .forEach(tracker => root.appendChild(tracker));
+    // Other pixel trackers
+    log?.debug('Appending other pixel trackers', trackers.others);
+    trackers.others.filter(t => t.type === ads_core_client_1.EventTrackingMethods.Img)
+        .map(t => t.url)
+        .map(Trackers_1.PixelTracker)
+        .forEach(tracker => root.appendChild(tracker));
+};
+class MissingTrackersError extends Error {
+    productCardResponse;
+    constructor(productCardResponse) {
+        super('Sponsored product card response is missing trackers - cannot render card as it would ' +
+            'result in uncounted impressions');
+        this.productCardResponse = productCardResponse;
+    }
+}
+exports.MissingTrackersError = MissingTrackersError;
+;
+const style = `.surf-product-card {
+    width: 100%;
+
+    &.sponsored {
+        position: relative;
+
+        &::after {
+            content: 'Sponsored';
+            position: absolute;
+            font-family: Verdana, Helvetica, 'sans-serif';
+            font-weight: 100;
+            color: rgba(0, 0, 0, 0.6);
+            font-size: 12px;
+            box-sizing: border-box;
+            bottom: -24px;
+            width: 100%;
+            text-align: center;
+        }
+    }
+}`;
+//# sourceMappingURL=ProductCard.js.map

package/lib/cjs/rendering/ProductCard.js.map

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

package/lib/cjs/rendering/Video.js

@@ -0,0 +1,299 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderVideo = void 0;
+const ads_core_client_1 = require("@surfside/ads-core-client");
+const Framework_1 = require("./Framework");
+;
+;
+const RenderVideo = (logger, deviceInfo, geo, userAgent, builtVideo) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('RenderVideo');
+    log?.info('Rendering video');
+    log?.debug(builtVideo);
+    const videoContainer = document.createElement('div');
+    const shadow = videoContainer.attachShadow({ mode: 'open' });
+    const creativeContainerResult = (0, Framework_1.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 = (0, Framework_1.QuerySelectorResult)(creativeContainer, '#surf-video-container');
+    if (!video.ok) {
+        log?.error('Failed to find video player element', builtVideo, creativeContainer);
+        return video;
+    }
+    const linearRes = (0, ads_core_client_1.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 = (0, Framework_1.QuerySelectorResult)(videoContainer, '#surf-video-container');
+    if (!surfVideoContainerRes.ok) {
+        return surfVideoContainerRes;
+    }
+    surfVideoContainerRes.value.addEventListener('loadeddata', () => loadInteractiveElements(logger, deviceInfo, geo, userAgent, videoContainer, linear));
+    return (0, ads_core_client_1.Ok)(videoContainer);
+};
+exports.RenderVideo = RenderVideo;
+const loadInteractiveElements = (logger, deviceInfo, geo, userAgent, element, linear) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('loadInteractiveElements');
+    log?.info('Video loaded. Adding interactive elements to the video player');
+    const videoElementRes = (0, Framework_1.QuerySelectorResult)(element, '#surf-video-container');
+    if (!videoElementRes.ok) {
+        return videoElementRes;
+    }
+    const videoElement = videoElementRes.value;
+    const duration = videoElement.duration;
+    const timerValueRes = (0, Framework_1.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 = (0, Framework_1.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 = (0, Framework_1.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 (0, ads_core_client_1.Ok)(true);
+};
+const initializeTrackers = (logger, trackers) => {
+    const log = (0, ads_core_client_1.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 (0, ads_core_client_1.Ok)(videoTrackers);
+};
+const fireTracker = (logger, deviceInfo, geo, userAgent, trackers, trackerName) => {
+    const log = (0, ads_core_client_1.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 = (0, ads_core_client_1.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/cjs/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/cjs/rendering/Watermark.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderWatermark = void 0;
+const ads_core_1 = require("@surfside/ads-core");
+const RenderWatermark = (logger) => {
+    const log = (0, ads_core_1.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 (0, ads_core_1.Ok)(wrapper);
+};
+exports.RenderWatermark = RenderWatermark;
+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/cjs/rendering/Watermark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Watermark.js","sourceRoot":"src/","sources":["rendering/Watermark.ts"],"names":[],"mappings":";;;AAAA,iDAAwE;AAEjE,MAAM,eAAe,GAAG,CAAC,MAA2B,EAAuB,EAAE;IAChF,MAAM,GAAG,GAAG,IAAA,cAAG,EAAC,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,IAAA,aAAE,EAAC,OAAO,CAAC,CAAC;AACvB,CAAC,CAAC;AAxBW,QAAA,eAAe,mBAwB1B;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBb,CAAC"}

package/lib/cjs/rendering/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Banner"), exports);
+__exportStar(require("./Carousel"), exports);
+__exportStar(require("./Framework"), exports);
+__exportStar(require("./ProductCard"), exports);
+__exportStar(require("./Video"), exports);
+__exportStar(require("./Watermark"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["rendering/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,6CAA2B;AAC3B,8CAA4B;AAC5B,gDAA8B;AAC9B,0CAAwB;AACxB,8CAA4B"}

package/lib/esm/debug/carousel.js

@@ -0,0 +1,72 @@
+import { AsyncPipe, GetValueOrThrow, InitLogger, WrapValue } from '@surfside/ads-core-client';
+import { InitSurfAdsWebInternal } from '..';
+import { InitSurfAdsCoreMock } from '@surfside/ads-core-mock';
+await (async () => {
+    const { buildHybridCarousel, startRequest, defaultNative, buildBannerResponse, requestBids, renderCarousel, renderBanner, buildVideoResponse, renderVideo } = GetValueOrThrow(await InitSurfAdsWebInternal(InitSurfAdsCoreMock('ec981', // Account ID
+    '544fa', // Channel ID
+    'bf9bc', // Site ID
+    'greengoddess', // Location ID
+    undefined, InitLogger())));
+    /* ===== Carousel ===== */
+    /* Make request, build response */
+    const carouselRes = await buildHybridCarousel({
+        type: 'top-products',
+    }, startRequest('my-zone') // Zone ID
+        .withNative(defaultNative()
+        .withMetaProduct()
+        .build())
+        .build());
+    if (!carouselRes.ok) {
+        console.error(carouselRes.error);
+        return;
+    }
+    const carousel = carouselRes.value;
+    /* Render carousel */
+    const rendered = GetValueOrThrow(await renderCarousel(carousel, 300, {
+        type: 'infinite'
+    }, 'page'));
+    /* Add to page */
+    document.querySelector('.carousel-container').appendChild(rendered.element);
+    const success = await rendered.init();
+    if (!success.ok) {
+        throw success.error;
+    }
+    /* ===== Banner ===== */
+    const bidRes = await requestBids(startRequest('banner-zone')
+        .withBanner(4, 1)
+        .build());
+    if (!bidRes.ok) {
+        console.error('No banners');
+        return;
+    }
+    const bid = bidRes.value.seatbid?.[0]?.bid?.[0];
+    if (bid === undefined) {
+        console.log('no bids');
+        return;
+    }
+    const banner = renderBanner(GetValueOrThrow(buildBannerResponse(bid)));
+    if (!banner.ok) {
+        throw banner.error;
+    }
+    document.querySelector('.banner-container')?.appendChild(banner.value);
+    const video = await AsyncPipe(requestBids(startRequest('video-zone')
+        .withVideo(320, 240, 0, 30)
+        .build()))
+        .then(resp => WrapValue(resp.seatbid?.[0]?.bid?.[0]))
+        .then(buildVideoResponse)
+        .then(renderVideo)
+        .result();
+    if (!video.ok) {
+        console.error('Video failed!');
+        throw video.error;
+    }
+    document.querySelector('.video-container')?.appendChild(video.value);
+    /* Dynamic Zones */
+    // const dynamicZone = GetValueOrThrow(await getDynamicZone('my-zone'));
+    // const dynamicZoneRequest = GetValueOrThrow(buildDynamicZoneRequest('my-zone', dynamicZone));
+    // const dynamicResponse = GetValueOrThrow(await buildDynamicResponse(dynamicZoneRequest));
+    // const htmlElement = buildDynamicCreative(dynamicResponse);
+    // const htmlElement = await getDynamicCreative('my-zone');
+    // console.log(dynamicResponse);
+})();
+//# sourceMappingURL=carousel.js.map

package/lib/esm/debug/carousel.js.map

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

package/lib/esm/helpers/Dom.js

@@ -0,0 +1,43 @@
+import { Err, GetValue, Ok } from '@surfside/ads-core-client';
+export const GetAttribute = (element, attributeName) => {
+    const attribute = element.getAttribute(attributeName);
+    if (attribute === null) {
+        return Err(new MissingAttributeError(element, attributeName));
+    }
+    return Ok(attribute);
+};
+export const GetAttributeOr = (element, attributeName, or) => GetValue(GetAttribute(element, attributeName)) ?? or;
+export const GetNumberAttribute = (element, attributeName) => {
+    const attribute = GetAttribute(element, attributeName);
+    if (!attribute.ok) {
+        return attribute;
+    }
+    const num = Number(attribute.value);
+    if (Number.isNaN(num)) {
+        return Err(new NotANumberError(element, attributeName, attribute.value));
+    }
+    return Ok(num);
+};
+export const GetNumberAttributeOr = (element, attributeName, or) => GetValue(GetNumberAttribute(element, attributeName)) ?? or;
+export class MissingAttributeError extends Error {
+    element;
+    attributeName;
+    constructor(element, attributeName) {
+        super(`Failed to get attribute ${attributeName} on element ${element.tagName}`);
+        this.element = element;
+        this.attributeName = attributeName;
+    }
+}
+export class NotANumberError extends Error {
+    element;
+    attributeName;
+    value;
+    constructor(element, attributeName, value) {
+        super(`Attribute ${attributeName} on element ${element.tagName} was NaN. Value was '${value}'`);
+        this.element = element;
+        this.attributeName = attributeName;
+        this.value = value;
+    }
+}
+;
+//# sourceMappingURL=Dom.js.map

package/lib/esm/helpers/Dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dom.js","sourceRoot":"src/","sources":["helpers/Dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAe,MAAM,2BAA2B,CAAC;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAE,aAAqB,EAAkB,EAAE;IACpF,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,GAAG,CAAC,IAAI,qBAAqB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,aAAqB,EAAE,EAAU,EAAU,EAAE,CAC1F,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,CAAC;AAEzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAgB,EAAE,aAAqB,EAAkB,EAAE;IAC1F,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACvD,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;QAChB,OAAO,SAAS,CAAC;IACrB,CAAC;IACD,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACpC,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;QACpB,OAAO,GAAG,CAAC,IAAI,eAAe,CAAC,OAAO,EAAE,aAAa,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAE,aAAqB,EAAE,EAAU,EAAU,EAAE,CAChG,QAAQ,CAAC,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,CAAC;AAE/D,MAAM,OAAO,qBAAsB,SAAQ,KAAK;IAChB;IAAkC;IAA9D,YAA4B,OAAgB,EAAkB,aAAqB;QAC/E,KAAK,CAAC,2BAA2B,aAAa,eAAe,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QADxD,YAAO,GAAP,OAAO,CAAS;QAAkB,kBAAa,GAAb,aAAa,CAAQ;IAEnF,CAAC;CACJ;AAED,MAAM,OAAO,eAAgB,SAAQ,KAAK;IAElB;IACA;IACA;IAHpB,YACoB,OAAgB,EAChB,aAAqB,EACrB,KAAa;QAE7B,KAAK,CAAC,aAAa,aAAa,eAAe,OAAO,CAAC,OAAO,wBAAwB,KAAK,GAAG,CAAC,CAAC;QAJhF,YAAO,GAAP,OAAO,CAAS;QAChB,kBAAa,GAAb,aAAa,CAAQ;QACrB,UAAK,GAAL,KAAK,CAAQ;IAGjC,CAAC;CACJ;AAAA,CAAC"}