fix(cine): Use the frame rate specified in DICOM and optionally auto play cine (#3735)

Co-authored-by: rareramos <rareramos1126@gmail.com>
Co-authored-by: Doug Horner <horner@mieweb.com>
Co-authored-by: Rehan <58819707+Rayhan-011@users.noreply.github.com>

extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx

@@ -1,11 +1,19 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { CinePlayer, useCine, useViewportGrid } from '@ohif/ui';
 import { Enums, eventTarget } from '@cornerstonejs/core';
+import { useAppConfig } from '@state';
 
 function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
-  const { toolbarService, customizationService } = servicesManager.services;
-  const [{ isCineEnabled, cines }, cineService] = useCine();
-  const [{ activeViewportId }] = useViewportGrid();
+  const {
+    toolbarService,
+    customizationService,
+    displaySetService,
+    viewportGridService,
+    cineService,
+  } = servicesManager.services;
+  const [{ isCineEnabled, cines }] = useCine();
+  const [newStackFrameRate, setNewStackFrameRate] = useState(24);
+  const [appConfig] = useAppConfig();
 
   const { component: CinePlayerComponent = CinePlayer } =
     customizationService.get('cinePlayer') ?? {};
@@ -45,14 +53,37 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
     }
   };
 
+  const newStackCineHandler = useCallback(() => {
+    const { viewports } = viewportGridService.getState();
+    const { displaySetInstanceUIDs } = viewports.get(viewportId);
+
+    let frameRate = 24;
+    let isPlaying = cines[viewportId].isPlaying;
+    displaySetInstanceUIDs.forEach(displaySetInstanceUID => {
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      if (displaySet.FrameRate) {
+        // displaySet.FrameRate corresponds to DICOM tag (0018,1063) which is defined as the the frame time in milliseconds
+        // So a bit of math to get the actual frame rate.
+        frameRate = Math.round(1000 / displaySet.FrameRate);
+        isPlaying ||= !!appConfig.autoPlayCine;
+      }
+    });
+
+    if (isPlaying) {
+      cineService.setIsCineEnabled(isPlaying);
+    }
+    cineService.setCine({ id: viewportId, isPlaying, frameRate });
+    setNewStackFrameRate(frameRate);
+  }, [cineService, displaySetService, viewportId, viewportGridService, cines]);
+
   useEffect(() => {
-    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
 
     return () => {
       cineService.setCine({ id: viewportId, isPlaying: false });
-      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
     };
-  }, [enabledVPElement]);
+  }, [enabledVPElement, newStackCineHandler]);
 
   useEffect(() => {
     if (!cines || !cines[viewportId] || !enabledVPElement) {
@@ -75,17 +106,18 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
     isCineEnabled && (
       <CinePlayerComponent
         className="absolute left-1/2 bottom-3 -translate-x-1/2"
+        frameRate={newStackFrameRate}
         isPlaying={isPlaying}
         onClose={handleCineClose}
         onPlayPauseChange={isPlaying =>
           cineService.setCine({
-            id: activeViewportId,
+            id: viewportId,
             isPlaying,
           })
         }
         onFrameRateChange={frameRate =>
           cineService.setCine({
-            id: activeViewportId,
+            id: viewportId,
             frameRate,
           })
         }