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,
           })
         }

platform/docs/docs/configuration/configurationFiles.md

@@ -185,6 +185,7 @@ if auth headers are used, a preflight request is required.
   load the volume progressively as the data arrives (each webworker has the shared buffer and can write to it). However, there might be certain environments that do not support sharedArrayBuffer. In that case, you can set this flag to false and the viewer will use the regular arrayBuffer which might be slower for large volume loading.
 - `supportsWildcard`: (default to false), if set to true, the datasource will support wildcard matching for patient name and patient id.
 - `allowMultiSelectExport`: (default to false), if set to true, the user will be able to select the datasource to export the report to.
+- `autoPlayCine`: (default to false), if set to true, data sets with the DICOM frame time tag (i.e. (0018,1063)) will auto play when displayed
 - `dangerouslyUseDynamicConfig`: Dynamic config allows user to pass `configUrl` query string. This allows to load config without recompiling application. If the `configUrl` query string is passed, the worklist and modes will load from the referenced json rather than the default .env config. If there is no `configUrl` path provided, the default behaviour is used and there should not be any deviation from current user experience.<br/>
 Points to consider while using `dangerouslyUseDynamicConfig`:<br/>
   - User have to enable this feature by setting `dangerouslyUseDynamicConfig.enabled:true`. By default it is `false`.

platform/ui/src/components/CinePlayer/CinePlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 
@@ -48,6 +48,10 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
     debouncedSetFrameRate(frameRate);
   };
 
+  useEffect(() => {
+    setFrameRate(defaultFrameRate);
+  }, [defaultFrameRate]);
+
   return (
     <div
       className={classNames(