Allow delays and durations to be set on groups

Signed-off-by: Axel Boberg <[email protected]>

plugins/rundown/app/components/RundownGroupItem/index.jsx

@@ -5,6 +5,7 @@ import './style.css'
 
 import { SharedContext } from '../../sharedContext'
 
+import { RundownItemProgress } from '../RundownItemProgress'
 import { RundownList } from '../RundownList'
 import { Icon } from '../Icon'
 
@@ -127,6 +128,7 @@ export function RundownGroupItem ({ index, item }) {
         <div className='RundownGroupItem-property RundownGroupItem-notes'>
           {item?.data?.notes}
         </div>
+        <RundownItemProgress item={item} />
       </div>
       <div
         className='RundownGroupItem-dropGuard'

plugins/rundown/app/components/RundownItem/index.jsx

@@ -15,6 +15,8 @@ import './style.css'
 
 import { SharedContext } from '../../sharedContext'
 
+import { RundownItemProgress } from '../RundownItemProgress'
+
 import * as Layout from '../Layout'
 
 /**
@@ -74,7 +76,6 @@ async function getReadablePropertiesForType (typeName) {
 
 export function RundownItem ({ index, item }) {
   const [shared] = React.useContext(SharedContext)
-  const [progress, setProgress] = React.useState(0)
 
   const [typeProperties, setTypeProperties] = React.useState([])
 
@@ -101,44 +102,6 @@ export function RundownItem ({ index, item }) {
     loadProperties()
   }, [item?.type])
 
-  React.useEffect(() => {
-    if (item?.state !== 'playing' && item?.state !== 'scheduled') {
-      setProgress(0)
-      return
-    }
-
-    let shouldLoop = true
-
-    function loop () {
-      if (!shouldLoop) {
-        return
-      }
-
-      let progress = 0
-
-      switch (item?.state) {
-        case 'playing':
-          progress = (Date.now() - item?.didStartPlayingAt) / item?.data?.duration
-          break
-        case 'scheduled':
-          progress = (item?.willStartPlayingAt - Date.now()) / (item?.willStartPlayingAt - item?.wasScheduledAt)
-          break
-      }
-
-      if (Number.isNaN(progress) || (progress >= 1 && item?.state === 'playing')) {
-        setProgress(0)
-        return
-      }
-
-      setProgress(Math.max(Math.min(progress, 1), 0))
-
-      window.requestAnimationFrame(loop)
-    }
-    loop()
-
-    return () => { shouldLoop = false }
-  }, [item?.state, item?.didStartPlayingAt, item?.willStartPlayingAt])
-
   return (
     <div className='RundownItem'>
       <Layout.Spread>
@@ -188,10 +151,7 @@ export function RundownItem ({ index, item }) {
           }
         </div>
       </Layout.Spread>
-      {
-        ['playing', 'scheduled'].includes(item?.state) &&
-        <div className='RundownItem-progress' style={{ transform: `scale(${progress}, 1)`, backgroundColor: item?.data?.color }} />
-      }
+      <RundownItemProgress item={item} />
     </div>
   )
 }

plugins/rundown/app/components/RundownItemProgress/index.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import './style.css'
+
+export function RundownItemProgress ({ item }) {
+  const [progress, setProgress] = React.useState(0)
+
+  React.useEffect(() => {
+    if (item?.state !== 'playing' && item?.state !== 'scheduled') {
+      setProgress(0)
+      return
+    }
+
+    let shouldLoop = true
+
+    function loop () {
+      if (!shouldLoop) {
+        return
+      }
+
+      let progress = 0
+
+      switch (item?.state) {
+        case 'playing':
+          progress = (Date.now() - item?.didStartPlayingAt) / item?.data?.duration
+          break
+        case 'scheduled':
+          progress = (item?.willStartPlayingAt - Date.now()) / (item?.willStartPlayingAt - item?.wasScheduledAt)
+          break
+      }
+
+      if (Number.isNaN(progress) || (progress >= 1 && item?.state === 'playing')) {
+        setProgress(0)
+        return
+      }
+
+      setProgress(Math.max(Math.min(progress, 1), 0))
+
+      window.requestAnimationFrame(loop)
+    }
+    loop()
+
+    return () => { shouldLoop = false }
+  }, [item?.state, item?.didStartPlayingAt, item?.willStartPlayingAt])
+
+  return (
+    <div className='RundownItemProgress'>
+      {
+        ['playing', 'scheduled'].includes(item?.state) &&
+        <div className='RundownItemProgress-progress' style={{ transform: `scale(${progress}, 1)`, backgroundColor: item?.data?.color }} />
+      }
+    </div>
+  )
+}

plugins/rundown/app/components/RundownItemProgress/style.css

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Sveriges Television AB
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.RundownItemProgress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  left: 0;
+  top: 0;
+}
+
+.RundownItemProgress-progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  transform-origin: left;
+
+  opacity: 0.3;
+  z-index: -1;
+}

plugins/types/package.json

@@ -47,20 +47,6 @@
           }
         }
       },
-      {
-        "id": "bridge.types.group",
-        "name": "Group",
-        "inherits": "bridge.types.playable",
-        "properties": {
-          "playMode": {
-            "name": "Play mode",
-            "type": "enum",
-            "default": 0,
-            "enum": ["Trigger all children at once"],
-            "ui.group": "Timing"
-          }
-        }
-      },
       {
         "id": "bridge.types.delayable",
         "inherits": "bridge.types.playable",
@@ -93,6 +79,20 @@
           }
         }
       },
+      {
+        "id": "bridge.types.group",
+        "name": "Group",
+        "inherits": "bridge.types.media",
+        "properties": {
+          "playMode": {
+            "name": "Play mode",
+            "type": "enum",
+            "default": 0,
+            "enum": ["Trigger all children at once"],
+            "ui.group": "Timing"
+          }
+        }
+      },
       {
         "id": "bridge.types.divider",
         "name": "Divider",