chore: ui refactoring

Author: Julusian

packages/webui/src/client/ui/SegmentAdlibTesting/SegmentAdlibTesting.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { NoteSeverity } from '@sofie-automation/blueprints-integration'
 import { IContextMenuContext } from '../RundownView.js'
-import { IOutputLayerUi, PartUi, SegmentNoteCounts, SegmentUi } from '../SegmentContainer/withResolvedSegment.js'
+import { IOutputLayerUi, PartUi, SegmentUi } from '../SegmentContainer/withResolvedSegment.js'
 import { ContextMenuTrigger } from '@jstarpl/react-contextmenu'
-import { CriticalIconSmall, WarningIconSmall } from '../../lib/ui/icons/notifications.js'
 import { contextMenuHoldToDisplayTime, useCombinedRefs, useRundownViewEventBusListener } from '../../lib/lib.js'
 import { useTranslation } from 'react-i18next'
 import { literal } from '@sofie-automation/corelib/dist/lib'
@@ -28,6 +27,7 @@ import { isPartPlayable } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { UIStudio } from '@sofie-automation/corelib/src/dataModel/Studio.js'
 import { PieceUi } from '@sofie-automation/corelib/src/dataModel/Piece.js'
 import { isLoopRunning } from '@sofie-automation/corelib/src/playout/stateCacheResolver.js'
+import { SegmentHeaderNotes } from '../SegmentHeader/SegmentHeaderNotes.js'
 
 interface IProps {
 	id: string
@@ -36,7 +36,6 @@ interface IProps {
 	playlist: DBRundownPlaylist
 	studio: UIStudio
 	parts: Array<PartUi>
-	segmentNoteCounts: SegmentNoteCounts
 	hasAlreadyPlayed: boolean
 	hasGuestItems: boolean
 	hasRemoteItems: boolean
@@ -79,9 +78,6 @@ export const SegmentAdlibTesting = React.memo(
 		const [squishedHover, setSquishedHover] = useState<null | number>(null)
 		const squishedHoverTimeout = useRef<number | null>(null)
 
-		const criticalNotes = props.segmentNoteCounts.criticial
-		const warningNotes = props.segmentNoteCounts.warning
-
 		const getSegmentContext = () => {
 			const ctx = literal<IContextMenuContext>({
 				segment: props.segment,
@@ -460,30 +456,7 @@ export const SegmentAdlibTesting = React.memo(
 					>
 						{t('Adlib Testing')}
 					</h2>
-					{(criticalNotes > 0 || warningNotes > 0) && (
-						<div className="segment-timeline__title__notes">
-							{criticalNotes > 0 && (
-								<div
-									className="segment-timeline__title__notes__note segment-timeline__title__notes__note--critical"
-									onClick={() => props.onHeaderNoteClick?.(props.segment._id, NoteSeverity.ERROR)}
-									aria-label={t('Critical problems')}
-								>
-									<CriticalIconSmall />
-									<div className="segment-timeline__title__notes__count">{criticalNotes}</div>
-								</div>
-							)}
-							{warningNotes > 0 && (
-								<div
-									className="segment-timeline__title__notes__note segment-timeline__title__notes__note--warning"
-									onClick={() => props.onHeaderNoteClick?.(props.segment._id, NoteSeverity.WARNING)}
-									aria-label={t('Warnings')}
-								>
-									<WarningIconSmall />
-									<div className="segment-timeline__title__notes__count">{warningNotes}</div>
-								</div>
-							)}
-						</div>
-					)}
+					<SegmentHeaderNotes segmentId={props.segment._id} onHeaderNoteClick={props.onHeaderNoteClick} />
 				</ContextMenuTrigger>
 				<div className="segment-timeline__source-layers" role="tree" aria-label={t('Sources')}>
 					{Object.values<IOutputLayerUi>(props.segment.outputLayers)

packages/webui/src/client/ui/SegmentAdlibTesting/SegmentAdlibTestingContainer.tsx

@@ -209,7 +209,6 @@ export const SegmentAdlibTestingContainer = withResolvedSegment<IProps>(function
 			segment={props.segmentui}
 			studio={props.studio}
 			parts={props.parts}
-			segmentNoteCounts={props.segmentNoteCounts}
 			onItemClick={props.onPieceClick}
 			onItemDoubleClick={props.onPieceDoubleClick}
 			playlist={props.playlist}

packages/webui/src/client/ui/SegmentContainer/getReactivePieceNoteCountsForSegment.tsx

@@ -15,7 +15,6 @@ import {
 	RundownLayoutFilterBase,
 	RundownViewLayout,
 } from '@sofie-automation/meteor-lib/dist/collections/RundownLayouts'
-import { getReactivePieceNoteCountsForSegment } from './getReactivePieceNoteCountsForSegment.js'
 import { SegmentViewMode } from './SegmentViewModes.js'
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
 import { AdlibSegmentUi } from '../../lib/shelf.js'
@@ -93,15 +92,9 @@ export interface IResolvedSegmentProps {
 	showDurationSourceLayers?: Set<ISourceLayer['_id']>
 }
 
-export interface SegmentNoteCounts {
-	criticial: number
-	warning: number
-}
-
 export interface ITrackedResolvedSegmentProps {
 	segmentui: SegmentUi | undefined
 	parts: Array<PartUi>
-	segmentNoteCounts: SegmentNoteCounts
 	hasRemoteItems: boolean
 	hasGuestItems: boolean
 	hasAlreadyPlayed: boolean
@@ -125,7 +118,6 @@ export function withResolvedSegment<T extends IResolvedSegmentProps, IState = {}
 					segmentui: undefined,
 					parts: [],
 					pieces: new Map(),
-					segmentNoteCounts: { criticial: 0, warning: 0 },
 					hasRemoteItems: false,
 					hasGuestItems: false,
 					hasAlreadyPlayed: false,
@@ -240,8 +232,6 @@ export function withResolvedSegment<T extends IResolvedSegmentProps, IState = {}
 				}
 			}
 
-			const segmentNoteCounts = getReactivePieceNoteCountsForSegment(segment)
-
 			let lastValidPartIndex = o.parts.length - 1
 
 			for (let i = lastValidPartIndex; i > 0; i--) {
@@ -280,7 +270,6 @@ export function withResolvedSegment<T extends IResolvedSegmentProps, IState = {}
 			return {
 				segmentui: o.segmentExtended,
 				parts: o.parts,
-				segmentNoteCounts,
 				hasAlreadyPlayed: o.hasAlreadyPlayed,
 				hasRemoteItems: o.hasRemoteItems,
 				hasGuestItems: o.hasGuestItems,