@surfside/ads-core-web 0.2.0 → 0.3.0-c5bdf731.0

package/README.md

@@ -1,15 +1,15 @@
-# @surfside/ads-core-web
-
-To install dependencies:
-
-```bash
-bun install
-```
-
-To run:
-
-```bash
-bun run src/index.ts
-```
-
-This project was created using `bun init` in bun v1.2.10. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+# @surfside/ads-core-web
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.ts
+```
+
+This project was created using `bun init` in bun v1.2.10. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/lib/cjs/BuildInfo.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VersionInfo = void 0;
 exports.VersionInfo = {
-    'buildBranch': 'master',
-    'buildHash': '70fb1c8',
-    'buildVer': '0.2.0'
+    'buildBranch': 'HEAD',
+    'buildHash': 'c5bdf73',
+    'buildVer': '0.3.0-c5bdf731.0'
 };
 //# sourceMappingURL=BuildInfo.js.map

package/lib/cjs/BuildInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuildInfo.js","sourceRoot":"../@surfside-ads-core-web/","sources":["BuildInfo.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG;IACvB,aAAa,EAAE,QAAQ;IACvB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,OAAO;CACtB,CAAC"}
+{"version":3,"file":"BuildInfo.js","sourceRoot":"../@surfside-ads-core-web/","sources":["BuildInfo.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG;IACvB,aAAa,EAAE,MAAM;IACrB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,kBAAkB;CACjC,CAAC"}

package/lib/cjs/rendering/Banner.js

@@ -64,34 +64,34 @@ class MissingNurlError extends Error {
 }
 exports.MissingNurlError = MissingNurlError;
 ;
-const template = `<div>
-    <div class="surfside-banner-adm">
-
-    </div>
-    <div class="surfside-banner-watermark">
-
-    </div>
-</div>
+const template = `<div>
+    <div class="surfside-banner-adm">
+
+    </div>
+    <div class="surfside-banner-watermark">
+
+    </div>
+</div>
 `;
-const style = `.surfside-banner {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    max-width: 100%;
-    height: auto;
-    width: 100%;
-}
-
-.surfside-banner-adm {
-    display: flex;
-
-    a {
-        width: 100%;
-
-        img {
-            width: 100%;
-            height: auto;
-        }
-    }
+const style = `.surfside-banner {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+    width: 100%;
+}
+
+.surfside-banner-adm {
+    display: flex;
+
+    a {
+        width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
 }`;
 //# sourceMappingURL=Banner.js.map

package/lib/cjs/rendering/Carousel.js

@@ -365,127 +365,127 @@ class EmptyFirstPageError extends Error {
 }
 exports.EmptyFirstPageError = EmptyFirstPageError;
 ;
-const template = `<div class="carousel-wrapper surf-v3">
-    <div class="sponsored-carousel"></div>
-    <div class="surf-carousel">
-        <div class="items"></div>
-        <div class="arrows">
-            <div class="arrow left"></div>
-            <div class="arrow right"></div>
-        </div>
-    </div>
+const template = `<div class="carousel-wrapper surf-v3">
+    <div class="sponsored-carousel"></div>
+    <div class="surf-carousel">
+        <div class="items"></div>
+        <div class="arrows">
+            <div class="arrow left"></div>
+            <div class="arrow right"></div>
+        </div>
+    </div>
 </div>`;
-const style = `
-.surf-carousel {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    flex-grow: 1;
-
-    .sponsored-carousel {
-        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
-        margin: 10px 0;
-        font-size: 24px;
-
-        &::before {
-            content: 'For you';
-        }
-
-        &.sponsoredByOne::before {
-            content: 'Sponsored by ';
-        }
-
-        &.recommended::before {
-            content: 'Recommended';
-        }
-
-        &.sponsoredByMany::before {
-            content: 'Sponsored';
-        }
-    }
-
-    .carousel-wrapper {
-        width: 100%;
-        overflow-x: clip;
-        position: relative;
-    }
-
-    .items {
-        z-index: 1;
-        display: flex;
-        flex-direction: row;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        padding: 0 37px;
-        box-sizing: border-box;
-        transition: transform 0.4s ease-out, margin-left 0.3s ease;
-        width: 100%;
-
-        .surf-product-card {
-            flex: 1;
-            display: flex;
-            padding: 5px;
-            box-sizing: border-box;
-        }
-    }
-
-    
-}
-
-.arrows {
-
-    .arrow {
-        z-index: 2;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.5);
-        margin: 0 1rem;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50%;
-        cursor: pointer;
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
-                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.6);
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-            filter: grayscale(100%);
-            opacity: 0.2;
-        }
-
-        &.left {
-            left: -10px;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/left-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-        }
-
-        &.right {
-            right: 0;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/right-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-
-        }
-    }
+const style = `
+.surf-carousel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-grow: 1;
+
+    .sponsored-carousel {
+        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
+        margin: 10px 0;
+        font-size: 24px;
+
+        &::before {
+            content: 'For you';
+        }
+
+        &.sponsoredByOne::before {
+            content: 'Sponsored by ';
+        }
+
+        &.recommended::before {
+            content: 'Recommended';
+        }
+
+        &.sponsoredByMany::before {
+            content: 'Sponsored';
+        }
+    }
+
+    .carousel-wrapper {
+        width: 100%;
+        overflow-x: clip;
+        position: relative;
+    }
+
+    .items {
+        z-index: 1;
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        padding: 0 37px;
+        box-sizing: border-box;
+        transition: transform 0.4s ease-out, margin-left 0.3s ease;
+        width: 100%;
+
+        .surf-product-card {
+            flex: 1;
+            display: flex;
+            padding: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    
+}
+
+.arrows {
+
+    .arrow {
+        z-index: 2;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.5);
+        margin: 0 1rem;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
+                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            filter: grayscale(100%);
+            opacity: 0.2;
+        }
+
+        &.left {
+            left: -10px;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/left-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/right-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+
+        }
+    }
 }`;
 //# sourceMappingURL=Carousel.js.map

package/lib/cjs/rendering/ProductCard.js

@@ -113,26 +113,26 @@ class MissingTrackersError extends Error {
 }
 exports.MissingTrackersError = MissingTrackersError;
 ;
-const style = `.surf-product-card {
-    width: 100%;
-
-    &::after {
-        content: ' ';
-        min-height: 1rem;
-        font-family: Verdana, Helvetica, 'sans-serif';
-        font-weight: 100;
-        color: #e0e0e0;
-        font-size: 12px;
-        box-sizing: border-box;
-        width: 100%;
-        text-align: center;
-    }
-
-    &.sponsored {
-
-        &::after {
-            content: 'Sponsored';
-        }
-    }
+const style = `.surf-product-card {
+    width: 100%;
+
+    &::after {
+        content: ' ';
+        min-height: 1rem;
+        font-family: Verdana, Helvetica, 'sans-serif';
+        font-weight: 100;
+        color: #e0e0e0;
+        font-size: 12px;
+        box-sizing: border-box;
+        width: 100%;
+        text-align: center;
+    }
+
+    &.sponsored {
+
+        &::after {
+            content: 'Sponsored';
+        }
+    }
 }`;
 //# sourceMappingURL=ProductCard.js.map

package/lib/cjs/rendering/Video.js

@@ -72,7 +72,7 @@ const loadInteractiveElements = (logger, deviceInfo, geo, userAgent, element, li
     }
     const trackers = trackersRes.value;
     videoElement.onplay = () => fireTracker(log, deviceInfo, geo, userAgent, trackers, 'start');
-    videoElement.onended = () => fireTracker(log, deviceInfo, geo, userAgent, trackers, 'complete');
+    videoElement.addEventListener('ended', () => fireTracker(log, deviceInfo, geo, userAgent, trackers, 'complete'));
     videoElement.ontimeupdate = async () => {
         const currentTime = Math.floor(videoElement.currentTime);
         timerValue.innerHTML = String(currentTime);
@@ -185,127 +185,127 @@ const toggleMute = (logger, videoElement, e) => {
         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>
+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('//cdn.surfside.io/icons/muted.svg');
-    --icon-unmuted: url('//cdn.surfside.io/icons/unmuted.svg');
-
-    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);
-            }
-        }
-    }
+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('//cdn.surfside.io/icons/muted.svg');
+    --icon-unmuted: url('//cdn.surfside.io/icons/unmuted.svg');
+
+    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