Skip to content
This repository has been archived by the owner on Mar 22, 2021. It is now read-only.

Commit

Permalink
adds nicer layout, fixes, and pause
Browse files Browse the repository at this point in the history
  • Loading branch information
@jghibiki
jghibiki committed Jan 10, 2016
1 parent 2372362 commit 0281f9f
Show file tree
Hide file tree
Showing 10 changed files with 199 additions and 89 deletions.
34 changes: 30 additions & 4 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var youtube = new YouTube();
youtube.setKey("AIzaSyAPLpQrMuQj6EO4R1XwjwS2g47dqpFXW3Y")
youtube.setKey("AIzaSyAPLpQrMuQj6EO4R1XwjwS2g47dqpFXW3Y");
youtube.addParam("order", "relevance")

/*********************
Modify Date Prototype
Expand All @@ -42,6 +43,7 @@ var skip = false;
var newSongTimer = null;
var watchForSkipTimer = null;
var hasConnection = false;
var playing = true;

/***************
Rest end points
Expand Down Expand Up @@ -115,6 +117,22 @@ router.post('/playback/skip', function(req, res){
res.json({"result": "success"});
})

router.get('/playback/state', function(req, res){
res.json({state: playing});
});

router.post('/playback/state', function(req, res){
playing = req.body.state;
if(playing){
console.log("Starting Playback.");
}
else{
console.log("Pausing Playback.");
}
res.json({state: playing});
});


/* Queue */
router.get('/queue', function(req, res){
res.json({ queue:queue, current:currentlyPlaying });
Expand Down Expand Up @@ -194,13 +212,15 @@ io.on('connection', function (socket) {

socket.on("disconnect", function(){
clearTimeout(newSongTimer);
newSongTimer = null;
clearTimeout(watchForSkipTimer);
watchForSkipTimer = null;
hasConnection = false;
console.log("Client Disconnected");
});

socket.on("fixCurrent", function(current){
currentlyPlaying = current;
currentlyPlaying = current.title;
recent.push({song: current, lastPlayed:Date()});
})

Expand All @@ -212,7 +232,7 @@ io.on('connection', function (socket) {
});

function watchForSkip(socket){
if(skip){
if(skip && playing){
console.log("Song Skipped.");
skip = false;
clearTimeout(newSongTimer);
Expand All @@ -223,6 +243,11 @@ function watchForSkip(socket){

function newSong(socket){
console.log("There are " + queue.length + " items in the queue and " + recent.length + " items played recently.");
if(!playing){
console.log("Playback is paused waiting.");
newSongTimer = setTimeout(newSong, 1000, socket);
return;
}
if(queue.length > 0){
var song = queue.shift();
recent.push({ song:song, lastPlayed:Date() });
Expand Down Expand Up @@ -268,7 +293,7 @@ function newSong(socket){
youtube.getById(song.yt, function(error, result){
if(error){
console.log("Error: " + error)
setTimeout(newSong, 1000, socket);
newSongTimer = setTimeout(newSong, 1000, socket);
}
else{
song.duration = result.items[0].contentDetails.duration;
Expand All @@ -277,6 +302,7 @@ function newSong(socket){
if(relatedToRecent){
recent.push({song:song, lastPlayed:Date()});
}
currentlyPlaying = song.title;
socket.emit("song", song);
}

Expand Down
105 changes: 60 additions & 45 deletions app/client/client.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,70 @@
<div>
<h3>Currently Playing</h3>
<span ng-if="!currentlyPlaying"><em>Nothing is currently playing.</em></span>
<span>{{currentlyPlaying}}</span>
</div>

<div>
<h3>Queue</h3>
<span ng-if="queue.length === 0"><em>No reqests in queue.</em></span>
<ol ng-repeat="request in queue">
<li>
{{request.title}}
<!--
<div class="pure-g">
<div class="pure-u-1-3">
<div>
<h3>Currently Playing</h3>
<ul>
<li>
<span>Description {{request.description}}</span>
<span><burron ng-click="requestSong(request.id)"></burron></span>
<span ng-if="!currentlyPlaying"><em>Nothing is currently playing.</em></span>
<span>{{currentlyPlaying}}</span>
</li>
</ul>
-->
</li>
</ol>
<div>
</div>

<div>
<h3>Controls</h3>
<div>
<p><input type="checkbox" ng-model="recentCheckbox" ng-click="recentCheckboxClicked()"> Allow recent songs to be replayed (Once per hour) automatically.</p>
<p><input type="checkbox" ng-model="relatedCheckbox" ng-click="relatedCheckboxClicked()"> Allow songs related to songs that have already been played to be queued automatically.</p>
<p><input type="checkbox" ng-model="relatedToRecentCheckbox" ng-click="relatedToRecentCheckboxClicked()"> Allow a related song to be added to the list of recently played songs. <em>Note: this will allow the player to play a related song to a related song and so forth, eventually resulting in a large drift from the original song that was played.</em>
<p><button ng-click="skipSong()">Skip Current Song</button></p>
<p><button ng-click="clearRecent()">Clear Recently Played Songs List</button>
<div>
<h3>Queue</h3>
<span ng-if="queue.length === 0"><em>No reqests in queue.</em></span>
<ol ng-repeat="request in queue">
<li>
{{request.title}}
<!--
<ul>
<li>
<span>Description {{request.description}}</span>
<span><burron ng-click="requestSong(request.id)"></burron></span>
</li>
</ul>
-->
</li>
</ol>
</div>
<div>
<h3>Controls</h3>
<div ng-if="showControls">
<div>
<p><input type="checkbox" ng-model="recentCheckbox" ng-click="recentCheckboxClicked()"> Allow recent songs to be replayed (Once per hour) automatically.</p>
<p><input type="checkbox" ng-model="relatedCheckbox" ng-click="relatedCheckboxClicked()"> Allow songs related to songs that have already been played to be queued automatically.</p>
<p><input type="checkbox" ng-model="relatedToRecentCheckbox" ng-click="relatedToRecentCheckboxClicked()"> Allow a related song to be added to the list of recently played songs. <em>Note: this will allow the player to play a related song to a related song and so forth, eventually resulting in a large drift from the original song that was played.</em></p>
<p><button ng-click="skipSong()">Skip Current Song</button></p>
<p><button ng-click="clearRecent()">Clear Recently Played Songs List</button></p>
<p><button ng-click="playbackStateButtonClicked()">{{playbackStateMessage()}}</button>
</div>
<button ng-click="toggleControls()">Hide Controls</button>
</div>
<button ng-if="!showControls" ng-click="toggleControls()">Show Controls</button>
</div>
</div>
</div>

<div>
<h3>Add Request</h3>
<div>
<p>Query: <input ng-model="url"></p>
<p><button ng-click="searchSong()">Submit</button>
</div>
<div>

<div ng-if="searchResults.length > 0">
<h3>Search Results</h3>
<ul ng-repeat="result in searchResults">
<li>
<div class="pure-u-2-3">
<div>
<h3>Add Request</h3>
<div>
<span>{{result.title}}</span>
<span>{{result.url}}</span>
<button ng-click="requestSong(result.yt)">Request</button>
<p>Query: <input ng-model="url"><button ng-click="searchSong()">Submit</button></p>
</div>
</div>

<div ng-if="searchResults.length > 0">
<h3>Search Results</h3>
<div style="overflow-y: scroll; height: 500px; border-width: 2px; border-style: solid;">
<ul ng-repeat="result in searchResults" >
<li>
<div>
<span>{{result.title}}</span>
<button ng-click="requestSong(result.yt)">Request</button>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
110 changes: 83 additions & 27 deletions app/client/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@ angular.module('doc.client', ['ngRoute'])
}])

.controller('ClientCtrl', ["$scope", "queue", "search", "playback", function($scope, queue, search, playback) {


/* Definitions */

$scope.queue = [];
$scope.currentlyPlaying = null;
$scope.relatedCheckbox = false;
$scope.recentCheckbox = false;
$scope.relatedToRecentCheckbox = false;
$scope.showControls = false;
$scope.playbackState = false;


/* Queue */

function updateQueue(){
queue.get(function(response){
if($scope.queue.length != response.length){
Expand All @@ -22,19 +37,14 @@ angular.module('doc.client', ['ngRoute'])
}
});
}
$scope.queue = [];
$scope.currentlyPlaying = null;
$scope.queueTimer = setInterval(updateQueue, 2000);
$scope.relatedCheckbox = false;
$scope.recentCheckbox = false;
$scope.relatedToRecentCheckbox = false;


/* Skip Current Song */
$scope.skipSong = function(){
playback.skip();
}


/* Related */

$scope.relatedCheckboxClicked = function(){
Expand All @@ -44,14 +54,13 @@ angular.module('doc.client', ['ngRoute'])
}

function updateRelatedCheckbox(){
playback.getRelated(function(resp){
$scope.relatedCheckbox = resp.state;
})
if($scope.showControls){
playback.getRelated(function(resp){
$scope.relatedCheckbox = resp.state;
})
}
}

updateRelatedCheckbox();
$scope.updateRelatedCheckboxTimer = setInterval(updateRelatedCheckbox, 10000);

$scope.clearRelated = function(){
playback.clearRelatedList();
}
Expand All @@ -66,32 +75,56 @@ angular.module('doc.client', ['ngRoute'])
}

function updateRelatedToRecentCheckbox(){
playback.getRelatedToRecent(function(resp){
$scope.relatedToRecentCheckbox = resp.state;
});
if($scope.showControls){
playback.getRelatedToRecent(function(resp){
$scope.relatedToRecentCheckbox = resp.state;
});
}
};

updateRelatedToRecentCheckbox();
$scope.updateRelatedToRecentCheckboxTimer = setInterval(updateRelatedToRecentCheckbox, 10000);



/* Recent */

$scope.recentCheckboxClicked = function(){
playback.setRecent($scope.recentCheckbox, function(resp){
$scope.recentCheckbox = resp.state;
});
}
};

function updateRecentCheckbox(){
playback.getRecent(function(resp){
$scope.recentCheckbox = resp.state;
if($scope.showControls){
playback.getRecent(function(resp){
$scope.recentCheckbox = resp.state;
});
}
};


/* Playback State */

$scope.playbackStateMessage = function(){
if($scope.playbackSate){
return "Plause Playback";
}
else{
return "Resume Playback";
}
};

$scope.playbackStateButtonClicked = function(){
$scope.playbackSate = !$scope.playbackSate
playback.setState($scope.playbackSate, function(resp){
$scope.playbackSate = resp.state;
});
}
};

updateRelatedCheckbox();
$scope.updateRecentCheckboxTimer = setInterval(updateRelatedCheckbox, 10000);
function updatePlaybackState(){
if($scope.showControls){
playback.getState(function(resp){
$scope.playbackSate = resp.state;
})
}
};


/* Search Song */
Expand All @@ -100,7 +133,7 @@ angular.module('doc.client', ['ngRoute'])
search($scope.url, function(results){
$scope.searchResults = results;
})
}
};

$scope.requestSong = function(ytid){
for(var i=0; i < $scope.searchResults.length; i++){
Expand All @@ -120,5 +153,28 @@ angular.module('doc.client', ['ngRoute'])
break;
}
}
}
};


/* Hide/Show Controls */

$scope.toggleControls = function(){
$scope.showControls = !$scope.showControls;
RestUpdate();
};


/* UI REST Data Update Timer */

function RestUpdate(){
updateQueue();
updateRelatedCheckbox();
updateRelatedToRecentCheckbox();
updateRecentCheckbox();
updatePlaybackState();
};

RestUpdate();
$scope.updateTimer = setInterval(RestUpdate, 10000);

}]);
2 changes: 1 addition & 1 deletion app/components/version/version.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ angular.module('doc.version', [
'doc.version.version-directive'
])

.value('version', '0.1');
.value('version', '0.2');
Loading

0 comments on commit 0281f9f

Please sign in to comment.