Address #560 by adding a 'Volume' label

This commit is contained in:
calzoneman 2016-03-23 22:45:54 -07:00
parent 7448429341
commit c5c40a0386
4 changed files with 29 additions and 6 deletions

View file

@ -23,9 +23,14 @@ window.SoundCloudPlayer = class SoundCloudPlayer extends Player
) )
# Soundcloud embed widget doesn't have a volume control. # Soundcloud embed widget doesn't have a volume control.
volumeSlider = $('<div/>').attr('id', 'widget-volume') sliderHolder = $('<div/>').attr('id', 'soundcloud-volume-holder')
.css('top', '170px')
.insertAfter(widget) .insertAfter(widget)
$('<span/>').attr('id', 'soundcloud-volume-label')
.addClass('label label-default')
.text('Volume')
.appendTo(sliderHolder)
volumeSlider = $('<div/>').attr('id', 'soundcloud-volume')
.appendTo(sliderHolder)
.slider( .slider(
range: 'min' range: 'min'
value: VOLUME * 100 value: VOLUME * 100

View file

@ -102,7 +102,7 @@ window.handleMediaUpdate = (data) ->
) )
window.removeOld = (replace) -> window.removeOld = (replace) ->
$('#sc_volume').remove() $('#soundcloud-volume-holder').remove()
replace ?= $('<div/>').addClass('embed-responsive-item') replace ?= $('<div/>').addClass('embed-responsive-item')
old = $('#ytapiplayer') old = $('#ytapiplayer')
replace.insertBefore(old) replace.insertBefore(old)

View file

@ -664,3 +664,19 @@ input#logout[type="submit"]:hover {
margin-left: 10px; margin-left: 10px;
margin-right: 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;
}

View file

@ -714,7 +714,7 @@
this.setMediaProperties(data); this.setMediaProperties(data);
waitUntilDefined(window, 'SC', (function(_this) { waitUntilDefined(window, 'SC', (function(_this) {
return function() { return function() {
var soundUrl, volumeSlider, widget; var sliderHolder, soundUrl, volumeSlider, widget;
removeOld(); removeOld();
if (data.meta.scuri) { if (data.meta.scuri) {
soundUrl = data.meta.scuri; soundUrl = data.meta.scuri;
@ -726,7 +726,9 @@
id: 'scplayer', id: 'scplayer',
src: "https://w.soundcloud.com/player/?url=" + soundUrl src: "https://w.soundcloud.com/player/?url=" + soundUrl
}); });
volumeSlider = $('<div/>').attr('id', 'widget-volume').css('top', '170px').insertAfter(widget).slider({ sliderHolder = $('<div/>').attr('id', 'soundcloud-volume-holder').insertAfter(widget);
$('<span/>').attr('id', 'soundcloud-volume-label').addClass('label label-default').text('Volume').appendTo(sliderHolder);
volumeSlider = $('<div/>').attr('id', 'soundcloud-volume').appendTo(sliderHolder).slider({
range: 'min', range: 'min',
value: VOLUME * 100, value: VOLUME * 100,
stop: function(event, ui) { stop: function(event, ui) {
@ -1350,7 +1352,7 @@
window.removeOld = function(replace) { window.removeOld = function(replace) {
var old; var old;
$('#sc_volume').remove(); $('#soundcloud-volume-holder').remove();
if (replace == null) { if (replace == null) {
replace = $('<div/>').addClass('embed-responsive-item'); replace = $('<div/>').addClass('embed-responsive-item');
} }