Hide play button in media player if there is not media to control

If the media player does not have media to control, the
play/pause/stop, previous, and next buttons will be hidden. In order
for the playback buttons to be shown, the status of the media player
must be playing, paused, or unknown. This way, if the status is On, the
playback buttons will be hidden.
This commit is contained in:
Ryan Kraus 2016-01-11 21:19:01 -05:00
parent 5a27273506
commit 9efe2ebbee
2 changed files with 14 additions and 2 deletions

View File

@ -12,7 +12,7 @@
color: var(--accent-color);
}
.volume .volume_buttons {
.volume {
margin-bottom: 8px;
max-height: 0px;
@ -33,7 +33,7 @@
hidden$='[[computeHidePowerButton(isOff, supportsTurnOn, supportsTurnOff)]]'></paper-icon-button>
</div>
<div>
<template is='dom-if' if='[[!isOff]]'>
<template is='dom-if' if='[[computeShowPlaybackControls(isOff, hasMediaControl)]]'>
<paper-icon-button icon='mdi:skip-previous' on-tap='handlePrevious'
hidden$='[[!supportsPreviousTrack]]'></paper-icon-button>
<paper-icon-button icon='[[computePlaybackControlIcon(stateObj)]]'

View File

@ -75,6 +75,11 @@ export default new Polymer({
value: false,
},
hasMediaControl: {
type: Boolean,
value: false,
},
},
attached() {
@ -88,8 +93,11 @@ export default new Polymer({
stateObjChanged(newVal) {
if (newVal) {
const hasMediaStates = ['playing', 'paused', 'unknown'];
this.isOff = newVal.state === 'off';
this.isPlaying = newVal.state === 'playing';
this.hasMediaControl = hasMediaStates.indexOf(newVal.state) !== -1;
this.volumeSliderValue = newVal.attributes.volume_level * 100;
this.isMuted = newVal.attributes.is_volume_muted;
this.supportsPause = (newVal.attributes.supported_media_commands & 1) !== 0;
@ -121,6 +129,10 @@ export default new Polymer({
return !supportsVolumeButtons || isOff;
},
computeShowPlaybackControls(isOff, hasMedia) {
return !isOff && hasMedia;
},
computePlaybackControlIcon() {
if (this.isPlaying) {
return this.supportsPause ? 'mdi:pause' : 'mdi:stop';