Expose playing trait for the Play Widget

Author: jtpio

ipywidgets/widgets/widget_int.py

@@ -224,17 +224,18 @@ def _validate_value(self, proposal):
 class Play(_BoundedInt):
     """Play/repeat buttons to step through values automatically, and optionally loop.
     """
-    interval = CInt(100, help="The maximum value for the play control.").tag(sync=True)
-    step = CInt(1, help="Increment step").tag(sync=True)
-    disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     _view_name = Unicode('PlayView').tag(sync=True)
     _model_name = Unicode('PlayModel').tag(sync=True)
 
-    _playing = Bool(help="Whether the control is currently playing.").tag(sync=True)
     _repeat = Bool(help="Whether the control will repeat in a continous loop.").tag(sync=True)
+
+    interval = CInt(100, help="The maximum value for the play control.").tag(sync=True)
+    step = CInt(1, help="Increment step").tag(sync=True)
+    disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
+    playing = Bool(help="Whether the control is currently playing.").tag(sync=True)
     show_repeat = Bool(True, help="Show the repeat toggle button in the widget.").tag(sync=True)
 
+
 class _BoundedIntRange(_IntRange):
     max = CInt(100, help="Max value").tag(sync=True)
     min = CInt(0, help="Min value").tag(sync=True)

packages/controls/src/widget_int.ts

@@ -777,8 +777,8 @@ class PlayModel extends BoundedIntModel {
         return _.extend(super.defaults(), {
             _model_name: 'PlayModel',
             _view_name: 'PlayView',
-            _playing: false,
             _repeat: false,
+            playing: false,
             show_repeat: true,
             interval: 100,
             step: 1,
@@ -790,41 +790,40 @@ class PlayModel extends BoundedIntModel {
     }
 
     loop() {
-        if (this.get('_playing')) {
-            let next_value = this.get('value') + this.get('step');
-            if (next_value <= this.get('max')) {
-                this.set('value', next_value);
+        if (!this.get('playing')) {
+            return;
+        }
+        let next_value = this.get('value') + this.get('step');
+        if (next_value <= this.get('max')) {
+            this.set('value', next_value);
+            this.schedule_next();
+        } else {
+            if (this.get('_repeat')) {
+                this.set('value', this.get('min'));
                 this.schedule_next();
             } else {
-                if(this.get('_repeat')) {
-                    this.set('value', this.get('min'));
-                    this.schedule_next();
-                } else {
-                    this.set('_playing', false);
-                }
+                this.set('playing', false);
             }
-            this.save_changes();
         }
+        this.save_changes();
     }
 
     schedule_next() {
         window.setTimeout(this.loop.bind(this), this.get('interval'));
     }
 
     stop() {
-        this.set('_playing', false);
         this.set('value', this.get('min'));
         this.save_changes();
     }
 
     pause() {
-        this.set('_playing', false);
+        this.set('playing', false);
         this.save_changes();
     }
 
     play() {
-        this.set('_playing', true);
-        if (this.get('value') == this.get('max')) {
+        if (this.get('value') === this.get('max')) {
             // if the value is at the end, reset if first, and then schedule the next
             this.set('value', this.get('min'));
             this.schedule_next();
@@ -834,6 +833,7 @@ class PlayModel extends BoundedIntModel {
             // loop will call save_changes in this case
            this.loop();
         }
+        this.save_changes();
     }
 
     repeat() {
@@ -878,15 +878,15 @@ class PlayView extends DOMWidgetView {
         repeatIcon.className = 'fa fa-retweet';
         this.repeatButton.appendChild(repeatIcon);
 
-        this.playButton.onclick = this.model.play.bind(this.model);
+        this.playButton.onclick = this.onPlayClicked.bind(this);
         this.pauseButton.onclick = this.model.pause.bind(this.model);
         this.stopButton.onclick = this.model.stop.bind(this.model);
         this.repeatButton.onclick = this.model.repeat.bind(this.model);
 
-        this.listenTo(this.model, 'change:_playing', this.update_playing);
+        this.listenTo(this.model, 'change:playing', this.onPlayingChanged);
         this.listenTo(this.model, 'change:_repeat', this.update_repeat);
         this.listenTo(this.model, 'change:show_repeat', this.update_repeat);
-        this.update_playing();
+        this.updatePlaying();
         this.update_repeat();
         this.update();
     }
@@ -897,11 +897,27 @@ class PlayView extends DOMWidgetView {
         this.pauseButton.disabled = disabled;
         this.stopButton.disabled = disabled;
         this.repeatButton.disabled = disabled;
-        this.update_playing();
+        this.updatePlaying();
+    }
+
+    onPlayClicked() {
+        const playing = this.model.get('playing');
+        this.model.set('playing', !playing);
+    }
+
+    onPlayingChanged() {
+        this.updatePlaying();
+        const previous = this.model.previous('playing');
+        const current = this.model.get('playing');
+        if (!previous && current) {
+            this.model.play();
+        } else {
+            this.model.pause();
+        }
     }
 
-    update_playing() {
-        let playing = this.model.get('_playing');
+    updatePlaying() {
+        let playing = this.model.get('playing');
         let disabled = this.model.get('disabled');
         if (playing) {
             if (!disabled) {