OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 -- Copyright 2015 The Chromium Authors. All rights reserved. |
| 3 -- Use of this source code is governed by a BSD-style license that can be |
| 4 -- found in the LICENSE file. |
| 5 --> |
| 6 |
| 7 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> |
| 8 <link rel="import" href="volume_controller.html"> |
| 9 |
| 10 <polymer-element name="control-panel"> |
| 11 <template> |
| 12 <link rel="stylesheet" href="control_panel.css"> |
| 13 |
| 14 <div class="controls"> |
| 15 <div class="upper-controls time-controls"> |
| 16 <div class="time media-control"> |
| 17 <div class="current">{{timeString_}}</div> |
| 18 </div> |
| 19 <div class="progress media-control custom-slider"> |
| 20 <input name="timeInput" type="range" touch-action="manipulation" |
| 21 min="0" max="{{duration}}" value="{{time}}"> |
| 22 <div class="bar"> |
| 23 <div class="filled" style="width: {{time/duration*100}}%;"></div> |
| 24 <div class="cap left"></div> |
| 25 <div class="cap right"></div> |
| 26 </div> |
| 27 </div> |
| 28 <div class="time media-control"> |
| 29 <div class="duration">{{durationString_}}</div> |
| 30 </div> |
| 31 </div> |
| 32 <div class="lower-controls audio-controls"> |
| 33 <!-- Shuffle toggle button in the bottom line. --> |
| 34 <button class="shuffle-mode media-button toggle" state="default"> |
| 35 <label> |
| 36 <input id="shuffleCheckbox" |
| 37 type="checkbox" |
| 38 checked="{{model.shuffle}}"> |
| 39 <span class="icon"></span> |
| 40 </label> |
| 41 </button> |
| 42 |
| 43 <!-- Repeat toggle button in the bottom line. --> |
| 44 <button class="repeat media-button toggle" state="default"> |
| 45 <label> |
| 46 <input id="repeatCheckbox" |
| 47 type="checkbox" |
| 48 checked="{{model.repeat}}"> |
| 49 <span class="icon"></span> |
| 50 </label> |
| 51 </button> |
| 52 |
| 53 <!-- Prev button in the bottom line. --> |
| 54 <button class="previous media-button" |
| 55 state="default" |
| 56 on-click="{{previousClick}}"> |
| 57 <div class="normal default"></div> |
| 58 <div class="disabled"></div> |
| 59 </button> |
| 60 |
| 61 <!-- Play button in the bottom line. --> |
| 62 <button class="play media-control media-button" |
| 63 state='{{playing ? "playing" : "ended"}}' |
| 64 on-click="{{playClick}}"> |
| 65 <div class="normal playing"></div> |
| 66 <div class="normal ended"></div> |
| 67 <div class="disabled"></div> |
| 68 </button> |
| 69 |
| 70 <!-- Next button in the bottom line. --> |
| 71 <button class="next media-button" |
| 72 state="default" |
| 73 on-click="{{nextClick}}"> |
| 74 <div class="normal default"></div> |
| 75 <div class="disabled"></div> |
| 76 </button> |
| 77 |
| 78 <div id="volumeContainer" |
| 79 class="default-hidden" |
| 80 anchor-point="bottom center"> |
| 81 <volume-controller id="volumeSlider" |
| 82 width="32" height="85" value="50"> |
| 83 </volume-controller> |
| 84 |
| 85 <polymer-anchor-point id="anchorHelper"></polymer-anchor-point> |
| 86 </div> |
| 87 |
| 88 <!-- Volume button in the bottom line. --> |
| 89 <button id="volumeButton" |
| 90 class="volume media-button toggle" |
| 91 state="default" |
| 92 on-click="{{volumeButtonClick}}" |
| 93 anchor-point="bottom center"> |
| 94 <label> |
| 95 <input type="checkbox" checked="{{volumeSliderShown}}"> |
| 96 <span class="icon"></span> |
| 97 </label> |
| 98 </button> |
| 99 |
| 100 <!-- Playlist button in the bottom line. --> |
| 101 <button id="playlistButton" |
| 102 class="playlist media-button toggle" |
| 103 state="default"> |
| 104 <label> |
| 105 <input type="checkbox" checked="{{model.expanded}}"> |
| 106 <span class="icon"></span> |
| 107 </label> |
| 108 </button> |
| 109 </div> |
| 110 </div> |
| 111 </template> |
| 112 <script src="control_panel.js"></script> |
| 113 </polymer-element> |
OLD | NEW |