OHIF-323: Cine Dialog (#1961)

* ohif-323: add cineplayer flow

* ohif-323: improve toolbar flow of cine

* ohif-323: improve cine styles

* ohif-323: use toggle instead of set

* ohif-323: add compatibility comment

* ohif-323: move cine logic to command

* ohif-323: cr update

* ohif-323: remove typo and update svg title

* ohif-323: remove log

* ohif-323: update props and remove dead code

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

extensions/measurement-tracking/src/getViewportModule.js

@@ -12,10 +12,10 @@ const OHIFCornerstoneViewport = props => {
   );
 };
 
-function getViewportModule({ servicesManager }) {
+function getViewportModule({ servicesManager, commandsManager }) {
   const ExtendedOHIFCornerstoneSRViewport = props => {
     return (
-      <OHIFCornerstoneViewport servicesManager={servicesManager} {...props} />
+      <OHIFCornerstoneViewport servicesManager={servicesManager} commandsManager={commandsManager} {...props} />
     );
   };
 

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

@@ -7,6 +7,7 @@ import OHIF, { utils } from '@ohif/core';
 import {
   Notification,
   ViewportActionBar,
+  useCine,
   useViewportGrid,
   useViewportDialog,
 } from '@ohif/ui';
@@ -35,10 +36,6 @@ const BaseAnnotationTool = cornerstoneTools.importInternal(
   'base/BaseAnnotationTool'
 );
 
-// const cine = viewportSpecificData.cine;
-// isPlaying = cine.isPlaying === true;
-// frameRate = cine.cineFrameRate || frameRate;
-
 const { StackManager } = OHIF.utils;
 
 function TrackedCornerstoneViewport({
@@ -47,6 +44,7 @@ function TrackedCornerstoneViewport({
   displaySet,
   viewportIndex,
   servicesManager,
+  commandsManager
 }) {
   const {
     ToolBarService,
@@ -54,12 +52,11 @@ function TrackedCornerstoneViewport({
     MeasurementService,
   } = servicesManager.services;
   const [trackedMeasurements] = useTrackedMeasurements();
-  const [{ activeViewportIndex, viewports }] = useViewportGrid();
-  // viewportIndex, onSubmit
+  const [{ activeViewportIndex, viewports }, viewportGridService] = useViewportGrid();
+  const [{ isCineEnabled, cines }, cineService] = useCine();
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);
   const [element, setElement] = useState(null);
-
   const [isTracked, setIsTracked] = useState(false);
   const [trackedMeasurementId, setTrackedMeasurementId] = useState(null);
 
@@ -71,6 +68,10 @@ function TrackedCornerstoneViewport({
     };
   }, []);
 
+  useEffect(() => {
+    cineService.setCine({ id: viewportIndex });
+  }, [viewportIndex]);
+
   useEffect(() => {
     const unsubcribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
       MeasurementService,
@@ -298,7 +299,9 @@ function TrackedCornerstoneViewport({
     );
   }
 
-  // TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
+  const cine = cines[viewportIndex];
+  const isPlaying = cine && cine.isPlaying || false;
+  const frameRate = cine && cine.frameRate || 24;
 
   return (
     <>
@@ -333,6 +336,14 @@ function TrackedCornerstoneViewport({
             scanner: ManufacturerModelName || '',
           },
         }}
+        showNavArrows={!isCineEnabled}
+        showCine={isCineEnabled}
+        cineProps={{
+          isPlaying,
+          onClose: () => commandsManager.runCommand('toggleCine'),
+          onPlayPauseChange: isPlaying => cineService.setCine({ id: activeViewportIndex, isPlaying }),
+          onFrameRateChange: frameRate => cineService.setCine({ id: activeViewportIndex, frameRate }),
+        }}
       />
       {/* TODO: Viewport interface to accept stack or layers of content like this? */}
       <div className="relative flex flex-row w-full h-full overflow-hidden">
@@ -347,8 +358,8 @@ function TrackedCornerstoneViewport({
           // TODO: ViewportGrid Context?
           isActive={true} // todo
           isStackPrefetchEnabled={true} // todo
-          isPlaying={false}
-          frameRate={24}
+          isPlaying={isPlaying}
+          frameRate={frameRate}
           isOverlayVisible={true}
           loadingIndicatorComponent={ViewportLoadingIndicator}
           viewportOverlayComponent={props => {
@@ -408,6 +419,7 @@ function _getCornerstoneStack(displaySet, dataSource) {
   return stack;
 }
 
+// TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
 function _onDoubleClick() {
   const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
     'manipulatorState'