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/event-countdown/index.html ADDED Viewed

@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Event Countdown</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            font-family: Inter, Arial, Helvetica, sans-serif;
+        }
+        .countdown-card {
+            --panel: #fff;
+            --ink: #090909;
+            position: absolute;
+            top: 4.5%;
+            right: 4.5%;
+            filter: drop-shadow(0 1rem 2.25rem #0007);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .clock {
+            display: flex;
+            color: var(--ink);
+            overflow: hidden;
+            font-size: 3rem;
+            font-weight: bold;
+            line-height: 3rem;
+        }
+        .clock span {
+            background: var(--panel);
+            margin: 0 0.1rem;
+            padding: 0 0.1rem;
+        }
+        .time {
+            min-width: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            white-space: nowrap
+        }
+        .days-label {
+            background: var(--panel);
+            font-variant: all-petite-caps;
+        }
+        .logo-frame {
+            width: 100%;
+            min-height: 9rem;
+            max-height: 22rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            background: transparent
+        }
+        .logo {
+            display: block;
+            width: 100%;
+            height: auto;
+            max-height: 22rem;
+            object-fit: contain;
+            object-position: center top;
+            margin-top: -2rem;
+        }
+        .logo-missing {
+            display: none;
+            width: 100%;
+            padding: 2.5rem 1rem;
+            color: #fff;
+            background: #111d;
+            text-align: center;
+            font-size: 2rem;
+            font-weight: 850;
+            letter-spacing: .08em;
+            text-transform: uppercase
+        }
+    </style>
+</head>
+<body>
+<main class="countdown-card" id="card">
+    <section class="clock" aria-label="Event countdown">
+        <div class="days-number" id="days">00</div>
+        <div class="days-label" id="daysLabel">D</div>
+        <div class="time" id="time">00:00:00</div>
+    </section>
+    <div class="logo-frame">
+        <img class="logo" id="logo" src="logo.png" alt="Event logo">
+        <div class="logo-missing" id="logoMissing">logo.png</div>
+    </div>
+</main>
+<script>
+	const card = document.getElementById("card");
+	const days = document.getElementById("days");
+	const daysLabel = document.getElementById("daysLabel");
+	const time = document.getElementById("time");
+	const logo = document.getElementById("logo");
+	const logoMissing = document.getElementById("logoMissing");
+	let startsAt = 1795046400000;
+	let timer = null;
+	const
+		pad = value => String(value).padStart(2, "0"),
+		spanner = (str) => "<span>" + (str.split("").join("</span><span>")) + "</span>";
+	function renderCountdown() {
+		const remaining = Math.max(0, startsAt - Date.now());
+		const totalSeconds = Math.floor(remaining / 1000);
+		const dayCount = Math.floor(totalSeconds / 86400);
+		const hours = Math.floor(totalSeconds % 86400 / 3600);
+		const minutes = Math.floor(totalSeconds % 3600 / 60);
+		const seconds = totalSeconds % 60;
+		days.innerHTML = spanner(pad(dayCount));
+		time.innerHTML = spanner(`${pad(hours)}:${pad(minutes)}:${pad(seconds)}`);
+		clearTimeout(timer);
+		window.invalidate?.();
+		if (remaining > 0) timer = setTimeout(renderCountdown, 1000 - Date.now() % 1000 + 15);
+	}
+	logo.addEventListener("error", () => {
+		logo.style.display = "none";
+		logoMissing.style.display = "block";
+	});
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.event?.startsAt != null) {
+			const nextStartsAt = Number(detail.event.startsAt);
+			if (Number.isFinite(nextStartsAt)) startsAt = nextStartsAt;
+			renderCountdown();
+		}
+		if (detail.content?.days != null) daysLabel.textContent = detail.content.days;
+		if (detail.style?.color) card.style.setProperty("--panel", detail.style.color);
+		if (detail.style?.textColor) card.style.setProperty("--ink", detail.style.textColor);
+	});
+	renderCountdown();
+</script>
+</body>
+</html>

package/templates/basic/broadcast/event-countdown/logo.png ADDED Viewed

Binary file

package/templates/basic/broadcast/event-countdown/manifest.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "instructions": "Choose the event date and time, then add logo.png to the template directory. The countdown is derived from that fixed moment and stops at zero when the event begins.",
+  "meta": {
+    "event/startsAt": {
+      "type": "date",
+      "phase": "edit",
+      "label": "Event date and time",
+      "hint": "Choose the event date and time",
+      "default": 1795046400000
+    },
+    "content/days": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Days label",
+      "hint": "Days",
+      "default": "Days"
+    },
+    "style/color": {
+      "type": "color",
+      "phase": "edit",
+      "label": "Countdown colour",
+      "hint": "Background colour behind the countdown",
+      "default": "#ffffff"
+    },
+    "style/textColor": {
+      "type": "color",
+      "phase": "edit",
+      "label": "Text colour",
+      "hint": "Countdown numbers and label colour",
+      "default": "#090909"
+    }
+  }
+}

package/templates/basic/broadcast/lower-third/index.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Lower Third</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
+        }
+        .lower {
+            position: absolute;
+            left: 5%;
+            bottom: 8%;
+            display: flex;
+            filter: drop-shadow(0 1rem 2rem #0005)
+        }
+        .accent {
+            width: 1rem;
+            background: #ff9818;
+            border-radius: .55rem 0 0 .55rem
+        }
+        .content {
+            min-width: 48rem;
+            padding: 1.8rem 2.4rem;
+            background: #090e17f0;
+            border-radius: 0 .75rem .75rem 0
+        }
+        .name {
+            font-size: 3.1rem;
+            font-weight: 850
+        }
+        .role {
+            margin-top: .45rem;
+            color: #ffb14b;
+            font-size: 1.8rem;
+            font-weight: 650;
+            letter-spacing: .08em;
+            text-transform: uppercase
+        }
+    </style>
+</head>
+<body>
+<section class="lower">
+    <div class="accent" id="accent"></div>
+    <div class="content">
+        <div class="name" id="name">Alex Morgan</div>
+        <div class="role" id="role">Creative Director · Nebular TV</div>
+    </div>
+</section>
+<script>
+	const $ = id => document.getElementById(id);
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.person?.name != null) $("name").textContent = detail.person.name;
+		if (detail.person?.role != null) $("role").textContent = detail.person.role;
+		if (detail.style?.accent != null) $("accent").style.backgroundColor = detail.style.accent
+	});
+</script>
+</body>
+</html>

package/templates/basic/broadcast/lower-third/manifest.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "instructions": "Enter the guest or presenter name and their role or subtitle, choose an accent colour, then press Update to refresh the lower-third identification.",
+  "meta": {
+    "person/name": {"type": "string", "phase": "play", "label": "Name", "hint": "Enter name", "default": "Alex Morgan"},
+    "person/role": {"type": "string", "phase": "play", "label": "Role or subtitle", "hint": "Enter role or subtitle", "default": "Creative Director · Nebular TV"},
+    "style/accent": {"type": "color", "phase": "edit", "label": "label", "hint": "Accent colour used by the lower-third graphic", "default": "#ff9818"}
+  }
+}

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

@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>News Ticker</title>
+    <style>
+        * { box-sizing: border-box }
+        html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent }
+        body { color: #fff; font-family: Inter, Arial, Helvetica, sans-serif }
+        .ticker {
+            --background: #0759a6;
+            position: absolute; left: 0; right: 0; bottom: 0; height: 8.75rem;
+            display: grid; grid-template-columns: minmax(15rem, 20%) minmax(0, 1fr) minmax(13rem, 17%);
+            overflow: hidden; background: var(--background); border-radius: .35rem; box-shadow: 0 1.1rem 3rem #0007
+        }
+        .zone { min-width: 0; position: relative; display: flex; align-items: center; overflow: hidden }
+        .topic, .brand { justify-content: center; padding: 0 1.6rem; background: #0002 }
+        .topic { border-right: 1px solid #fff5 }
+        .brand { border-left: 1px solid #fff5 }
+        .viewport { position: relative; width: 100%; height: 100%; overflow: hidden }
+        .line {
+            position: absolute; inset: 0; display: flex; align-items: center; min-width: 0;
+            transition: transform .58s cubic-bezier(.7, 0, .25, 1), opacity .58s ease;
+            will-change: transform, opacity
+        }
+        .topic .line {
+            justify-content: center; text-align: center; font-size: 2.35rem; line-height: 1.05;
+            font-weight: 900; letter-spacing: .055em; text-transform: uppercase
+        }
+        .headline .line {
+            padding: 0 2.4rem; font-size: 3.25rem; line-height: 1.08;
+            font-weight: 760; letter-spacing: -.025em
+        }
+        .brand .line {
+            justify-content: center; text-align: center; font-size: 2.55rem; line-height: 1;
+            font-weight: 950; letter-spacing: .08em; text-transform: uppercase
+        }
+        .line.waiting { transform: translateY(110%); opacity: 0 }
+        .line.leaving { transform: translateY(-110%); opacity: 0 }
+        .ticker.empty { opacity: 0 }
+    </style>
+</head>
+<body>
+<main class="ticker" id="ticker">
+    <section class="zone topic"><div class="viewport" id="topicSlot">
+        <div class="line">MEN'S DOUBLES</div><div class="line waiting"></div>
+    </div></section>
+    <section class="zone headline"><div class="viewport" id="headlineSlot">
+        <div class="line">Carlos Alcaraz defeats Tommy Paul, 7–6 7–6 6–4</div><div class="line waiting"></div>
+    </div></section>
+    <section class="zone brand"><div class="viewport"><div class="line" id="brand">US OPEN</div></div></section>
+</main>
+<script>
+    const defaults = [
+        {topic: "MEN'S DOUBLES", tagline: "Carlos Alcaraz defeats Tommy Paul in memorable performance, 6–4 6–4 6–2"},
+        {topic: "MEN'S DOUBLES", tagline: "The quarter-final line-up is now complete in New York"},
+        {topic: "WOMEN'S SINGLES", tagline: "A dramatic final set sends the defending champion through"},
+        {topic: "AROUND THE GROUNDS", tagline: "Evening play begins under the lights at Arthur Ashe Stadium"}
+    ];
+    const TRANSITION_MS = 580;
+    const ticker = document.getElementById("ticker");
+    const brand = document.getElementById("brand");
+    function makeSlot(id) {
+        const lines = document.getElementById(id).querySelectorAll(".line");
+        return {current: lines[0], next: lines[1], timer: null};
+    }
+    const topicSlot = makeSlot("topicSlot");
+    const headlineSlot = makeSlot("headlineSlot");
+    let items = defaults;
+    let currentIndex = 0;
+    let intervalSeconds = 5;
+    let cycleTimer = null;
+    function cleanItems(value) {
+        if (!Array.isArray(value)) return [];
+        return value.map(item => ({
+            topic: String(item?.topic ?? "").trim(),
+            tagline: String(item?.tagline ?? "").trim()
+        })).filter(item => item.topic || item.tagline);
+    }
+    function setSlot(slot, text) {
+        clearTimeout(slot.timer);
+        slot.current.textContent = text;
+        slot.current.className = "line";
+        slot.next.textContent = "";
+        slot.next.className = "line waiting";
+    }
+    function animateSlot(slot, text) {
+        clearTimeout(slot.timer);
+        slot.next.textContent = text;
+        slot.next.className = "line waiting";
+        void slot.next.offsetHeight;
+        slot.current.className = "line leaving";
+        slot.next.className = "line";
+        slot.timer = setTimeout(() => {
+            const previous = slot.current;
+            slot.current = slot.next;
+            slot.next = previous;
+            slot.next.textContent = "";
+            slot.next.className = "line waiting";
+        }, TRANSITION_MS);
+    }
+    function showCurrent() {
+        const item = items[currentIndex];
+        ticker.classList.toggle("empty", !item);
+        if (!item) return;
+        setSlot(topicSlot, item.topic);
+        setSlot(headlineSlot, item.tagline);
+    }
+    function scheduleCycle() {
+        clearTimeout(cycleTimer);
+        if (items.length > 1) cycleTimer = setTimeout(nextItem, intervalSeconds * 1000);
+    }
+    function nextItem() {
+        if (items.length < 2) return;
+        const previous = items[currentIndex];
+        currentIndex = (currentIndex + 1) % items.length;
+        const next = items[currentIndex];
+        animateSlot(headlineSlot, next.tagline);
+        if (next.topic !== previous.topic) animateSlot(topicSlot, next.topic);
+        scheduleCycle();
+    }
+    function replaceItems(value) {
+        items = cleanItems(value);
+        currentIndex = 0;
+        showCurrent();
+        scheduleCycle();
+    }
+    window.addEventListener("nebular-overlay:update", ({detail}) => {
+        if (detail.content?.brand != null) brand.textContent = detail.content.brand;
+        if (detail.style?.background) ticker.style.setProperty("--background", detail.style.background);
+        if (detail.timing?.interval != null) {
+            const interval = Number(detail.timing.interval);
+            if (Number.isFinite(interval)) intervalSeconds = Math.min(30, Math.max(2, interval));
+            scheduleCycle();
+        }
+        if (detail.news != null) replaceItems(detail.news);
+    });
+    showCurrent();
+    scheduleCycle();
+</script>
+</body>
+</html>

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

@@ -0,0 +1,21 @@
+{
+  "instructions": "Build the running news list in playback order. Each item remains on screen for the selected interval; its headline slides upward to the next item, while the topic changes only when the next item belongs to a different topic.",
+  "meta": {
+    "content/brand": {"type": "string", "phase": "edit", "label": "Brand text", "hint": "US OPEN", "default": "US OPEN"},
+    "news": {
+      "type": "set", "phase": "edit", "label": "News items", "hint": "Headlines shown in their playback order", "container": "big", "max": 30,
+      "default": [
+        {"topic": "MEN'S DOUBLES", "tagline": "Carlos Alcaraz defeats Tommy Paul in memorable performance, 6-4 6–4 6–2"},
+        {"topic": "MEN'S DOUBLES", "tagline": "The quarter-final line-up is now complete in New York"},
+        {"topic": "WOMEN'S SINGLES", "tagline": "A dramatic final set sends the defending champion through"},
+        {"topic": "AROUND THE GROUNDS", "tagline": "Evening play begins under the lights at Arthur Ashe Stadium"}
+      ],
+      "meta": {
+        "topic": {"type": "string", "phase": "edit", "label": "News topic", "hint": "MEN'S DOUBLES"},
+        "tagline": {"type": "string", "phase": "edit", "label": "News tagline", "hint": "Enter headline"}
+      }
+    },
+    "timing/interval": {"type": "number", "phase": "edit", "label": "News interval", "hint": "Seconds between headlines", "default": 5, "min": 2, "max": 30},
+    "style/background": {"type": "color", "phase": "edit", "label": "Background", "hint": "Background colour used by the ticker", "default": "#0759a6"}
+  }
+}