hls plugin: add playback state change events

src/components/container.js

@@ -34,6 +34,12 @@ var Container = BaseObject.extend({
   },
   requestFullscreen: function() {
     this.trigger('container:fullscreen');
+  },
+  buffering: function() {
+    this.trigger('container:state:buffering');
+  },
+  playing: function() {
+    this.trigger('container:state:playing');
   }
 });
 

src/components/playback_handler.js

@@ -42,6 +42,7 @@ var PlaybackHandler = BaseObject.extend({
   },
   createHLSVideoContainer: function() {
     var container = new Container({className: 'hls-video-container'});
+    var poster = new PosterPlugin({container: container, src: 'image.png'});
     var playback = new HLSVideoPlaybackPlugin({container: container, src: this.params.src});
     return container;
   }

src/plugins/hls_video_playback.js

@@ -21,6 +21,8 @@ var HLSVideoPlaybackPlugin = PlaybackPlugin.extend({
     this.listenTo(this.container, 'container:volume', this.volume);
     this.listenTo(this.container, 'container:fullscreen', this.fullscreen);
     this.render();
+    this.currentState = "IDLE";
+    this.timedCheckState();
   },
   updateTime: function(interval) {
     return setInterval(function() {
@@ -38,6 +40,22 @@ var HLSVideoPlaybackPlugin = PlaybackPlugin.extend({
       this.firstPlay();
     }
   },
+  timedCheckState: function() {
+    setInterval(this.checkState.bind(this), 250);
+  },
+  checkState: function() {
+    if (this.currentState === "IDLE" && this.el.getState() === "PLAYING_BUFFERING") {
+      this.container.buffering();
+      this.currentState = "PLAYING_BUFFERING";
+
+    } else if (this.currentState === "PLAYING_BUFFERING" && this.el.getState() === "PLAYING") {
+      this.container.playing();
+      this.currentState = "PLAYING";
+
+    } else if (this.currentState === "PLAYING" && this.el.getState() === "IDLE") {
+      this.currentState = "IDLE";
+    }
+  },
   firstPlay: function() {
     this.el.load(this.el.src);
     this.el.play();