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">


<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);
      }

      .cc.button {
        position: relative;
      }

      .button i {
        font-size: 24px;
      }

      .icon-cc:before {
        content: "\e67e";
      }

      ul .cc.button .video-dropdown-menu {
        list-style: none;
        list-style-type: none;
        bottom: 100%;
        display: none;
        margin: 0;
        padding: 0;
        left: -2px;
      }

      .video-dropdown-menu {
        position: absolute;
        background-color: rgb(66, 66, 66);
        color: white;
        font-family: NeoSansStdRegular, sans-serif;
        font-weight: bold;
        border-top: 2px solid white;
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: white;
        border-right: 2px solid white;
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: white;
        border-left: 2px solid white;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: white;
        border-bottom: 2px solid white;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: white;
      }

      .languageselectionentry {
        color: rgba(255, 255, 255, 0.3);
      }

      #subtitlesButton {
        color: rgba(255, 255, 255, 0.3);
      }

      .video-dropdown-menu {
        color: rgba(255, 255, 255, 0.3);
      }
    </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>

    <td class="cc button">
      <iron-icon id="subtitlesButton" icon="av:closed-caption" class="control" on-click="showSubtitlesOptions" hidden$="{{!showSubtitlesButton}}"></iron-icon>
      <ul class="video-dropdown-menu" style="list-style: none; padding-left: 2%; padding-right: 2%; bottom: 20%; left: 69%; display: none;">
        <li class="languageselectionentry" on-click="changeSubtitles" data-src="blob:https%3A//open.sap.com/e55ba452-c4ae-4686-8d41-b8236e2b1b06" data-srclang="en" data-index="0" data-label="English">
          <span>EN</span>
        </li>
        <li class="languageselectionentry" on-click="changeSubtitles" data-src="blob:https%3A//open.sap.com/c77ec805-0ce7-4755-9482-ae33bac60f15" data-srclang="ru" data-index="1" data-label="Russian">
          <span>RU</span>
        </li>
      </ul>
    </td>

    <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'
        },

        currentSubtitlesLanguage: String,

        showSubtitlesMenu: Boolean,

        playIcon: {
          type: String,
          value: 'av:play-arrow',
          notify: true
        }
      },

      returnVolume: 50,

      thumbnails: [],

      attached: function() {
        this.currentSubtitlesLanguage='';
        this.showSubtitlesMenu=false;
        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;
      },

      showSubtitlesOptions: function() {
        this.showSubtitlesMenu=!this.showSubtitlesMenu;
        if(this.showSubtitlesMenu) {
          this.querySelector(".video-dropdown-menu").style.display="block";
        }
        else {
          this.querySelector(".video-dropdown-menu").style.display="none";
        }
      },

      changeSubtitles: function(event) {
        
        var dataSrcLang = event.target.parentElement.getAttribute("data-srclang"); 
        if(dataSrcLang) {
          if (this.currentSubtitlesLanguage===dataSrcLang) {
            this.showSubtitles=!this.showSubtitles;
            this.currentSubtitlesLanguage='';
            var transparency = this.showSubtitles ? '1.0' : '0.3';
            event.target.style.color = 'rgba(255, 255, 255, ' + transparency + ')';
          }
          else {
            if (this.currentSubtitlesLanguage) {
              var obj = "[data-srclang=" + this.currentSubtitlesLanguage + "]";
              (document.querySelector(obj).children[0]).style.color = 'rgba(255, 255, 255, 0.3)';
            }
            else {
              this.showSubtitles=!this.showSubtitles;
            }
            event.target.style.color = 'rgba(255, 255, 255, 1.0)';
            this.currentSubtitlesLanguage=dataSrcLang;
          }
        }
      },

      /**
       * 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>