From 145cc8b41c32b7c7e1b30acc1a8955f3b3adf701 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20W=C5=82odkowski?= Date: Thu, 10 Apr 2014 02:39:19 +0200 Subject: [PATCH 1/3] fix #30 volume slider don't change volume level when dragged fix #31 setting volume to 0 with setVolume(0) causing setting it to 0.5 --- src/plugins/projekktor.controlbar.js | 117 ++++++++++++++++++--------- 1 file changed, 77 insertions(+), 40 deletions(-) diff --git a/src/plugins/projekktor.controlbar.js b/src/plugins/projekktor.controlbar.js index bd74143..91dc8c1 100644 --- a/src/plugins/projekktor.controlbar.js +++ b/src/plugins/projekktor.controlbar.js @@ -598,7 +598,10 @@ jQuery(function ($) { var isVisible = this.cb.hasClass('active'), ref = this, fixed = this.getConfig('fixedVolume'), - toggleMute = (this.controlElements['mute'].hasClass('toggle') || this.controlElements['unmute'].hasClass('toggle') || this.getConfig('toggleMute')); + toggleMute = (this.controlElements['mute'].hasClass('toggle') || this.controlElements['unmute'].hasClass('toggle') || this.getConfig('toggleMute')), + // check if the volume is in the proper range and correct its value if it's not + volume = volume > 1 ? 1 : volume, + volume = volume < 0 ? 0 : volume; // hide volume mess in case volume is fixed this._active('mute', !fixed); @@ -612,12 +615,25 @@ jQuery(function ($) { // make controls visible in order to allow dom manipulations // this.cb.stop(true, true).show(); - if (this.controlElements['vslider'].width() > this.controlElements['vslider'].height()) { - this.controlElements['vmarker'].css('width', volume * 100 + "%"); - this.controlElements['vknob'].css('left', volume * 100 + "%"); - } else { - this.controlElements['vmarker'].css('height', volume * 100 + "%"); - this.controlElements['vknob'].css('top', (100 - volume * 100) + "%"); + var vslider = this.controlElements['vslider'], + vmarker = this.controlElements['vmarker'], + vknob = this.controlElements['vknob'], + orientation = vslider.width() > vslider.height() ? "horizontal" : "vertical"; + + switch(orientation){ + case "horizontal": + + vmarker.css('width', volume * 100 + "%"); + vknob.css('left', Math.round((vslider.width() * volume) - (vknob.width() * volume)) + "px" ); + + break; + + case "vertical": + + vmarker.css('height', volume * 100 + "%"); + vknob.css('bottom', Math.round((vslider.height() * volume) - (vknob.height() * volume)) + "px" ); + + break; } // "li" hack @@ -816,12 +832,16 @@ jQuery(function ($) { volumeHandler: function (value) { try { - if (value>0) + if (value>0){ this.cookie('muted', false); - - if (!this.cookie('muted')) + } + + if (!this.cookie('muted')){ this.cookie('volume', value); + } + } catch(e){console.log(e)} + this.displayVolume(this._getVolume()); }, @@ -1154,52 +1174,69 @@ jQuery(function ($) { this._vSliderAct = true; var ref = this, - sliderIdx = (this.pp.getInFullscreen() === true && this.controlElements['vslider'].length > 1) ? 1 : 0, - knob = $(domObj[sliderIdx]), - slider = $(this.controlElements['vslider'][sliderIdx]), - dx = Math.abs(parseFloat(knob.position().left) - event.clientX), - dy = Math.abs(parseFloat(knob.position().top) - event.clientY), + + vslider = ref.controlElements['vslider'], + vmarker = ref.controlElements['vmarker'], + vknob = ref.controlElements['vknob'], + + orientation = vslider.width() > vslider.height() ? "horizontal" : "vertical", volume = 0, - mouseUp = function (mouseupevt) { + + mouseUp = function (mouseUpEvent) { ref.playerDom.unbind('mouseup', mouseUp); - slider.unbind('mousemove', mouseMove); - slider.unbind('mouseup', mouseUp); - knob.unbind('mousemove', mouseMove); - knob.unbind('mouseup', mouseUp); + vslider.unbind('mousemove', mouseMove); + vslider.unbind('mouseup', mouseUp); + vknob.unbind('mousemove', mouseMove); + vknob.unbind('mouseup', mouseUp); ref._vSliderAct = false; return false; }, - mouseMove = function (dragevent) { + mouseMove = function (dragEvent) { clearTimeout(ref._cTimer); - var newXPos = (dragevent.clientX - dx), - newXPos = (newXPos > slider.width() - knob.width() / 2) ? slider.width() - (knob.width() / 2) : newXPos, + + var newXPos = (dragEvent.clientX - vslider.offset().left), + newXPos = (newXPos > vslider.width()) ? vslider.width() : newXPos, newXPos = (newXPos < 0) ? 0 : newXPos, - newYPos = (dragevent.clientY - dy), - newYPos = (newYPos > slider.height() - knob.height() / 2) ? slider.height() - (knob.height() / 2) : newYPos, + + newYPos = (dragEvent.clientY - vslider.offset().top), + newYPos = (newYPos > vslider.height()) ? vslider.height() : newYPos, newYPos = (newYPos < 0) ? 0 : newYPos; - - if (ref.controlElements['vslider'].width() > ref.controlElements['vslider'].height()) { - knob.css('left', newXPos + 'px'); - volume = Math.abs(newXPos / (slider.width() - (knob.width() / 2))); - $(ref.controlElements['vmarker'][sliderIdx]).css('width', volume * 100 + "%"); - } else { - knob.css('top', newYPos + 'px'); - volume = 1 - Math.abs(newYPos / (slider.height() - (knob.height() / 2))); - $(ref.controlElements['vmarker'][sliderIdx]).css('height', volume * 100 + "%"); + + + + switch(orientation){ + case "horizontal": + volume = Math.abs(newXPos / vslider.width()); + + vmarker.css('width', volume * 100 + "%"); + vknob.css('left', Math.round((vslider.width() * volume) - (vknob.width() * volume)) + "px" ); + + break; + + case "vertical": + volume = 1 - Math.abs(newYPos / vslider.height()); + + vmarker.css('height', volume * 100 + "%"); + vknob.css('bottom', Math.round((vslider.height() * volume) - (vknob.height()* volume)) + "px" ); + + break; } + + ref.pp.setVolume(volume); + return false; }; // this.playerDom.mousemove(mouseMove); this.playerDom.mouseup(mouseUp); - slider.mousemove(mouseMove); - slider.mouseup(mouseUp); + vslider.mousemove(mouseMove); + vslider.mouseup(mouseUp); - knob.mousemove(mouseMove); - knob.mouseup(mouseUp); + vknob.mousemove(mouseMove); + vknob.mouseup(mouseUp); }, @@ -1255,7 +1292,7 @@ jQuery(function ($) { *******************************/ _getVolume: function() { - var volume = parseFloat(this.cookie('volume') || this.getConfig('volume') || 0.5), + var volume = parseFloat(this.cookie('volume') || this.getConfig('volume')), muted = this.cookie('muted') || false; if (this.getConfig('fixedVolume') || volume==null) @@ -1298,4 +1335,4 @@ jQuery(function ($) { return result; } } -}); \ No newline at end of file +}); From f8c111a88d4fecfc14d9419c415de10b082abc73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20W=C5=82odkowski?= Date: Thu, 10 Apr 2014 02:58:16 +0200 Subject: [PATCH 2/3] adjust styles related to volume slider --- themes/maccaco/projekktor.style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/themes/maccaco/projekktor.style.css b/themes/maccaco/projekktor.style.css index 205721d..be2a5d8 100644 --- a/themes/maccaco/projekktor.style.css +++ b/themes/maccaco/projekktor.style.css @@ -314,6 +314,7 @@ controlbar plugin /* volume slider - right */ .ppvslider { margin: 13px 5px; + padding: 0 1px; height: 16px; width: 60px; background: url("maccaco.png") no-repeat -781px -13px transparent; @@ -335,7 +336,7 @@ controlbar plugin background: url("maccaco.png") no-repeat -699px -5px transparent; top: -13px; left:0; - width: 6px; + width: 4px; height: 20px; padding: 0; From fb16a136ea895cc017f23c43d75a1ebaa5c4fc69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20W=C5=82odkowski?= Date: Thu, 8 May 2014 21:57:44 +0200 Subject: [PATCH 3/3] Improve volume slider dragging functionality --- src/plugins/projekktor.controlbar.js | 33 ++++++++++++++++------------ 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/plugins/projekktor.controlbar.js b/src/plugins/projekktor.controlbar.js index 91dc8c1..5c55900 100644 --- a/src/plugins/projekktor.controlbar.js +++ b/src/plugins/projekktor.controlbar.js @@ -1184,11 +1184,16 @@ jQuery(function ($) { volume = 0, mouseUp = function (mouseUpEvent) { - ref.playerDom.unbind('mouseup', mouseUp); - vslider.unbind('mousemove', mouseMove); - vslider.unbind('mouseup', mouseUp); - vknob.unbind('mousemove', mouseMove); - vknob.unbind('mouseup', mouseUp); + if(window.onmouseup === undefined){ // IE < 9 has no window mouse events support + $(document).unbind('mousemove', mouseMove); + $(document).unbind('mouseup', mouseUp); + $(document).unbind('mouseleave', mouseUp); + } + else { + $(window).unbind('mousemove', mouseMove); + $(window).unbind('mouseup', mouseUp); + } + ref._vSliderAct = false; return false; @@ -1229,15 +1234,15 @@ jQuery(function ($) { return false; }; - // this.playerDom.mousemove(mouseMove); - this.playerDom.mouseup(mouseUp); - - vslider.mousemove(mouseMove); - vslider.mouseup(mouseUp); - - vknob.mousemove(mouseMove); - vknob.mouseup(mouseUp); - + if(window.onmouseup === undefined){ + $(document).mousemove(mouseMove); + $(document).mouseup(mouseUp); + $(document).mouseleave(mouseUp); + } + else { + $(window).mousemove(mouseMove); + $(window).mouseup(mouseUp); + } }, handleStartDragListener: function (evt, domObj) {