Merge pull request Sofie-Automation#1146 from nrkno/SOFIE-2867-r50-drop-plugin

feat: support external url dropzones

Author: Mint de Wit

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/Settings/components/FilterEditor.tsx

@@ -531,6 +531,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

@@ -47,6 +47,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'
@@ -178,6 +179,7 @@ const bucketTarget = {
 
 interface IState {
 	dropActive: boolean
+	dropFrameActive: string | null
 	bucketName: string
 	adLibPieces: BucketAdLibItem[]
 	singleClickMode: boolean
@@ -244,6 +246,7 @@ export interface IBucketPanelProps {
 	onSelectAdlib
 	onAdLibContext: (args: { contextBucket: Bucket; contextBucketAdLib: BucketAdLibItem }, callback: () => void) => void
 	onPieceNameRename: () => void
+	extFrameDropZones: { _id: string; url: string }[]
 }
 
 export interface IBucketPanelTrackedProps extends IDashboardPanelTrackedProps {
@@ -378,6 +381,7 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 
 					this.state = {
 						dropActive: false,
+						dropFrameActive: null,
 						bucketName: props.bucket.name,
 						adLibPieces: props.adLibPieces.slice(),
 						singleClickMode: false,
@@ -419,6 +423,7 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 					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) {
@@ -436,6 +441,7 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 
 					window.removeEventListener(MOSEvents.dragenter, this.onDragEnter)
 					window.removeEventListener(MOSEvents.dragleave, this.onDragLeave)
+					RundownViewEventBus.removeListener(RundownViewEvents.TOGGLE_SHELF_DROPZONE, this.onToggleDropFrame)
 				}
 
 				onRevealInShelf = (e: RevealInShelfEvent) => {
@@ -791,6 +797,13 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 					)
 				}
 
+				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
 
@@ -830,7 +843,8 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 								<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}
@@ -908,6 +922,18 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 												</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>
 							)
@@ -919,3 +945,88 @@ export const BucketPanel = translateWithTracker<Translated<IBucketPanelProps>, I
 		)
 	)
 )
+
+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>
+	)
+}