Merge pull request #58 from bbc/bbc/ui-piece-retiming

feat: UI piece retiming (BBC release53)

Author: rjmunro

meteor/server/publications/partInstancesUI/reactiveContentCache.ts

@@ -5,7 +5,6 @@ import { MongoFieldSpecifierOnesStrict, MongoFieldSpecifierZeroes } from '@sofie
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import { DBStudio, IStudioSettings } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { DBPartInstance } from '@sofie-automation/corelib/dist/dataModel/PartInstance'
-import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
 

packages/blueprints-integration/src/ingest.ts

@@ -130,6 +130,7 @@ export enum DefaultUserOperationsTypes {
 	REVERT_RUNDOWN = '__sofie-revert-rundown',
 	UPDATE_PROPS = '__sofie-update-props',
 	IMPORT_MOS_ITEM = '__sofie-import-mos',
+	RETIME_PIECE = '__sofie-retime-piece',
 }
 
 export interface DefaultUserOperationRevertRundown {
@@ -161,12 +162,24 @@ export type DefaultUserOperationImportMOSItem = {
 	payload: any
 }
 
+export type DefaultUserOperationRetimePiece = {
+	id: DefaultUserOperationsTypes.RETIME_PIECE
+	payload: {
+		segmentExternalId: string
+		partExternalId: string
+
+		inPoint: number
+		// note - at some point this could also include an updated duration
+	}
+}
+
 export type DefaultUserOperations =
 	| DefaultUserOperationRevertRundown
 	| DefaultUserOperationRevertSegment
 	| DefaultUserOperationRevertPart
 	| DefaultUserOperationEditProperties
 	| DefaultUserOperationImportMOSItem
+	| DefaultUserOperationRetimePiece
 
 export interface UserOperationChange<TCustomBlueprintOperations extends { id: string } = never> {
 	/** Indicate that this change is from user operations */

packages/blueprints-integration/src/triggers.ts

@@ -272,6 +272,12 @@ export interface IShelfAction extends ITriggeredActionBase {
 	filterChain: IGUIContextFilterLink[]
 }
 
+export interface IEditModeAction extends ITriggeredActionBase {
+	action: ClientActions.editMode
+	state: true | false | 'toggle'
+	filterChain: IGUIContextFilterLink[]
+}
+
 export interface IGoToOnAirLineAction extends ITriggeredActionBase {
 	action: ClientActions.goToOnAirLine
 	filterChain: IGUIContextFilterLink[]
@@ -325,6 +331,7 @@ export type SomeAction =
 	| IRundownPlaylistResetAction
 	| IRundownPlaylistResyncAction
 	| IShelfAction
+	| IEditModeAction
 	| IGoToOnAirLineAction
 	| IRewindSegmentsAction
 	| IShowEntireCurrentSegmentAction

packages/corelib/src/dataModel/UserEditingDefinitions.ts

@@ -47,6 +47,12 @@ export interface CoreUserEditingDefinitionForm {
 	translationNamespaces: string[]
 }
 
+export interface CoreUserEditingDefinitionSofie {
+	type: UserEditingType.SOFIE
+	/** Id of this operation */
+	id: DefaultUserOperationsTypes
+}
+
 export interface CoreUserEditingProperties {
 	/**
 	 * These properties are dependent on the (primary) piece type, the user will get the option

packages/job-worker/src/blueprints/context/lib.ts

@@ -551,27 +551,27 @@ function translateUserEditsToBlueprint(
 		userEdits.map((userEdit) => {
 			switch (userEdit.type) {
 				case UserEditingType.ACTION:
-					return {
+					return literal<UserEditingDefinitionAction>({
 						type: UserEditingType.ACTION,
 						id: userEdit.id,
 						label: omit(userEdit.label, 'namespaces'),
 						icon: userEdit.icon,
 						iconInactive: userEdit.iconInactive,
 						isActive: userEdit.isActive,
-					} satisfies Complete<UserEditingDefinitionAction>
+					})
 				case UserEditingType.FORM:
-					return {
+					return literal<UserEditingDefinitionForm>({
 						type: UserEditingType.FORM,
 						id: userEdit.id,
 						label: omit(userEdit.label, 'namespaces'),
 						schema: clone(userEdit.schema),
 						currentValues: clone(userEdit.currentValues),
-					} satisfies Complete<UserEditingDefinitionForm>
+					})
 				case UserEditingType.SOFIE:
-					return {
+					return literal<UserEditingDefinitionSofieDefault>({
 						type: UserEditingType.SOFIE,
 						id: userEdit.id,
-					} satisfies Complete<UserEditingDefinitionSofieDefault>
+					})
 				default:
 					assertNever(userEdit)
 					return undefined
@@ -613,28 +613,28 @@ export function translateUserEditsFromBlueprint(
 		userEdits.map((userEdit) => {
 			switch (userEdit.type) {
 				case UserEditingType.ACTION:
-					return {
+					return literal<CoreUserEditingDefinitionAction>({
 						type: UserEditingType.ACTION,
 						id: userEdit.id,
 						label: wrapTranslatableMessageFromBlueprints(userEdit.label, blueprintIds),
 						icon: userEdit.icon,
 						iconInactive: userEdit.iconInactive,
 						isActive: userEdit.isActive,
-					} satisfies Complete<CoreUserEditingDefinitionAction>
+					})
 				case UserEditingType.FORM:
-					return {
+					return literal<CoreUserEditingDefinitionForm>({
 						type: UserEditingType.FORM,
 						id: userEdit.id,
 						label: wrapTranslatableMessageFromBlueprints(userEdit.label, blueprintIds),
 						schema: clone(userEdit.schema),
 						currentValues: clone(userEdit.currentValues),
 						translationNamespaces: unprotectStringArray(blueprintIds),
-					} satisfies Complete<CoreUserEditingDefinitionForm>
+					})
 				case UserEditingType.SOFIE:
-					return {
+					return literal<CoreUserEditingDefinitionSofie>({
 						type: UserEditingType.SOFIE,
 						id: userEdit.id,
-					} satisfies Complete<CoreUserEditingDefinitionSofie>
+					})
 				default:
 					assertNever(userEdit)
 					return undefined

packages/meteor-lib/src/triggers/RundownViewEventBus.ts

@@ -29,6 +29,7 @@ export enum RundownViewEvents {
 	REVEAL_IN_SHELF = 'revealInShelf',
 	SWITCH_SHELF_TAB = 'switchShelfTab',
 	SHELF_STATE = 'shelfState',
+	EDIT_MODE = 'editMode',
 	MINI_SHELF_QUEUE_ADLIB = 'miniShelfQueueAdLib',
 	GO_TO_PART = 'goToPart',
 	GO_TO_PART_INSTANCE = 'goToPartInstance',
@@ -74,6 +75,10 @@ export interface ShelfStateEvent extends IEventContext {
 	state: boolean | 'toggle'
 }
 
+export interface EditModeEvent extends IEventContext {
+	state: boolean | 'toggle'
+}
+
 export interface MiniShelfQueueAdLibEvent extends IEventContext {
 	forward: boolean
 }
@@ -139,6 +144,7 @@ export interface RundownViewEventBusEvents {
 	[RundownViewEvents.SEGMENT_ZOOM_ON]: []
 	[RundownViewEvents.SEGMENT_ZOOM_OFF]: []
 	[RundownViewEvents.SHELF_STATE]: [e: ShelfStateEvent]
+	[RundownViewEvents.EDIT_MODE]: [e: EditModeEvent]
 	[RundownViewEvents.REVEAL_IN_SHELF]: [e: RevealInShelfEvent]
 	[RundownViewEvents.SWITCH_SHELF_TAB]: [e: SwitchToShelfTabEvent]
 	[RundownViewEvents.MINI_SHELF_QUEUE_ADLIB]: [e: MiniShelfQueueAdLibEvent]

packages/meteor-lib/src/triggers/actionFactory.ts

@@ -286,6 +286,17 @@ function createShelfAction(_filterChain: IGUIContextFilterLink[], state: boolean
 	}
 }
 
+function createEditModeAction(_filterChain: IGUIContextFilterLink[], state: boolean | 'toggle'): ExecutableAction {
+	return {
+		action: ClientActions.editMode,
+		execute: () => {
+			RundownViewEventBus.emit(RundownViewEvents.EDIT_MODE, {
+				state,
+			})
+		},
+	}
+}
+
 function createMiniShelfQueueAdLibAction(_filterChain: IGUIContextFilterLink[], forward: boolean): ExecutableAction {
 	return {
 		action: ClientActions.miniShelfQueueAdLib,
@@ -442,6 +453,8 @@ export function createAction(
 	switch (action.action) {
 		case ClientActions.shelf:
 			return createShelfAction(action.filterChain, action.state)
+		case ClientActions.editMode:
+			return createEditModeAction(action.filterChain, action.state)
 		case ClientActions.goToOnAirLine:
 			return createGoToOnAirLineAction(action.filterChain)
 		case ClientActions.rewindSegments:

packages/shared-lib/src/core/model/ShowStyle.ts

@@ -107,6 +107,7 @@ export enum ClientActions {
 	'rewindSegments' = 'rewindSegments',
 	'showEntireCurrentSegment' = 'showEntireCurrentSegment',
 	'miniShelfQueueAdLib' = 'miniShelfQueueAdLib',
+	'editMode' = 'editMode',
 }
 
 export enum DeviceActions {

packages/webui/src/client/lib/ui/pieceUiClassNames.ts

@@ -19,7 +19,8 @@ export function pieceUiClassNames(
 	uiState?: {
 		leftAnchoredWidth: number
 		rightAnchoredWidth: number
-	}
+	},
+	draggable?: boolean
 ): string {
 	const typeClass = layerType ? RundownUtils.getSourceLayerClassName(layerType) : ''
 
@@ -59,5 +60,7 @@ export function pieceUiClassNames(
 		'invert-flash': highlight,
 
 		'element-selected': selected,
+
+		'draggable-element': draggable,
 	})
 }

packages/webui/src/client/styles/elementSelected.scss

@@ -18,3 +18,7 @@ $glow-color: rgba(255, 255, 255, 0.58);
 		}
 	}
 }
+
+.draggable-element {
+	border: dotted white 1px;
+}