video-controlbar.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="slider-bar.html">
<link rel="import" href="video-controlbar.html">


<dom-module id="video-controlbar">
  <template>
    <style>
      @font-face {
        font-family: "NeoSansStdRegular";
        src: url(NeoSansStdRegular.woff) format("woff"),
             url(NeoSansStdRegular.ttf) format("truetype"),
             url(NeoSansStdRegular.svg#NeoSansStdRegular) format("svg");
        font-weight: 400;
        font-style: normal;
        font-stretch: normal
      }
      :host {
        display: block;
        background-color: rgb(66, 66, 66);
        color: white;
        font-family: NeoSansStdRegular, sans-serif;
        font-weight: bold;
        border-top: 2px solid white;
        z-index: 9000;
        @apply(--layout-horizontal);
      }
      .control {
        display: block;
        line-height: 24px;
        padding: 10px;
        padding-top:12px;
        font-size: 12px;
        border-right: 2px solid white;
      }
      .control:last-child, #volumeButton {
        border-right-style: none;
      }
      .control:last-child, #volume {
        padding-left: 8px;
      }
      .control {
        cursor: pointer;
      }
      .thumbnail-box {
        position: relative;
        bottom: 2px;
      }
      video-thumbnail /deep/ :last-of-type {
        margin-right: 0px;
      }

      #progressCounter {
        padding-left: 10px;
      }
      #progressBar {
        margin-top: 5px;
      }
      #progressBarWithThumbnails {
        position: relative;
        top: 1px;
      }
      #volumeBar {
        width: 75px;
        margin-top: 5px;
      }
      #qualityButton {
        width: 15px;
        text-align: center;
      }

      .control, .thumbnail-box {
        @apply(--layout-horizontal);
      }
      .flex-control, #progressBar {
        @apply(--layout-flex);
      }

    </style>

    <iron-icon class="control" on-click="togglePlayPause" id="playPauseButton" icon="{{playIcon}}"></iron-icon>
    <div class="control flex-control" id="progress">
      <div class="flex-control">
        <div class="thumbnail-box">
          <content></content>
        </div>
        <slider-bar
          id="progressBar"
          max="{{duration}}"
          value="{{progress}}"
          second-value="{{buffered}}"
          bubble-text="{{ secondsToMinutes(progress) }}"
        ></slider-bar>
      </div>
      <div id="progressCounter">{{ secondsToMinutes(progress) }} / {{ secondsToMinutes(duration) }}</div>
    </div>
    <div class="control" id="speedButton" on-click="toggleSpeed">{{ formatSpeed(speed) }}</div>
    <div class="control" id="qualityButton" on-click="toggleQuality">{{quality}}</div>
    <iron-icon id="subtitlesButton" icon="av:closed-caption" class="control" on-click="toggleSubtitles" hidden$="{{!showSubtitlesButton}}"></iron-icon>
    <iron-icon id="volumeButton" icon="av:volume-up" class="control" on-click="toggleMute"></iron-icon>
    <div id="volume" class="control">
      <slider-bar id="volumeBar" value="{{volume}}" max="100"></slider-bar>
    </div>
    <iron-icon id="fullscreenButton" icon="fullscreen" class="control" on-click="toggleFullscreen"></iron-icon>

  </template>

  <script>

    Polymer({

      properties: {
        isPlaying: {
          type: Boolean,
          value: false,
          notify: true,
          observer: 'updateIcon'
        },

        progress: {
          type: Number,
          notify: true,
          observer: 'updateIcon'
        },
        buffered: Number,
        duration: Number,
        isHD: {
          type: Boolean,
          notify: true
        },
        quality: {
          type: String,
          computed: 'computeQuality(isHD)'
        },
        speed: Number, // double
        volume: {
          type: Number,
          observer: 'volumeChanged'
        },
        showSubtitles: {
          type: Boolean,
          observer: 'showSubtitlesChanged'
        },
        showSubtitlesButton: Boolean,
        isFullscreen: {
          type: Boolean,
          notify: true,
          observer: 'isFullscreenChanged'
        },
        playIcon: {
          type: String,
          value: 'av:play-arrow',
          notify: true
        }
      },


      returnVolume: 50,

      thumbnails: [],

      attached: function() {
        this.showSubtitlesChanged();
      },

      // Called from video-player element
      initThumbnails: function(list) {
        this.thumbnails = list;

        //set ThumbnailWidth and add Eventlistener
        var lastThumbnailTime = 0.0;
        var thumbnailTime = 0.0;
        var width = 0.0;
        for (var i = 0; i < this.thumbnails.length; i++) {
          if (i + 1 < this.thumbnails.length) {
            thumbnailTime = this.thumbnails[i+1].getStartTime(); // TODO: Replace getStartTime() with reading attribute
            width = 100 * (thumbnailTime - lastThumbnailTime) / duration;
            lastThumbnailTime = this.thumbnails[i + 1].getStartTime();
          } else if (i + 1 == this.thumbnails.length) {
            width = 100 * (duration - lastThumbnailTime) / duration;
          }
          if (width < 0.5) {
            width = 0.5;
          }
          this.thumbnails[i].setWidth(width);
          this.thumbnails[i].onClick.listen(handleThumbnailClick);
        }

        if (this.thumbnails.length > 0) {
          this.$.progressBar.setAttribute("id", "progressBarWithThumbnails");
        }
      },


      /**
       * Observers
       */

      updateIcon: function() {
        if (this.isPlaying) {
          this.playIcon = "av:pause";
        } else if (this.duration <= this.progress) {
          this.playIcon = "av:replay";
        } else {
          this.playIcon = "av:play-arrow";
        }
      },

      volumeChanged: function() {
        var icon = 'av:volume-off';

        if (this.volume > 0) icon = 'av:volume-mute';
        if (this.volume > 30) icon = 'av:volume-down';
        if (this.volume > 70) icon = 'av:volume-up';

        this.$.volumeButton.attributes['icon'] = icon;
      },

      isFullscreenChanged: function() {
        this.$.fullscreenButton.icon = this.isFullscreen ? 'fullscreen-exit' : 'fullscreen';
      },

      showSubtitlesChanged: function() {
        console.log('controlbar showSubtitlesChanged');
        var transparency = this.showSubtitles ? '1.0' : '0.3';
        this.$.subtitlesButton.style.color = 'rgba(255, 255, 255, ' + transparency + ')';
      },


      /**
       * Event handlers
       */

      handleThumbnailClick: function(e) {
        this.progress = Math.floor(e.currentTarget.getStartTime());
      },

      togglePlayPause: function() {
        this.isPlaying = !this.isPlaying;
      },

      toggleSpeed: function() {
        var nextSpeed = {
          0.7: 1.0,
          1.0: 1.3,
          1.3: 1.7,
          1.7: 0.7
        };

        this.speed = nextSpeed[this.speed] || 1.0;
      },

      toggleMute: function() {
        if (this.volume > 0) {
          this.returnVolume = this.volume;
          this.volume = 0;
        } else {
          this.volume = this.returnVolume;
        }
      },

      toggleQuality: function() {
        this.isHD = !this.isHD;
      },

      computeQuality: function(isHD) {
        return isHD ? 'HD' : 'SD';
      },

      toggleFullscreen: function() {
        this.isFullscreen = !this.isFullscreen;
      },

      toggleSubtitles: function() {
        this.showSubtitles = !this.showSubtitles;
      },


      /**
       * Computed helpers
       */

      secondsToMinutes: function(number) {
        number = number || 0;

        var minutes = Math.floor(number / 60);
        var seconds = number % 60;

        var placeholder = seconds < 10 ? '0' : '';

        return minutes + ':' + placeholder + seconds;
      },

      formatSpeed: function(speed) {
        return speed.toFixed(1) + 'x';
      }

    })

  </script>

</dom-module>