Add indicators for the last played items

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

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

@@ -116,6 +116,10 @@ export function RundownListItem ({
     return (state?._connections?.[bridge.client.getIdentity()]?.selection || []).length > 1
   }, [state])
 
+  const isLastPlayed = React.useMemo(() => {
+    return (state?.plugins?.['bridge-plugin-rundown']?.lastPlayedItems || {})[item.id]
+  }, [state, item])
+
   return (
     <div
       className={`RundownListItem ${isDraggedOver ? 'is-draggedOver' : ''} ${isSelected ? 'is-selected' : ''}`}
@@ -170,6 +174,10 @@ export function RundownListItem ({
           : <></>
       }
       {children}
+      {
+        isLastPlayed &&
+          <div className='RundownListItem-lastPlayed' />
+      }
     </div>
   )
 }

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

@@ -72,4 +72,9 @@
 
 .RundownListItem.is-selected::before {
   opacity: 1;
+}
+
+.RundownListItem-lastPlayed {
+  width: 4px;
+  background: var(--base-color--accent1);
 }

plugins/rundown/index.js

@@ -10,6 +10,8 @@ const bridge = require('bridge')
 const assets = require('../../assets.json')
 const manifest = require('./package.json')
 
+const Accumulator = require('./lib/Accumulator')
+
 async function initWidget () {
   const cssPath = `${assets.hash}.${manifest.name}.bundle.css`
   const jsPath = `${assets.hash}.${manifest.name}.bundle.js`
@@ -59,7 +61,8 @@ async function initSettings () {
           },
           scrolling: {
             centered: true
-          }
+          },
+          lastPlayedItems: {}
         }
       }
     }
@@ -80,6 +83,31 @@ exports.activate = async () => {
     return await bridge.state.get(`items.${itemId}.children`) || []
   }
 
+  const lastPlayedItemsAccumulator = new Accumulator(100, items => {
+    const obj = {}
+    for (const item of items) {
+      obj[item] = true
+    }
+
+    bridge.state.apply({
+      plugins: {
+        [manifest.name]: {
+          lastPlayedItems: {
+            $replace: obj
+          }
+        }
+      }
+    })
+  })
+
+  /*
+  Update the 'lastPlayedItems' property whenever
+  an item is played to be able to show an indicator
+  */
+  bridge.events.on('item.play', async item => {
+    lastPlayedItemsAccumulator.add(item.id)
+  })
+
   /*
   Clean up any parent-child relations
   when an item is deleted

plugins/rundown/lib/Accumulator.js

@@ -0,0 +1,72 @@
+// SPDX-FileCopyrightText: 2024 Sveriges Television AB
+//
+// SPDX-License-Identifier: MIT
+
+/**
+ * @class Accumulator
+ * @description This can be used when multiple values needs to be passed
+ *              to the same function but are provided over time
+ */
+class Accumulator {
+  /**
+   * @private
+   * The number of milliseconds during which
+   * the accumulator will collect values before
+   * executing the callback
+   * @type { Number }
+   */
+  #interval = 100
+
+  /**
+   * @private
+   * @type { Function.<void> }
+   */
+  #callback
+
+  /**
+   * @private
+   * An array containing all the values
+   * that are collected for the next
+   * execution of the callback
+   *
+   * Will be reset on every
+   * execution of the callback
+   * @type { any[] }
+   */
+  #values = []
+
+  /**
+   * @param { Number } interval The number of milliseconds to wait for more values
+   *                            before executing the callback
+   * @param { Function.<void> } callback A callback function which will be
+   *                                     executed when the interval has expired
+   */
+  constructor (interval, callback = () => {}) {
+    this.#interval = interval
+    this.#callback = callback
+  }
+
+  /**
+   * Add a value to be provided
+   * to the callback on the next
+   * execution
+   *
+   * Also trigger a timeout
+   * to start the execution
+   * if none is already
+   * triggered
+   *
+   * @param { any } value
+   */
+  add (value) {
+    if (this.#values.length === 0) {
+      setTimeout(() => {
+        this.#callback(this.#values)
+        this.#values = []
+      }, this.#interval)
+    }
+    this.#values.push(value)
+  }
+}
+
+module.exports = Accumulator