fix: update action-recorder to new delay/wait flow #3189

companion/lib/Controls/ActionRecorder.ts

@@ -81,7 +81,6 @@ export class ActionRecorder extends EventEmitter<ActionRecorderEvents> {
 			id: nanoid(),
 			connectionIds: [],
 			isRunning: false,
-			actionDelay: 0,
 			actions: [],
 		}
 
@@ -115,7 +114,6 @@ export class ActionRecorder extends EventEmitter<ActionRecorderEvents> {
 		// 		id,
 		// 		instanceIds,
 		// 		isRunning: false,
-		// 		actionDelay: 0,
 		// 		actions: [],
 		// 	}
 
@@ -184,22 +182,6 @@ export class ActionRecorder extends EventEmitter<ActionRecorderEvents> {
 				this.commitChanges([sessionId])
 			}
 		})
-		client.onPromise('action-recorder:session:action-delay', (sessionId, actionId, delay0) => {
-			if (!this.#currentSession || this.#currentSession.id !== sessionId)
-				throw new Error(`Invalid session: ${sessionId}`)
-
-			const delay = Number(delay0)
-
-			if (isNaN(delay) || delay < 0) throw new Error(`Invalid delay: ${delay0}`)
-
-			// Find and update the action
-			const index = this.#currentSession.actions.findIndex((a) => a.id === actionId)
-			if (index !== -1) {
-				this.#currentSession.actions[index].delay = delay
-
-				this.commitChanges([sessionId])
-			}
-		})
 		client.onPromise('action-recorder:session:action-set-value', (sessionId, actionId, key, value) => {
 			if (!this.#currentSession || this.#currentSession.id !== sessionId)
 				throw new Error(`Invalid session: ${sessionId}`)
@@ -298,7 +280,6 @@ export class ActionRecorder extends EventEmitter<ActionRecorderEvents> {
 			id: newId,
 			connectionIds: [],
 			isRunning: false,
-			actionDelay: 0,
 			actions: [],
 		}
 
@@ -361,19 +342,35 @@ export class ActionRecorder extends EventEmitter<ActionRecorderEvents> {
 					instance: connectionId,
 					action: actionId,
 					options: options,
-					delay: (session.actionDelay ?? 0) + delay,
 
 					uniquenessId,
 				}
+				const delayAction: RecordActionTmp = {
+					id: nanoid(),
+					instance: 'internal',
+					action: 'wait',
+					options: {
+						time: delay,
+					},
+					uniquenessId: undefined,
+				}
 
 				// Replace existing action with matching uniquenessId, or push to end of the list
 				const uniquenessIdIndex = session.actions.findIndex(
 					(act) => act.uniquenessId && act.uniquenessId === uniquenessId
 				)
 				if (uniquenessIdIndex !== -1) {
 					session.actions[uniquenessIdIndex] = newAction
+
+					// Update or push the delay before the current one
+					const oldPrevAction = session.actions[uniquenessIdIndex - 1]
+					if (oldPrevAction.instance === delayAction.instance && oldPrevAction.action === delayAction.action) {
+						session.actions[uniquenessIdIndex - 1] = delayAction
+					} else {
+						session.actions.splice(uniquenessIdIndex - 1, 0, delayAction)
+					}
 				} else {
-					session.actions.push(newAction)
+					session.actions.push(delayAction, newAction)
 				}
 
 				changedSessionIds.push(session.id)

shared-lib/lib/Model/ActionRecorderModel.ts

@@ -2,7 +2,6 @@ export interface RecordSessionInfo {
 	id: string
 	connectionIds: string[]
 	isRunning: boolean
-	actionDelay: number
 	actions: RecordActionTmp[]
 }
 
@@ -15,7 +14,6 @@ export interface RecordActionTmp {
 	id: string
 	instance: string
 	action: string
-	delay: number
 	options: Record<string, any>
 	uniquenessId: string | undefined
 }

shared-lib/lib/SocketIO.ts

@@ -240,7 +240,6 @@ export interface ClientToBackendEventsMap {
 	'action-recorder:session:set-connections': (sessionId: string, connectionIds: string[]) => void
 	'action-recorder:session:action-reorder': (sessionId: string, actionId: string, dropIndex: number) => void
 	'action-recorder:session:action-set-value': (sessionId: string, actionId: string, key: string, value: any) => void
-	'action-recorder:session:action-delay': (sessionId: string, actionId: string, delay: number) => void
 	'action-recorder:session:action-delete': (sessionId: string, actionId: string) => void
 	'action-recorder:session:action-duplicate': (sessionId: string, actionId: string) => void
 

webui/src/Buttons/ActionRecorder/RecorderSession.tsx

@@ -0,0 +1,41 @@
+import type { RecordSessionInfo } from '@companion-app/shared/Model/ActionRecorderModel.js'
+import { CCol, CCallout } from '@coreui/react'
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+import { ActionsList } from '../../Controls/ActionSetEditor.js'
+import type { PanelCollapseHelper } from '../../Helpers/CollapseHelper.js'
+import { useActionRecorderActionService } from '../../Services/Controls/ControlActionsService.js'
+import { LoadingRetryOrError } from '../../util.js'
+
+interface RecorderSessionProps {
+	panelCollapseHelper: PanelCollapseHelper
+	sessionId: string
+	sessionInfo: RecordSessionInfo | null
+}
+export const RecorderSession = observer(function RecorderSession({
+	panelCollapseHelper,
+	sessionId,
+	sessionInfo,
+}: RecorderSessionProps) {
+	const actionsService = useActionRecorderActionService(sessionId)
+
+	if (!sessionInfo || !sessionInfo.actions) return <LoadingRetryOrError dataReady={false} />
+
+	return (
+		<CCol xs={12} className="flex-form">
+			<ActionsList
+				location={undefined}
+				controlId=""
+				stepId=""
+				setId={0}
+				parentId={null}
+				dragId={'triggerAction'}
+				actions={sessionInfo.actions}
+				readonly={!!sessionInfo.isRunning}
+				actionsService={actionsService}
+				panelCollapseHelper={panelCollapseHelper}
+			/>
+			{sessionInfo.actions.length === 0 ? <CCallout color="info">No actions have been recorded</CCallout> : ''}
+		</CCol>
+	)
+})

webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx

@@ -1,25 +1,25 @@
 import React, { useCallback, useContext, ChangeEvent, RefObject } from 'react'
-import { LoadingRetryOrError, PreventDefaultHandler, useComputed } from '../../util.js'
-import { CButton, CButtonGroup, CCol, CRow, CForm, CFormLabel, CFormSwitch, CCallout } from '@coreui/react'
+import { PreventDefaultHandler, useComputed } from '../../util.js'
+import { CButton, CButtonGroup, CRow, CForm, CFormLabel, CFormSwitch } from '@coreui/react'
 import { DropdownInputField } from '../../Components/index.js'
-import { ActionsList } from '../../Controls/ActionSetEditor.js'
-import { usePanelCollapseHelper } from '../../Helpers/CollapseHelper.js'
 import type { DropdownChoice, DropdownChoiceId } from '@companion-module/base'
 import type { RecordSessionInfo } from '@companion-app/shared/Model/ActionRecorderModel.js'
-import { useActionRecorderActionService } from '../../Services/Controls/ControlActionsService.js'
 import { GenericConfirmModalRef } from '../../Components/GenericConfirmModal.js'
 import { observer } from 'mobx-react-lite'
 import { RootAppStoreContext } from '../../Stores/RootAppStore.js'
+import type { PanelCollapseHelper } from '../../Helpers/CollapseHelper.js'
 
 interface RecorderSessionHeadingProps {
 	confirmRef: RefObject<GenericConfirmModalRef>
+	panelCollapseHelper: PanelCollapseHelper
 	sessionId: string
 	sessionInfo: RecordSessionInfo
 	doFinish: () => void
 }
 
 export const RecorderSessionHeading = observer(function RecorderSessionHeading({
 	confirmRef,
+	panelCollapseHelper,
 	sessionId,
 	sessionInfo,
 	doFinish,
@@ -132,33 +132,3 @@ export const RecorderSessionHeading = observer(function RecorderSessionHeading({
 		</>
 	)
 })
-
-interface RecorderSessionProps {
-	sessionId: string
-	sessionInfo: RecordSessionInfo | null
-}
-export const RecorderSession = observer(function RecorderSession({ sessionId, sessionInfo }: RecorderSessionProps) {
-	const actionsService = useActionRecorderActionService(sessionId)
-
-	const panelCollapseHelper = usePanelCollapseHelper('action_recorder', sessionInfo?.actions?.map((a) => a.id) ?? [])
-
-	if (!sessionInfo || !sessionInfo.actions) return <LoadingRetryOrError dataReady={false} />
-
-	return (
-		<CCol xs={12} className="flex-form">
-			<ActionsList
-				location={undefined}
-				controlId=""
-				stepId=""
-				setId={0}
-				parentId={null}
-				dragId={'triggerAction'}
-				actions={sessionInfo.actions}
-				readonly={!!sessionInfo.isRunning}
-				actionsService={actionsService}
-				panelCollapseHelper={panelCollapseHelper}
-			/>
-			{sessionInfo.actions.length === 0 ? <CCallout color="info">No actions have been recorded</CCallout> : ''}
-		</CCol>
-	)
-})

webui/src/Buttons/ActionRecorder/index.tsx

@@ -4,7 +4,9 @@ import { CCallout, CCol, CRow } from '@coreui/react'
 import { GenericConfirmModal } from '../../Components/GenericConfirmModal.js'
 import type { RecordSessionInfo, RecordSessionListInfo } from '@companion-app/shared/Model/ActionRecorderModel.js'
 import { RecorderSessionFinishModal } from './RecorderSessionFinishModal.js'
-import { RecorderSessionHeading, RecorderSession } from './RecorderSessionHeading.js'
+import { RecorderSessionHeading } from './RecorderSessionHeading.js'
+import { RecorderSession } from './RecorderSession.js'
+import { usePanelCollapseHelper } from '../../Helpers/CollapseHelper.js'
 
 export function ActionRecorder() {
 	const socket = useContext(SocketContext)
@@ -88,6 +90,8 @@ export function ActionRecorder() {
 		setIsFinishing(true)
 	}, [])
 
+	const panelCollapseHelper = usePanelCollapseHelper('action_recorder', sessionInfo?.actions?.map((a) => a.id) ?? [])
+
 	return (
 		<CRow className="action-recorder-panel">
 			<GenericConfirmModal ref={confirmRef} />
@@ -117,7 +121,11 @@ export function ActionRecorder() {
 			</CCol>
 
 			{selectedSessionId ? (
-				<RecorderSession sessionId={selectedSessionId} sessionInfo={sessionInfo} />
+				<RecorderSession
+					panelCollapseHelper={panelCollapseHelper}
+					sessionId={selectedSessionId}
+					sessionInfo={sessionInfo}
+				/>
 			) : (
 				<CCallout color="danger">There is no session, this looks like a bug!</CCallout>
 			)}

webui/src/Services/Controls/ControlActionsService.ts

@@ -169,12 +169,6 @@ export function useActionRecorderActionService(sessionId: string): IActionEditor
 				// Not implemented in action recorder
 			},
 
-			setDelay: (actionId: string, delay: number) => {
-				socket.emitPromise('action-recorder:session:action-delay', [sessionId, actionId, delay]).catch((e) => {
-					console.error(e)
-				})
-			},
-
 			performDelete: (actionId: string) => {
 				socket.emitPromise('action-recorder:session:action-delete', [sessionId, actionId]).catch((e) => {
 					console.error(e)