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>

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button, Tooltip } from '../';
+import { Icon, ButtonGroup, Button, Tooltip, CinePlayer } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';
 
 const classes = {
@@ -14,6 +14,8 @@ const classes = {
 const ViewportActionBar = ({
   studyData,
   showNavArrows,
+  showCine,
+  cineProps,
   showPatientInfo: patientInfoVisibility,
   onSeriesChange,
   onDoubleClick,
@@ -71,11 +73,11 @@ const ViewportActionBar = ({
     if (modality === 'SR') {
       const TooltipMessage = isLocked
         ? () => (
-            <div>
-              This SR is locked. <br />
+          <div>
+            This SR is locked. <br />
               Measurements cannot be duplicated.
-            </div>
-          )
+          </div>
+        )
         : () => <div>This SR is unlocked.</div>;
       return (
         <>
@@ -117,13 +119,13 @@ const ViewportActionBar = ({
                       can be viewed <br /> in the measurement panel
                     </>
                   ) : (
-                    <>
-                      Measurements for
+                      <>
+                        Measurements for
                       <span className="font-bold text-white"> untracked </span>
                       series <br /> will not be shown in the <br /> measurements
                       panel
                     </>
-                  )}
+                    )}
                 </span>
               </div>
             </div>
@@ -137,10 +139,10 @@ const ViewportActionBar = ({
 
   return (
     <div
-      className="flex items-center p-2 border-b select-none border-primary-light min-h-12"
+      className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
       onDoubleClick={onDoubleClick}
     >
-      <div className="flex flex-grow">
+      <div className="flex flex-grow min-w-48 flex-1 mt-2">
         <div className="flex items-center">
           {renderIconStatus()}
           <span className="ml-2 text-white text-large">{label}</span>
@@ -166,8 +168,8 @@ const ViewportActionBar = ({
           </div>
         </div>
       </div>
-      {showNavArrows && (
-        <div className="ml-2">
+      {showNavArrows && !showCine && (
+        <div className="mt-2">
           <ButtonGroup>
             <Button
               size="initial"
@@ -186,7 +188,12 @@ const ViewportActionBar = ({
           </ButtonGroup>
         </div>
       )}
-      <div className="flex ml-4 mr-2" onClick={onPatientInfoClick}>
+      {showCine && !showNavArrows && (
+        <div className="mt-2 min-w-48 max-w-48 mr-auto">
+          <CinePlayer {...cineProps} />
+        </div>
+      )}
+      <div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
         <PatientInfo
           showPatientInfoRef={showPatientInfoRef}
           isOpen={showPatientInfo}
@@ -206,6 +213,8 @@ const ViewportActionBar = ({
 ViewportActionBar.propTypes = {
   onSeriesChange: PropTypes.func.isRequired,
   showNavArrows: PropTypes.bool,
+  showCine: PropTypes.bool,
+  cineProps: PropTypes.object,
   showPatientInfo: PropTypes.bool,
   studyData: PropTypes.shape({
     label: PropTypes.string.isRequired,
@@ -228,6 +237,8 @@ ViewportActionBar.propTypes = {
 };
 
 ViewportActionBar.defaultProps = {
+  cineProps: {},
+  showCine: false,
   showNavArrows: true,
   showPatientInfo: false,
 };