Use Y.js CRDT for view id mapping

This fixes glitches when typing in the grid boxes by allowing concurrent
writes and removing the need to read state from the server to render the
box values.

src/node/StreamWindow.js

@@ -145,7 +145,7 @@ export default class StreamWindow extends EventEmitter {
     )
   }
 
-  setViews(viewContentMap) {
+  setViews(viewContentMap, streams) {
     const { gridCount, spaceWidth, spaceHeight } = this.config
     const { win, views } = this
     const boxes = boxesFromViewContentMap(gridCount, gridCount, viewContentMap)

src/node/index.js

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import yargs from 'yargs'
 import TOML from '@iarna/toml'
+import * as Y from 'yjs'
 import { Repeater } from '@repeaterjs/repeater'
 import { app, shell, session, BrowserWindow } from 'electron'
 
@@ -221,12 +222,37 @@ async function main() {
     views: [],
     streamdelay: null,
   }
+
+  const stateDoc = new Y.Doc()
+  const viewsState = stateDoc.getMap('views')
+  stateDoc.transact(() => {
+    for (let i = 0; i < argv.grid.count ** 2; i++) {
+      const data = new Y.Map()
+      data.set('streamId', '')
+      viewsState.set(i, data)
+    }
+  })
+  viewsState.observeDeep(() => {
+    const viewContentMap = new Map()
+    for (const [key, viewData] of viewsState) {
+      const stream = clientState.streams.find(
+        (s) => s._id === viewData.get('streamId'),
+      )
+      if (!stream) {
+        continue
+      }
+      viewContentMap.set(key, {
+        url: stream.link,
+        kind: stream.kind || 'video',
+      })
+    }
+    streamWindow.setViews(viewContentMap)
+  })
+
   const getInitialState = () => clientState
   let broadcastState = () => {}
   const onMessage = (msg) => {
-    if (msg.type === 'set-views') {
-      streamWindow.setViews(new Map(msg.views))
-    } else if (msg.type === 'set-listening-view') {
+    if (msg.type === 'set-listening-view') {
       streamWindow.setListeningView(msg.viewIdx)
     } else if (msg.type === 'set-view-blurred') {
       streamWindow.setViewBlurred(msg.viewIdx, msg.blurred)
@@ -277,6 +303,7 @@ async function main() {
       password: argv.control.password,
       getInitialState,
       onMessage,
+      stateDoc,
     }))
     if (argv.control.open) {
       shell.openExternal(argv.control.address)

src/node/server.js

@@ -11,10 +11,18 @@ import route from 'koa-route'
 import serveStatic from 'koa-static'
 import views from 'koa-views'
 import websocket from 'koa-easy-ws'
+import * as Y from 'yjs'
 
 const webDistPath = path.join(app.getAppPath(), 'web')
 
-function initApp({ username, password, baseURL, getInitialState, onMessage }) {
+function initApp({
+  username,
+  password,
+  baseURL,
+  getInitialState,
+  onMessage,
+  stateDoc,
+}) {
   const expectedOrigin = new URL(baseURL).origin
   const sockets = new Set()
 
@@ -47,16 +55,23 @@ function initApp({ username, password, baseURL, getInitialState, onMessage }) {
         const ws = await ctx.ws()
         sockets.add(ws)
 
+        ws.binaryType = 'arraybuffer'
+
         ws.on('close', () => {
           sockets.delete(ws)
         })
 
-        ws.on('message', (dataText) => {
+        ws.on('message', (rawData) => {
+          if (rawData instanceof ArrayBuffer) {
+            Y.applyUpdate(stateDoc, new Uint8Array(rawData))
+            return
+          }
+
           let data
           try {
-            data = JSON.parse(dataText)
+            data = JSON.parse(rawData)
           } catch (err) {
-            console.warn('received unexpected ws data:', dataText)
+            console.warn('received unexpected ws data:', rawData)
             return
           }
 
@@ -69,6 +84,7 @@ function initApp({ username, password, baseURL, getInitialState, onMessage }) {
 
         const state = getInitialState()
         ws.send(JSON.stringify({ type: 'state', state }))
+        ws.send(Y.encodeStateAsUpdate(stateDoc))
         return
       }
       ctx.status = 404
@@ -95,6 +111,7 @@ export default async function initWebServer({
   password,
   getInitialState,
   onMessage,
+  stateDoc,
 }) {
   let { protocol, hostname, port } = new URL(baseURL)
   if (!port) {
@@ -110,6 +127,7 @@ export default async function initWebServer({
     baseURL,
     getInitialState,
     onMessage,
+    stateDoc,
   })
 
   let server