diff --git a/packages/apps/client/src/components/CurrentRundown/CurrentRundown.tsx b/packages/apps/client/src/components/CurrentRundown/CurrentRundown.tsx index bddf8a0..9710f54 100644 --- a/packages/apps/client/src/components/CurrentRundown/CurrentRundown.tsx +++ b/packages/apps/client/src/components/CurrentRundown/CurrentRundown.tsx @@ -3,7 +3,7 @@ import { action } from 'mobx' import { observer } from 'mobx-react-lite' import { RootAppStore } from 'src/stores/RootAppStore' import { Segment } from './Segment' -import { Button } from 'react-bootstrap' +import { Button, ButtonGroup, ToggleButton } from 'react-bootstrap' import classes from './CurrentRundown.module.scss' import { useNavigate } from 'react-router-dom' import { SystemStatusAlertBars } from 'src/components/SystemStatusAlertBars/SystemStatusAlertBars' @@ -86,6 +86,18 @@ const CurrentRundown = observer((): React.JSX.Element => { [segmentLineListEl] ) + const onShowOnlyLinesWithScriptToggle = () => { + if (!openRundown) return + const oldState = openRundown.filter ?? null + + if (oldState === null) { + openRundown.setFilter('onlyScript') + return + } + + openRundown.setFilter(null) + } + if (!openRundown) { return

No open rundown

} @@ -93,17 +105,29 @@ const CurrentRundown = observer((): React.JSX.Element => { return ( <>

{openRundown.name}

-

+

-

+ + + Show only Lines with script + + +
diff --git a/packages/apps/client/src/components/CurrentRundown/Segment.tsx b/packages/apps/client/src/components/CurrentRundown/Segment.tsx index 5264644..db6daec 100644 --- a/packages/apps/client/src/components/CurrentRundown/Segment.tsx +++ b/packages/apps/client/src/components/CurrentRundown/Segment.tsx @@ -9,6 +9,8 @@ import { UILineId } from 'src/model/UILine' const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => { if (!segment) return null + const isRundownFilterEnabled = (RootAppStore.rundownStore.openRundown?.filter ?? null) !== null + function isSelected(lineId: UILineId) { return lineId === RootAppStore.uiStore.selectedLineId } @@ -18,13 +20,17 @@ const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Elemen RootAppStore.uiStore.setSelectedLineId(lineId) } + const filteredLines = segment.linesInOrderFiltered + + if (filteredLines.length === 0 && isRundownFilterEnabled) return null + return (
  • {segment.name}
    diff --git a/packages/apps/client/src/hooks/useKeepRundownOutputInPosition.ts b/packages/apps/client/src/hooks/useKeepRundownOutputInPosition.ts index 83f9237..9a12dfe 100644 --- a/packages/apps/client/src/hooks/useKeepRundownOutputInPosition.ts +++ b/packages/apps/client/src/hooks/useKeepRundownOutputInPosition.ts @@ -52,7 +52,7 @@ export function useKeepRundownOutputInPosition( const els = getAllAnchorElements() const [anchorOffset, anchorEl] = findClosestElement(els, focusPosition, positionRef.current) - console.log('Chosen anchor is: ', anchorOffset, anchorEl, 'position is: ', positionRef.current) + // console.log('Chosen anchor is: ', anchorOffset, anchorEl, 'position is: ', positionRef.current) const beforeTime = Number(document.timeline.currentTime) @@ -74,7 +74,7 @@ export function useKeepRundownOutputInPosition( behavior: 'instant', }) - console.log('Position now is: ', positionRef.current, diff) + // console.log('Position now is: ', positionRef.current, diff) onUpdate?.({ element: anchorEl, @@ -94,8 +94,13 @@ function observeUIRundown(rundown: UIRundown | null, clb: Lambda): Lambda { const destructors: Lambda[] = [] destructors.push( - observe(rundown, () => { - // console.log('rundown', change) + observe(rundown, 'name', (change) => { + // console.log('rundown:name', change) + + clb() + }), + observe(rundown, 'ready', (change) => { + // console.log('rundown:ready', change) clb() }) @@ -134,7 +139,7 @@ function observeUISegment(segment: UISegment | null, clb: Lambda): Lambda { const destructors: Lambda[] = [] destructors.push( - observe(segment, () => { + observe(segment, (change) => { // console.log('segment', change) clb() @@ -175,22 +180,22 @@ function observeUILine(line: UILine | null, clb: Lambda): Lambda { destructors.push( observe(line, 'identifier', () => { - // console.log('line:identifier', change) + // console.log('line:identifier') clb() }), observe(line, 'slug', () => { - // console.log('line:slug', change) + // console.log('line:slug') clb() }), observe(line, 'rank', () => { - // console.log('line:rank', change) + // console.log('line:rank') clb() }), observe(line, 'script', () => { - // console.log('line:script', change) + // console.log('line:script') clb() }) diff --git a/packages/apps/client/src/model/UIRundown.ts b/packages/apps/client/src/model/UIRundown.ts index 9d95ef1..f039922 100644 --- a/packages/apps/client/src/model/UIRundown.ts +++ b/packages/apps/client/src/model/UIRundown.ts @@ -14,6 +14,8 @@ import { RundownStore } from '../stores/RundownStore' export type UIRundownId = RundownPlaylistId +type UIRundownFilter = 'onlyScript' | null + export class UIRundown { name: string = '' @@ -23,11 +25,11 @@ export class UIRundown { private rundowns = observable.map() + filter: UIRundownFilter = null + constructor(private store: RundownStore, public id: UIRundownId) { makeAutoObservable(this, { - updateFromJson: action, segmentsInOrder: computed, - close: action, }) this.init().catch(console.error) } @@ -101,10 +103,10 @@ export class UIRundown { this.store.connection.segment.on('created', this.onSegmentCreated) } - updateFromJson(json: RundownPlaylist) { + updateFromJson = action((json: RundownPlaylist) => { this.name = json.label this.ready = true - } + }) get segmentsInOrder(): UISegment[] { return Array.from(this.segments.values()).sort((a, b) => { @@ -115,12 +117,20 @@ export class UIRundown { }) } - close(): void { + get segmentsInOrderFiltered(): UISegment[] { + return this.segmentsInOrder + } + + setFilter = action((filter: UIRundownFilter) => { + this.filter = filter + }) + + close = action(() => { this.store.openRundown = null this.store.connection.rundown.unSubscribeFromRundownsInPlaylist(this.id).catch(console.error) this.dispose() - } + }) dispose(): void { // unregister event handlers from services diff --git a/packages/apps/client/src/model/UISegment.ts b/packages/apps/client/src/model/UISegment.ts index e057aa9..790947f 100644 --- a/packages/apps/client/src/model/UISegment.ts +++ b/packages/apps/client/src/model/UISegment.ts @@ -63,6 +63,22 @@ export class UISegment { .sort((a, b) => a.rank - b.rank) } + get linesInOrderFiltered(): UILine[] { + return Array.from(this.lines.values()) + .slice() + .filter(this.doesLineMatchFilter) + .sort((a, b) => a.rank - b.rank) + } + + private doesLineMatchFilter = (line: UILine): boolean => { + if (this.owner.filter === null) return true + if (this.owner.filter === 'onlyScript') { + if (line.script === null || line.script.trim() === '') return false + return true + } + return true + } + private onPartCreated = action('onPartCreated', (json: Part) => { if (json.segmentId !== this.id) return