Skip to content

Feat: Ability to add scripts and FirstWords/LastWords on VT's #1355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nytamin merged 8 commits into from
Jan 22, 2025
Merged

Feat: Ability to add scripts and FirstWords/LastWords on VT's #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7bec461
feat: add in-out words to the VT type
olzzon Dec 4, 2024
6d7bdeb
feat: dummy VT preview on ON AIR playhead when arg ignore_piece_conte…
olzzon Dec 4, 2024
8c2eabd
feat: hack add in out work in floating inspector for testing without …
olzzon Dec 5, 2024
d234a78
feat: vt - inout add text in preview window
olzzon Dec 9, 2024
c3f0761
fix: css VT hover align in and out words
olzzon Dec 10, 2024
b17ec63
feat: css UI align hover preview
olzzon Dec 10, 2024
4346290
fix: in out words on VT should always be white
olzzon Jan 10, 2025
c77b6a5
fix: fixed width on inspector
olzzon Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/blueprints-integration/src/content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
32 changes: 29 additions & 3 deletions packages/webui/src/client/styles/rundownView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -3148,8 +3148,8 @@ svg.icon {
> .video-preview,
> .thumbnail {
display: block;
width: 320px;
height: 180px;
width: 414px;
height: 233px;
background: #000;
}

Expand Down Expand Up @@ -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;
Expand Down
22 changes: 16 additions & 6 deletions packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -109,19 +110,22 @@ export const VTFloatingInspector: React.FC<IProps> = ({
const { t } = useTranslation()
const inspectorRef = useRef<HTMLDivElement>(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)

Expand All @@ -142,9 +146,15 @@ export const VTFloatingInspector: React.FC<IProps> = ({
>
{showMiniInspectorNotice && noticeLevel && renderNotice(t, noticeLevel, noticeMessages)}
{showMiniInspectorClipData && (
<div className="segment-timeline__mini-inspector__properties">
<span className="mini-inspector__value">{content?.fileName}</span>
</div>
<>
<div className="segment-timeline__mini-inspector__properties">
<span className="mini-inspector__value">{content?.fileName}</span>
</div>
<div className="segment-timeline__mini-inspector__properties">
<span className="mini-inspector__firstwords">{content?.firstWords}</span>
<span className="mini-inspector__lastwords">{content?.lastWords}</span>
</div>
</>
)}
</div>
)
Expand All @@ -157,7 +167,7 @@ export const VTFloatingInspector: React.FC<IProps> = ({
ref={inspectorRef}
loop={loop}
seek={seek}
previewUrl={previewUrl}
previewUrl={playPreviewUrl}
timePosition={offsetTimePosition}
studioSettings={studio?.settings}
floatingInspectorStyle={floatingInspectorStyle}
Expand Down
Loading