@@ -920,18 +809,18 @@ export function ControlUI({
)}
- {authState.invites.map(({ id, name, role }) => (
+ {authState.invites.map(({ tokenId, name, role }) => (
))}
Sessions
- {authState.sessions.map(({ id, name, role }) => (
+ {authState.sessions.map(({ tokenId, name, role }) => (
- )*/}
+ )}
diff --git a/packages/streamwall-control-ui/vite.config.ts b/packages/streamwall-control-ui/vite.config.ts
deleted file mode 100644
index b995c32..0000000
--- a/packages/streamwall-control-ui/vite.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import preact from '@preact/preset-vite'
-
-// https://vite.dev/config/
-export default defineConfig({
- plugins: [preact()],
-})
diff --git a/packages/streamwall-shared/package.json b/packages/streamwall-shared/package.json
index 5c9d757..a806249 100644
--- a/packages/streamwall-shared/package.json
+++ b/packages/streamwall-shared/package.json
@@ -5,7 +5,8 @@
"type": "module",
"main": "./src/index.ts",
"dependencies": {
- "color": "^5.0.0"
+ "color": "^5.0.0",
+ "jsondiffpatch": "^0.7.3"
},
"devDependencies": {
"typescript": "~5.6.2"
diff --git a/packages/streamwall-shared/src/geometry.ts b/packages/streamwall-shared/src/geometry.ts
index 10afcd8..c1905c4 100644
--- a/packages/streamwall-shared/src/geometry.ts
+++ b/packages/streamwall-shared/src/geometry.ts
@@ -1,6 +1,6 @@
-import { Rectangle } from 'electron'
+import type { Rectangle } from 'electron'
import { isEqual } from 'lodash-es'
-import { ContentKind } from './types'
+import type { ContentKind } from './types.ts'
export interface ViewPos extends Rectangle {
/**
diff --git a/packages/streamwall-shared/src/index.ts b/packages/streamwall-shared/src/index.ts
index f2dd8ea..85646a5 100644
--- a/packages/streamwall-shared/src/index.ts
+++ b/packages/streamwall-shared/src/index.ts
@@ -1,4 +1,5 @@
-export * from './colors'
-export * from './geometry'
-export * from './roles'
-export * from './types'
+export * from './colors.ts'
+export * from './geometry.ts'
+export * from './roles.ts'
+export * from './stateDiff.ts'
+export * from './types.ts'
diff --git a/packages/streamwall-shared/src/roles.ts b/packages/streamwall-shared/src/roles.ts
index 01f858e..26d6273 100644
--- a/packages/streamwall-shared/src/roles.ts
+++ b/packages/streamwall-shared/src/roles.ts
@@ -1,6 +1,12 @@
export const validRoles = ['local', 'admin', 'operator', 'monitor'] as const
+export const validRolesSet = new Set(validRoles)
-const adminActions = ['dev-tools', 'browse', 'edit-tokens'] as const
+const adminActions = [
+ 'dev-tools',
+ 'browse',
+ 'create-invite',
+ 'delete-token',
+] as const
const operatorActions = [
'set-listening-view',
diff --git a/packages/streamwall-shared/src/stateDiff.ts b/packages/streamwall-shared/src/stateDiff.ts
new file mode 100644
index 0000000..49bf4b3
--- /dev/null
+++ b/packages/streamwall-shared/src/stateDiff.ts
@@ -0,0 +1,6 @@
+import * as jsondiffpatch from 'jsondiffpatch'
+
+export const stateDiff = jsondiffpatch.create({
+ objectHash: (obj: any, idx) => obj._id || `$$index:${idx}`,
+ omitRemovedValues: true,
+})
diff --git a/packages/streamwall-shared/src/types.ts b/packages/streamwall-shared/src/types.ts
index 6fadb3e..f7b3196 100644
--- a/packages/streamwall-shared/src/types.ts
+++ b/packages/streamwall-shared/src/types.ts
@@ -1,4 +1,5 @@
-import { ViewContent, ViewPos } from './geometry'
+import type { ViewContent, ViewPos } from './geometry.ts'
+import type { StreamwallRole } from './roles.ts'
export interface StreamWindowConfig {
gridCount: number
@@ -75,13 +76,35 @@ export interface StreamDelayStatus {
state: string
}
+export type AuthTokenKind = 'invite' | 'session' | 'streamwall'
+
+export interface AuthTokenInfo {
+ tokenId: string
+ kind: AuthTokenKind
+ role: StreamwallRole
+ name: string
+}
+
export interface StreamwallState {
+ identity: {
+ role: StreamwallRole
+ }
+ auth?: {
+ invites: AuthTokenInfo[]
+ sessions: AuthTokenInfo[]
+ }
config: StreamWindowConfig
streams: StreamList
+ customStreams: StreamList
views: ViewState[]
streamdelay: StreamDelayStatus | null
}
+type MessageMeta = {
+ id: number
+ clientId: string
+}
+
export type ControlCommand =
| { type: 'set-listening-view'; viewIdx: number | null }
| {
@@ -100,3 +123,12 @@ export type ControlCommand =
| { type: 'set-stream-running'; isStreamRunning: boolean }
| { type: 'create-invite'; role: string; name: string }
| { type: 'delete-token'; tokenId: string }
+
+export type ControlUpdate = {
+ type: 'state'
+ state: StreamwallState
+}
+
+export type ControlCommandMessage = MessageMeta & ControlCommand
+
+export type ControlUpdateMessage = MessageMeta & ControlUpdate
diff --git a/packages/streamwall-shared/tsconfig.json b/packages/streamwall-shared/tsconfig.json
index d5cbc23..bc35edf 100644
--- a/packages/streamwall-shared/tsconfig.json
+++ b/packages/streamwall-shared/tsconfig.json
@@ -1,31 +1,8 @@
{
- "compilerOptions": {
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
- "target": "ES2020",
- "useDefineForClassFields": true,
- "module": "ESNext",
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
- "skipLibCheck": true,
- "paths": {
- "react": ["./node_modules/preact/compat/"],
- "react-dom": ["./node_modules/preact/compat/"]
- },
-
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "isolatedModules": true,
- "moduleDetection": "force",
- "noEmit": true,
- "jsx": "react-jsx",
- "jsxImportSource": "preact",
-
- /* Linting */
- "strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
- },
+ "extends": [
+ "@tsconfig/recommended/tsconfig",
+ "@tsconfig/node22/tsconfig",
+ "@tsconfig/node-ts/tsconfig"
+ ],
"include": ["src"]
}
diff --git a/packages/streamwall/package.json b/packages/streamwall/package.json
index 42efdf4..c949667 100644
--- a/packages/streamwall/package.json
+++ b/packages/streamwall/package.json
@@ -1,7 +1,7 @@
{
"name": "streamwall",
"productName": "Streamwall",
- "version": "2.0.0-pre1",
+ "version": "2.0.0-pre2",
"description": "Watch streams in a grid layout",
"main": ".vite/build/index.js",
"repository": "github:streamwall/streamwall",
@@ -42,7 +42,6 @@
"author": "Max Goodhart ",
"license": "MIT",
"dependencies": {
- "@fontsource/noto-sans": "^5.1.1",
"@iarna/toml": "^2.2.5",
"@repeaterjs/repeater": "^3.0.6",
"@sentry/electron": "^5.9.0",
diff --git a/packages/streamwall/src/main/index.ts b/packages/streamwall/src/main/index.ts
index 9ccb040..33fd4fe 100644
--- a/packages/streamwall/src/main/index.ts
+++ b/packages/streamwall/src/main/index.ts
@@ -3,9 +3,13 @@ import * as Sentry from '@sentry/electron/main'
import { BrowserWindow, app, session } from 'electron'
import started from 'electron-squirrel-startup'
import fs from 'fs'
+import EventEmitter from 'node:events'
+import { join } from 'node:path'
+import ReconnectingWebSocket from 'reconnecting-websocket'
import 'source-map-support/register'
import { ControlCommand, StreamwallState } from 'streamwall-shared'
import { updateElectronApp } from 'update-electron-app'
+import WebSocket from 'ws'
import yargs from 'yargs'
import * as Y from 'yjs'
import { ensureValidURL } from '../util'
@@ -47,14 +51,31 @@ export interface StreamwallConfig {
endpoint: string
key: string | null
}
+ control: {
+ endpoint: string
+ }
telemetry: {
sentry: boolean
}
}
function parseArgs(): StreamwallConfig {
+ // Load config from user data dir, if it exists
+ const configPath = join(app.getPath('userData'), 'config.toml')
+ console.debug('Reading config from ', configPath)
+
+ let configText: string | null = null
+ try {
+ configText = fs.readFileSync(configPath, 'utf-8')
+ } catch (err) {
+ if (err.code !== 'ENOENT') {
+ throw err
+ }
+ }
+
return (
yargs()
+ .config(configText ? TOML.parse(configText) : {})
.config('config', (configPath) => {
return TOML.parse(fs.readFileSync(configPath, 'utf-8'))
})
@@ -122,57 +143,6 @@ function parseArgs(): StreamwallConfig {
array: true,
default: [],
})
- /*
- .group(
- [
- 'control.username',
- 'control.password',
- 'control.address',
- 'control.hostname',
- 'control.port',
- 'control.open',
- ],
- 'Control Webserver',
- )
- .option('control.username', {
- describe: 'Web control server username',
- })
- .option('control.password', {
- describe: 'Web control server password',
- })
- .option('control.open', {
- describe: 'After launching, open the control website in a browser',
- boolean: true,
- default: true,
- })
- .option('control.address', {
- describe: 'Enable control webserver and specify the URL',
- implies: ['control.username', 'control.password'],
- string: true,
- })
- .option('control.hostname', {
- describe: 'Override hostname the control server listens on',
- })
- .option('control.port', {
- describe: 'Override port the control server listens on',
- number: true,
- })
- .group(
- ['cert.dir', 'cert.production', 'cert.email'],
- 'Automatic SSL Certificate',
- )
- .option('cert.dir', {
- describe: 'Private directory to store SSL certificate in',
- implies: ['email'],
- default: null,
- })
- .option('cert.production', {
- describe: 'Obtain a real SSL certificate using production servers',
- })
- .option('cert.email', {
- describe: 'Email for owner of SSL certificate',
- })
- */
.group(['streamdelay.endpoint', 'streamdelay.key'], 'Streamdelay')
.option('streamdelay.endpoint', {
describe: 'URL of Streamdelay endpoint',
@@ -182,6 +152,11 @@ function parseArgs(): StreamwallConfig {
describe: 'Streamdelay API key',
default: null,
})
+ .group(['control'], 'Remote Control')
+ .option('control.endpoint', {
+ describe: 'URL of control server endpoint',
+ default: null,
+ })
.group(['telemetry.sentry'], 'Telemetry')
.option('telemetry.sentry', {
describe: 'Enable error reporting to Sentry',
@@ -225,8 +200,12 @@ async function main(argv: ReturnType) {
console.debug('Creating initial state...')
let clientState: StreamwallState = {
+ identity: {
+ role: 'local',
+ },
config: streamWindowConfig,
streams: [],
+ customStreams: [],
views: [],
streamdelay: null,
}
@@ -328,26 +307,16 @@ async function main(argv: ReturnType) {
} else if (msg.type === 'set-stream-running' && streamdelayClient) {
console.debug('Setting stream running:', msg.isStreamRunning)
streamdelayClient.setStreamRunning(msg.isStreamRunning)
- // TODO: Move to control server
- /*} else if (msg.type === 'create-invite') {
- console.debug('Creating invite for role:', msg.role)
- const { secret } = await auth.createToken({
- kind: 'invite',
- role: msg.role,
- name: msg.name,
- })
- respond({ name: msg.name, secret })
- } else if (msg.type === 'delete-token') {
- console.debug('Deleting token:', msg.tokenId)
- auth.deleteToken(msg.tokenId)
- */
}
}
+ const stateEmitter = new EventEmitter<{ state: [StreamwallState] }>()
+
function updateState(newState: Partial) {
clientState = { ...clientState, ...newState }
streamWindow.onState(clientState)
controlWindow.onState(clientState)
+ stateEmitter.emit('state', clientState)
}
// Wire up IPC:
@@ -382,6 +351,45 @@ async function main(argv: ReturnType) {
process.exit(0)
})
+ if (argv.control.endpoint) {
+ console.debug('Connecting to control server...')
+ const ws = new ReconnectingWebSocket(argv.control.endpoint, [], {
+ WebSocket,
+ maxReconnectionDelay: 5000,
+ minReconnectionDelay: 1000 + Math.random() * 500,
+ reconnectionDelayGrowFactor: 1.1,
+ })
+ ws.binaryType = 'arraybuffer'
+ ws.addEventListener('open', () => {
+ console.debug('Control WebSocket connected.')
+ ws.send(JSON.stringify({ type: 'state', state: clientState }))
+ ws.send(Y.encodeStateAsUpdate(stateDoc))
+ })
+ ws.addEventListener('close', () => {
+ console.debug('Control WebSocket disconnected.')
+ })
+ ws.addEventListener('message', (ev) => {
+ if (ev.data instanceof ArrayBuffer) {
+ Y.applyUpdate(stateDoc, new Uint8Array(ev.data))
+ } else {
+ let msg
+ try {
+ msg = JSON.parse(ev.data)
+ } catch (err) {
+ console.warn('Failed to parse control WebSocket message:', err)
+ }
+
+ onCommand(msg)
+ }
+ })
+ stateEmitter.on('state', () => {
+ ws.send(JSON.stringify({ type: 'state', state: clientState }))
+ })
+ stateDoc.on('update', (update) => {
+ ws.send(update)
+ })
+ }
+
if (argv.streamdelay.key) {
console.debug('Setting up Streamdelay client...')
streamdelayClient = new StreamdelayClient({
@@ -394,30 +402,6 @@ async function main(argv: ReturnType) {
streamdelayClient.connect()
}
- /*
- if (argv.control.address) {
- console.debug('Initializing web server...')
- const webDistPath = path.join(app.getAppPath(), 'web')
- await initWebServer({
- certDir: argv.cert.dir,
- certProduction: argv.cert.production,
- email: argv.cert.email,
- url: argv.control.address,
- hostname: argv.control.hostname,
- port: argv.control.port,
- logEnabled: true,
- webDistPath,
- auth,
- clientState,
- onMessage,
- stateDoc,
- })
- if (argv.control.open) {
- shell.openExternal(argv.control.address)
- }
- }
- */
-
const dataSources = [
...argv.data['json-url'].map((url) => {
console.debug('Setting data source from json-url:', url)
diff --git a/packages/streamwall/src/renderer/background.tsx b/packages/streamwall/src/renderer/background.tsx
index f67e1c6..c01a9af 100644
--- a/packages/streamwall/src/renderer/background.tsx
+++ b/packages/streamwall/src/renderer/background.tsx
@@ -1,5 +1,5 @@
import '@fontsource/noto-sans'
-import './index.css'
+import 'streamwall-control-ui/src/index.css'
import { render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
diff --git a/packages/streamwall/src/renderer/control.tsx b/packages/streamwall/src/renderer/control.tsx
index d050e5b..dbe2af2 100644
--- a/packages/streamwall/src/renderer/control.tsx
+++ b/packages/streamwall/src/renderer/control.tsx
@@ -1,6 +1,3 @@
-import '@fontsource/noto-sans'
-import './index.css'
-
import { render } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { useHotkeys } from 'react-hotkeys-hook'
@@ -73,7 +70,6 @@ function useStreamwallIPCConnection(): StreamwallConnection {
return {
...appState,
isConnected: true,
- role: 'local',
send,
sharedState,
stateDoc,
diff --git a/packages/streamwall/src/renderer/overlay.tsx b/packages/streamwall/src/renderer/overlay.tsx
index e990795..b50d78f 100644
--- a/packages/streamwall/src/renderer/overlay.tsx
+++ b/packages/streamwall/src/renderer/overlay.tsx
@@ -17,7 +17,7 @@ import { matchesState } from 'xstate'
import { StreamwallLayerGlobal } from '../preload/layerPreload'
import '@fontsource/noto-sans'
-import './index.css'
+import 'streamwall-control-ui/src/index.css'
declare global {
interface Window {