feat(live-status-gw): Add segment and part timing (SOFIE-2793)

packages/live-status-gateway/.eslintrc.json

@@ -13,7 +13,7 @@
 	"rules": {
 		"prettier/prettier": ["error", { "endOfLine": "auto" }],
 		"node/no-unpublished-import": ["error", {
-			"allowModules": ["jest-mock-extended"]
+			"allowModules": ["jest-mock-extended", "type-fest"]
 		}]
 	},
 	"parserOptions": {

packages/live-status-gateway/api/schemas/activePlaylist.yaml

@@ -20,7 +20,10 @@ $defs:
           type: string
       currentPart:
         description: The current Part - if empty, no part in the active playlist is live
-        $ref: '#/$defs/part'
+        $ref: '#/$defs/currentPart'
+      currentSegment:
+        description: The Segment of the current Part - if empty, no part in the active playlist is live
+        $ref: '#/$defs/currentSegment'
       nextPart:
         description: The next Part - if empty, no part will follow live part
         $ref: '#/$defs/part'
@@ -34,46 +37,86 @@ $defs:
         type: array
         items:
           $ref: '#/$defs/adLib'
-    required: [event, id, name, rundownIds, currentPart, nextPart, adLibs, globalAdLibs]
+    required: [event, id, name, rundownIds, currentPart, currentSegment, nextPart, adLibs, globalAdLibs]
     additionalProperties: false
     examples:
       - event: activePlaylist
         id: 'OKAgZmZ0Buc99lE_2uPPSKVbMrQ_'
         name: 'Playlist 0'
         rundownIds: ['y9HauyWkcxQS3XaAOsW40BRLLsI_']
         currentPart:
-          $ref: '#/$defs/part/examples'
+          $ref: '#/$defs/currentPart/examples/0'
+        currentSegment:
+          $ref: '#/$defs/currentSegment/examples/0'
         nextPart:
-          $ref: '#/$defs/part/examples'
+          $ref: '#/$defs/part/examples/0'
         adLibs:
           $ref: '#/$defs/adLib/examples'
         globals:
           $ref: '#/$defs/adLib/examples'
+  partBase:
+    type: object
+    properties:
+      id:
+        description: Unique id of the part
+        type: string
+      name:
+        description: User name of the part
+        type: string
+      segmentId:
+        description: Unique id of the segment this part belongs to
+        type: string
+      autoNext:
+        description: Should this part progress to the next automatically
+        type: boolean
+        default: false
+    required: [id, name, segmentId]
+    additionalProperties: false
+    examples:
+      - id: 'H5CBGYjThrMSmaYvRaa5FVKJIzk_'
+        name: 'Intro'
+        segmentId: 'n1mOVd5_K5tt4sfk6HYfTuwumGQ_'
+        autoNext: false
   part:
     oneOf:
-      - type: object
-        properties:
-          id:
-            description: Unique id of the part
-            type: string
-          name:
-            description: User name of the part
-            type: string
-          segmentId:
-            description: Unique id of the segment this part belongs to
-            type: string
-          autoNext:
-            description: Should this part progress to the next automatically
-            type: boolean
-            default: false
-        required: [id, name, segmentId]
-        additionalProperties: false
+      - $ref: '#/$defs/partBase'
       - type: 'null'
     examples:
       - id: 'H5CBGYjThrMSmaYvRaa5FVKJIzk_'
         name: 'Intro'
         segmentId: 'n1mOVd5_K5tt4sfk6HYfTuwumGQ_'
         autoNext: false
+  currentPart:
+    oneOf:
+      - allOf:
+          - $ref: '#/$defs/partBase'
+          - type: object
+            properties:
+              timing:
+                description: Timing information about the current part
+                type: object
+                properties:
+                  startTime:
+                    description: Unix timestamp of when the part started (milliseconds)
+                    type: number
+                  expectedDurationMs:
+                    description: Expected duration of the part (milliseconds)
+                    type: number
+                  expectedEndTime:
+                    description: Unix timestamp of when the part is expected to end (milliseconds)
+                    type: number
+                required: [startTime, expectedDurationMs, expectedEndTime]
+            required: [timing]
+      - type: 'null'
+    examples:
+      - id: 'H5CBGYjThrMSmaYvRaa5FVKJIzk_'
+        name: 'Intro'
+        segmentId: 'n1mOVd5_K5tt4sfk6HYfTuwumGQ_'
+        autoNext: false
+        timing:
+          startTime: 1600000060000
+          expectedDurationMs: 15000
+          expectedEndTime: 1600000075000
   adLib:
     type: object
     properties:
@@ -118,3 +161,31 @@ $defs:
           - name: pvw
             label: Preview
         tags: ['music_video']
+  currentSegment:
+    type: object
+    properties:
+      id:
+        description: Unique id of the segment
+        type: string
+      timing:
+        description: Timing information about the current segment
+        type: object
+        properties:
+          expectedDurationMs:
+            description: Expected duration of the segment
+            type: number
+          budgetDurationMs:
+            description: Budget duration of the segment
+            type: number
+          expectedEndTime:
+            description: Unix timestamp of when the segment is expected to end (milliseconds)
+            type: number
+        required: [expectedDurationMs, expectedEndTime]
+    required: [id, timing]
+    additionalProperties: false
+    examples:
+      - id: 'H5CBGYjThrMSmaYvRaa5FVKJIzk_'
+        timing:
+          expectedDurationMs: 15000
+          budgetDurationMs: 20000
+          expectedEndTime: 1600000075000

packages/live-status-gateway/api/schemas/segments.yaml

@@ -17,7 +17,7 @@ $defs:
         type: array
         items:
           $ref: '#/$defs/segment'
-    required: [event, id, segments]
+    required: [event, rundownPlaylistId, segments]
     additionalProperties: false
     examples:
       - event: segments
@@ -36,9 +36,22 @@ $defs:
       name:
         description: Name of the segment
         type: string
-    required: [id, rundownId, name]
+      timing:
+        type: object
+        properties:
+          expectedDurationMs:
+            description: Expected duration of the segment (milliseconds)
+            type: number
+          budgetDurationMs:
+            description: Budget duration of the segment (milliseconds)
+            type: number
+        required: [expectedDurationMs]
+    required: [id, rundownId, name, timing]
     additionalProperties: false
     examples:
       - id: 'OKAgZmZ0Buc99lE_2uPPSKVbMrQ_'
         rundownId: 'y9HauyWkcxQS3XaAOsW40BRLLsI_'
         name: 'Segment 0'
+        timing:
+          expectedDurationMs: 15000
+          budgetDurationMs: 20000

packages/live-status-gateway/package.json

@@ -69,7 +69,8 @@
 		"@asyncapi/generator": "1.9.13",
 		"@asyncapi/html-template": "0.26.0",
 		"@asyncapi/nodejs-ws-template": "0.9.25",
-		"jest-mock-extended": "^3.0.5"
+		"jest-mock-extended": "^3.0.5",
+		"type-fest": "^4.5.0"
 	},
 	"lint-staged": {
 		"*.{css,json,md,scss}": [

packages/live-status-gateway/sample-client/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+	"env": {
+		"browser": true
+	}
+}

packages/live-status-gateway/sample-client/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Live Status Gateway client</title>
+</head>
+<body data-server-no-reload>
+    <div id="header">
+		<div>Time of day: <span id="time-of-day"></span></div>
+		<div>Segment remaining: <span id="segment-remaining"></span></div>
+		<div>Part remaining: <span id="part-remaining"></span></div>
+	</div>
+    <div id="segments"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>

packages/live-status-gateway/sample-client/script.js

@@ -0,0 +1,146 @@
+const ws = new WebSocket(`ws://localhost:8080`)
+ws.addEventListener('message', (message) => {
+	const data = JSON.parse(message.data)
+	switch (data.event) {
+		case 'pong':
+			handlePong(data)
+			break
+		case 'heartbeat':
+			handleHeartbeat(data)
+			break
+		case 'subscriptionStatus':
+			handleSubscriptionStatus(data)
+			break
+		case 'studio':
+			handleStudio(data)
+			break
+		case 'activePlaylist':
+			handleActivePlaylist(data)
+			break
+		case 'segments':
+			handleSegments(data)
+			break
+	}
+})
+
+ws.addEventListener('open', () => {
+	console.log('socket open')
+
+	ws.send(JSON.stringify({ event: 'subscribe', subscription: { name: 'activePlaylist' }, reqid: 1 }))
+
+	ws.send(JSON.stringify({ event: 'subscribe', subscription: { name: 'segments' }, reqid: 2 }))
+})
+
+ws.addEventListener('close', () => {
+	console.log('socket close')
+})
+
+ws.addEventListener('error', (error) => {
+	console.log('socket error', error)
+})
+
+function handlePong() {
+	//
+}
+
+function handleHeartbeat() {
+	//
+}
+
+function handleSubscriptionStatus() {
+	//
+}
+
+function handleStudio() {
+	//
+}
+
+const TIME_OF_DAY_SPAN_ID = 'time-of-day'
+const SEGMENT_DURATION_SPAN_CLASS = 'segment-duration'
+const SEGMENT_REMAINIG_SPAN_ID = 'segment-remaining'
+const PART_REMAINIG_SPAN_ID = 'part-remaining'
+const SEGMENTS_DIV_ID = 'segments'
+const ENABLE_SYNCED_TICKS = true
+
+let activePlaylist = {}
+
+function handleActivePlaylist(data) {
+	activePlaylist = data
+}
+
+setInterval(() => {
+	const segmentRemainingEl = document.getElementById(SEGMENT_REMAINIG_SPAN_ID)
+	const partRemainingEl = document.getElementById(PART_REMAINIG_SPAN_ID)
+	const segmentEndTime = activePlaylist.currentSegment && activePlaylist.currentSegment.timing.expectedEndTime
+	const partEndTime = activePlaylist.currentPart && activePlaylist.currentPart.timing.expectedEndTime
+
+	const currentSegmentId = activePlaylist.currentPart && activePlaylist.currentPart.segmentId
+	const now = ENABLE_SYNCED_TICKS ? Math.floor(Date.now() / 1000) * 1000 : Date.now()
+	if (currentSegmentId && activePlaylist.currentPart) {
+		const currentSegmentEl = document.getElementById(activePlaylist.currentPart.segmentId)
+		if (currentSegmentEl) {
+			const durationEl = currentSegmentEl.querySelector('.' + SEGMENT_DURATION_SPAN_CLASS)
+			durationEl.textContent = formatMillisecondsToTime(segmentEndTime - now)
+		}
+	}
+	if (segmentEndTime) segmentRemainingEl.textContent = formatMillisecondsToTime(segmentEndTime - now)
+	if (partEndTime) partRemainingEl.textContent = formatMillisecondsToTime(Math.ceil(partEndTime / 1000) * 1000 - now)
+	updateClock()
+}, 100)
+
+function updateClock() {
+	const now = new Date()
+	const hours = now.getHours()
+	const minutes = now.getMinutes()
+	const seconds = now.getSeconds()
+	const formattedTime = formatMillisecondsToTime(hours * 3600000 + minutes * 60000 + seconds * 1000)
+
+	const clockElement = document.getElementById(TIME_OF_DAY_SPAN_ID)
+	if (clockElement) {
+		clockElement.textContent = formattedTime
+	}
+}
+
+function handleSegments(data) {
+	const targetDiv = document.getElementById(SEGMENTS_DIV_ID)
+
+	if (targetDiv) {
+		const existingUl = targetDiv.querySelector('ul')
+		if (existingUl) {
+			targetDiv.removeChild(existingUl)
+		}
+
+		const ul = document.createElement('ul')
+
+		data.segments.forEach((segment) => {
+			const li = document.createElement('li')
+			li.id = segment.id
+			const spanElement = document.createElement('span')
+			spanElement.classList = [SEGMENT_DURATION_SPAN_CLASS]
+			spanElement.textContent = formatMillisecondsToTime(
+				segment.timing.budgetDurationMs || segment.timing.expectedDurationMs
+			)
+			const textNodeAfter = document.createTextNode(' ' + segment.name)
+			li.appendChild(spanElement)
+			li.appendChild(textNodeAfter)
+			ul.appendChild(li)
+		})
+
+		targetDiv.appendChild(ul)
+	}
+}
+
+function formatMillisecondsToTime(milliseconds) {
+	const isNegative = milliseconds < 0
+	milliseconds = Math.abs(milliseconds)
+
+	const totalSeconds = Math.round(milliseconds / 1000)
+	const totalMinutes = Math.floor(totalSeconds / 60)
+	const totalHours = Math.floor(totalMinutes / 60)
+
+	const formattedHours = String(totalHours).padStart(2, '0')
+	const formattedMinutes = String(totalMinutes % 60).padStart(2, '0')
+	const formattedSeconds = String(totalSeconds % 60).padStart(2, '0')
+
+	return `${isNegative ? '+' : ''}${formattedHours}:${formattedMinutes}:${formattedSeconds}`
+}