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});
get_dirs(socket);
socket.on('log', function(msg){
console.log('id: ' + this.id + ' LOG:' + msg);
});
socket.on('disconnect', function(){
console.log('id: ' + this.id + ' disconnected');

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

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

17
src/static/index.html
View File

@@ -21,15 +21,18 @@
<script src='/socket.io/socket.io.js'></script>
<script src='/js/index.js'></script>
<title>Slowdowner</title>
<title>SlowDowner</title>
</head>
<body>
<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='navbar-header'>
<a class='navbar-brand' href=''>Slowdowner</a>
<a class='navbar-brand' href='/'>SlowDowner</a>
</div>
<p class='navbar-text navbar-right'><span>&zwnj;</span></p>
<ul class='nav navbar-nav navbar-right'>
@@ -53,11 +56,11 @@
</thead>
</table>
</div>
<div class='well col-sm-7'>
<div class='well col-sm-7'>
<label class="info-txt" id="txt-titel">Titel</label><br>
<br>
<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">
<input type="range" min="0" max="1000" value="0" class="slider" id="position-slider">
</div>
@@ -70,11 +73,13 @@
<button id='stopBtn' class='btn btn-danger'><i class='fa fa-stop'></i></button>
</div>
<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">
</div>
<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">
</div>
</div>

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

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