From a7ba6b49fe6f181a0e2ac7a9a2d66704c228020f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= <eloisalgado@gmail.com>
Date: Mon, 7 Nov 2016 12:01:03 -0200
Subject: [PATCH] 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.

---
 .../toolbarSection/toolbarSection.js          |  4 +-
 .../viewer/cineDialog/cineDialog.html         | 10 ++---
 .../viewer/cineDialog/cineDialog.js           |  4 ++
 .../viewer/cineDialog/cineDialog.styl         |  4 ++
 .../imageViewerViewport.js                    |  4 +-
 .../viewer/playClipButton/playClipButton.html |  2 +-
 .../viewer/playClipButton/playClipButton.js   |  3 ++
 .../toolbarSectionButton.html                 |  2 +-
 .../toolbarSectionButton.js                   |  3 ++
 Packages/viewerbase/lib/viewportFunctions.js  | 41 ++++++++++++++++++-
 Packages/viewerbase/package.js                |  1 +
 11 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/OHIFViewer/client/components/toolbarSection/toolbarSection.js b/OHIFViewer/client/components/toolbarSection/toolbarSection.js
index 1bf77f6aa..b96c7653c 100644
--- a/OHIFViewer/client/components/toolbarSection/toolbarSection.js
+++ b/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({
diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html
index a3233bbd5..d4e00b679 100644
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html
+++ b/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>
diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
index 71d3ff09a..50c38a1aa 100644
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
+++ b/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'
     }
diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
index 16c3659ca..72c6fa927 100644
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
+++ b/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
diff --git a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
index 765c2de54..acc7de1cf 100644
--- a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/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);
         }
 
diff --git a/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html b/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html
index 5ec6b45fb..2cc9216a4 100644
--- a/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html
+++ b/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}}
diff --git a/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js b/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js
index b369ef279..ec9b175de 100644
--- a/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js
+++ b/Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js
@@ -1,5 +1,8 @@
 Template.playClipButton.helpers({
     isPlaying: function() {
         return isPlaying();
+    },
+    disableButton() {
+        return hasMultipleFrames();
     }
 });
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
index 066d3a2ac..02c16ace1 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
+++ b/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}}
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
index 3a2759b64..8bcfdba1b 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
+++ b/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();
     }
 });
 
diff --git a/Packages/viewerbase/lib/viewportFunctions.js b/Packages/viewerbase/lib/viewportFunctions.js
index 3633c1952..81de55050 100644
--- a/Packages/viewerbase/lib/viewportFunctions.js
+++ b/Packages/viewerbase/lib/viewportFunctions.js
@@ -159,9 +159,46 @@ isPlaying = () => {
 
     // Get the clip state
     const clipState = toolState.data[0];
+    
+    if(clipState) {
+        // Return true if the clip is playing
+        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
diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js
index 8bdb6d999..b78eb0400 100644
--- a/Packages/viewerbase/package.js
+++ b/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');