LT-67; OHIF-78: Merging server configuration and CINE dialog changes from downstream (Ascend)

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

@@ -1,7 +1,6 @@
 <template name="cineDialog">
     {{#form id='cineDialog' class='noselect' schema=instance.schema api=instance.api}}
         {{>inputHidden key='intervalId'}}
-        <h5>CINE Controls</h5>
         <div class="cine-navigation">
             <div class="btn-group">
                 {{#button disabled=(displaySetDisabled false) action='displaySetPrevious' title='Previous display set'}}
@@ -20,9 +19,6 @@
                 {{#button action='cinePrevious' title='Previous image'}}
                     <i class="fa fa-step-backward"></i>
                 {{/button}}
-                {{#button action='cineSlowDown' title='Slow playback'}}
-                    <i class="fa fa-backward"></i>
-                {{/button}}
                 {{#button action='cineToggle' title='Play / Stop' class=(valueIf isPlaying 'active' '')}}
                     {{#if isPlaying}}
                         <i class="fa fa-fw fa-stop"></i>
@@ -30,9 +26,6 @@
                         <i class="fa fa-fw fa-play"></i>
                     {{/if}}
                 {{/button}}
-                {{#button action='cineSpeedUp' title='Increase playback speed'}}
-                    <i class="fa fa-forward"></i>
-                {{/button}}
                 {{#button action='cineNext' title='Next image'}}
                     <i class="fa fa-step-forward"></i>
                 {{/button}}
@@ -42,14 +35,11 @@
             </div>
         </div>
         <div class="cine-options">
-            {{>inputCheckbox key='loop' labelClass='pull-right m-a-0'}}
             <div class="fps-section">
                 {{#inputRange key='framesPerSecond' class='p-a-0' labelClass='form-group m-a-0' labelAsDiv=true}}
-                    {{#section 'labelAfterText'}}:
-                        <span id="fps">{{framerate}}</span>
-                    {{/section}}
                 {{/inputRange}}
             </div>
+            <span id="fps">{{framerate}} fps</span>
         </div>
     {{/form}}
 </template>

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

@@ -21,7 +21,7 @@ Template.cineDialog.onCreated(() => {
         },
         framesPerSecond: {
             type: Number,
-            label: 'Cine Speed',
+            label: '',
             defaultValue: 24,
             min: 1,
             max: 90,

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -1,19 +1,19 @@
 @import "{design}/app.styl"
 
 #cineDialog
-  theme('border', '1px solid $uiBorderColor', 0.95)
+  theme('border', '2px solid $uiBorderColor', 0.95)
   theme('background', '$uiGrayDarkest', 0.95)
   theme('color', '$textSecondaryColor')
   border-radius: 8px
   bottom: 3px
   box-sizing: border-box
-  height: 150px
+  height: 80px
   left: 50%
   overflow: hidden
   padding: 10px
   position: absolute
   right: 3px
-  top: 50%
+  top: 2%
   width: 300px
   z-index: 1000
   transform(translateX(-50%) translateY(-50%))
@@ -36,9 +36,10 @@
     &:active, &.active
       theme('color', '$activeColor')
 
+
   .cine-navigation
     position: absolute
-    right: 24px
+    right: 4px
     top: 4px
 
     .btn
@@ -49,12 +50,19 @@
         line-height: 36px
 
   .cine-controls
-    display: table
-    margin: 0 auto
+    left: 0px
 
   .cine-options
-    padding: 5px 0
-    overflow: auto
+    padding: 0px 0
+
+    .fps-section
+      width: 175px
+      float: left
+
+    #fps
+      float: right
+      padding: 5px 10px 0 0
 
     .loop-section
       padding-right: 12px
+