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.

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

@@ -27,6 +27,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();
     }
 });