From 073c8cdcd01088783e7660e9c0f2c368cbf45e26 Mon Sep 17 00:00:00 2001 From: Ryan Kraus Date: Mon, 11 Jan 2016 00:02:01 -0500 Subject: [PATCH 1/6] Added volume buttons to media_player more-info Added volume buttons to the media_player more-info panel. The volume buttons appear if the supportsVolumeButtons flag is turned on and the player is not off. They send a volume up/down service call every half second while they are being pressed. --- src/more-infos/more-info-media_player.html | 12 +++++++- src/more-infos/more-info-media_player.js | 36 ++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html index 2ba1b51b91..776f520cd3 100644 --- a/src/more-infos/more-info-media_player.html +++ b/src/more-infos/more-info-media_player.html @@ -12,7 +12,7 @@ color: var(--accent-color); } - .volume { + .volume .volume_buttons { margin-bottom: 8px; max-height: 0px; @@ -43,8 +43,18 @@ +
+ + + +
this.fire('iron-resize'), 500); @@ -102,6 +116,10 @@ export default new Polymer({ return isMuted ? 'mdi:volume-off' : 'mdi:volume-high'; }, + computeHideVolumeButtons(isOff, supportsVolumeButtons) { + return !supportsVolumeButtons || isOff; + }, + computePlaybackControlIcon() { if (this.isPlaying) { return this.supportsPause ? 'mdi:pause' : 'mdi:stop'; @@ -136,6 +154,24 @@ export default new Polymer({ this.callService('volume_mute', { is_volume_muted: !this.isMuted }); }, + handleVolumeUp(ev) { + var obj = this.$.volumeUp; + this.handleVolumeWorker('volume_up', obj, true); + }, + + handleVolumeDown(ev) { + var obj = this.$.volumeDown; + this.handleVolumeWorker('volume_down', obj, true); + }, + + handleVolumeWorker(service, obj, force) { + if (force || (obj != undefined && obj.pointerDown)) { + this.callService(service); + var _this = this; + setTimeout(function(){ _this.handleVolumeWorker(service, obj, false); }, 500); + } + }, + volumeSliderChanged(ev) { const volPercentage = parseFloat(ev.target.value); const vol = volPercentage > 0 ? volPercentage / 100 : 0; From 0a0f827e3a40ca85bbe9e4737edb852ca94cbae5 Mon Sep 17 00:00:00 2001 From: Ryan Kraus Date: Mon, 11 Jan 2016 00:33:14 -0500 Subject: [PATCH 2/6] Fixing lint errors and mousedown on mobile browsers 1) Fixed a handful of errors caught by the linter. 2) Mobile browsers register a press and hold as a touch event rather than a regular mouse down event. The code has been updated so that these touch events will be registered and sent to the mouse down handler. --- src/more-infos/more-info-media_player.js | 26 +++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/more-infos/more-info-media_player.js b/src/more-infos/more-info-media_player.js index d1d91f8a73..93b4848681 100644 --- a/src/more-infos/more-info-media_player.js +++ b/src/more-infos/more-info-media_player.js @@ -73,16 +73,18 @@ export default new Polymer({ supportsVolumeButtons: { type: Boolean, value: false, - } + }, }, attached() { // This is required to bind a mousedown event in all browsers - // Specifically, Safari does not allow the on-down flag - var _this = this; - this.$.volumeUp.onmousedown = function() {_this.handleVolumeUp()}; - this.$.volumeDown.onmousedown = function() {_this.handleVolumeDown()}; + let _this = this; + window.test = this.$.volumeUp; + this.$.volumeUp.onmousedown = function onVolumeUpDown() {_this.handleVolumeUp();}; + this.$.volumeUp.ontouchstart = function onVolumeUpDown() {_this.handleVolumeUp();}; + this.$.volumeDown.onmousedown = function onVolumeDownDown() {_this.handleVolumeDown();}; + this.$.volumeDown.ontouchstart = function onVolumeDownDown() {_this.handleVolumeDown();}; }, stateObjChanged(newVal) { @@ -154,21 +156,21 @@ export default new Polymer({ this.callService('volume_mute', { is_volume_muted: !this.isMuted }); }, - handleVolumeUp(ev) { - var obj = this.$.volumeUp; + handleVolumeUp() { + let obj = this.$.volumeUp; this.handleVolumeWorker('volume_up', obj, true); }, - handleVolumeDown(ev) { - var obj = this.$.volumeDown; + handleVolumeDown() { + let obj = this.$.volumeDown; this.handleVolumeWorker('volume_down', obj, true); }, handleVolumeWorker(service, obj, force) { - if (force || (obj != undefined && obj.pointerDown)) { + if (force || (obj !== undefined && obj.pointerDown)) { this.callService(service); - var _this = this; - setTimeout(function(){ _this.handleVolumeWorker(service, obj, false); }, 500); + let _this = this; + setTimeout(function callback() {_this.handleVolumeWorker(service, obj, false);}, 500); } }, From 0c7f6f685cdcb829fc68a91d60955375e8541952 Mon Sep 17 00:00:00 2001 From: Ryan Kraus Date: Mon, 11 Jan 2016 00:41:27 -0500 Subject: [PATCH 3/6] Fixing more linter errors Changing lets to consts --- src/more-infos/more-info-media_player.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/more-infos/more-info-media_player.js b/src/more-infos/more-info-media_player.js index 93b4848681..58e26370a4 100644 --- a/src/more-infos/more-info-media_player.js +++ b/src/more-infos/more-info-media_player.js @@ -79,7 +79,7 @@ export default new Polymer({ attached() { // This is required to bind a mousedown event in all browsers - let _this = this; + const _this = this; window.test = this.$.volumeUp; this.$.volumeUp.onmousedown = function onVolumeUpDown() {_this.handleVolumeUp();}; this.$.volumeUp.ontouchstart = function onVolumeUpDown() {_this.handleVolumeUp();}; @@ -157,19 +157,19 @@ export default new Polymer({ }, handleVolumeUp() { - let obj = this.$.volumeUp; + const obj = this.$.volumeUp; this.handleVolumeWorker('volume_up', obj, true); }, handleVolumeDown() { - let obj = this.$.volumeDown; + const obj = this.$.volumeDown; this.handleVolumeWorker('volume_down', obj, true); }, handleVolumeWorker(service, obj, force) { if (force || (obj !== undefined && obj.pointerDown)) { this.callService(service); - let _this = this; + const _this = this; setTimeout(function callback() {_this.handleVolumeWorker(service, obj, false);}, 500); } }, From 5a27273506455f22013b429aa674a0a37084692b Mon Sep 17 00:00:00 2001 From: Ryan Kraus Date: Mon, 11 Jan 2016 00:54:50 -0500 Subject: [PATCH 4/6] Removed debugging line Removed a debugging line form media_player more-info code. --- src/more-infos/more-info-media_player.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/more-infos/more-info-media_player.js b/src/more-infos/more-info-media_player.js index 58e26370a4..4265d3878f 100644 --- a/src/more-infos/more-info-media_player.js +++ b/src/more-infos/more-info-media_player.js @@ -80,7 +80,6 @@ export default new Polymer({ attached() { // This is required to bind a mousedown event in all browsers const _this = this; - window.test = this.$.volumeUp; this.$.volumeUp.onmousedown = function onVolumeUpDown() {_this.handleVolumeUp();}; this.$.volumeUp.ontouchstart = function onVolumeUpDown() {_this.handleVolumeUp();}; this.$.volumeDown.onmousedown = function onVolumeDownDown() {_this.handleVolumeDown();}; From 9efe2ebbeea6dbafd4ef83378330740acb07287d Mon Sep 17 00:00:00 2001 From: Ryan Kraus Date: Mon, 11 Jan 2016 21:19:01 -0500 Subject: [PATCH 5/6] 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. --- src/more-infos/more-info-media_player.html | 4 ++-- src/more-infos/more-info-media_player.js | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html index 776f520cd3..04edc7c8db 100644 --- a/src/more-infos/more-info-media_player.html +++ b/src/more-infos/more-info-media_player.html @@ -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)]]'>
-