media-session.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<!--
`media-session`
The MediaSession interface of Media Session API implemented in Polymer.

@demo demo/index.html 
-->

<dom-module id="media-session">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <content id="media" select="#media"></content>
    <iron-selector id="selector" items="{{items}}" selected="[[selectedMetadata]]" selected-attribute="active">
      <content id="metadata" select="media-metadata"></content>
    </iron-selector>
  </template>

  <script>
    (function() {
      Polymer({

        is: 'media-session',

        /**
         * The action intent is to resume the playback.
         *
         * @event play
         */

        /** 
         * The action intent is to pause a currently active playback.
         *
         * @event pause
         */

        /**
         * The action intent is to move the playback time backward by a short period (eg. few seconds).
         * 
         * @event seekbackward
         */

        /**
         * The action intent is to move the playback time forward by a short period (eg. few seconds).
         * 
         * @event seekforward
         */

        /**
         * The action intent is to either start the current playback from the beginning if the playback has a notion of beginning or move to the previous item in the playlist if the playback has a notion of playlist.
         * 
         * @event previoustrack
         */

        /**
         * The action is to move to the playback to the next item in the playlist if the playback has a notion of playlist.
         * 
         * @event nexttrack
         */

         /**
         *  Media Session API is not supported.
         * 
         * @event unsupported
         */
        
        properties: {
          /**
           * The playbackState attribute represents the declared playback state of the media session,
           * by which the session declares whether its browsing context is playing media or not. 
           */
          playbackState: String,

          skipTime: Number,

          selected: {
            type: Number,
            notify: true
          }
        },

        attached: function() {
          this.media = this.media || Polymer.dom(this.$.media).getDistributedNodes()[0];
          if (this.media) {
            this.listen(this.media, 'play', 'onPlay');
          }
          if ('mediaSession' in navigator) {
            this._setActionHandler('play');
            this._setActionHandler('pause');
            if (this.skipTime) {
              this._setActionHandler('seekbackward');
              this._setActionHandler('seekforward');
            }
            this.listen(this.$.selector, 'items-changed', 'registerPlaylistActions'); 
          } else {
            this.dispatchEvent(new CustomEvent('unsupported'));
          }
        },

        registerPlaylistActions: function(event) {
          if (event.detail.value.length) {
            this._setActionHandler('previoustrack');
            this._setActionHandler('nexttrack');
            this.unlisten(this.$.selector, 'items-changed', 'registerPlaylistActions');
          }
        },

        /**
         * Convert an action 
         */
        _setActionHandler: function(action) {
          navigator.mediaSession.setActionHandler(action, function() {
            this.dispatchEvent(new CustomEvent(action));
            this[action]();
          }.bind(this));
          this.dispatchEvent(new CustomEvent('action-registered', {detail: action}));
        },

        onPlay: function() {
          this.set('selectedMetadata', this.selected);
        },

        play: function() {
          return this.media.play();
        },

        pause: function() {
          this.media.pause();
        },

        seekbackward: function() {
          this.media.currentTime = Math.max(this.media.currentTime - this.skipTime, 0);
        },

        seekforward: function() {
          this.media.currentTime = Math.min(this.media.currentTime + this.skipTime, this.media.duration);
        },

        previoustrack: function() {
          this.selected = (this.selected - 1 + this.$.selector.items.length) % this.$.selector.items.length;
          return this.play();
        },

        nexttrack: function() {
          this.selected = (this.selected + 1) % this.$.selector.items.length;
          return this.play();
        }

      });
    })(Polymer);
    
  </script>
</dom-module>