<div id="player" class="md-whiteframe-3dp" flex-xs="100" flex-sm="100" flex-md="60" flex-lg="50" flex-xl="40"
     ng-if="playerState !== null">
    <div layout="row" hide-gt-sm>
        <ng-include src="'/.nekumo/static/src/shared/chromecast/playerSlider.html'" include-replace></ng-include>
    </div>
    <div layout="row" class="controllers">
        <div>
            <md-button class="md-raised md-primary play-pause" ng-click="$chromecast.togglePause();">
                <md-icon md-font-set="mdi" md-font-icon="mdi-play" ng-if="playerState == 'PAUSED'"></md-icon>
                <md-icon md-font-set="mdi" md-font-icon="mdi-pause" ng-if="playerState != 'PAUSED'"></md-icon>
            </md-button>
            <md-button ng-click="undo();" class="undo">
                <md-icon md-font-set="mdi" md-font-icon="mdi-undo"></md-icon>
            </md-button>
            <span class="timing">{{ (currentTime * 1000)|duration:'h:mm:ss' }}</span>
        </div>
        <ng-include src="'/.nekumo/static/src/shared/chromecast/playerSlider.html'" include-replace></ng-include>
        <div>
            <span class="timing" hide-xs hide-sm>{{ (duration * 1000)|duration:'h:mm:ss' }}</span>
            <div id="volume">
                <md-button ng-class="{'md-raised': volumeSlider}" ng-click="toggleVolumeSlider();">
                    <md-icon md-font-set="mdi" md-font-icon="mdi-volume-{{ volumeLevelName }}"></md-icon>
                </md-button>
                <div id="volume-slider" md-whiteframe="1" ng-if="volumeSlider">
                    <md-slider ng-model="volumeLevel" min="0" max="100" aria-label="volume" md-discrete
                               ng-change="setVolumeLevel(volumeLevel)"
                               class="md-accent" md-vertical></md-slider>
                </div>
            </div>
            <button class="cast md-button md-ink-ripple" is="google-cast-button"></button>
        </div>
    </div>
</div>