feat: media pool previews #301

build-config.cjs

@@ -11,4 +11,5 @@ module.exports = {
 		// /^(atemSocketChild)$/i,
 	],
 	forceRemoveNodeGypFromPkg: true,
+	prebuilds: ['@julusian/image-rs'],
 }

package.json

@@ -35,6 +35,7 @@
 	"dependencies": {
 		"@atem-connection/camera-control": "^0.2.0",
 		"@companion-module/base": "~1.9.0",
+		"@julusian/image-rs": "^1.1.1",
 		"atem-connection": "3.6.0-nightly-master-20240419-215343-75a89856.0",
 		"lodash-es": "^4.17.21",
 		"type-fest": "^4.24.0"
@@ -49,5 +50,8 @@
 		"ts-node": "^10.9.2",
 		"typescript": "~5.2.2"
 	},
-	"packageManager": "[email protected]"
+	"packageManager": "[email protected]",
+	"resolutions": {
+		"atem-connection": "portal:/home/julus/Projects/libs/atem-connection"
+	}
 }

src/feedback/FeedbackId.ts

@@ -40,6 +40,7 @@ export enum FeedbackId {
 	InTransition = 'inTransition',
 	MediaPlayerSource = 'mediaPlayerSource',
 	MediaPlayerSourceVariables = 'mediaPlayerSourceVariables',
+	MediaPoolPreview = 'mediaPoolPreview',
 	FadeToBlackIsBlack = 'fadeToBlackIsBlack',
 	FadeToBlackRate = 'fadeToBlackRate',
 	ProgramTally = 'program_tally',

src/feedback/index.ts

@@ -22,6 +22,7 @@ import { createFairlightAudioFeedbacks, type AtemFairlightAudioFeedbacks } from
 import { FeedbackId } from './FeedbackId.js'
 import { createTimecodeFeedbacks, type AtemTimecodeFeedbacks } from './timecode.js'
 import type { AtemConfig } from '../config.js'
+import { createMediaPoolFeedbacks, type AtemMediaPoolFeedbacks } from './mediaPool.js'
 
 export type FeedbackTypes = AtemTallyFeedbacks &
 	AtemPreviewFeedbacks &
@@ -39,6 +40,7 @@ export type FeedbackTypes = AtemTallyFeedbacks &
 	AtemMacroFeedbacks &
 	AtemMultiviewerFeedbacks &
 	AtemMediaPlayerFeedbacks &
+	AtemMediaPoolFeedbacks &
 	AtemTimecodeFeedbacks
 
 export function GetFeedbacksList(
@@ -63,6 +65,7 @@ export function GetFeedbacksList(
 		...createMacroFeedbacks(model, state),
 		...createMultiviewerFeedbacks(model, state),
 		...createMediaPlayerFeedbacks(model, state),
+		...createMediaPoolFeedbacks(model, state),
 		...createTimecodeFeedbacks(config, model, state),
 	}
 

src/feedback/mediaPool.ts

@@ -0,0 +1,116 @@
+import { AtemMediaPlayerSourcePicker } from '../input.js'
+import type { ModelSpec } from '../models/index.js'
+import type { MyAdvancedFeedbackEvent, MyFeedbackDefinitions } from './types.js'
+import { FeedbackId } from './FeedbackId.js'
+import type { StateWrapper } from '../state.js'
+import type { MediaPoolPreviewOptions } from '../mediaPoolPreviews.js'
+import type { MyOptionsHelper } from '../common.js'
+
+export interface AtemMediaPoolFeedbacks {
+	[FeedbackId.MediaPoolPreview]: {
+		// TODO - clip vs still?
+		source: number
+
+		position: 'top' | 'center' | 'bottom'
+		crop: 'none' | 'left' | 'center' | 'right'
+	}
+}
+
+export function createMediaPoolFeedbacks(
+	model: ModelSpec,
+	state: StateWrapper
+): MyFeedbackDefinitions<AtemMediaPoolFeedbacks> {
+	if (!model.media.players) {
+		return {
+			[FeedbackId.MediaPoolPreview]: undefined,
+		}
+	}
+	return {
+		[FeedbackId.MediaPoolPreview]: {
+			type: 'advanced',
+			name: 'Media pool: Preview image',
+			description: 'Preview of the specified media pool slot',
+			options: {
+				source: AtemMediaPlayerSourcePicker(model, state.state),
+
+				crop: {
+					id: 'crop',
+					type: 'dropdown',
+					label: 'Crop',
+					default: 'none',
+					choices: [
+						{ id: 'none', label: 'None' },
+						{ id: 'left', label: 'Left' },
+						{ id: 'center', label: 'Center' },
+						{ id: 'right', label: 'Right' },
+					],
+				},
+				position: {
+					id: 'position',
+					type: 'dropdown',
+					label: 'Position',
+					default: 'center',
+					choices: [
+						{ id: 'top', label: 'Top' },
+						{ id: 'center', label: 'Center' },
+						{ id: 'bottom', label: 'Bottom' },
+					],
+					isVisible: (options) => options['crop'] === 'none',
+				},
+			},
+			callback: async ({ options, image }) => {
+				const source = options.getPlainNumber('source')
+
+				const previewOptions = parsePreviewOptions(options, image)
+				if (!previewOptions) return {}
+
+				const imageBuffer = await state.mediaPoolCache.getPreviewImage(source, previewOptions)
+				if (imageBuffer) {
+					return imageBuffer
+				}
+
+				// make sure the load was triggered
+				state.mediaPoolCache.ensureLoaded(source)
+
+				const isSlotOccupied = state.mediaPoolCache.isSlotOccupied(source)
+				if (!isSlotOccupied) {
+					return {
+						text: 'Empty',
+						size: 'auto',
+						bgcolor: 0,
+						fgcolor: 0xffffff,
+					}
+				}
+
+				// TODO
+				return {
+					text: 'Loading...',
+					size: 'auto',
+					bgcolor: 0,
+					fgcolor: 0xffffff,
+				}
+			},
+			subscribe: ({ id, options }) => {
+				state.mediaPoolCache.subscribe(options.getPlainNumber('source'), id)
+			},
+			unsubscribe: ({ id, options }) => {
+				state.mediaPoolCache.unsubscribe(options.getPlainNumber('source'), id)
+			},
+		},
+	}
+}
+
+function parsePreviewOptions(
+	options: MyOptionsHelper<AtemMediaPoolFeedbacks['mediaPoolPreview']>,
+	imageProps: MyAdvancedFeedbackEvent<unknown>['image']
+): MediaPoolPreviewOptions | null {
+	if (!imageProps) return null
+
+	return {
+		crop: options.getPlainString('crop'),
+		position: options.getPlainString('position'),
+
+		buttonHeight: imageProps.height,
+		buttonWidth: imageProps.width,
+	}
+}

src/index.ts

@@ -5,7 +5,8 @@ import { GetFeedbacksList } from './feedback/index.js'
 import { FeedbackId } from './feedback/FeedbackId.js'
 import { GetAutoDetectModel, GetModelSpec, GetParsedModelSpec, type ModelSpec } from './models/index.js'
 import { GetPresetsList } from './presets/index.js'
-import type { StateWrapper } from './state.js'
+import { type StateWrapper } from './state.js'
+import { MediaPoolPreviewCache } from './mediaPoolPreviews.js'
 import { MODEL_AUTO_DETECT } from './models/types.js'
 import {
 	InitVariables,
@@ -59,11 +60,36 @@ class AtemInstance extends InstanceBase<AtemConfig> {
 		super(internal)
 
 		this.commandBatching = new AtemCommandBatching()
+		const emptyState = AtemStateUtil.Create()
 		this.wrappedState = {
-			state: AtemStateUtil.Create(),
+			state: emptyState,
 			tally: {},
 			tallyCache: new Map(),
 			atemCameraState: new AtemCameraControlStateBuilder(0), // TODO - when should this be emptied?
+
+			// mediaPoolSubscriptions: new MediaPoolPreviewSubscriptions(),
+			mediaPoolCache: new MediaPoolPreviewCache(
+				emptyState,
+				async (isClip, slot) => {
+					if (!this.atem) throw new Error('Atem not initialised')
+
+					if (isClip) {
+						// TODO
+						throw new Error('Not implemented!')
+					} else {
+						const buffer = await this.atem.downloadStill(slot /* 'raw'*/) // TODO - perform optimised conversions
+						const videoMode = this.atem.videoMode
+						if (!videoMode) throw new Error('No video mode')
+
+						return {
+							buffer,
+							width: videoMode.width,
+							height: videoMode.height,
+						}
+					}
+				},
+				(ids) => this.checkFeedbacksById(...ids)
+			),
 		}
 		this.atemTransitions = new AtemTransitions(this.config)
 
@@ -241,6 +267,7 @@ class AtemInstance extends InstanceBase<AtemConfig> {
 	private processStateChange(newState: AtemState, paths: string[]): void {
 		// TODO - do we need to clone this object?
 		this.wrappedState.state = newState
+		this.wrappedState.mediaPoolCache.checkUpdatedState(newState)
 
 		let reInit = false
 		const changedFeedbacks = new Set<FeedbackId>()