1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!--
-- Copyright 2015 The Chromium Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.
-->
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.html">
<link rel="import" href="repeat_button.html">
<dom-module id="control-panel">
<link rel="import" type="css" href="control_panel.css">
<template>
<div class="controls">
<div class="upper-controls audio-controls">
<!-- Shuffle toggle button in the bottom line. -->
<files-icon-button toggles
id="shuffle"
class="shuffle-mode media-button toggle"
active="{{shuffle}}">
</files-icon-button>
<!-- RepeatMode toggle button in the bottom line. -->
<repeat-button
id="repeat"
class="repeat-mode media-button"
repeat-mode="{{repeatMode}}">
</repeat-button>
<!-- Prev button in the bottom line. -->
<files-icon-button
id="previous"
class="previous media-button"
on-click="previousClick">
</files-icon-button>
<!-- Play button in the bottom line. -->
<files-icon-button
id="play"
class="play media-button"
on-click="playClick">
</files-icon-button>
<!-- Next button in the bottom line. -->
<files-icon-button
id="next"
class="next media-button"
on-click="nextClick">
</files-icon-button>
<!-- Playlist button in the bottom line. -->
<files-icon-button toggles
id="playList"
class="playlist media-button toggle"
active="{{playlistExpanded}}">
</files-icon-button>
</div>
<div class="lower-controls time-volume-controls">
<!-- Play/pause button and seek slider in the bottom line. -->
<div class="time-container">
<div class="time-spacer">[[computeTimeString_(duration, duration)]]</div>
<div class="time">[[computeDisplayTimeString_(dragging, time, seekingTime, duration)]]</div>
</div>
<paper-slider id="timeSlider" max="[[duration]]" value="{{time::change}}"></paper-slider>
<!-- Volume button and slider in the bottom line. -->
<files-icon-button
id="volumeButton"
class="volume media-button"
on-click="volumeClick">
</files-icon-button>
<paper-slider id="volumeSlider"></paper-slider>
</div>
</div>
</template>
</dom-module>
<script src="control_panel.js"></script>
|
