felixh/slowdowner
1
0
Fork 0
Code Pull Requests Releases Activity

added ui elements, added display update routine

Browse Source
This commit is contained in:
Felix Hartmann
2019-01-20 05:16:02 +01:00
parent 5b18fe5edc
commit 8c76db5275
4 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main.js
View File

@@ -20,6 +20,9 @@ io.on('connection', function(socket){
io.emit('status', {"users": users.length}); io.emit('status', {"users": users.length});
get_dirs(socket); get_dirs(socket);
socket.on('log', function(msg){
console.log('id: ' + this.id + ' LOG:' + msg);
});
socket.on('disconnect', function(){ socket.on('disconnect', function(){
console.log('id: ' + this.id + ' disconnected'); console.log('id: ' + this.id + ' disconnected');

2
src/static/css/main.css
View File

@@ -25,7 +25,7 @@ body {
text-align: right; text-align: right;
} }
#txt-duration { .align-right {
float: right; float: right;
text-align: right; text-align: right;
} }

15
src/static/index.html
View File

@@ -21,15 +21,18 @@
<script src='/socket.io/socket.io.js'></script> <script src='/socket.io/socket.io.js'></script>
<script src='/js/index.js'></script> <script src='/js/index.js'></script>
<title>Slowdowner</title> <title>SlowDowner</title>
</head> </head>
<body> <body>
<nav class='navbar navbar-inverse'> <nav class='navbar navbar-inverse'>
<a class="navbar-brand" href="/">
<img src="/img/favicon.ico" width="25" height="25" alt="SlowDowner Logo">
</a>
<div class='container-fluid'> <div class='container-fluid'>
<div class='navbar-header'> <div class='navbar-header'>
<a class='navbar-brand' href=''>Slowdowner</a> <a class='navbar-brand' href='/'>SlowDowner</a>
</div> </div>
<p class='navbar-text navbar-right'><span>&zwnj;</span></p> <p class='navbar-text navbar-right'><span>&zwnj;</span></p>
<ul class='nav navbar-nav navbar-right'> <ul class='nav navbar-nav navbar-right'>
@@ -57,7 +60,7 @@
<label class="info-txt" id="txt-titel">Titel</label><br> <label class="info-txt" id="txt-titel">Titel</label><br>
<br> <br>
<label class="info-txt-small" id="txt-timer">0:00</label> <label class="info-txt-small" id="txt-timer">0:00</label>
<label class="info-txt-small" id="txt-duration">0:00</label> <label class="info-txt-small align-right" id="txt-duration">0:00</label>
<div class="slidecontainer"> <div class="slidecontainer">
<input type="range" min="0" max="1000" value="0" class="slider" id="position-slider"> <input type="range" min="0" max="1000" value="0" class="slider" id="position-slider">
</div> </div>
@@ -70,11 +73,13 @@
<button id='stopBtn' class='btn btn-danger'><i class='fa fa-stop'></i></button> <button id='stopBtn' class='btn btn-danger'><i class='fa fa-stop'></i></button>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<label>Geschwindigkeit:</label> <label class="info-txt-small">Geschwindigkeit:</label>
<label class="info-txt-small align-right" id="txt-speed">100%</label>
<input type="range" min="50" max="200" value="100" class="slider" id="speed-slider"> <input type="range" min="50" max="200" value="100" class="slider" id="speed-slider">
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<label>Lautstärke:</label> <label class="info-txt-small">Lautstärke:</label>
<label class="info-txt-small align-right" id="txt-volume">70%</label>
<input type="range" min="0" max="1000" value="700" class="slider" id="volume-slider"> <input type="range" min="0" max="1000" value="700" class="slider" id="volume-slider">
</div> </div>
</div> </div>

77
src/static/js/index.js
View File

@@ -32,6 +32,7 @@ $(function () {
songDir.forEach(function(dir){ songDir.forEach(function(dir){
$( '#dir-dropdown' ).append('<option>'+dir.name+'</option>'); $( '#dir-dropdown' ).append('<option>'+dir.name+'</option>');
}); });
updateTable();
} }
}); });
@@ -64,30 +65,59 @@ $(function () {
//dropdown //dropdown
$( '#dir-dropdown' ).change(function () { $( '#dir-dropdown' ).change(function () {
updateTable() updateTable();
}); });
//sliders //sliders
$( '#position-slider' ).change(function () { $( '#position-slider' ).change(function () {
if(player == null)
return
player.seek(this.value/1000); player.seek(this.value/1000);
updateDisplay();
}); });
$( '#speed-slider' ).change(function () { $( '#speed-slider' ).change(function () {
if(player == null) updateDisplay();
return
player.rate(this.value/100);
}); });
$( '#volume-slider' ).change(function () { $( '#volume-slider' ).change(function () {
if(player == null) updateDisplay();
return
player.volume(this.value/1000);
}); });
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
updateDisplay();
}); });
function updateDisplay(){
playBtn = $( '#playBtn' );
stopBtn = $( '#stopBtn' );
volumeSl = $( '#volume-slider' );
speedSl = $( '#speed-slider' );
positionSl = $( '#position-slider' );
speedTxt = $( '#txt-speed' );
volumeTxt = $( '#txt-volume' );
timerTxt = $( '#txt-timer' );
durationTxt = $( '#txt-duration' );
titelTxt = $( '#txt-titel' );
if(player == null){
playBtn.prop("disabled", true);
stopBtn.prop("disabled", true);
positionSl.prop("disabled", true);
}else{
stopBtn.prop("disabled", false);
positionSl.prop("disabled", false);
player.rate(speedSl[0].value/100);
player.volume(volumeSl[0].value/1000);
}
speedTxt.html((speedSl[0].value) + '%');
volumeTxt.html(Math.round(volumeSl[0].value/10) + '%');
}
function updateTable(){ function updateTable(){
songDir.forEach(function(dir){ songDir.forEach(function(dir){
if($( '#dir-dropdown' ).find(":selected").text() == dir.name){ if($( '#dir-dropdown' ).find(":selected").text() == dir.name){
@@ -113,6 +143,8 @@ function tableClickListener(){
if(player != null && player.isPlaying()) if(player != null && player.isPlaying())
player.pause(); player.pause();
player = new Player(songName); player = new Player(songName);
player.init();
updateDisplay();
}); });
} }
@@ -125,13 +157,13 @@ var Player = function(songName) {
// Display the title of the first track. // Display the title of the first track.
$( '#txt-titel' ).text(songName); $( '#txt-titel' ).text(songName);
console.log(songName);
}; };
Player.prototype = { Player.prototype = {
/** /**
* Play a song. * Play a song.
*/ */
play: function() { init: function() {
$( '#playBtn' ).prop("disabled", true);
let self = this; let self = this;
let sound; let sound;
// If we already loaded this track, use the current one. // If we already loaded this track, use the current one.
@@ -143,21 +175,22 @@ Player.prototype = {
src: [self.url], src: [self.url],
html5: true, // Force to HTML5 so that the audio can stream in (best for large files). html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
onplay: function() { onplay: function() {
// Display the duration. updateDisplay();
$( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
$( '#playBtn' ).removeClass('btn-succes').addClass('btn-warning'); $( '#playBtn' ).removeClass('btn-succes').addClass('btn-warning');
$( '#playBtn i' ).removeClass('fa-play').addClass('fa-pause'); $( '#playBtn i' ).removeClass('fa-play').addClass('fa-pause');
// Start upating the progress of the track. // Start upating the progress of the track.
requestAnimationFrame(self.step.bind(self)); requestAnimationFrame(self.step.bind(self));
}, },
onload: function() { onload: function() {
$( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
$( '#playBtn' ).prop("disabled", false);
}, },
onend: function() { onend: function() {
$( '#playBtn' ).removeClass('btn-warning').addClass('btn-succes');
$( '#playBtn i' ).removeClass('fa-pause').addClass('fa-play');
self.seek(0); self.seek(0);
}, },
onpause: function() { onpause: function() {
console.log("pause");
$( '#playBtn' ).removeClass('btn-warning').addClass('btn-succes'); $( '#playBtn' ).removeClass('btn-warning').addClass('btn-succes');
$( '#playBtn i' ).removeClass('fa-pause').addClass('fa-play'); $( '#playBtn i' ).removeClass('fa-pause').addClass('fa-play');
}, },
@@ -168,8 +201,15 @@ Player.prototype = {
} }
}); });
} }
},
// Begin playing the sound. play: function() {
var self = this;
// Get the Howl we want to manipulate.
var sound = self.howl;
// Puase the sound.
sound.play(); sound.play();
}, },
@@ -286,3 +326,8 @@ Player.prototype = {
return minutes + ':' + (seconds < 10 ? '0' : '') + seconds; return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
} }
}; };
function clog(msg){
console.log(msg);
socket.emit('log', msg);
}