thing-it-device-sonos/web/sonos.html

[thing-it-node] Device Plugin for Sonos players.

<style>
    .trackImage {
        -webkit-transform: perspective(500px) rotateY(30deg);
        -moz-transform: perspective(500px) rotateY(30deg);
        -o-transform: perspective(500px) rotateY(30deg);
        width: 40%;
        float: left;
        -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent),
        color-stop(80%, transparent), to(rgba(255, 255, 255, 0.3)));
    }
</style>
<div style="display: block;">
    <div style="padding: 1em;">
        <img class="trackImage" src="{{component._state.albumArtURI}}"/>

        <div style="width: 50%; text-align: left; padding-left: 1em;">
            <div class="ellipsisTextOverflow">
                <div class="upperCase titleFont ternaryColor">Current Track</div>
                <div>{{component._state.currentTrack}}</div>
            </div>
            <div class="ellipsisTextOverflow">
                <div class="upperCase titleFont ternaryColor">Artist</div>
                <div>{{component._state.artist}}</div>
            </div>
            <div class="ellipsisTextOverflow">
                <div class="upperCase titleFont ternaryColor">Album</div>
                <div>{{component._state.album}}</div>
            </div>
        </div>
    </div>
    <div style="margin-top: 1em;" class="horizontalLine"></div>
    <div style="clear: both;">
        <table class="buttonGrid" style="display: inline-block; margin-top: 1em; margin-bottom: 1em;">
            <tr>
                <td>
                    <div class="circleButton" ng-click="panel.callDeviceService(component, 'previous')">
                        <i class="icon sl-backward-1"></i>
                    </div>
                </td>
                <td>
                    <div class="circleButton" ng-click="panel.callDeviceService(component, 'play')">
                        <i class="icon sl-play-1"></i>
                    </div>
                </td>
                <td>
                    <div class="circleButton" ng-click="panel.callDeviceService(component, 'pause')">
                        <i class="icon sl-pause-1"></i>
                    </div>
                </td>
                <td>
                    <div class="circleButton" ng-click="panel.callDeviceService(component, 'stop')">
                        <i class="icon sl-stop-1"></i>
                    </div>
                </td>
                <td>
                    <div class="circleButton" ng-click="panel.callDeviceService(component, 'next')">
                        <i class="icon sl-forward-1"></i>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="horizontalLine"></div>
    <table style="width: 100%; margin-top: 1em;">
        <tr>
            <td style="width: 99%">
                <input ti-slider=""
                       ti-model="component._state.volume" ti-min="0" ti-max="100"
                       ti-change="panel.callDeviceService(component, 'changeVolume', {level: component._state.volume} )">

            </td>
            <td style="width: 3em; text-align: center; padding: 1em;"><a ng-show="component._state.muted"
                                                                         ng-click="panel.callDeviceService(component, 'mute')"><i
                    class="icon sl-volume-mute-1"></i></a>
                <a ng-hide="component._state.muted" ng-click="panel.callDeviceService(component, 'mute')"><i
                        class="icon sl-volume-medium"></i></a>
            </td>
        </tr>
    </table>
</div>