diff --git a/player/soundcloud.coffee b/player/soundcloud.coffee index eb45ec5f..75261a5a 100644 --- a/player/soundcloud.coffee +++ b/player/soundcloud.coffee @@ -23,9 +23,14 @@ window.SoundCloudPlayer = class SoundCloudPlayer extends Player ) # Soundcloud embed widget doesn't have a volume control. - volumeSlider = $('
').attr('id', 'widget-volume') - .css('top', '170px') + sliderHolder = $('
').attr('id', 'soundcloud-volume-holder') .insertAfter(widget) + $('').attr('id', 'soundcloud-volume-label') + .addClass('label label-default') + .text('Volume') + .appendTo(sliderHolder) + volumeSlider = $('
').attr('id', 'soundcloud-volume') + .appendTo(sliderHolder) .slider( range: 'min' value: VOLUME * 100 diff --git a/player/update.coffee b/player/update.coffee index 1388740d..b4bba248 100644 --- a/player/update.coffee +++ b/player/update.coffee @@ -102,7 +102,7 @@ window.handleMediaUpdate = (data) -> ) window.removeOld = (replace) -> - $('#sc_volume').remove() + $('#soundcloud-volume-holder').remove() replace ?= $('
').addClass('embed-responsive-item') old = $('#ytapiplayer') replace.insertBefore(old) diff --git a/www/css/cytube.css b/www/css/cytube.css index 3506cc63..b719430f 100644 --- a/www/css/cytube.css +++ b/www/css/cytube.css @@ -664,3 +664,19 @@ input#logout[type="submit"]:hover { margin-left: 10px; margin-right: 10px; } + +#soundcloud-volume-holder { + position: absolute; + top: 170px; + width: 100%; +} + +#soundcloud-volume-label { + margin-left: 2px; +} + +#soundcloud-volume { + margin-top: 5px; + margin-left: 10px; + margin-right: 10px; +} diff --git a/www/js/player.js b/www/js/player.js index fcec63a8..7974fcb3 100644 --- a/www/js/player.js +++ b/www/js/player.js @@ -714,7 +714,7 @@ this.setMediaProperties(data); waitUntilDefined(window, 'SC', (function(_this) { return function() { - var soundUrl, volumeSlider, widget; + var sliderHolder, soundUrl, volumeSlider, widget; removeOld(); if (data.meta.scuri) { soundUrl = data.meta.scuri; @@ -726,7 +726,9 @@ id: 'scplayer', src: "https://w.soundcloud.com/player/?url=" + soundUrl }); - volumeSlider = $('
').attr('id', 'widget-volume').css('top', '170px').insertAfter(widget).slider({ + sliderHolder = $('
').attr('id', 'soundcloud-volume-holder').insertAfter(widget); + $('').attr('id', 'soundcloud-volume-label').addClass('label label-default').text('Volume').appendTo(sliderHolder); + volumeSlider = $('
').attr('id', 'soundcloud-volume').appendTo(sliderHolder).slider({ range: 'min', value: VOLUME * 100, stop: function(event, ui) { @@ -1350,7 +1352,7 @@ window.removeOld = function(replace) { var old; - $('#sc_volume').remove(); + $('#soundcloud-volume-holder').remove(); if (replace == null) { replace = $('
').addClass('embed-responsive-item'); }