Merge branch 'release50' into release51

Author: Julusian

meteor/client/styles/shelf/externalFramePanel.scss

@@ -26,3 +26,33 @@
 		margin: 0.625rem;
 	}
 }
+
+.dropzone-panel {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	.external-frame-panel__iframe {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		border: none;
+		transform-origin: top left;
+		z-index: 99;
+	}
+	.external-frame-panel__overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		border: none;
+		transform-origin: top left;
+	}
+}

meteor/client/ui/SegmentTimeline/withMediaObjectStatus.tsx

@@ -13,6 +13,7 @@ import { deepFreeze } from '@sofie-automation/corelib/dist/lib'
 import _ from 'underscore'
 import { useTracker } from '../../lib/ReactMeteorData/ReactMeteorData'
 import { PieceInstance } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
+import { UIBucketContentStatus, UIPieceContentStatus } from '../../../lib/api/rundownNotifications'
 
 type AnyPiece = {
 	piece?: BucketAdLibUi | IAdLibListItem | AdLibPieceUi | PieceUi | BucketAdLibActionUi | undefined
@@ -51,6 +52,35 @@ function unwrapPieceInstance(piece: BucketAdLibUi | IAdLibListItem | AdLibPieceU
 	}
 }
 
+function getStatusDocForPiece(
+	piece: BucketAdLibUi | IAdLibListItem | AdLibPieceUi | PieceUi | BucketAdLibActionUi
+): UIPieceContentStatus | UIBucketContentStatus | undefined {
+	const pieceUnwrapped = unwrapPieceInstance(piece)
+
+	// Bucket items use a different collection
+	if (RundownUtils.isBucketAdLibItem(piece)) {
+		return UIBucketContentStatuses.findOne({
+			bucketId: piece.bucketId,
+			docId: pieceUnwrapped._id,
+		})
+	}
+
+	// PieceInstance's might have a dedicated status
+	if (RundownUtils.isPieceInstance(piece)) {
+		const status = UIPieceContentStatuses.findOne({
+			// Future: It would be good for this to be stricter.
+			pieceId: piece.instance._id,
+		})
+		if (status) return status
+	}
+
+	// Fallback to using the one from the source piece
+	return UIPieceContentStatuses.findOne({
+		// Future: It would be good for this to be stricter.
+		pieceId: pieceUnwrapped._id,
+	})
+}
+
 /**
  * @deprecated This can now be achieved by a simple minimongo query against either UIPieceContentStatuses or UIBucketContentStatuses
  */
@@ -81,19 +111,8 @@ export function withMediaObjectStatus<IProps extends AnyPiece, IState>(): (
 
 				// Check item status
 				if (piece && (piece.sourceLayer || layer) && studio) {
-					const pieceUnwrapped = unwrapPieceInstance(piece)
-					const statusDoc = RundownUtils.isBucketAdLibItem(piece)
-						? UIBucketContentStatuses.findOne({
-								bucketId: piece.bucketId,
-								docId: pieceUnwrapped._id,
-						  })
-						: UIPieceContentStatuses.findOne({
-								// Future: It would be good for this to be stricter.
-								pieceId: pieceUnwrapped._id,
-						  })
-
 					// Extract the status or populate some default values
-					const statusObj = statusDoc?.status ?? DEFAULT_STATUS
+					const statusObj = getStatusDocForPiece(piece)?.status ?? DEFAULT_STATUS
 
 					if (RundownUtils.isAdLibPieceOrAdLibListItem(piece)) {
 						if (!overrides.piece || !_.isEqual(statusObj, (overrides.piece as AdLibPieceUi).contentStatus)) {

meteor/client/ui/Settings/components/FilterEditor.tsx

@@ -535,6 +535,18 @@ export default withTranslation()(
 						/>
 					</label>
 
+					<label className="field">
+						<LabelActual label={t('Dropzone URL')} />
+						<EditAttribute
+							modifiedClassName="bghl"
+							attribute={`filters.${index}.dropzoneUrl`}
+							obj={item}
+							type="text"
+							collection={RundownLayouts}
+							className="input text-input input-l"
+						/>
+					</label>
+
 					<label className="field">
 						<LabelActual label={t('Display Rank')} />
 						<EditAttribute

meteor/client/ui/Shelf/BucketPanel.tsx

@@ -45,6 +45,7 @@ import { PieceDisplayStyle } from '../../../lib/collections/RundownLayouts'
 import RundownViewEventBus, {
 	RundownViewEvents,
 	RevealInShelfEvent,
+	ToggleShelfDropzoneEvent,
 } from '../../../lib/api/triggers/RundownViewEventBus'
 import { setShelfContextMenuContext, ContextType } from './ShelfContextMenu'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
@@ -180,6 +181,7 @@ const bucketTarget = {
 
 interface IState {
 	dropActive: boolean
+	dropFrameActive: string | null
 	bucketName: string
 	adLibPieces: BucketAdLibItem[]
 	singleClickMode: boolean
@@ -246,6 +248,7 @@ export interface IBucketPanelProps {
 	onSelectAdlib: (piece: any) => void // TODO - fix this
 	onAdLibContext: (args: { contextBucket: Bucket; contextBucketAdLib: BucketAdLibItem }, callback: () => void) => void
 	onPieceNameRename: () => void
+	extFrameDropZones: { _id: string; url: string }[]
 }
 
 export interface IBucketPanelTrackedProps extends IDashboardPanelTrackedProps {
@@ -408,6 +411,7 @@ const BucketPanelContent = withTranslation()(
 
 					this.state = {
 						dropActive: false,
+						dropFrameActive: null,
 						bucketName: props.bucket.name,
 						adLibPieces: props.adLibPieces.slice(),
 						singleClickMode: false,
@@ -419,6 +423,7 @@ const BucketPanelContent = withTranslation()(
 					window.addEventListener(MOSEvents.dragleave, this.onDragLeave)
 
 					RundownViewEventBus.on(RundownViewEvents.REVEAL_IN_SHELF, this.onRevealInShelf)
+					RundownViewEventBus.on(RundownViewEvents.TOGGLE_SHELF_DROPZONE, this.onToggleDropFrame)
 				}
 
 				componentDidUpdate(prevProps: IBucketPanelProps & IBucketPanelTrackedProps) {
@@ -434,6 +439,7 @@ const BucketPanelContent = withTranslation()(
 				componentWillUnmount(): void {
 					window.removeEventListener(MOSEvents.dragenter, this.onDragEnter)
 					window.removeEventListener(MOSEvents.dragleave, this.onDragLeave)
+					RundownViewEventBus.removeListener(RundownViewEvents.TOGGLE_SHELF_DROPZONE, this.onToggleDropFrame)
 				}
 
 				onRevealInShelf = (e: RevealInShelfEvent) => {
@@ -789,6 +795,13 @@ const BucketPanelContent = withTranslation()(
 					)
 				}
 
+				private onToggleDropFrame = (e: ToggleShelfDropzoneEvent) => {
+					this.setState({
+						// dropActive: e.display,
+						dropFrameActive: e.display ? e.id : null,
+					})
+				}
+
 				render(): JSX.Element | null {
 					const { connectDragSource, connectDragPreview, connectDropTarget } = this.props
 
@@ -828,7 +841,8 @@ const BucketPanelContent = withTranslation()(
 								<div
 									className={ClassNames('dashboard-panel', 'dashboard-panel__panel--bucket', {
 										'dashboard-panel__panel--bucket-active': this.state.dropActive,
-										'dashboard-panel__panel--sort-dragging': this.props.isDragging,
+										'dashboard-panel__panel--sort-dragging':
+											(this.props.isDragging || this.state.dropFrameActive) && !this.state.dropActive,
 									})}
 									data-bucket-id={this.props.bucket._id}
 									ref={this.setRef}
@@ -906,6 +920,18 @@ const BucketPanelContent = withTranslation()(
 												</BucketPieceButton>
 											</ContextMenuTrigger>
 										))}
+										{this.props.extFrameDropZones.map((dropZone) => (
+											<DropzoneHolder
+												key={dropZone._id}
+												bucketId={this.props.bucket._id}
+												id={dropZone._id}
+												url={dropZone.url}
+												hidden={this.state.dropFrameActive !== dropZone._id}
+												showStyleBaseId={this.props.showStyleBaseId}
+												onDragEnter={this.onDragEnter}
+												onDragLeave={this.onDragLeave}
+											/>
+										))}
 									</div>
 								</div>
 							)
@@ -917,3 +943,88 @@ const BucketPanelContent = withTranslation()(
 		)
 	)
 )
+
+interface DropzoneHolderProps {
+	id: string
+	bucketId: BucketId
+	url: string
+	hidden: boolean
+	showStyleBaseId: ShowStyleBaseId
+
+	onDragEnter?: () => void
+	onDragLeave?: () => void
+}
+const DropzoneHolder = (props: DropzoneHolderProps) => {
+	const [dropzoneElementRef, setDropzoneElementRef] = React.useState<HTMLIFrameElement | null>(null)
+
+	const onMessage = React.useCallback(
+		(event: MessageEvent) => {
+			// filter out messages from this panel
+			if (event.source !== dropzoneElementRef?.contentWindow) return
+
+			switch (event.data?.event) {
+				case 'drop':
+					RundownViewEventBus.emit(RundownViewEvents.ITEM_DROPPED, {
+						id: props.id,
+						bucketId: props.bucketId,
+						ev: event,
+					})
+					if (props.onDragLeave) props.onDragLeave()
+					break
+				case 'data':
+					if (event.data.data.trim().endsWith('</mos>')) {
+						RundownViewEventBus.emit(RundownViewEvents.ITEM_DROPPED, {
+							id: props.id,
+							bucketId: props.bucketId,
+							message: event.data.data,
+							ev: event,
+						})
+					}
+					break
+				case 'error':
+					RundownViewEventBus.emit(RundownViewEvents.ITEM_DROPPED, {
+						id: props.id,
+						bucketId: props.bucketId,
+						error: event.data.message,
+						ev: event,
+					})
+					break
+				case 'dragEnter':
+					if (props.onDragEnter) props.onDragEnter()
+					break
+				case 'dragLeave':
+					if (props.onDragLeave) props.onDragLeave()
+					break
+			}
+		},
+		[dropzoneElementRef, props.onDragEnter, props.onDragLeave]
+	)
+
+	React.useEffect(() => {
+		if (!dropzoneElementRef) return
+
+		const registerHandlers = () => {
+			window.addEventListener('message', onMessage)
+		}
+		const unregisterHandlers = () => {
+			window.removeEventListener('message', onMessage)
+		}
+
+		registerHandlers()
+
+		return () => {
+			unregisterHandlers()
+		}
+	}, [dropzoneElementRef, onMessage])
+
+	return (
+		<div className="dropzone-panel" style={{ visibility: props.hidden ? 'hidden' : 'visible' }}>
+			<iframe
+				ref={setDropzoneElementRef}
+				className="external-frame-panel__iframe"
+				src={props.url}
+				sandbox="allow-forms allow-popups allow-scripts allow-same-origin"
+			></iframe>
+		</div>
+	)
+}