/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß
* @copyright 2012
* @license GPL <http://www.gnu.de>
* -----------------------------------------------------------------------------
*/
/**
* Squeezebox Multimedia Player
*
* @param unique id for this widget
* @param the gad/item for play
* @param the gad/item for pause
* @param the gad/item for stop (optional)
* @param the gad/item for playlist forward
* @param the gad/item for playlist backward
* @param the gad/item for the volume (optional)
* @param the gad/item to mute the music (optional)
* @param the gad/item for the song title (optional)
* @param the gad/item for the song artist (optional)
* @param the gad/item for repeat (optional)
* @param the gad/item to load the default playlist (optional)
* @param the gad/item for the duration (optional)
* @param the gad/item for the time/position (optional)
*
* @author Robert Budde
* derived from "multimedia" by Axel Otterstätter - thanks!
*/
{% macro control(id, gad_power, gad_play, gad_pause, gad_stop, gad_playlistforward, gad_playlistbackward, gad_vol, gad_mute,
gad_title, gad_artist, gad_repeat, gad_defaultplaylist, gad_duration, gad_time) %}
{% import "basic.html" as basic %}
{% import "widget_my.html" as my %}
{% set uid = uid(page, id) %}
<div id="{{ uid }}" class="music">
{% if gad_vol %}
<div class="vol">
<img class="slider-bottomup-scale" src="pages/base/pics/scale_buttomup.png">
{{ basic.slider(id~'vol', gad_vol, 0, 100, 5, 'bottomup') }}
</div>
{% endif %}
<div class="control">
{% if gad_power %} {{ basic.stateswitch('', gad_power, '', '','control_standby.svg') }} {% endif %}
{% if gad_mute %} {{ basic.stateswitch('', gad_mute, '',[0,1],'audio_volume_mute.svg') }} {% endif %}
{% if gad_repeat %} {{ basic.stateswitch('', gad_repeat, '', '', 'audio_repeat.svg') }} {% endif %}
{% if gad_defaultplaylist %} {{ basic.stateswitch('', gad_defaultplaylist, '', 1, 'audio_playlist.svg', 'Default Playlist') }} {% endif %}
</div>
<div class="title">
{% if gad_artist %}
{{ basic.print('', gad_artist) }}
<br />
{% endif %}
{% if gad_title %}
{{ basic.print('', gad_title) }}
{% endif %}
</div>
<div class="set">
{% if gad_duration %}
{% if gad_time %}
<div class="pos">
<div class="scale"> </div>
{{ my.time_slider(id~'time', gad_time, gad_duration, 1) }}
</div>
{% endif %}
{% endif %}
<div data-role="controlgroup" data-type="horizontal">
{{ basic.stateswitch('', gad_playlistbackward,'', 1 , 'control_arrow_left.svg','backward') }}
{{ basic.stateswitch('', gad_play, '', [1,1], 'audio_play.svg') }}
{{ basic.stateswitch('', gad_pause, '', '', 'audio_pause.svg') }}
{% if gad_stop %} {{ basic.stateswitch('', gad_stop, '', [1,1],'audio_stop.svg') }} {% endif %}
{{ basic.stateswitch('', gad_playlistforward, '', 1, 'control_arrow_right.svg', 'forward') }}
</div>
</div>
</div>
{% endmacro %}
/**
* A list with selectable item
*
* @param unique id for this widget
* @param a gad/item for the list
* @param a gad/item for the selected item
* @param the text to be displayed on top of the list
*/
{% macro list(id, gad_list, gad_item, txt ) %}
<ul id="{{ uid(page, id) }}" data-widget="basic.list" data-item="{{ gad_list }}, {{ gad_item }}"
data-role="listview" data-dividertheme="c">
<li data-icon="false"><a href="#">View details</a></li>
<li data-icon="false"><a href="#">Edit</a></li>
<li data-icon="false"><a href="#">Disable</a></li>
<li data-icon="false"><a href="#">Delete</a></li>
</ul>
{% endmacro %}
/**
* Displays a slider-control
*
* @param unique id for this widget
* @param a gad/item current time (progress)
* @param a gad/item total duration (maximum)
* @param seconds between two values (optional, default 5s)
* @param the orientation ('none', 'vertical', 'bottomup', 'semicircle')
*/
{% macro time_slider(id, gad_time, gad_duration, step, mode) %}
<input id="{{ uid(page, id) }}" data-widget="my.time_slider" data-item="{{ gad_time }}, {{ gad_duration }}"
type="range" value="0" min="0" max="1" disabled="1" step="{{ step|default(5) }}"
orientation="{{ mode }}" data-highlight="true" />
{% endmacro %}
/**
* Displays a slider to show and control the current time of a media file. Slider continues to run every second even if time value is not updated by item
*
* @param {id=} unique id for this widget
* @param {item(num)} an item providing the current time of a media file
* @param {item(bool)} an item providing info whether song is playing or not (value has to be true or false)
* @param {item(num)} an item providing the duration of the same media file
* @param {value=5} step in % between updates (optional, default 5)
* @param {text(input,handle,both,none)=input} how should the value be shown; possible options: 'input', 'handle', 'both', 'none' (optional, default 'input')
*/
{% macro timeslider(id, time, play, duration, step, value_display) %}
<input {% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="multimedia.timeslider" data-item="{{ time }}, {{ duration }}, {{ play }}"
type="range" value="0" min="0" max="1" disabled="1" step="{{ step|default(5) }}" timer="{{ step|default(5) }}"
orientation="horizontal" handleinfo="{{ value_display == 'handle' or value_display == 'both' }}" class="{{ value_display|default('input') == 'input' or value_display == 'both' ? '' : 'ui-slider-no-input' }}" data-highlight="true" />
{% endmacro %}
{% import "multimedia.html" as multimedia %}
{{ multimedia.timeslider(id~'time', gad_time, gad_play, gad_duration, 1) }}
Kommentar