forked from spfuu/shSonos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsonos.html
104 lines (95 loc) · 4.12 KB
/
sonos.html
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author pfischi@gmx.de
* @copyright 2014
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/
/**
* Standard Multimedia Player
*
* @param unique id for this widget
* @param the gad/item for play/pause
* @param the gad/item for stopping the music (optional)
* @param the gad/item for previous playlist title
* @param the gad/item for next playlist title
* @param the gad/item for volume_up (optional)
* @param the gad/item for volume_down (optional)
* @param the gad/item for the volume (optional)
* @param the gad/item to mute the music (optional)
* @param the gad/item for album cover
* @param the gad/item for the song title (optional)
* @param the gad/item for the song artist (optional)
*
* @author Axel Otterstätter
*/
{% macro music(id, gad_play, gad_stop, gad_prev, gad_next, gad_vol_up, gad_vol_down, gad_volume, gad_mute, gad_cover, gad_artist, gad_title) %}
{% import "basic.html" as basic %}
{% import "sonos.html" as sonos %}
<style type="text/css">
#r0c0 { text-align: left; width: 50px; height: 40px; }
#r0c1 { text-align: left; /* width: 50px; */ height: 40px; }
#r0c2 { text-align: center; }
#r0c3 { text-align: right; /* width: 50px; */ height: 40px; }
#r0c4 { text-align: right; /* width: 50px; */ height: 40px; }
</style>
<div>
<table style="width: 100%;">
<tr>
<td id="r0c0">
{{ basic.button(id~'vol_up', gad_vol_up, gad_cover, icon0~'audio_volume_high.png', 0) }}
</td>
<td id="r0c1"></td>
<td id="r0c2">
<div class="title">{% if gad_artist %}{{ basic.value(id~'artist', gad_artist) }} - {% endif %}
{% if gad_title %}{{ basic.value(id~'title', gad_title) }}{% endif %}</div>
</td>
<td id="r0c3" />
<td id="r0c4" />
</tr>
<tr>
<td/>
{{ basic.tank(id~'vol_tank', gad_volume, 0, 100, 2, 'cylinder', '#f90' ) }}
</td>
<td/>
<td>
{{ sonos.cover(id~'cover', gad_cover) }}
</td>
<td/>
<td/>
</tr>
<tr></tr>
<tr>
<td>
{{ basic.button(id~'vol_down', gad_vol_down, '', icon0~'audio_volume_low.png', 0) }}
</td>
<td>
{{ basic.dual(id~'mute', gad_mute, icon1~'audio_volume_mute.png', icon0~'audio_volume_mute.png', 1, 0) }}
</td>
<td style="margin-left: 5px">
<div data-role="controlgroup" data-type="horizontal">
{{ basic.button(id~'prev', gad_prev, 'back', icon0~'control_arrow_left.png', 0) }}
{% if gad_rew %} {{ basic.button(id~'rew', gad_rew, 'rew', icon0~'audio_rew.png', 0) }} {% endif %}
{{ basic.dual(id~'play', gad_play, icon1~'audio_pause.png', icon0~'audio_play.png') }}
{% if gad_stop %} {{ basic.button(id~'stop', gad_stop, 'stop', icon0~'audio_stop.png', 1) }} {% endif %}
{% if gad_ff %} {{ basic.button(id~'ff', gad_ff, 'ff', icon0~'audio_ff.png', 1) }} {% endif %}
{{ basic.button(id~'next', gad_next, 'next', icon0~'control_arrow_right.png', 1) }}
</div>
</td>
<td style="text-align: center; /* width: 10px */"></td>
</tr>
</table>
</div>
{% endmacro %}
/**
* Displays the cover-art
*
* @param unique id for this widget
* @param the path/url to the image
*
* @author Roland Unterholzer
*/
{% macro cover(id, src) %}
<img id="{{ uid(page, id) }}" data-widget="sonos.cover" data-item="{{ src }}" src="{{ src|default('pages/base/pics/trans.png') }}" />
{% endmacro %}