Feat/UI piece retiming

packages/blueprints-integration/src/ingest.ts

@@ -129,6 +129,7 @@ export enum DefaultUserOperationsTypes {
 	REVERT_PART = '__sofie-revert-part',
 	REVERT_RUNDOWN = '__sofie-revert-rundown',
 	UPDATE_PROPS = '__sofie-update-props',
+	RETIME_PIECE = '__sofie-retime-piece',
 }
 
 export interface DefaultUserOperationRevertRundown {
@@ -153,6 +154,17 @@ export interface DefaultUserOperationEditProperties {
 	}
 }
 
+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

packages/blueprints-integration/src/triggers.ts

@@ -265,6 +265,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[]
@@ -318,6 +324,7 @@ export type SomeAction =
 	| IRundownPlaylistResetAction
 	| IRundownPlaylistResyncAction
 	| IShelfAction
+	| IEditModeAction
 	| IGoToOnAirLineAction
 	| IRewindSegmentsAction
 	| IShowEntireCurrentSegmentAction

packages/blueprints-integration/src/userEditing.ts

@@ -2,11 +2,15 @@ import type { JSONBlob } from '@sofie-automation/shared-lib/dist/lib/JSONBlob'
 import type { ITranslatableMessage } from './translations'
 import { JSONSchema } from '@sofie-automation/shared-lib/dist/lib/JSONSchemaTypes'
 import { SourceLayerType } from './content'
+import { DefaultUserOperationsTypes } from './ingest'
 
 /**
  * Description of a user performed editing operation allowed on an document
  */
-export type UserEditingDefinition = UserEditingDefinitionAction | UserEditingDefinitionForm
+export type UserEditingDefinition =
+	| UserEditingDefinitionAction
+	| UserEditingDefinitionForm
+	| UserEditingDefinitionSofieDefault
 
 /**
  * A simple 'action' that can be performed
@@ -40,11 +44,22 @@ export interface UserEditingDefinitionForm {
 	currentValues: Record<string, any>
 }
 
+/**
+ * A built in Sofie User operation
+ */
+export interface UserEditingDefinitionSofieDefault {
+	type: UserEditingType.SOFIE
+	/** Id of this operation */
+	id: DefaultUserOperationsTypes
+}
+
 export enum UserEditingType {
 	/** Action */
 	ACTION = 'action',
 	/** Form */
 	FORM = 'form',
+	/** Operation for the Built-in Sofie Rich Editing UI */
+	SOFIE = 'sofie',
 }
 
 export interface UserEditingSourceLayer {

packages/corelib/src/dataModel/UserEditingDefinitions.ts

@@ -3,10 +3,14 @@ import type {
 	JSONBlob,
 	JSONSchema,
 	UserEditingSourceLayer,
+	DefaultUserOperationsTypes,
 } from '@sofie-automation/blueprints-integration'
 import type { ITranslatableMessage } from '../TranslatableMessage'
 
-export type CoreUserEditingDefinition = CoreUserEditingDefinitionAction | CoreUserEditingDefinitionForm
+export type CoreUserEditingDefinition =
+	| CoreUserEditingDefinitionAction
+	| CoreUserEditingDefinitionForm
+	| CoreUserEditingDefinitionSofie
 
 export interface CoreUserEditingDefinitionAction {
 	type: UserEditingType.ACTION
@@ -83,3 +87,9 @@ export interface CoreUserEditingProperties {
 	/** Translation namespaces to use when rendering this form */
 	translationNamespaces: string[]
 }
+
+export interface CoreUserEditingDefinitionSofie {
+	type: UserEditingType.SOFIE
+	/** Id of this operation */
+	id: DefaultUserOperationsTypes
+}

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

@@ -57,6 +57,7 @@ import {
 	UserEditingDefinition,
 	UserEditingDefinitionAction,
 	UserEditingDefinitionForm,
+	UserEditingDefinitionSofieDefault,
 	UserEditingProperties,
 	UserEditingType,
 } from '@sofie-automation/blueprints-integration/dist/userEditing'
@@ -516,22 +517,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'),
 						svgIcon: userEdit.svgIcon,
 						svgIconInactive: userEdit.svgIconInactive,
 						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 literal<UserEditingDefinitionSofieDefault>({
+						type: UserEditingType.SOFIE,
+						id: userEdit.id,
+					})
 				default:
 					assertNever(userEdit)
 					return undefined
@@ -573,23 +579,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),
 						svgIcon: userEdit.svgIcon,
 						svgIconInactive: userEdit.svgIconInactive,
 						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 literal<UserEditingDefinitionSofieDefault>({
+						type: UserEditingType.SOFIE,
+						id: userEdit.id,
+					})
 				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 @@ class RundownViewEventBus0 extends EventEmitter {
 	emit(event: RundownViewEvents.SEGMENT_ZOOM_ON): boolean
 	emit(event: RundownViewEvents.SEGMENT_ZOOM_OFF): boolean
 	emit(event: RundownViewEvents.SHELF_STATE, e: ShelfStateEvent): boolean
+	emit(event: RundownViewEvents.EDIT_MODE, e: EditModeEvent): boolean
 	emit(event: RundownViewEvents.REVEAL_IN_SHELF, e: RevealInShelfEvent): boolean
 	emit(event: RundownViewEvents.SWITCH_SHELF_TAB, e: SwitchToShelfTabEvent): boolean
 	emit(event: RundownViewEvents.MINI_SHELF_QUEUE_ADLIB, e: MiniShelfQueueAdLibEvent): boolean
@@ -175,6 +181,7 @@ class RundownViewEventBus0 extends EventEmitter {
 	on(event: RundownViewEvents.SEGMENT_ZOOM_OFF, listener: () => void): this
 	on(event: RundownViewEvents.REVEAL_IN_SHELF, listener: (e: RevealInShelfEvent) => void): this
 	on(event: RundownViewEvents.SHELF_STATE, listener: (e: ShelfStateEvent) => void): this
+	on(event: RundownViewEvents.EDIT_MODE, listener: (e: EditModeEvent) => void): this
 	on(event: RundownViewEvents.SWITCH_SHELF_TAB, listener: (e: SwitchToShelfTabEvent) => void): this
 	on(event: RundownViewEvents.MINI_SHELF_QUEUE_ADLIB, listener: (e: MiniShelfQueueAdLibEvent) => void): this
 	on(event: RundownViewEvents.GO_TO_PART, listener: (e: GoToPartEvent) => void): this

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

@@ -287,6 +287,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,
@@ -443,6 +454,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

@@ -104,6 +104,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) : ''
 
@@ -57,5 +58,7 @@ export function pieceUiClassNames(
 		'invert-flash': highlight,
 
 		'element-selected': selected,
+
+		'draggable-element': draggable,
 	})
 }

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

@@ -3,16 +3,20 @@
 $glow-color: rgba(255, 255, 255, 0.58);
 
 .element-selected {
-    box-shadow: inset 0 0 15px $glow-color;
-    animation: subtle-glow 1s ease-in-out infinite;
+	box-shadow: inset 0 0 15px $glow-color;
+	animation: subtle-glow 1s ease-in-out infinite;
 
-    @keyframes subtle-glow {
-        0%, 100% {
-            box-shadow: inset 0 0 15px $glow-color;
-        }
-        50% {
-            box-shadow: inset 0 0 25px $glow-color,
-                        inset 0 0 35px $glow-color;
-        }
-    }
-}
+	@keyframes subtle-glow {
+		0%,
+		100% {
+			box-shadow: inset 0 0 15px $glow-color;
+		}
+		50% {
+			box-shadow: inset 0 0 25px $glow-color, inset 0 0 35px $glow-color;
+		}
+	}
+}
+
+.draggable-element {
+	border: dotted white 1px;
+}