Clips use DICOM frameTime by default (LT-210). Added floating clip control dialog (LT-209)

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

@@ -1,9 +1,14 @@
 <template name="playClipButton">
-    <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
+    <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default"
+            data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
         {{ #if isPlaying }}
             <span class="fa fa-stop"></span>
         {{ else }}
             <span class="fa fa-play"></span>
         {{ /if }}
     </button>
+    <button id="toggleCineDialog"  type="button" class="imageViewerCommand btn btn-sm btn-default"
+            data-container="body" data-toggle="tooltip" data-placement="bottom" title="Toggle CINE Dialog">
+        <span class="fa fa-youtube-play"></span>
+    </button>
 </template>

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

@@ -1,41 +1,52 @@
 toggleCinePlay = function(element) {
+    var viewports = $('.imageViewerViewport');
+
     if (!element) {
-        var activeViewport = Session.get('activeViewport');
-        element = $('.imageViewerViewport').get(activeViewport);
+        var viewportIndex = Session.get('activeViewport');
+        element = viewports.get(viewportIndex);
     }
 
     if (!element) {
         return;
     }
 
-    var viewportIndex = $('.imageViewerViewport').index(element);
     var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
-    if (isPlaying === true) {
+    if (isPlaying) {
         cornerstoneTools.stopClip(element);
     } else {
         cornerstoneTools.playClip(element);
     }
+
     OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
     Session.set('UpdateCINE', Random.id());
 };
 
-Template.playClipButton.helpers({
-    'isPlaying': function() {
-        Session.get('UpdateCINE');
-        var activeViewport = Session.get('activeViewport');
+isPlaying = function() {
+    Session.get('UpdateCINE');
+    var activeViewport = Session.get('activeViewport');
 
-        // TODO=Check best way to make sure this is always defined
-        // Right now it is initialized in enableHotkeys AND in 
-        // imageViewer onCreated, but this appears to break some things
-        if (!OHIF.viewer.isPlaying) {
-            return;
-        }
-        return !!OHIF.viewer.isPlaying[activeViewport];
+    // TODO=Check best way to make sure this is always defined
+    // Right now it is initialized in enableHotkeys AND in
+    // imageViewer onCreated, but this appears to break some things
+    if (!OHIF.viewer.isPlaying) {
+        return;
+    }
+
+    return !!OHIF.viewer.isPlaying[activeViewport];
+};
+
+Template.playClipButton.helpers({
+    isPlaying: function() {
+        return isPlaying();
     }
 });
 
 Template.playClipButton.events({
     'click #playClip': function() {
         toggleCinePlay();
+    },
+    'click #toggleCineDialog': function() {
+        var cineDialog = document.getElementById('cineDialog');
+        toggleDialog(cineDialog);
     }
-});
+});