Add a new local 'selection' event and use it to get rid of reading th…

…e entire state in the thumbnail widget

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

api/browser/client.js

@@ -4,7 +4,9 @@
 
 const MissingIdentityError = require('../error/MissingIdentityError')
 const InvalidArgumentError = require('../error/InvalidArgumentError')
+
 const state = require('../state')
+const events = require('../events')
 
 const LazyValue = require('../classes/LazyValue')
 
@@ -102,17 +104,19 @@ function ensureArray (thing) {
  * current selection
  * @param { String[] } item Multiple items to select
  */
-function setSelection (item) {
+async function setSelection (item) {
   assertIdentity()
 
   const items = ensureArray(item)
-  state.apply({
+  await state.apply({
     _connections: {
       [getIdentity()]: {
         selection: { $replace: items }
       }
     }
   })
+
+  events.emitLocally('selection', items)
 }
 
 /**
@@ -125,35 +129,27 @@ function setSelection (item) {
  * @param { String[] } item An array of ids for
  *                           the items to add
  */
-function addSelection (item) {
+async function addSelection (item) {
   assertIdentity()
 
-  const items = ensureArray(item)
-    /*
-    Only add items that are
-    not already selected
-    */
-    .filter(item => !isSelected(item))
-
-  const currentSelectionIsArray = Array.isArray(state.getLocalState()?._connections?.[getIdentity()]?.selection)
-
-  if (!currentSelectionIsArray) {
-    state.apply({
-      _connections: {
-        [getIdentity()]: {
-          selection: { $replace: items }
-        }
-      }
-    })
-  } else {
-    state.apply({
-      _connections: {
-        [getIdentity()]: {
-          selection: { $push: items }
-        }
-      }
-    })
+  const currentSelection = await getSelection()
+  const newSelectionSet = new Set(Array.isArray(currentSelection) ? currentSelection : [])
+  const newItems = ensureArray(item)
+
+  for (const item of newItems) {
+    newSelectionSet.add(item)
   }
+
+  const newSelection = Array.from(newSelectionSet.values())
+
+  await state.apply({
+    _connections: {
+      [getIdentity()]: {
+        selection: { $replace: newSelection }
+      }
+    }
+  })
+  events.emitLocally('selection', newSelection)
 }
 
 /**
@@ -176,7 +172,7 @@ function subtractSelection (item) {
   const items = new Set(ensureArray(item))
   const newSelection = selection.filter(id => !items.has(id))
 
-  setSelection(newSelection)
+  setSelection(newSelection, newSelection)
 }
 
 /**
@@ -197,16 +193,18 @@ function isSelected (item) {
 /**
  * Clear the current selection
  */
-function clearSelection () {
+async function clearSelection () {
   assertIdentity()
 
-  state.apply({
+  await state.apply({
     _connections: {
       [getIdentity()]: {
         selection: { $delete: true }
       }
     }
   })
+
+  events.emitLocally('selection', [])
 }
 
 /**

api/events.js

@@ -60,6 +60,10 @@ async function callLocalHandlers (event, ...args) {
   }
 
   const handlers = localHandlers.get(event)
+  if (!handlers) {
+    return
+  }
+
   for (const { handler } of handlers) {
     handler(..._args)
   }

docs/api/README.md

@@ -65,6 +65,7 @@ bridge.events.on('item.stop', item => {
 | `item.play` | Emitted when an item is played, after an optional delay |
 | `item.stop` | Emitted when an item is stopped |
 | `shortcut` | Emitted when a shortcut is triggered |
+| `selection` | Emitted when the selection of the current client changes |
 
 ### `bridge.events.emit(event, ...parameters)`
 Emit an event with or without any data

plugins/caspar/app/views/Thumbnail.jsx

@@ -1,19 +1,21 @@
 import React from 'react'
 import bridge from 'bridge'
 
-import { SharedContext } from '../sharedContext'
 import { ThumbnailImage } from '../components/ThumbnailImage'
 
 export const Thumbnail = () => {
-  const [state] = React.useContext(SharedContext)
   const [item, setItem] = React.useState({})
   const [image, setImage] = React.useState()
   const [selection, setSelection] = React.useState([])
 
   React.useEffect(() => {
-    const selection = state?._connections?.[bridge.client.getIdentity()]?.selection
-    setSelection(selection)
-  }, [state])
+    async function onSelectionChange (selection) {
+      setSelection(selection)
+    }
+
+    bridge.events.on('selection', onSelectionChange)
+    return () => bridge.events.off('selection', onSelectionChange)
+  }, [])
 
   React.useEffect(() => {
     async function getItem () {

plugins/inspector/app/components/StringInput/index.jsx

@@ -18,7 +18,7 @@ export function StringInput ({
       type='text'
       htmlFor={htmlFor}
       className={`StringInput ${large ? 'StringInput--large' : ''}`}
-      value={value}
+      value={value || ''}
       onChange={e => onChange(e.target.value)}
     />
   )