Fixed OHIF Viewer layout / CINE / Hanging Protocol buttons (OHIF-49)

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

@@ -1,24 +1,20 @@
 <template name="playClipButton">
-    <button id="playClip"
-            type="button"
-            class="imageViewerCommand btn btn-sm {{ #if isPlaying }}active{{/if}}"
-            data-container="body"
-            data-toggle="tooltip"
-            data-placement="bottom"
-            title="Play/Stop Clip">
+    <div id="{{this.id}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{ #if isPlaying }}active{{/if}}"
+         title="{{this.title}}">
+    <div class="svgContainer">
         {{ #if isPlaying }}
-            <span class="fa fa-stop"></span>
+            <i class="fa fa-stop fa-fw"></i>
         {{ else }}
-            <span class="fa fa-play"></span>
+            <i class="fa fa-play fa-fw"></i>
         {{ /if }}
-    </button>
-    <button id="toggleCineDialog"
-            type="button"
-            class="imageViewerCommand btn btn-sm"
-            data-container="body"
-            data-toggle="tooltip"
-            data-placement="bottom"
-            title="Toggle CINE Dialog">
-        <span class="fa fa-youtube-play"></span>
-    </button>
+    </div>
+        <div class="buttonLabel">
+            {{ #if isPlaying }}
+                Stop
+            {{ else }}
+                Play
+            {{/if}}
+        </div>
+    </div>
 </template>

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

@@ -1,54 +1,5 @@
-import { OHIF } from 'meteor/ohif:core';
-
-toggleCinePlay = function(element) {
-    var viewports = $('.imageViewerViewport');
-
-    if (!element) {
-        var viewportIndex = Session.get('activeViewport');
-        element = viewports.get(viewportIndex);
-    }
-
-    if (!element) {
-        return;
-    }
-
-    var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
-    if (isPlaying) {
-        cornerstoneTools.stopClip(element);
-    } else {
-        cornerstoneTools.playClip(element);
-    }
-
-    OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
-    Session.set('UpdateCINE', Random.id());
-};
-
-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];
-};
-
 Template.playClipButton.helpers({
     isPlaying: function() {
         return isPlaying();
     }
 });
-
-Template.playClipButton.events({
-    'click #playClip': function() {
-        toggleCinePlay();
-    },
-    'click #toggleCineDialog': function() {
-        var cineDialog = document.getElementById('cineDialog');
-        toggleDialog(cineDialog);
-    }
-});