chore: expose "Edit Piece" context menu

Author: Mint de Wit

packages/webui/src/client/ui/RundownView.tsx

@@ -163,7 +163,7 @@ import { logger } from '../lib/logging'
 import { isTranslatableMessage, translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import { i18nTranslator } from './i18n'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
-import { isEntirePlaylistLooping, isLoopRunning } from '../lib/RundownResolver'
+import { isEntirePlaylistLooping, isLoopRunning, PieceExtended } from '../lib/RundownResolver'
 import { useRundownAndShowStyleIdsForPlaylist } from './util/useRundownAndShowStyleIdsForPlaylist'
 import { RundownPlaylistClientUtil } from '../lib/rundownPlaylistUtil'
 import { UserPermissionsContext, UserPermissions } from './UserPermissions'
@@ -1177,6 +1177,7 @@ interface IProps {
 export interface IContextMenuContext {
 	segment?: SegmentUi
 	part?: PartUi | null
+	piece?: PieceExtended | null
 
 	partDocumentOffset?: OffsetPosition
 	timeScale?: number
@@ -3184,12 +3185,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 													onQueueNextSegment={this.onQueueNextSegment}
 													onSetQuickLoopStart={this.onSetQuickLoopStart}
 													onSetQuickLoopEnd={this.onSetQuickLoopEnd}
-													onEditSegmentProps={(id) =>
-														selectionContext.clearAndSetSelection({ type: 'segment', elementId: id })
-													}
-													onEditPartProps={(id) =>
-														selectionContext.clearAndSetSelection({ type: 'part', elementId: id })
-													}
+													onEditProps={(selection) => selectionContext.clearAndSetSelection(selection)}
 													studioMode={this.props.userPermissions.studio}
 													enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere}
 													enableQuickLoop={!!studio.settings.enableQuickLoop}

packages/webui/src/client/ui/SegmentTimeline/Parts/SourceLayer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import _ from 'underscore'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
-import { literal, unprotectString } from '../../../lib/tempLib'
+import { literal, protectString, unprotectString } from '../../../lib/tempLib'
 import { getElementDocumentOffset, OffsetPosition } from '../../../utils/positions'
 import { IContextMenuContext } from '../../RundownView'
 import { IOutputLayerUi, ISourceLayerUi, PartUi, PieceUi, SegmentUi } from '../SegmentTimelineContainer'
@@ -10,6 +10,7 @@ import { ContextMenuTrigger } from '@jstarpl/react-contextmenu'
 import { SourceLayerItemContainer } from '../SourceLayerItemContainer'
 import { contextMenuHoldToDisplayTime } from '../../../lib/lib'
 import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
+import { PieceInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 
 export interface ISourceLayerPropsBase {
 	key: string
@@ -50,15 +51,18 @@ export function useMouseContext(props: ISourceLayerPropsBase): {
 	onMouseDown(e: React.MouseEvent<HTMLElement>): void
 } {
 	const [mousePosition, setMousePosition] = useState<OffsetPosition>({ left: 0, top: 0 })
+	const [pieceInstanceId, setPieceInstanceId] = useState<PieceInstanceId>()
 
 	return {
 		getPartContext: useCallback(() => {
 			const partElement = document.querySelector('#' + SegmentTimelinePartElementId + props.part.instance._id)
 			const partDocumentOffset = getElementDocumentOffset(partElement)
+			const piece = props.part?.pieces.find((p) => p.instance._id === pieceInstanceId)
 
 			const ctx = literal<IContextMenuContext>({
 				segment: props.segment,
 				part: props.part,
+				piece,
 				partDocumentOffset: partDocumentOffset || undefined,
 				timeScale: props.timeScale,
 				mousePosition: mousePosition,
@@ -72,6 +76,13 @@ export function useMouseContext(props: ISourceLayerPropsBase): {
 			return ctx
 		}, [props.segment, props.part, props.timeScale, props.startsAt, props.onContextMenu, mousePosition]),
 		onMouseDown: (e: React.MouseEvent<HTMLElement>) => {
+			const id = (e.target as HTMLElement)?.dataset?.objId
+			if (id) {
+				setPieceInstanceId(protectString(id))
+			} else {
+				setPieceInstanceId(undefined)
+			}
+
 			setMousePosition({ left: e.pageX, top: e.pageY })
 		},
 	}

packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx

@@ -12,19 +12,20 @@ import { Translated } from '../../lib/ReactMeteorData/ReactMeteorData'
 import { RundownUtils } from '../../lib/rundown'
 import { IContextMenuContext } from '../RundownView'
 import { PartUi, SegmentUi } from './SegmentTimelineContainer'
-import { PartId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { SegmentOrphanedReason } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { UserEditOperationMenuItems } from '../UserEditOperations/RenderUserEditOperations'
 import * as RundownResolver from '../../lib/RundownResolver'
+import { SelectedElement } from '../RundownView/SelectedElementsContext'
+import { PieceExtended } from '../../lib/RundownResolver'
 
 interface IProps {
 	onSetNext: (part: DBPart | undefined, e: any, offset?: number, take?: boolean) => void
 	onSetNextSegment: (segmentId: SegmentId, e: any) => void
 	onQueueNextSegment: (segmentId: SegmentId | null, e: any) => void
 	onSetQuickLoopStart: (marker: QuickLoopMarker | null, e: any) => void
 	onSetQuickLoopEnd: (marker: QuickLoopMarker | null, e: any) => void
-	onEditSegmentProps: (id: SegmentId) => void
-	onEditPartProps: (id: PartId) => void
+	onEditProps: (element: SelectedElement) => void
 	playlist?: DBRundownPlaylist
 	studioMode: boolean
 	contextMenuContext: IContextMenuContext | null
@@ -50,6 +51,7 @@ export const SegmentContextMenu = withTranslation()(
 			)
 				return null
 
+			const piece = this.getPieceFromContext()
 			const part = this.getPartFromContext()
 			const segment = this.getSegmentFromContext()
 			const timecode = this.getTimePosition()
@@ -109,7 +111,9 @@ export const SegmentContextMenu = withTranslation()(
 								{this.props.enableUserEdits && (
 									<>
 										<hr />
-										<MenuItem onClick={() => this.props.onEditSegmentProps(part.instance.segmentId)}>
+										<MenuItem
+											onClick={() => this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })}
+										>
 											<span>{t('Edit Segment Properties')}</span>
 										</MenuItem>
 									</>
@@ -198,12 +202,23 @@ export const SegmentContextMenu = withTranslation()(
 								{this.props.enableUserEdits && (
 									<>
 										<hr />
-										<MenuItem onClick={() => this.props.onEditSegmentProps(part.instance.segmentId)}>
+										<MenuItem
+											onClick={() => this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })}
+										>
 											<span>{t('Edit Segment Properties')}</span>
 										</MenuItem>
-										<MenuItem onClick={() => this.props.onEditPartProps(part.instance.part._id)}>
+										<MenuItem
+											onClick={() => this.props.onEditProps({ type: 'part', elementId: part.instance.part._id })}
+										>
 											<span>{t('Edit Part Properties')}</span>
 										</MenuItem>
+										{piece && piece.instance.piece.userEditProperties && (
+											<MenuItem
+												onClick={() => this.props.onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}
+											>
+												<span>{t('Edit Piece Properties')}</span>
+											</MenuItem>
+										)}
 									</>
 								)}
 							</>
@@ -229,6 +244,14 @@ export const SegmentContextMenu = withTranslation()(
 			}
 		}
 
+		getPieceFromContext = (): PieceExtended | null => {
+			if (this.props.contextMenuContext && this.props.contextMenuContext.piece) {
+				return this.props.contextMenuContext.piece
+			} else {
+				return null
+			}
+		}
+
 		// private onSetAsNextFromHere = (part: DBPart, e) => {
 		// 	const offset = this.getTimePosition()
 		// 	this.props.onSetNext(part, e, offset || 0)

packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx

@@ -687,7 +687,10 @@ export const SourceLayerItem = withTranslation()(
 								ref={this.setRef}
 								onClick={this.itemClick}
 								onDoubleClick={(e) => {
-									if (this.props.studio?.settings.enableUserEdits) {
+									if (
+										this.props.studio?.settings.enableUserEdits &&
+										!this.props.studio?.settings.allowPieceDirectPlay
+									) {
 										const pieceId = this.props.piece.instance.piece._id
 										if (!selectElementContext.isSelected(pieceId)) {
 											selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })

packages/webui/src/client/ui/Settings/Studio/Generic.tsx

@@ -381,11 +381,11 @@ function StudioSettings({ studio }: { studio: DBStudio }): JSX.Element {
 			</LabelAndOverridesForCheckbox>
 
 			<LabelAndOverridesForCheckbox
-				label={t('Double click selection for properties panel')}
+				label={t('Enable User Editing')}
 				item={wrappedItem}
 				itemKey={'enableUserEdits'}
 				overrideHelper={overrideHelper}
-				hint={t('This feature enables user edits')}
+				hint={t('This feature enables the use of the Properties Panel and the Edit Mode')}
 			>
 				{(value, handleUpdate) => <CheckboxControl value={!!value} handleUpdate={handleUpdate} />}
 			</LabelAndOverridesForCheckbox>