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/viewer/src/App.jsx

@@ -13,6 +13,7 @@ import {
   ViewportDialogProvider,
   ViewportGridProvider,
   HangingProtocolProvider,
+  CineProvider,
 } from '@ohif/ui';
 // Viewer Project
 // TODO: Should this influence study list?
@@ -60,6 +61,7 @@ function App({ config, defaultExtensions }) {
     UIViewportDialogService,
     ViewportGridService, // TODO: Should this be a "UI" Service?
     HangingProtocolService,
+    CineService
   } = servicesManager.services;
 
   return (
@@ -70,13 +72,15 @@ function App({ config, defaultExtensions }) {
             <ViewportGridProvider service={ViewportGridService}>
               <HangingProtocolProvider service={HangingProtocolService}>
                 <ViewportDialogProvider service={UIViewportDialogService}>
-                  <SnackbarProvider service={UINotificationService}>
-                    <DialogProvider service={UIDialogService}>
-                      <ModalProvider modal={Modal} service={UIModalService}>
-                        {appRoutes}
-                      </ModalProvider>
-                    </DialogProvider>
-                  </SnackbarProvider>
+                  <CineProvider service={CineService}>
+                    <SnackbarProvider service={UINotificationService}>
+                      <DialogProvider service={UIDialogService}>
+                        <ModalProvider modal={Modal} service={UIModalService}>
+                          {appRoutes}
+                        </ModalProvider>
+                      </DialogProvider>
+                    </SnackbarProvider>
+                  </CineProvider>
                 </ViewportDialogProvider>
               </HangingProtocolProvider>
             </ViewportGridProvider>

platform/viewer/src/appInit.js

@@ -9,9 +9,10 @@ import {
   UIViewportDialogService,
   MeasurementService,
   DisplaySetService,
-  ToolBarSerivce,
+  ToolBarService,
   ViewportGridService,
-  HangingProtocolService
+  HangingProtocolService,
+  CineService
   // utils,
   // redux as reduxOHIF,
 } from '@ohif/core';
@@ -54,9 +55,10 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     UIViewportDialogService,
     MeasurementService,
     DisplaySetService,
-    ToolBarSerivce,
+    ToolBarService,
     ViewportGridService,
-    HangingProtocolService
+    HangingProtocolService,
+    CineService
   ]);
 
   /**

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,12 +1,10 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
-import { classes } from '@ohif/core';
-const { ImageSet } = classes;
 import classNames from 'classnames';
 
 function ViewerViewportGrid(props) {
@@ -194,7 +192,7 @@ function ViewerViewportGrid(props) {
           isActive={isActive}
         >
           <div
-            className={classNames('h-full w-full flex flex-col align-center', {
+            className={classNames('h-full w-full flex flex-col', {
               'pointer-events-none': !isActive,
             })}
           >