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/engagement/chat/index.html ADDED Viewed

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Side Chat</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            font-family: Inter, system-ui, sans-serif;
+            color: #fff
+        }
+        .chat {
+            position: absolute;
+            right: 3%;
+            top: 8%;
+            width: 40rem;
+            max-height: 84%;
+            padding: 1.5rem;
+            background: #080c14e8;
+            border: 1px solid #ffffff29;
+            border-radius: 1rem;
+            box-shadow: 0 1.2rem 3rem #0006;
+            overflow: hidden
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            padding: .2rem .25rem .85rem;
+            border-bottom: 1px solid #ffffff1f;
+            font-size: 1.7rem;
+            font-weight: 900
+        }
+        .live {
+            color: #52e39c;
+            font-size: 1.2rem;
+            font-weight: 900;
+            letter-spacing: .12em
+        }
+        .messages {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding-top: 1.2rem
+        }
+        .message {
+            padding: 1.15rem 1.3rem;
+            background: #ffffff13;
+            border-radius: .8rem;
+            border-left: .22rem solid #ff9d18;
+            animation: enter .35s ease both
+        }
+        .author {
+            color: #ffb449;
+            font-size: 1.45rem;
+            font-weight: 900;
+            margin-bottom: .35rem
+        }
+        .text {
+            font-size: 1.75rem;
+            line-height: 1.35;
+            overflow-wrap: anywhere
+        }
+        @keyframes enter {
+            from {
+                opacity: 0;
+                transform: translateX(2rem)
+            }
+        }
+    </style>
+</head>
+<body>
+<aside class="chat">
+    <div class="header"><span id="title">LIVE CHAT</span><span class="live">● LIVE</span></div>
+    <div class="messages" id="messages"></div>
+</aside>
+<script>
+	const $ = id => document.getElementById(id);
+	let lastMessage = "", limit = 5;
+	function addMessage(author, text) {
+		const signature = `${author}\u0000${text}`;
+		if (!text || signature === lastMessage) return;
+		lastMessage = signature;
+		const item = document.createElement("div"), name = document.createElement("div"), body = document.createElement("div");
+		item.className = "message";
+		name.className = "author";
+		body.className = "text";
+		name.textContent = author || "Viewer";
+		body.textContent = text;
+		item.append(name, body);
+		$("messages").append(item);
+		while ($("messages").children.length > limit) $("messages").firstElementChild.remove()
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.chat?.title != null) $("title").textContent = detail.chat.title;
+		if (detail.chat?.maxMessages != null) limit = Math.max(1, Math.min(8, Number(detail.chat.maxMessages) || 5));
+		if (detail.message?.text != null) addMessage(detail.message.author, detail.message.text)
+	});
+</script>
+</body>
+</html>

package/templates/basic/engagement/chat/manifest.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "instructions": "Enter an author and message, then press Update to append it to the live chat. Set the maximum message count to control how many recent messages remain visible in the side panel.",
+  "meta": {
+    "chat/title": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Panel title", "hint": "Enter panel title",
+      "default": "LIVE CHAT"
+    },
+    "chat/maxMessages": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Messages shown", "hint": "Enter maximum",
+      "min": 1,
+      "max": 8,
+      "default": 5
+    },
+    "message/author": {
+      "type": "string",
+      "phase": "play",
+      "label": "Author", "hint": "Enter author name",
+      "default": "Nebular viewer"
+    },
+    "message/text": {
+      "type": "string",
+      "phase": "play",
+      "label": "New message", "hint": "Enter message",
+      "default": "",
+      "clear": true
+    }
+  }
+}

package/templates/basic/engagement/post/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Social Post</title>
+    <style>
+        * {
+            box-sizing: border-box
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent
+        }
+        body {
+            color: #16202a;
+            font-family: Inter, system-ui, sans-serif
+        }
+        .post {
+            position: absolute;
+            left: 50%;
+            bottom: 8%;
+            width: 64rem;
+            padding: 2rem 2.4rem;
+            border-radius: 1.1rem;
+            background: #fffffff7;
+            border: 1px solid #d9e1e8;
+            box-shadow: 0 1.4rem 4rem #00000047;
+            opacity: 0;
+            transform: translate(-50%, 2rem) scale(.97);
+            transition: opacity .35s ease, transform .35s ease
+        }
+        .post.visible {
+            opacity: 1;
+            transform: translate(-50%, 0) scale(1)
+        }
+        .top {
+            display: flex;
+            align-items: center;
+            gap: 1.3rem
+        }
+        .avatar {
+            width: 5.5rem;
+            height: 5.5rem;
+            border-radius: 50%;
+            display: grid;
+            place-items: center;
+            background: linear-gradient(135deg, #ff9d18, #ff4b55);
+            color: #fff;
+            font-size: 1.8rem;
+            font-weight: 900
+        }
+        .identity {
+            flex: 1
+        }
+        .name {
+            font-size: 2rem;
+            font-weight: 850
+        }
+        .handle {
+            color: #657786;
+            font-size: 1.5rem
+        }
+        .mark {
+            color: #1d9bf0;
+            font-size: 2.6rem;
+            font-weight: 900
+        }
+        .message {
+            margin-top: 1.4rem;
+            font-size: 2.35rem;
+            line-height: 1.45;
+            overflow-wrap: anywhere
+        }
+    </style>
+</head>
+<body>
+<article class="post" id="post">
+    <div class="top">
+        <div class="avatar" id="avatar">NS</div>
+        <div class="identity">
+            <div class="name" id="name">Nebular Streams</div>
+            <div class="handle" id="handle">@nebularstreams</div>
+        </div>
+        <div class="mark">✦</div>
+    </div>
+    <div class="message" id="message">Broadcast graphics, beautifully simple.</div>
+</article>
+<script>
+	let timer, lastMessage = "";
+	const
+		$ = id => document.getElementById(id),
+		initials = name => String(name || "NS").trim().split(/\s+/).slice(0, 2).map(word => word[0]).join("").toUpperCase();
+	function show(duration) {
+		clearTimeout(timer);
+		$("post").classList.remove("visible");
+		requestAnimationFrame(() => requestAnimationFrame(() => $("post").classList.add("visible")));
+		timer = setTimeout(() => $("post").classList.remove("visible"), Math.max(1, duration) * 1000)
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.author?.name != null) {
+			$("name").textContent = detail.author.name;
+			$("avatar").textContent = initials(detail.author.name)
+		}
+		if (detail.author?.handle != null) $("handle").textContent = detail.author.handle;
+		if (detail.post?.message != null) $("message").textContent = detail.post.message;
+		const signature = `${detail.author?.handle || ""}\u0000${detail.post?.message || ""}`;
+		if (detail.post?.message != null && signature !== lastMessage) {
+			lastMessage = signature;
+			show(Number(detail.post?.duration) || 8)
+		}
+	});
+</script>
+</body>
+</html>

package/templates/basic/engagement/post/manifest.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "instructions": "Enter the author, handle and post text, choose how long it should remain visible, then press Update. Each update presents the post and hides it automatically after the selected duration.",
+  "meta": {
+    "author/name": {
+      "type": "string",
+      "phase": "play",
+      "label": "Display name", "hint": "Enter display name",
+      "default": "Nebular Streams"
+    },
+    "author/handle": {
+      "type": "string",
+      "phase": "play",
+      "label": "Handle", "hint": "e.g. @channel",
+      "default": "@nebularstreams"
+    },
+    "post/message": {
+      "type": "string",
+      "phase": "play",
+      "label": "Post", "hint": "Enter post text",
+      "default": "Broadcast graphics, beautifully simple."
+    },
+    "post/duration": {
+      "type": "number",
+      "phase": "edit",
+      "label": "Visible seconds", "hint": "Enter seconds",
+      "min": 1,
+      "max": 60,
+      "default": 8
+    }
+  }
+}

package/templates/basic/sports/football/scoreboard/index.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Football Scoreboard</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;
+        }
+        .scoreboard {
+            position: absolute;
+            top: 5%;
+            left: 50%;
+            transform: translateX(-50%);
+            display: grid;
+            grid-template-columns: 16rem 5rem 5rem 16rem;
+            align-items: stretch;
+            background: rgba(8, 17, 27, .94);
+            border-radius: .8rem;
+            overflow: hidden;
+            box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
+            border: 1px solid rgba(255, 255, 255, .18);
+        }
+        .team {
+            display: flex;
+            align-items: center;
+            gap: .8rem;
+            padding: 1rem 1.2rem;
+            font-weight: 800;
+            letter-spacing: .04em;
+        }
+        .team.away {
+            justify-content: flex-end;
+            text-align: right;
+        }
+        .badge {
+            width: 2rem;
+            height: 2rem;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: #19b76b;
+            font-size: .72rem;
+        }
+        .away .badge {
+            background: #ea4b35;
+            order: 2;
+        }
+        .score {
+            display: grid;
+            place-items: center;
+            background: #fff;
+            color: #0b1722;
+            font-size: 2rem;
+            font-weight: 900;
+        }
+        .clock {
+            grid-column: 1 / -1;
+            background: #19b76b;
+            padding: .3rem;
+            text-align: center;
+            font-size: .85rem;
+            font-weight: 800;
+            letter-spacing: .14em;
+        }
+    </style>
+</head>
+<body>
+<section class="scoreboard">
+    <div class="team"><span class="badge">H</span><span id="home">HOME</span></div>
+    <div class="score" id="homeScore">0</div>
+    <div class="score" id="awayScore">0</div>
+    <div class="team away"><span class="badge">A</span><span id="away">AWAY</span></div>
+    <div class="clock" id="clock">00:00</div>
+</section>
+<script>
+	const $ = (name, value) => {
+		const element = document.getElementById(name);
+		if (element) {
+			if (value !== undefined) element.textContent = String(value);
+			else return element;
+		}
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.home?.name != null) $("home", detail.home.name);
+		if (detail.home?.score != null) $("homeScore", detail.home.score);
+		if (detail.away?.name != null) $("away", detail.away.name);
+		if (detail.away?.score != null) $("awayScore", detail.away.score);
+		if (detail.clock != null) $("clock", detail.clock);
+		window.invalidate?.()
+	});
+</script>
+</body>
+</html>

package/templates/basic/sports/football/scoreboard/manifest.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "instructions": "Enter both team names, update their scores and set the match clock. Press Update whenever the score or clock changes; omitted fields retain their current values.",
+  "meta": {
+    "home/name": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Home team", "hint": "Enter team name",
+      "default": "HOME"
+    },
+    "home/playName": {
+      "type": "string",
+      "phase": "play",
+      "label": "Home team", "hint": "Home-team name displayed during play",
+      "source": "home/name",
+      "readonly": true
+    },
+    "home/score": {
+      "type": "number",
+      "phase": "play",
+      "label": "Home score", "hint": "Enter score",
+      "min": 0,
+      "default": 0,
+      "break": true
+    },
+    "away/name": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Away team", "hint": "Enter team name",
+      "default": "AWAY"
+    },
+    "away/playName": {
+      "type": "string",
+      "phase": "play",
+      "label": "Away team", "hint": "Away-team name displayed during play",
+      "source": "away/name",
+      "readonly": true
+    },
+    "away/score": {
+      "type": "number",
+      "phase": "play",
+      "label": "Away score", "hint": "Enter score",
+      "min": 0,
+      "default": 0,
+      "break": true
+    },
+    "clock": {
+      "type": "string",
+      "phase": "play",
+      "label": "Match clock", "hint": "e.g. 45:00",
+      "pattern": "^[0-9]{1,3}:[0-5][0-9]$",
+      "default": "00:00"
+    }
+  }
+}

package/templates/basic/sports/tennis/scoreboard/index.html ADDED Viewed

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Tennis Scoreboard</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+            background: transparent;
+        }
+        body {
+            color: white;
+            font-family: Inter, system-ui, sans-serif;
+        }
+        .board {
+            position: absolute;
+            left: 4%;
+            bottom: 7%;
+            width: 34rem;
+            border-radius: .7rem;
+            overflow: hidden;
+            box-shadow: 0 1rem 3rem #0007;
+        }
+        .heading {
+            display: flex;
+            justify-content: space-between;
+            padding: .55rem 1rem;
+            background: #b7d62b;
+            color: #17200c;
+            font-size: .75rem;
+            font-weight: 900;
+            letter-spacing: .12em;
+        }
+        .player {
+            display: grid;
+            grid-template-columns: 1fr repeat(3, 3.6rem);
+            align-items: center;
+            min-height: 3.6rem;
+            background: rgba(15, 23, 31, .95);
+            border-top: 1px solid rgba(255, 255, 255, .13);
+        }
+        .name {
+            padding: 0 1rem;
+            font-weight: 800;
+        }
+        .cell {
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border-left: 1px solid rgba(255, 255, 255, .13);
+            font-size: 1.25rem;
+            font-weight: 900;
+        }
+        .points {
+            background: #fff;
+            color: #14200d;
+            font-size: 1.55rem;
+        }
+        .serving::before {
+            content: "●";
+            color: #b7d62b;
+            margin-right: .55rem;
+        }
+    </style>
+</head>
+<body>
+<section class="board">
+    <header class="heading"><span id="event">CENTRE COURT</span><span>SETS · GAMES · POINTS</span></header>
+    <div class="player">
+        <div class="name serving" id="playerOne">PLAYER ONE</div>
+        <div class="cell" id="playerOneSets">0</div>
+        <div class="cell" id="playerOneGames">0</div>
+        <div class="cell points" id="playerOnePoints">0</div>
+    </div>
+    <div class="player">
+        <div class="name" id="playerTwo">PLAYER TWO</div>
+        <div class="cell" id="playerTwoSets">0</div>
+        <div class="cell" id="playerTwoGames">0</div>
+        <div class="cell points" id="playerTwoPoints">0</div>
+    </div>
+</section>
+<script>
+	const $ = (name, value) => {
+		const element = document.getElementById(name);
+		if (element) element.textContent = value;
+	}
+	window.addEventListener("nebular-overlay:update", ({detail}) => {
+		if (detail.event != null) $("event", detail.event);
+		if (detail.playerOne?.name != null) $("playerOne", detail.playerOne.name);
+		if (detail.playerOne?.sets != null) $("playerOneSets", detail.playerOne.sets);
+		if (detail.playerOne?.games != null) $("playerOneGames", detail.playerOne.games);
+		if (detail.playerOne?.points != null) $("playerOnePoints", detail.playerOne.points);
+		if (detail.playerTwo?.name != null) $("playerTwo", detail.playerTwo.name);
+		if (detail.playerTwo?.sets != null) $("playerTwoSets", detail.playerTwo.sets);
+		if (detail.playerTwo?.games != null) $("playerTwoGames", detail.playerTwo.games);
+		if (detail.playerTwo?.points != null) $("playerTwoPoints", detail.playerTwo.points);
+		window.invalidate?.()
+	});
+</script>
+</body>
+</html>

package/templates/basic/sports/tennis/scoreboard/manifest.json ADDED Viewed

@@ -0,0 +1,92 @@
+{
+  "instructions": "Enter the event and player names, then update sets, games and points as play progresses. Use the point selectors for 0, 15, 30, 40 and advantage, and press Update after each scoring change.",
+  "meta": {
+    "event": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Court or event", "hint": "Enter court or event",
+      "default": "CENTRE COURT"
+    },
+    "playerOne/name": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Player one", "hint": "Enter player name",
+      "default": "PLAYER ONE"
+    },
+    "playerTwo/name": {
+      "type": "string",
+      "phase": "edit",
+      "label": "Player two", "hint": "Enter player name",
+      "default": "PLAYER TWO"
+    },
+    "playerOne/playName": {
+      "type": "string",
+      "phase": "play",
+      "label": "Player one", "hint": "First player's name displayed during play",
+      "source": "playerOne/name",
+      "readonly": true
+    },
+    "playerOne/sets": {
+      "type": "number",
+      "phase": "play",
+      "label": "Player one sets", "hint": "Enter sets",
+      "min": 0,
+      "default": 0
+    },
+    "playerOne/games": {
+      "type": "number",
+      "phase": "play",
+      "label": "Player one games", "hint": "Enter games",
+      "min": 0,
+      "default": 0
+    },
+    "playerOne/points": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Player one points", "hint": "Current-game points for the first player",
+      "break": true,
+      "default": "0",
+      "choose": [
+        "0",
+        "15",
+        "30",
+        "40",
+        "A"
+      ]
+    },
+    "playerTwo/playName": {
+      "type": "string",
+      "phase": "play",
+      "label": "Player two", "hint": "Second player's name displayed during play",
+      "source": "playerTwo/name",
+      "readonly": true
+    },
+    "playerTwo/sets": {
+      "type": "number",
+      "phase": "play",
+      "label": "Player two sets", "hint": "Enter sets",
+      "min": 0,
+      "default": 0
+    },
+    "playerTwo/games": {
+      "type": "number",
+      "phase": "play",
+      "label": "Player two games", "hint": "Enter games",
+      "min": 0,
+      "default": 0
+    },
+    "playerTwo/points": {
+      "type": "choose",
+      "phase": "play",
+      "label": "Player two points", "hint": "Current-game points for the second player",
+      "default": "0",
+      "choose": [
+        "0",
+        "15",
+        "30",
+        "40",
+        "A"
+      ]
+    }
+  }
+}