diff --git a/packages/blueprints-integration/src/content.ts b/packages/blueprints-integration/src/content.ts index 67824be905..975860172c 100644 --- a/packages/blueprints-integration/src/content.ts +++ b/packages/blueprints-integration/src/content.ts @@ -55,6 +55,10 @@ export interface VTContent extends BaseContent { /** Duration of extra content past sourceDuration. Not planned to play back but present on the media and playable. */ postrollDuration?: number editable?: VTEditableParameters + /** This is for the VT's in out words */ + firstWords?: string + lastWords?: string + fullScript?: string } export interface GraphicsContent extends BaseContent { diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss index b454a90287..70a0b168f4 100644 --- a/packages/webui/src/client/styles/rundownView.scss +++ b/packages/webui/src/client/styles/rundownView.scss @@ -2923,7 +2923,7 @@ svg.icon { animation: 0.2s inspector-fadeIn; animation-iteration-count: 1; border: 1px black solid; - max-width: 26em; + width: 26em; font-weight: 400; &.segment-timeline__mini-inspector--sub-inspector { @@ -3148,8 +3148,8 @@ svg.icon { > .video-preview, > .thumbnail { display: block; - width: 320px; - height: 180px; + width: 414px; + height: 233px; background: #000; } @@ -3263,6 +3263,32 @@ svg.icon { word-break: break-all; white-space: normal; } + .mini-inspector__firstwords { + color: #ffffff; + font-weight: 200; + font-size: 0.8em; + letter-spacing: 0em; + line-height: 80%; + max-width: 60vw; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: normal; + } + .mini-inspector__lastwords { + color: #ffffff; + font-weight: 200; + font-size: 0.8em; + letter-spacing: 0em; + max-width: 60vw; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: normal; + position: absolute; + bottom: 7px; + right: 7px; + } .mini-inspector__system { font-weight: 300; font-style: italic; diff --git a/packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx b/packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx index 5edb6e68e8..8966eaa98a 100644 --- a/packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx +++ b/packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx @@ -13,6 +13,7 @@ import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios' import { ITranslatableMessage, translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage' import { IFloatingInspectorPosition, useInspectorPosition } from './IFloatingInspectorPosition' import { ReadonlyDeep } from 'type-fest' +import { getIgnorePieceContentStatus } from '../../lib/localStorage' interface IProps { status: PieceStatusCode | undefined @@ -109,19 +110,22 @@ export const VTFloatingInspector: React.FC = ({ const { t } = useTranslation() const inspectorRef = useRef(null) + const debugMode = getIgnorePieceContentStatus() + const playPreviewUrl = debugMode ? 'http://some-ip-here:3000/preview.mp4' : previewUrl || '' + const itemDuration = content?.sourceDuration || renderedDuration || 0 const seek = content?.seek ?? 0 const loop = content?.loop ?? false const offsetTimePosition = timePosition + seek - const showVideoPlayerInspector = !hideHoverscrubPreview && previewUrl + const showVideoPlayerInspector = !hideHoverscrubPreview && (previewUrl || debugMode) const showMiniInspectorClipData = shouldShowFloatingInspectorContent(status ?? PieceStatusCode.UNKNOWN, content) const showMiniInspectorNotice = noticeLevel !== null const showMiniInspectorData = showMiniInspectorNotice || showMiniInspectorClipData const showAnyFloatingInspector = Boolean(showVideoPlayerInspector) || showMiniInspectorData - const shown = showMiniInspector && itemElement !== undefined && showAnyFloatingInspector + const shown = showMiniInspector && (itemElement !== undefined || debugMode) && showAnyFloatingInspector const { style: floatingInspectorStyle, isFlipped } = useInspectorPosition(position, inspectorRef, shown) @@ -142,9 +146,15 @@ export const VTFloatingInspector: React.FC = ({ > {showMiniInspectorNotice && noticeLevel && renderNotice(t, noticeLevel, noticeMessages)} {showMiniInspectorClipData && ( -
- {content?.fileName} -
+ <> +
+ {content?.fileName} +
+
+ {content?.firstWords} + {content?.lastWords} +
+ )} ) @@ -157,7 +167,7 @@ export const VTFloatingInspector: React.FC = ({ ref={inspectorRef} loop={loop} seek={seek} - previewUrl={previewUrl} + previewUrl={playPreviewUrl} timePosition={offsetTimePosition} studioSettings={studio?.settings} floatingInspectorStyle={floatingInspectorStyle}