From cc9401a9f5abf7ee387c654a729a5e6fc254bd3c Mon Sep 17 00:00:00 2001
From: Jan Starzak <jan.starzak@gmail.com>
Date: Fri, 27 Oct 2023 14:07:57 +0200
Subject: [PATCH] fix(MediaStatus PopUp): improve scroll to Part

---
 .../MediaStatusPopUp/MediaStatusPopUp.scss    | 14 ++++++++++---
 .../MediaStatusPopUp/MediaStatusPopUpItem.tsx | 21 ++++++++++++-------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss b/meteor/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss
index 9f02a92e90..1b2c927638 100644
--- 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
index 3f2cbb1e8c..7bfb1a131f 100644
--- 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,17 +59,19 @@ 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">
@@ -76,7 +79,9 @@ export const MediaStatusPopUpItem = withTiming<
 			</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}>