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/core/src/defaults/hotkeyBindings.js

@@ -22,6 +22,11 @@ export default [
     keys: ['v'],
     isEditable: true,
   },
+  {
+    commandName: 'toggleCine',
+    label: 'Cine',
+    keys: ['c'],
+  },
   {
     commandName: 'invertViewport',
     label: 'Invert',

platform/core/src/index.js

@@ -24,6 +24,7 @@ import utils from './utils/';
 import defaults from './defaults';
 
 import {
+  CineService,
   UIDialogService,
   UIModalService,
   UINotificationService,
@@ -31,7 +32,7 @@ import {
   //
   DicomMetadataStore,
   DisplaySetService,
-  ToolBarSerivce, // TODO: Typo
+  ToolBarService,
   MeasurementService,
   ViewportGridService,
   HangingProtocolService,
@@ -73,13 +74,14 @@ const OHIF = {
   measurements,
   hangingProtocols,
   //
+  CineService,
   UIDialogService,
   UIModalService,
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
-  ToolBarSerivce, // TODO: TYPO
+  ToolBarService, // TODO: TYPO
   ViewportGridService,
   HangingProtocolService,
   IWebApiDataSource,
@@ -117,13 +119,14 @@ export {
   measurements,
   hangingProtocols,
   //
+  CineService,
   UIDialogService,
   UIModalService,
   UINotificationService,
   UIViewportDialogService,
   DisplaySetService,
   MeasurementService,
-  ToolBarSerivce,
+  ToolBarService,
   ViewportGridService,
   HangingProtocolService,
   IWebApiDataSource,

platform/core/src/services/CineService/CineService.js

@@ -0,0 +1,52 @@
+const name = 'CineService';
+
+const publicAPI = {
+  name,
+  getState: _getState,
+  setCine: _setCine,
+  setIsCineEnabled: _setIsCineEnabled,
+  setServiceImplementation,
+};
+
+const serviceImplementation = {
+  _getState: () => console.warn('getState() NOT IMPLEMENTED'),
+  _setCine: () =>
+    console.warn('setCine() NOT IMPLEMENTED'),
+  _setIsCineEnabled: () =>
+    console.warn('setIsCineEnabled() NOT IMPLEMENTED'),
+};
+
+function _getState() {
+  return serviceImplementation._getState();
+}
+
+function _setCine({ id, frameRate, isPlaying }) {
+  return serviceImplementation._setCine({ id, frameRate, isPlaying });
+}
+
+function _setIsCineEnabled(isCineEnabled) {
+  return serviceImplementation._setIsCineEnabled(isCineEnabled);
+}
+
+function setServiceImplementation({
+  getState: getStateImplementation,
+  setCine: setCineImplementation,
+  setIsCineEnabled: setIsCineEnabledImplementation,
+}) {
+  if (getStateImplementation) {
+    serviceImplementation._getState = getStateImplementation;
+  }
+  if (setCineImplementation) {
+    serviceImplementation._setCine = setCineImplementation;
+  }
+  if (setIsCineEnabledImplementation) {
+    serviceImplementation._setIsCineEnabled = setIsCineEnabledImplementation;
+  }
+}
+
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/CineService/index.js

@@ -0,0 +1,2 @@
+import CineService from './CineService';
+export default CineService;

platform/core/src/services/ToolBarService/ToolBarService.js

@@ -1,3 +1,4 @@
+import merge from 'lodash.merge';
 import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
 
 const EVENTS = {
@@ -36,9 +37,23 @@ export default class ToolBarService {
     });
   }
 
+  setButton(id, button) {
+    if (this.buttons[id]) {
+      this.buttons[id] = merge(this.buttons[id], button);
+      this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
+        buttons: this.buttons,
+        button: this.buttons[id],
+        buttonSections: this.buttonSections
+      });
+    }
+  }
+
   setButtons(buttons) {
     this.buttons = buttons;
-    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
+    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
+      buttons: this.buttons,
+      buttonSections: this.buttonSections
+    });
   }
 
   _buttonTypes() {
@@ -61,7 +76,6 @@ export default class ToolBarService {
     return buttonTypes;
   }
 
-
   createButtonSection(key, buttons) {
     // Maybe do this mapping at time of return, instead of time of create
     // Props check important for validation here...

platform/core/src/services/ViewportGridService/ViewportGridService.js

@@ -50,6 +50,7 @@ function _set(state) {
 function _reset() {
   return serviceImplementation._reset({});
 }
+
 function _setCachedLayout({ numCols, numRows, viewports }) {
   return serviceImplementation._setLayout({ numCols, numRows, viewports });
 }

platform/core/src/services/index.js

@@ -6,8 +6,9 @@ import UINotificationService from './UINotificationService';
 import UIViewportDialogService from './UIViewportDialogService';
 import DicomMetadataStore from './DicomMetadataStore';
 import DisplaySetService from './DisplaySetService';
-import ToolBarSerivce from './ToolBarService';
+import ToolBarService from './ToolBarService';
 import ViewportGridService from './ViewportGridService';
+import CineService from './CineService';
 import HangingProtocolService from './HangingProtocolService';
 
 export {
@@ -19,7 +20,8 @@ export {
   UIViewportDialogService,
   DicomMetadataStore,
   DisplaySetService,
-  ToolBarSerivce,
+  ToolBarService,
   ViewportGridService,
   HangingProtocolService,
+  CineService
 };