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/default/src/commandsModule.js

@@ -1,10 +1,17 @@
-const commandsModule = ({ servicesManager }) => {
-  const { MeasurementService } = servicesManager.services;
+const commandsModule = ({ servicesManager, commandsManager }) => {
+  const { MeasurementService, ViewportGridService, ToolBarService, CineService } = servicesManager.services;
 
   const actions = {
     clearMeasurements: () => {
       MeasurementService.clear();
     },
+    toggleCine: () => {
+      const { viewports } = ViewportGridService.getState();
+      const { isCineEnabled } = CineService.getState();
+      CineService.setIsCineEnabled(!isCineEnabled);
+      ToolBarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
+      viewports.forEach((_, index) => CineService.setCine({ id: index, isPlaying: false }));
+    },
   };
 
   const definitions = {
@@ -13,6 +20,11 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: [],
       options: {},
     },
+    toggleCine: {
+      commandFn: actions.toggleCine,
+      storeContexts: [],
+      options: {},
+    },
   };
 
   return {