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