Clean up media player progress

This commit is contained in:
Paulus Schoutsen 2016-12-04 14:12:23 -08:00
parent f193f9844b
commit a767765c5b
2 changed files with 41 additions and 87 deletions

@ -1 +1 @@
Subproject commit e5c4770427ceaa3d4a76502317f7ecba275f8bee
Subproject commit d5c894436fcdf888d08a1a58d64faba57023fe53

View File

@ -46,7 +46,7 @@
}
.banner.no-cover:before {
padding-top: 91px;
padding-top: 88px;
}
.banner > .cover {
@ -100,6 +100,12 @@
margin: 8px 0 4px;
}
.progress {
width: 100%;
--paper-progress-active-color: var(--accent-color);
--paper-progress-container-color: #FFF;
}
.controls {
position: relative;
@apply(--paper-font-body1);
@ -114,14 +120,6 @@
height: 44px;
}
.controls .progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
--paper-progress-active-color: red;
}
paper-icon-button {
opacity: var(--dark-primary-opacity);
}
@ -159,14 +157,14 @@
</div>
</div>
<div class='controls layout horizontal justified'>
<paper-progress
max='[[playbackDuration]]'
value='[[playbackPosition]]'
hidden$='[[!playbackVisible]]'
class='progress'
></paper-progress>
<paper-progress
max='[[stateObj.attributes.media_duration]]'
value='[[playbackPosition]]'
hidden$='[[computeHideProgress(playerObj)]]'
class='progress'
></paper-progress>
<div class='controls layout horizontal justified'>
<paper-icon-button
icon='mdi:power'
on-tap='handleTogglePower'
@ -230,6 +228,10 @@ Polymer({
computed: 'computePlaybackControlIcon(playerObj)',
},
playbackPosition: {
type: Number,
},
/**
* The z-depth of the card, from 0-5.
*/
@ -238,86 +240,34 @@ Polymer({
value: 1,
reflectToAttribute: true,
},
playbackDuration: {
type: Number,
},
playbackPosition: {
type: Number,
},
playbackVisible: {
type: Boolean,
value: false,
},
},
playerObjChanged: function (playerObj) {
var timeSincePositionValid;
created: function () {
this.updatePlaybackPosition = this.updatePlaybackPosition.bind(this);
},
if (!playerObj.isOff && !playerObj.isIdle) {
this.$.cover.style.backgroundImage = playerObj.stateObj.attributes.entity_picture ?
'url(' + playerObj.stateObj.attributes.entity_picture + ')' : '';
}
if (typeof this._positionTracking === 'undefined') {
this._positionTracking = {
position: null, // last value of media_position
time: null, // when that value was updated
interval: null, // interval timer to update playbackPosition property
};
}
// clear previous interval timer
if (this._positionTracking.interval) {
clearInterval(this._positionTracking.interval);
this._positionTracking.interval = null;
}
// update playback state from object
if (playerObj.stateObj.attributes.media_position_updated_at) {
// when was the position valid?
timeSincePositionValid = Math.abs(
new Date() - Date.parse(playerObj.stateObj.attributes.media_position_updated_at)
);
// update "current" position (in ms) to reflect that
this._positionTracking.position = (1000 * playerObj.stateObj.attributes.media_position) +
timeSincePositionValid;
// base playbackPosition calculations on calculate position now
this._positionTracking.time = Date.now();
// playbackDuration is expressed in ms (rounded to the next second)
this.playbackDuration = 1000 * playerObj.stateObj.attributes.media_duration;
playerObjChanged: function (playerObj, oldPlayerObj) {
var picture = playerObj.stateObj.attributes.entity_picture;
if (picture) {
this.$.cover.style.backgroundImage = 'url(' + picture + ')';
} else {
// no playback position
this._positionTracking.position = null;
this._positionTracking.time = null;
this.playbackDuration = null;
this.$.cover.style.backgroundImage = '';
}
if (playerObj.isPlaying && this._positionTracking.position != null && this.playbackDuration) {
// playback is in progress, update the playback status on an interval timer
// we choose 200ms here in order to get the playback paper-progress control movement smooth
this._positionTracking.interval = setInterval(this.updatePlaybackPosition.bind(this), 200);
} else {
// no playback in progress (or no playback info), update playback status
if (playerObj.isPlaying) {
if (!this._positionTracking) {
this._positionTracking = setInterval(this.updatePlaybackPosition, 1000);
}
this.updatePlaybackPosition();
} else if (this._positionTracking) {
clearInterval(this._positionTracking);
this._positionTracking = null;
this.playbackPosition = 0;
}
},
updatePlaybackPosition: function () {
if (this._positionTracking.position != null && this.playbackDuration) {
// calculate playback position in ms
this.playbackPosition = this._positionTracking.position +
(Date.now() - this._positionTracking.time);
this.playbackVisible = true;
} else {
this.playbackPosition = null;
this.playbackVisible = false;
}
updatePlaybackPosition: function (playerObj) {
this.playbackPosition = this.playerObj.currentProgress;
},
computeBannerClasses: function (playerObj) {
@ -334,6 +284,10 @@ Polymer({
return cls;
},
computeHideProgress: function (playerObj) {
return !playerObj.showProgress;
},
computeHidePowerButton: function (playerObj) {
return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
},