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/all/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/all/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/all/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/all/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"}
+  }
+}

package/templates/all/broadcast/newsticker-frames/background-label-green.png ADDED Viewed

Binary file

package/templates/all/broadcast/newsticker-frames/background-label-orange.png ADDED Viewed

Binary file

package/templates/all/broadcast/newsticker-frames/banner.png ADDED Viewed

Binary file

package/templates/all/broadcast/newsticker-frames/index.html ADDED Viewed

@@ -0,0 +1,229 @@
+<!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 {
+            --hue: 0deg;
+            color: #000;
+            background-image: url(background-label-green.png);
+            font-family: Inter, Arial, Helvetica, sans-serif;
+            background-size: 100% 100%;
+            backdrop-filter: hue-rotate(var(--hue));
+        }
+        .ticker {
+            background-image: url(banner.png);
+            position: absolute;
+            left: 8%;
+            right: 8%;
+            bottom: 8%;
+            height: 8.75rem;
+            display: flex;
+            grid-template-columns: minmax(15rem, 20%) minmax(0, 1fr) minmax(13rem, 17%);
+            overflow: hidden;
+            border-radius: .35rem;
+            box-shadow: 0 1.1rem 3rem #0007;
+            background-size: 100% 100%;
+        }
+        .zone {
+            min-width: 0;
+            position: relative;
+            display: flex;
+            align-items: center;
+            overflow: hidden
+        }
+        .topic {
+            justify-content: center;
+            padding: 0 1.6rem;
+            background: #0002
+        }
+        .topic {
+            border-right: 1px solid #fff5;
+            width: 17rem;
+        }
+        .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
+        }
+        section.zone.headline {
+            flex-grow: 1;
+        }
+        .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: 2.75rem;
+            line-height: 1.08;
+            font-weight: 760;
+            letter-spacing: -.025em;
+        }
+        .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>
+</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");
+	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.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);
+		if (detail.style?.hue > 0) document.body.style.setProperty("--hue", detail.style.hue + "deg");
+	});
+	showCurrent();
+	scheduleCycle();
+</script>
+</body>
+</html>

package/templates/all/broadcast/newsticker-frames/manifest.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "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": {
+    "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/hue": {"type": "range", "phase": "edit", "label": "Color Theme", "min": 0, "max": 360, "hint": "General theme color used in the framer", "default": 0}
+  }
+}