OHIF-129: Enabling CinePlay button only when active viewport has more than 1 image in its stack; Fixed some errors when CinePlay Dialog is open and stopped and layout changes.

OHIFViewer/client/components/toolbarSection/toolbarSection.js

@@ -121,9 +121,9 @@ Template.toolbarSection.helpers({
                 id: 'toggleCineDialog',
                 title: 'CINE',
                 classes: 'imageViewerCommand',
-                iconClasses: 'fa fa-youtube-play'
+                iconClasses: 'fa fa-youtube-play',
+                disableFunction: hasMultipleFrames
             });
-
         }
 
         buttonData.push({

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html

@@ -13,23 +13,23 @@
         </div>
         <div class="cine-controls">
             <div class="btn-group">
-                {{#button action='cineFirst' title='Skip to first image'}}
+                {{#button action='cineFirst' title='Skip to first image' disabled=(buttonDisabled)}}
                     <i class="fa fa-fast-backward"></i>
                 {{/button}}
-                {{#button action='cinePrevious' title='Previous image'}}
+                {{#button action='cinePrevious' title='Previous image' disabled=(buttonDisabled)}}
                     <i class="fa fa-step-backward"></i>
                 {{/button}}
-                {{#button action='cineToggle' title='Play / Stop' class=(valueIf isPlaying 'active' '')}}
+                {{#button action='cineToggle' title='Play / Stop' class=(valueIf isPlaying 'active' '') disabled=(buttonDisabled)}}
                     {{#if isPlaying}}
                         <i class="fa fa-fw fa-stop"></i>
                     {{else}}
                         <i class="fa fa-fw fa-play"></i>
                     {{/if}}
                 {{/button}}
-                {{#button action='cineNext' title='Next image'}}
+                {{#button action='cineNext' title='Next image' disabled=(buttonDisabled)}}
                     <i class="fa fa-step-forward"></i>
                 {{/button}}
-                {{#button action='cineLast' title='Skip to last image'}}
+                {{#button action='cineLast' title='Skip to last image' disabled=(buttonDisabled)}}
                     <i class="fa fa-fast-forward"></i>
                 {{/button}}
             </div>

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -251,6 +251,10 @@ Template.cineDialog.helpers({
         return !OHIF.viewer.canMoveDisplaySets(isNext) ? 'disabled' : '';
     },
 
+    buttonDisabled() {
+        return hasMultipleFrames();
+    },
+
     getClassNames(baseCls) {
         return baseCls + ' ' + (OHIF.uiSettings.displayEchoUltrasoundWorkflow ? 'single' : 'double') + '-row-style'
     }

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -28,6 +28,10 @@
     &:active, &.active
       theme('color', '$activeColor')
       
+    &[disabled]
+      &:hover
+        color: inherit
+
   .cine-navigation, .cine-controls, .cine-options
     cursor: default
 

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -216,12 +216,12 @@ function loadDisplaySetIntoViewport(data, templateData) {
         var multiframeMetadata = instance.multiframeMetadata;
         var cineToolData = {
             loop: OHIF.viewer.cine.loop,
-            framesPerSecond: multiframeMetadata.averageFrameRate || OHIF.viewer.cine.framesPerSecond
+            framesPerSecond: multiframeMetadata ? multiframeMetadata.averageFrameRate : OHIF.viewer.cine.framesPerSecond
         };
         cornerstoneTools.addToolState(element, 'playClip', cineToolData);
 
         // Autoplay datasets that have framerates set
-        if (multiframeMetadata.isMultiframeImage && multiframeMetadata.averageFrameRate > 0) {
+        if (multiframeMetadata && multiframeMetadata.isMultiframeImage && multiframeMetadata.averageFrameRate > 0) {
             cornerstoneTools.playClip(element);
         }
 

Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html

@@ -1,6 +1,6 @@
 <template name="playClipButton">
     <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if isPlaying}}active{{/if}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if isPlaying}}active{{/if}} {{#if (disableButton)}}disabled{{/if}}"
          title="{{this.title}}">
         <div class="svgContainer">
             {{#if isPlaying}}

Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js

@@ -1,5 +1,8 @@
 Template.playClipButton.helpers({
     isPlaying: function() {
         return isPlaying();
+    },
+    disableButton() {
+        return hasMultipleFrames();
     }
 });

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html

@@ -3,7 +3,7 @@
         {{>UI.dynamic template=this.buttonTemplateName data=this}}
     {{else}}
         <div id="{{this.id}}"
-            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}}"
+            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}} {{#if this.disableFunction}}{{#if (disableButton)}}disabled{{/if}}{{/if}}"
             title="{{this.title}}">
             <div class="svgContainer">
                 {{#if this.svgLink}}

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js

@@ -10,6 +10,9 @@ Template.toolbarSectionButton.helpers({
             // Return the active class
             return 'active';
         }
+    },
+    disableButton() {
+        return this.disableFunction();
     }
 });
 

Packages/viewerbase/lib/viewportFunctions.js

@@ -160,8 +160,45 @@ isPlaying = () => {
     // Get the clip state
     const clipState = toolState.data[0];
     
-    // Return true if the clip is playing
+    if(clipState) {
-    return !_.isUndefined(clipState.intervalId);
+        // Return true if the clip is playing
+        return !_.isUndefined(clipState.intervalId);
+    }
+
+    return false;
+};
+
+// Check if a study has multiple frames
+hasMultipleFrames = () => {
+    // Its called everytime active viewport and/or layout change
+    Session.get('activeViewport');
+    Session.get('LayoutManagerUpdated');
+
+    const activeViewport = getActiveViewportElement();
+
+    // No active viewport yet: disable button
+    if(!activeViewport) {
+      return true;
+    }
+
+    // Get images in the stack
+    const stackToolData = cornerstoneTools.getToolState(activeViewport, 'stack');
+
+    // No images in the stack, so disable button
+    if (!stackToolData || !stackToolData.data || !stackToolData.data.length) {
+        return true;
+    }
+
+    // Get number of images in the stack
+    const stackData = stackToolData.data[0];
+    const nImages = stackData.imageIds && stackData.imageIds.length ? stackData.imageIds.length : 1;
+
+    // Stack has just one image, so disable button
+    if(nImages === 1) {
+      return true;
+    }
+
+    return false;
 };
 
 // Create an event listener to update playing state when a clip stops playing

Packages/viewerbase/package.js

@@ -179,6 +179,7 @@ Package.onUse(function(api) {
     api.export('isImage', 'client');
     api.export('sopClassDictionary', 'client');
     api.export('addMetaData', 'client');
+    api.export('hasMultipleFrames', 'client');
 
     // Viewer management objects
     api.export('toolManager', 'client');