fix(MediaStatus PopUp): improve scroll to Part

nrkno · Oct 27, 2023 · cc9401a · cc9401a
1 parent 0f76332
commit cc9401a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss b/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss
@@ -22,12 +22,20 @@
 
 .media-status-panel__pop-out {
 	position: absolute;
-    top: 20px;
-    right: 20px;
-    left: auto;
+	top: 20px;
+	right: 20px;
+	left: auto;
 	opacity: 0.5;
+	visibility: visible;
+	transition: opacity 200ms, visibility 0ms 0ms;
 
 	&:hover {
 		opacity: 1;
 	}
 }
+
+.media-status-panel.velocity-animating .media-status-panel__pop-out {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 200ms, visibility 0ms 200ms;
+}
diff --git a/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.tsx b/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.tsx
@@ -7,7 +7,8 @@ import { TimingDataResolution, TimingTickResolution, withTiming } from '../Rundo
 import { RundownUtils } from '../../../lib/rundown'
 import classNames from 'classnames'
 import { MediaStatusIndicator } from '../../MediaStatus/MediaStatusIndicator'
-import RundownViewEventBus, { RundownViewEvents } from '../../../../lib/api/triggers/RundownViewEventBus'
+import { scrollToPart, scrollToSegment } from '../../../lib/viewPort'
+import { logger } from '../../../../lib/logging'
 
 export const MediaStatusPopUpItem = withTiming<
 	{
@@ -58,25 +59,29 @@ export const MediaStatusPopUpItem = withTiming<
 	const onPartIdentifierClick = useCallback(() => {
 		if (!segmentId || !partId) return
 
-		RundownViewEventBus.emit(RundownViewEvents.GO_TO_PART, {
-			segmentId,
-			partId,
-			zoomInToFit: true,
-		})
+		scrollToPart(partId, false, false, false).catch(logger.error)
 	}, [segmentId, partId])
 
+	const onSegmentIdentifierClick = useCallback(() => {
+		if (!segmentId) return
+
+		scrollToSegment(segmentId, false, false).catch(logger.error)
+	}, [segmentId])
+
 	return (
 		<tr className="media-status-popup-item">
 			<td className="media-status-popup-item__playout-indicator">
-				{isNext ? <div className="media-status-popup-item__next-indicator"></div> : null}
+				{isNext && !isLive ? <div className="media-status-popup-item__next-indicator"></div> : null}
 				{isLive ? <div className="media-status-popup-item__live-indicator"></div> : null}
 			</td>
 			<td className="media-status-popup-item__countdown">
 				{!isAdLib && thisPartCountdown ? RundownUtils.formatTimeToShortTime(thisPartCountdown) : null}
 			</td>
 			<td className="media-status-popup-item__identifiers">
 				{segmentIdentifier ? (
-					<button className="media-status-popup-item__segment-identifier">{segmentIdentifier}</button>
+					<button className="media-status-popup-item__segment-identifier" onClick={onSegmentIdentifierClick}>
+						{segmentIdentifier}
+					</button>
 				) : null}
 				{partIdentifier ? (
 					<button className="media-status-popup-item__part-identifier" onClick={onPartIdentifierClick}>