fix for broken CINE player

extensions/ohif-cornerstone-extension/src/ToolbarModule.js

@@ -21,7 +21,8 @@
 
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
-  SET_TOOL_ACTIVE: 'setToolActive'
+  SET_TOOL_ACTIVE: 'setToolActive',
+  BUILT_IN: 'builtIn'
 };
 
 const definitions = [
@@ -86,6 +87,16 @@ const definitions = [
     //
     type: TOOLBAR_BUTTON_TYPES.COMMAND,
     commandName: 'resetViewport'
+  },
+  {
+    id: 'Cine',
+    label: 'CINE',
+    icon: 'youtube',
+    //
+    type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
+    options: {
+      behavior: 'CINE'
+    }
   }
 ];
 

src/App.js

@@ -13,7 +13,6 @@ import {
 } from './utils/index.js';
 
 import { I18nextProvider } from 'react-i18next';
-// import ConnectedToolContextMenu from './connectedComponents/ConnectedToolContextMenu';
 import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
 import OHIFDicomHtmlExtension from '@ohif/extension-dicom-html';
 import OHIFDicomMicroscopyExtension from '@ohif/extension-dicom-microscopy';
@@ -57,7 +56,6 @@ setupTools(store);
 
 /** TODO: extensions should be passed in as prop as soon as we have the extensions as separate packages and then registered by ExtensionsManager */
 extensionManager.registerExtensions([
-  // new OHIFCornerstoneExtension({ children }),
   OHIFCornerstoneExtension,
   OHIFVTKExtension,
   OHIFDicomPDFExtension,

src/connectedComponents/ConnectedCineDialog.js

@@ -20,14 +20,14 @@ const mapStateToProps = state => {
 
   const cineData = cine || {
     isPlaying: false,
-    cineFrameRate: 24
+    cineFrameRate: 24,
   };
 
   // New props we're creating?
   return {
     activeEnabledElement: dom,
     activeViewportCineData: cineData,
-    activeViewportIndex: state.viewports.activeViewportIndex
+    activeViewportIndex: state.viewports.activeViewportIndex,
   };
 };
 
@@ -35,7 +35,7 @@ const mapDispatchToProps = dispatch => {
   return {
     dispatchSetViewportSpecificData: (viewportIndex, data) => {
       dispatch(setViewportSpecificData(viewportIndex, data));
-    }
+    },
   };
 };
 
@@ -43,7 +43,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
   const {
     activeEnabledElement,
     activeViewportCineData,
-    activeViewportIndex
+    activeViewportIndex,
   } = propsFromState;
 
   return {
@@ -54,7 +54,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       cine.isPlaying = !cine.isPlaying;
 
       propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        cine
+        cine,
       });
     },
     onFrameRateChanged: frameRate => {
@@ -62,7 +62,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       cine.cineFrameRate = frameRate;
 
       propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        cine
+        cine,
       });
     },
     onClickNextButton: () => {
@@ -89,7 +89,7 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       if (!stackData || !stackData.data || !stackData.data.length) return;
       const lastIndex = stackData.data[0].imageIds.length - 1;
       scrollToIndex(activeEnabledElement, lastIndex);
-    }
+    },
   };
 };
 

src/connectedComponents/ToolbarRow.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { RoundedButtonGroup, ToolbarButton } from 'react-viewerbase';
 import { commandsManager, extensionManager } from './../App.js';
 
+import ConnectedCineDialog from './ConnectedCineDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 import { MODULE_TYPES } from 'ohif-core';
@@ -38,7 +39,10 @@ class ToolbarRow extends Component {
     this.state = {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
+      isCineDialogOpen: false,
     };
+
+    this._handleBuiltIn = _handleBuiltIn.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -85,33 +89,47 @@ class ToolbarRow extends Component {
       ? rightSidebarToggle[0].value
       : null;
 
-    //const getButtonComponents = _getButtonComponents.bind(this);
     const buttonComponents = _getButtonComponents.call(
       this,
       this.state.toolbarButtons,
       this.state.activeButtons
     );
 
+    const cineDialogContainerStyle = {
+      display: this.state.isCineDialogOpen ? 'block' : 'none',
+      position: 'absolute',
+      top: '82px',
+      zIndex: 999,
+    };
+
     return (
-      <div className="ToolbarRow">
+      <>
-        <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
+        <div className="ToolbarRow">
-          <RoundedButtonGroup
+          <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
-            options={leftSidebarToggle}
+            <RoundedButtonGroup
-            value={leftSidebarValue}
+              options={leftSidebarToggle}
-            onValueChanged={this.onLeftSidebarValueChanged}
+              value={leftSidebarValue}
-          />
+              onValueChanged={this.onLeftSidebarValueChanged}
+            />
+          </div>
+          {buttonComponents}
+          <ConnectedLayoutButton />
+          <ConnectedPluginSwitch />
+          <div
+            className="pull-right m-t-1 rm-x-1"
+            style={{ marginLeft: 'auto' }}
+          >
+            <RoundedButtonGroup
+              options={rightSidebarToggle}
+              value={rightSidebarValue}
+              onValueChanged={this.onRightSidebarValueChanged}
+            />
+          </div>
         </div>
-        {buttonComponents}
+        <div className="CineDialogContainer" style={cineDialogContainerStyle}>
-        <ConnectedLayoutButton />
+          <ConnectedCineDialog />
-        <ConnectedPluginSwitch />
-        <div className="pull-right m-t-1 rm-x-1" style={{ marginLeft: 'auto' }}>
-          <RoundedButtonGroup
-            options={rightSidebarToggle}
-            value={rightSidebarValue}
-            onValueChanged={this.onRightSidebarValueChanged}
-          />
         </div>
-      </div>
+      </>
     );
   }
 }
@@ -142,6 +160,8 @@ function _getButtonComponents(toolbarButtons, activeButtons) {
             this.setState({
               activeButtons: [button.id],
             });
+          } else if (button.type === 'builtIn') {
+            this._handleBuiltIn(button.options);
           }
         }}
         isActive={activeButtons.includes(button.id)}
@@ -168,4 +188,12 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
+function _handleBuiltIn({ behavior } = {}) {
+  if (behavior === 'CINE') {
+    this.setState({
+      isCineDialogOpen: !this.state.isCineDialogOpen,
+    });
+  }
+}
+
 export default ToolbarRow;

src/connectedComponents/ViewerMain.js

@@ -2,8 +2,7 @@ import './ViewerMain.css';
 
 import { Component } from 'react';
 import ConnectedLayoutManager from './ConnectedLayoutManager.js';
-// import { OHIF } from 'ohif-core';
+import ConnectedToolContextMenu from './ConnectedToolContextMenu.js';
-//
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -130,7 +129,10 @@ class ViewerMain extends Component {
           studies={this.props.studies}
           viewportData={this.getViewportData()}
           setViewportData={this.setViewportData}
-        />
+        >
+          {/* Children to add to each viewport that support children */}
+          <ConnectedToolContextMenu />
+        </ConnectedLayoutManager>
       </div>
     );
   }