npm - @nebularstreams/overlay-sdk - Versions diffs - 1.0.0 - Mend

@nebularstreams/overlay-sdk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/templates/basic/broadcast/weather/index.html ADDED Viewed

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Broadcast Weather</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            color: #fff;
+            font-family: Inter, system-ui, sans-serif
+        }
+        .weather-card {
+            --accent: #53d8ff;
+            --panel: #102743;
+            position: absolute;
+            right: 4.5%;
+            bottom: 7%;
+            width: 61rem;
+            height: 18rem;
+            display: grid;
+            grid-template-columns: 21rem 1fr;
+            overflow: hidden;
+            border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
+            border-radius: 1.4rem;
+            background: linear-gradient(125deg,
+                color-mix(in srgb, var(--panel) 97%, #000),
+                color-mix(in srgb, var(--panel) 84%, #07101d));
+            box-shadow: 0 1.8rem 5rem #0009, inset 0 1px #fff1;
+            filter: drop-shadow(0 .3rem 1rem #0004)
+        }
+        .weather-card:before {
+            content: "";
+            position: absolute;
+            width: 25rem;
+            height: 25rem;
+            left: -8rem;
+            top: -14rem;
+            border-radius: 50%;
+            background: var(--accent);
+            opacity: .16;
+            filter: blur(1rem)
+        }
+        .current {
+            position: relative;
+            display: grid;
+            grid-template-columns: 8.2rem 1fr;
+            grid-template-rows: auto 1fr auto;
+            padding: 1.35rem 1.5rem;
+            border-right: 1px solid #fff1
+        }
+        .eyebrow {
+            grid-column: 1 / 3;
+            color: var(--accent);
+            font-size: .85rem;
+            font-weight: 950;
+            letter-spacing: .17em
+        }
+        .main-icon {
+            align-self: center;
+            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+            font-size: 7rem;
+            line-height: 1;
+            filter: drop-shadow(0 .8rem 1rem #0005)
+        }
+        .temperature-wrap {
+            align-self: center;
+            min-width: 0
+        }
+        .temperature {
+            font-size: 5rem;
+            font-weight: 950;
+            line-height: .95;
+            letter-spacing: -.08em
+        }
+        .unit {
+            margin-left: .12em;
+            color: var(--accent);
+            font-size: 1.55rem;
+            letter-spacing: 0;
+            vertical-align: top
+        }
+        .condition {
+            margin-top: .55rem;
+            overflow: hidden;
+            color: #eaf8ff;
+            font-size: 1.15rem;
+            font-weight: 800;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+        .location {
+            grid-column: 1 / 3;
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            gap: 1rem;
+            padding-top: .9rem;
+            border-top: 1px solid #fff1
+        }
+        .city {
+            overflow: hidden;
+            font-size: 1.65rem;
+            font-weight: 950;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+        .local-time {
+            color: #a8c7d7;
+            font-size: 1rem;
+            font-weight: 800;
+            white-space: nowrap
+        }
+        .detail-panel {
+            position: relative;
+            display: grid;
+            grid-template-rows: 1fr auto;
+            min-width: 0;
+            padding: 1.25rem 1.4rem 1.35rem
+        }
+        .forecast {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: .75rem
+        }
+        .forecast-day {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            grid-template-rows: auto 1fr;
+            min-width: 0;
+            padding: 1rem;
+            border: 1px solid #fff1;
+            border-radius: .9rem;
+            background: linear-gradient(145deg, #ffffff12, #ffffff05)
+        }
+        .day {
+            color: color-mix(in srgb, var(--accent) 84%, #fff);
+            font-size: .85rem;
+            font-weight: 950;
+            letter-spacing: .1em
+        }
+        .forecast-icon {
+            grid-row: 1 / 3;
+            grid-column: 2;
+            align-self: center;
+            padding-left: .25rem;
+            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+            font-size: 3.25rem;
+            line-height: 1
+        }
+        .temperatures {
+            align-self: end;
+            margin-top: .5rem;
+            font-size: 1.65rem;
+            font-weight: 950;
+            white-space: nowrap
+        }
+        .low {
+            margin-left: .35rem;
+            color: #829eae;
+            font-size: 1.1rem
+        }
+        .readings {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            margin-top: 1rem;
+            border-top: 1px solid #fff1
+        }
+        .reading {
+            padding: .85rem .8rem 0
+        }
+        .reading + .reading {
+            border-left: 1px solid #fff1
+        }
+        .reading span {
+            display: block;
+            color: #7899aa;
+            font-size: .7rem;
+            font-weight: 900;
+            letter-spacing: .1em
+        }
+        .reading strong {
+            display: block;
+            margin-top: .25rem;
+            overflow: hidden;
+            color: #f2fbff;
+            font-size: 1.15rem;
+            font-weight: 900;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+        .weather-card.refresh .main-icon {
+            animation: weather-pop .75s cubic-bezier(.2, .9, .25, 1)
+        }
+        .weather-card.refresh .temperature {
+            animation: temperature-pop .65s cubic-bezier(.2, .9, .25, 1)
+        }
+        @keyframes weather-pop {
+            0% { transform: translateY(.7rem) scale(.82); opacity: .5 }
+            55% { transform: translateY(-.35rem) scale(1.08); opacity: 1 }
+            100% { transform: translateY(0) scale(1); opacity: 1 }
+        }
+        @keyframes temperature-pop {
+            0% { transform: scale(.88); filter: brightness(1.8) }
+            60% { transform: scale(1.06); filter: brightness(1.25) }
+            100% { transform: scale(1); filter: brightness(1) }
+        }
+        @media (prefers-reduced-motion: reduce) {
+            .weather-card.refresh .main-icon,
+            .weather-card.refresh .temperature {
+                animation: none
+            }
+        }
+    </style>
+</head>
+<body>
+<section class="weather-card" id="card">
+    <div class="current">
+        <div class="eyebrow" id="eyebrow">LIVE WEATHER</div>
+        <div class="main-icon" id="mainIcon">🌤️</div>
+        <div class="temperature-wrap">
+            <div class="temperature"><span id="temperature">23</span><span class="unit" id="unit">°C</span></div>
+            <div class="condition" id="condition">Bright intervals</div>
+        </div>
+        <div class="location">
+            <strong class="city" id="city">Barcelona</strong>
+            <span class="local-time" id="localTime">08:45</span>
+        </div>
+    </div>
+    <div class="detail-panel">
+        <div class="forecast" id="forecast"></div>
+        <div class="readings">
+            <div class="reading"><span>FEELS LIKE</span><strong id="feelsLike">24°C</strong></div>
+            <div class="reading"><span>WIND</span><strong id="wind">SE 12 km/h</strong></div>
+            <div class="reading"><span>HUMIDITY</span><strong id="humidity">68%</strong></div>
+        </div>
+    </div>
+</section>
+<script>
+    const dom = {
+        card: document.getElementById("card"),
+        eyebrow: document.getElementById("eyebrow"),
+        mainIcon: document.getElementById("mainIcon"),
+        temperature: document.getElementById("temperature"),
+        unit: document.getElementById("unit"),
+        condition: document.getElementById("condition"),
+        city: document.getElementById("city"),
+        localTime: document.getElementById("localTime"),
+        forecast: document.getElementById("forecast"),
+        feelsLike: document.getElementById("feelsLike"),
+        wind: document.getElementById("wind"),
+        humidity: document.getElementById("humidity")
+    };
+    let unit = "°C";
+    let feelsLike = 24;
+    let refreshTimer;
+    let forecast = [
+        {day: "TODAY", icon: "🌤️", high: 25, low: 18},
+        {day: "TUE", icon: "🌧️", high: 21, low: 16},
+        {day: "WED", icon: "☀️", high: 27, low: 19}
+    ];
+    function temperatureText(value) {
+        return `${value ?? "—"}°`;
+    }
+    function renderForecast() {
+        dom.forecast.replaceChildren(...forecast.slice(0, 3).map(item => {
+            const tile = document.createElement("div");
+            tile.className = "forecast-day";
+            const day = document.createElement("div");
+            day.className = "day";
+            day.textContent = item.day ?? "—";
+            const icon = document.createElement("div");
+            icon.className = "forecast-icon";
+            icon.textContent = item.icon ?? "☁️";
+            const temperatures = document.createElement("div");
+            temperatures.className = "temperatures";
+            temperatures.textContent = temperatureText(item.high);
+            const low = document.createElement("span");
+            low.className = "low";
+            low.textContent = temperatureText(item.low);
+            temperatures.append(low);
+            tile.append(day, icon, temperatures);
+            return tile
+        }))
+    }
+    function refresh() {
+        clearTimeout(refreshTimer);
+        dom.card.classList.remove("refresh");
+        void dom.card.offsetWidth;
+        dom.card.classList.add("refresh");
+        refreshTimer = setTimeout(() => dom.card.classList.remove("refresh"), 800)
+    }
+    function renderUnitValues() {
+        dom.unit.textContent = unit;
+        dom.feelsLike.textContent = `${feelsLike}${unit}`
+    }
+    window.addEventListener("nebular-overlay:update", ({detail = {}}) => {
+        let currentChanged = false;
+        if (detail.content?.eyebrow != null) dom.eyebrow.textContent = detail.content.eyebrow;
+        if (detail.location?.city != null) dom.city.textContent = detail.location.city;
+        if (detail.location?.time != null) dom.localTime.textContent = detail.location.time;
+        if (detail.weather?.icon != null) {
+            dom.mainIcon.textContent = detail.weather.icon;
+            currentChanged = true
+        }
+        if (detail.weather?.condition != null) {
+            dom.condition.textContent = detail.weather.condition;
+            currentChanged = true
+        }
+        if (detail.weather?.temperature != null) {
+            dom.temperature.textContent = detail.weather.temperature;
+            currentChanged = true
+        }
+        if (detail.weather?.unit != null) unit = detail.weather.unit;
+        if (detail.weather?.feelsLike != null) feelsLike = detail.weather.feelsLike;
+        if (detail.weather?.wind != null) dom.wind.textContent = detail.weather.wind;
+        if (detail.weather?.humidity != null) dom.humidity.textContent = `${detail.weather.humidity}%`;
+        if (detail.weather?.unit != null || detail.weather?.feelsLike != null) renderUnitValues();
+        if (Array.isArray(detail.forecast)) {
+            forecast = detail.forecast;
+            renderForecast()
+        }
+        if (detail.style?.accent != null) dom.card.style.setProperty("--accent", detail.style.accent);
+        if (detail.style?.panel != null) dom.card.style.setProperty("--panel", detail.style.panel);
+        if (currentChanged) refresh()
+    });
+    renderForecast();
+    renderUnitValues();
+</script>
+</body>
+</html>

package/templates/basic/broadcast/weather/manifest.json ADDED Viewed

@@ -0,0 +1,104 @@
+{
+  "instructions": "Set the location, units, colours and forecast before going live. During the broadcast, update the current conditions and forecast values, then press Update. Use short condition and wind descriptions so the card remains easy to read on television.",
+  "meta": {
+    "content/eyebrow": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Label", "hint": "Enter short label",
+      "default": "LIVE WEATHER"
+    },
+    "location/city": {
+      "type": "string",
+      "phase": "play",
+      "label": "Location", "hint": "Enter location",
+      "default": "Barcelona"
+    },
+    "location/time": {
+      "type": "string",
+      "phase": "play",
+      "label": "Local time", "hint": "e.g. 08:45",
+      "default": "08:45"
+    },
+    "weather/icon": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Conditions icon", "hint": "Icon representing the current weather conditions",
+      "choose": ["☀️", "🌤️", "⛅", "☁️", "🌧️", "⛈️", "🌨️", "🌫️", "🌬️"],
+      "default": "🌤️"
+    },
+    "weather/condition": {
+      "type": "string",
+      "phase": "play",
+      "label": "Conditions", "hint": "e.g. Bright intervals",
+      "default": "Bright intervals"
+    },
+    "weather/temperature": {
+      "type": "number",
+      "phase": "play",
+      "label": "Temperature", "hint": "e.g. 23",
+      "default": 23
+    },
+    "weather/unit": {
+      "type": "choose",
+      "phase": "edit",
+      "label": "Temperature unit", "hint": "Unit used for every temperature in the graphic",
+      "choose": ["°C", "°F"],
+      "default": "°C"
+    },
+    "weather/feelsLike": {
+      "type": "number",
+      "phase": "play",
+      "label": "Feels like", "hint": "e.g. 24",
+      "default": 24
+    },
+    "weather/wind": {
+      "type": "string",
+      "phase": "play",
+      "label": "Wind", "hint": "e.g. SE 12 km/h",
+      "default": "SE 12 km/h"
+    },
+    "weather/humidity": {
+      "type": "number",
+      "phase": "play",
+      "label": "Humidity", "hint": "0–100",
+      "min": 0,
+      "max": 100,
+      "default": 68
+    },
+    "forecast": {
+      "type": "set",
+      "phase": "play",
+      "container": "big",
+      "label": "Forecast", "hint": "Forecast periods displayed alongside current conditions",
+      "max": 3,
+      "default": [
+        {"day": "TODAY", "icon": "🌤️", "high": 25, "low": 18},
+        {"day": "TUE", "icon": "🌧️", "high": 21, "low": 16},
+        {"day": "WED", "icon": "☀️", "high": 27, "low": 19}
+      ],
+      "meta": {
+        "day": {"type": "string", "label": "Day", "hint": "e.g. TODAY"},
+        "icon": {
+          "type": "choose",
+          "label": "Icon",
+          "hint": "Icon representing the forecast conditions",
+          "choose": ["☀️", "🌤️", "⛅", "☁️", "🌧️", "⛈️", "🌨️", "🌫️", "🌬️"]
+        },
+        "high": {"type": "number", "label": "High", "hint": "Enter temperature"},
+        "low": {"type": "number", "label": "Low", "hint": "Enter temperature"}
+      }
+    },
+    "style/accent": {
+      "type": "color",
+      "phase": "edit",
+      "label": "Accent", "hint": "Accent colour used for weather highlights",
+      "default": "#53d8ff"
+    },
+    "style/panel": {
+      "type": "color",
+      "phase": "edit",
+      "label": "Panel colour", "hint": "Background colour of the weather panel",
+      "default": "#102743"
+    }
+  }
+}

package/templates/basic/engagement/call-to-action/index.html ADDED Viewed

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Viewer Call to Action</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            color: #fff;
+            font-family: Inter, system-ui, sans-serif
+        }
+        .card {
+            position: absolute;
+            right: 5%;
+            bottom: 8%;
+            width: 48rem;
+            padding: 2rem 2.3rem;
+            background: linear-gradient(135deg, #111826f5, #070b13f5);
+            border: 1px solid #ffffff29;
+            border-radius: 1rem;
+            box-shadow: 0 1.2rem 3rem #0006
+        }
+        .eyebrow {
+            color: #ffad3d;
+            font-size: 1.5rem;
+            font-weight: 850;
+            letter-spacing: .16em;
+            text-transform: uppercase
+        }
+        .title {
+            margin-top: .6rem;
+            font-size: 3rem;
+            font-weight: 900
+        }
+        .subtitle {
+            margin-top: .55rem;
+            color: #c8d0dc;
+            font-size: 1.8rem;
+            line-height: 1.35
+        }
+        .progress {
+            margin-top: 1rem;
+            height: 1rem;
+            overflow: hidden;
+            background: #ffffff1f;
+            border-radius: 1rem
+        }
+        .progress span {
+            display: block;
+            width: 72%;
+            height: 100%;
+            background: linear-gradient(90deg, #ff9818, #ffd052);
+            transition: width .4s ease
+        }
+        .footer {
+            display: flex;
+            justify-content: space-between;
+            margin-top: .9rem;
+            font-size: 1.6rem;
+            font-weight: 750
+        }
+        .count {
+            color: #ffc45f
+        }
+    </style>
+</head>
+<body>
+<section class="card">
+    <div class="eyebrow" id="eyebrow">Viewer goal</div>
+    <div class="title" id="title">Help us reach 10,000 followers</div>
+    <div class="subtitle" id="subtitle">Follow the channel and join the Nebular community.</div>
+    <div class="progress"><span id="progress"></span></div>
+    <div class="footer"><span id="action">FOLLOW NOW</span><span class="count" id="count">7,240 / 10,000</span></div>
+</section>
+<script>
+	const $ = id => document.getElementById(id);
+	const progressState = {current: 7240, target: 10000};
+	function renderProgress() {
+		const current = Math.max(0, Number(progressState.current) || 0),
+			target = Math.max(1, Number(progressState.target) || 1);
+		$("progress").style.width = `${Math.min(100, current / target * 100)}%`;
+		$("count").textContent = `${current.toLocaleString()} / ${target.toLocaleString()}`
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.content?.eyebrow != null) $("eyebrow").textContent = detail.content.eyebrow;
+		if (detail.content?.title != null) $("title").textContent = detail.content.title;
+		if (detail.content?.subtitle != null) $("subtitle").textContent = detail.content.subtitle;
+		if (detail.content?.action != null) $("action").textContent = detail.content.action;
+		if (detail.goal?.current != null) progressState.current = detail.goal.current;
+		if (detail.goal?.target != null) progressState.target = detail.goal.target;
+		if (detail.goal?.current != null || detail.goal?.target != null) renderProgress();
+	});
+</script>
+</body>
+</html>

package/templates/basic/engagement/call-to-action/manifest.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "instructions": "Configure the campaign message and call to action, then set the current and target values to update the progress indicator. Press Update whenever the campaign copy or progress changes.",
+  "meta": {
+    "content/eyebrow": {"type": "string", "phase": "edit", "label": "Eyebrow", "hint": "Enter short label", "default": "VIEWER GOAL"},
+    "content/title": {"type": "string", "phase": "edit", "label": "Title", "hint": "Enter title", "default": "Help us reach 10,000 followers"},
+    "content/subtitle": {"type": "string", "phase": "edit", "label": "Description", "hint": "Enter description", "default": "Follow the channel and join the Nebular community."},
+    "content/action": {"type": "string", "phase": "edit", "label": "Action", "hint": "e.g. FOLLOW NOW", "default": "FOLLOW NOW"},
+    "goal/playTarget": {"type": "number", "phase": "play", "label": "Target", "hint": "Goal currently used by the live progress display", "source": "goal/target", "readonly": true},
+    "goal/current": {"type": "number", "phase": "play", "label": "Current", "hint": "Enter current value", "min": 0, "default": 7240},
+    "goal/target": {"type": "number", "phase": "edit", "label": "Target", "hint": "Enter target", "min": 1, "default": 10000}
+  }
+}