AWV-3: Transforming the CINE inputs in form components

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

@@ -1,5 +1,5 @@
 <template name="cineDialog">
-    <div id="cineDialog" class="noselect">
+    {{#form id='cineDialog' class='noselect' schema=instance.schema}}
         <h5>CINE Controls</h5>
         <div class="btn-group">
             <a id="cineFirstButton" title="Skip to first image" class="btn" data-toggle="tooltip">
@@ -14,7 +14,7 @@
             <a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
                 {{#if isPlaying}}
                     <i class="fa fa-fw fa-stop"></i>
-                    {{else}}
+                {{else}}
                     <i class="fa fa-fw fa-play"></i>
                 {{/if}}
             </a>
@@ -30,19 +30,13 @@
         </div>
         <div id="cineOptions">
             <div id="loopSection">
-                <label for="cineLoopCheckbox">Loop?</label>
-                <input type="checkbox" checked id="cineLoopCheckbox" />
+                {{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
             </div>
             <div id="fpsSection">
-                <label for="cineSlider">
-                    Cine Speed: <span id="fps">{{framerate}}</span>
-                </label>
-                <input type="range"
-                       id="cineSlider"
-                       min="1"
-                       max="90"
-                       value="{{framerate}}"/>
+                {{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
+                    {{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
+                {{/inputRange}}
             </div>
         </div>
-    </div>
+    {{/form}}
 </template>

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

@@ -1,8 +1,24 @@
 import { OHIF } from 'meteor/ohif:core';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
 Template.cineDialog.onCreated(() => {
     const instance = Template.instance();
 
+    instance.schema = new SimpleSchema({
+        loop: {
+            type: Boolean,
+            label: 'Loop',
+            defaultValue: true
+        },
+        speed: {
+            type: Number,
+            label: 'Cine Speed',
+            defaultValue: 24,
+            min: 1,
+            max: 90
+        }
+    });
+
     instance.updateFramerate = rate => {
         OHIF.viewer.cine.framesPerSecond = rate;
 

Packages/viewerbase/lib/viewportFunctions.js

@@ -134,3 +134,5 @@ isPlaying = () => {
     // Return true if the clip is playing
     return !_.isUndefined(clipState.intervalId);
 };
+// Create an event listener to update playing state when a clip stops playing
+$(window).on('CornerstoneToolsClipStopped', () => Session.set('UpdateCINE', Random.id()));