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>