fix: cine scrolling was broken when navigating back to studylist (#2974)

* fix: cine clean up when exited

* fix: make cine work while dragging and dropping another displayset

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -10,6 +10,7 @@ import {
   useViewportDialog,
 } from '@ohif/ui';
 
+import { eventTarget, Enums } from '@cornerstonejs/core';
 import { annotation } from '@cornerstonejs/tools';
 import { useTrackedMeasurements } from './../getContextModule';
 
@@ -64,6 +65,26 @@ function TrackedCornerstoneViewport(props) {
     ManufacturerModelName,
   } = displaySet.images[0];
 
+  const cineHandler = () => {
+    if (!cines || !cines[viewportIndex] || !element) {
+      return;
+    }
+
+    const cine = cines[viewportIndex];
+    const isPlaying = cine.isPlaying || false;
+    const frameRate = cine.frameRate || 24;
+
+    const validFrameRate = Math.max(frameRate, 1);
+
+    if (isPlaying) {
+      cineService.playClip(element, {
+        framesPerSecond: validFrameRate,
+      });
+    } else {
+      cineService.stopClip(element);
+    }
+  };
+
   useEffect(() => {
     if (isTracked) {
       annotation.config.style.setViewportToolStyles(viewportId, {
@@ -92,25 +113,33 @@ function TrackedCornerstoneViewport(props) {
     };
   }, [isTracked]);
 
+  // unmount cleanup
   useEffect(() => {
-    if (!cines || !cines[viewportIndex]) {
+    eventTarget.addEventListener(
+      Enums.Events.STACK_VIEWPORT_NEW_STACK,
+      cineHandler
+    );
+
+    return () => {
+      cineService.setCine({ id: viewportIndex, isPlaying: false });
+      eventTarget.removeEventListener(
+        Enums.Events.STACK_VIEWPORT_NEW_STACK,
+        cineHandler
+      );
+    };
+  }, [element]);
+
+  useEffect(() => {
+    if (!cines || !cines[viewportIndex] || !element) {
       return;
     }
 
-    const cine = cines[viewportIndex];
+    cineHandler();
-    const isPlaying = (cine && cine.isPlaying) || false;
-    const frameRate = (cine && cine.frameRate) || 24;
 
-    const validFrameRate = Math.max(frameRate, 1);
+    return () => {
-
-    if (isPlaying) {
-      cineService.playClip(element, {
-        framesPerSecond: validFrameRate,
-      });
-    } else {
       cineService.stopClip(element);
-    }
+    };
-  }, [cines, viewportIndex, cineService, element, displaySet]);
+  }, [cines, viewportIndex, cineService, element]);
 
   if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
     setIsTracked(!isTracked);