chrome/browser/resources/media_router/elements/route_controls/route_controls.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="route-controls" size="24">
<svg><defs>
  <g id="play-arrow"><path d="M8 5v14l11-7z"></path></g>
  <g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></g>
  <g id="volume-off"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></g>
  <g id="volume-up"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></g>
</defs></svg>
</iron-iconset-svg>

<dom-module id="route-controls">
  <link rel="import" type="css" href="../../media_router_common.css">
  <link rel="import" type="css" href="route_controls.css">
  <template>
    <style include="md-select"></style>
    <div id="media-controls">
      <div class="ellipsis" id="route-description"
           title="[[routeDescription_]]">
        [[routeDescription_]]
      </div>
      <div class="ellipsis" id="route-title" title="[[routeStatus.title]]"
           hidden$="[[!shouldShowRouteStatusTitle_]]">
        [[routeStatus.title]]
      </div>
      <div>
        <div id="route-time-controls" hidden="[[!routeStatus.canSeek]]">
          <cr-slider
              aria-valuetext$="[[getTimeSliderValueText_(displayedCurrentTime_)]]"
              dir="ltr"
              id="route-time-slider"
              on-dragging-changed="onSeekingChanged_"
              on-cr-slider-value-changed="onSeekSliderValueChanged_"
              min="0" max="[[routeStatus.duration]]"
              title="[[i18n('seekTitle')]]"
              value="[[displayedCurrentTime_]]"></cr-slider>
          <div id="timeline">
            <span id="current-time"
                  aria-label$="[[getCurrentTimeLabel_(displayedCurrentTime_)]]">
              [[getFormattedTime_(displayedCurrentTime_)]]
            </span>
            <span id="duration"
                  aria-label$="[[getDurationLabel_(routeStatus.duration)]]">
              [[getFormattedTime_(routeStatus.duration)]]
            </span>
          </div>
        </div>
        <div id="play-pause-volume-hangouts-controls">
          <span id="button-holder" dir="ltr">
            <paper-icon-button
                id="route-play-pause-button"
                hidden="[[!routeStatus.canPlayPause]]"
                disabled="[[!routeStatus.canPlayPause]]"
                icon="[[getPlayPauseIcon_(routeStatus)]]"
                title="[[getPlayPauseTitle_(routeStatus)]]"
                on-click="onPlayPause_"></paper-icon-button>
            <paper-icon-button
                id="route-volume-button"
                hidden="[[!routeStatus.canMute]]"
                disabled="[[!routeStatus.canMute]]"
                icon="[[getMuteUnmuteIcon_(routeStatus)]]"
                title="[[getMuteUnmuteTitle_(routeStatus)]]"
                on-click="onMuteUnmute_"></paper-icon-button>
          </span>
          <span id="volume-holder" hidden="[[!routeStatus.canSetVolume]]">
            <cr-slider
                aria-valuetext$="[[getVolumeSliderValueText_(displayedVolume_)]]"
                id="route-volume-slider"
                disabled="[[!routeStatus.canSetVolume]]"
                on-cr-slider-value-changed="onVolumeChanged_"
                on-dragging-changed="onVolumeDraggingChanged_"
                title="[[i18n('volumeTitle')]]"></cr-slider>
          </span>
          <div id="hangouts-local-present-controls"
               hidden="[[!routeStatus.hangoutsExtraData]]">
            <cr-checkbox
                checked="[[hangoutsLocalPresent_]]"
                id="hangouts-local-present-checkbox"
                on-change="onHangoutsLocalPresentChange_"
                tabindex="0">
              <span id='hangouts-local-present-checkbox-title'>
                [[i18n('hangoutsLocalPresentTitle')]]
              </span>
              <span id="hangouts-local-present-checkbox-subtitle">
                [[i18n('hangoutsLocalPresentSubtitle')]]
              </span>
            </cr-checkbox>
          </div>
        </div>
        <div id="mirroring-fullscreen-video-controls"
            hidden="[[!routeStatus.mirroringExtraData]]">
          [[i18n('fullscreenVideosDropdownTitle')]]
          <select class="md-select"
              id="mirroring-fullscreen-video-dropdown"
              on-change="onFullscreenVideoDropdownChange_">
            <option value="[[FullscreenVideoOption_.REMOTE_SCREEN]]">
              [[i18n('fullscreenVideosRemoteScreen')]]
            </option>
            <option value="[[FullscreenVideoOption_.BOTH_SCREENS]]">
              [[i18n('fullscreenVideosBothScreens')]]
            </option>
          </select>
        </div>
      </div>
    </div>
  </template>
<script src="route_controls.js"></script>
</dom-module>