Cleaned up the web player API

This commit is contained in:
IrosTheBeggar 2017-03-29 02:29:57 -04:00
parent bf826228c3
commit c42aee7308
7 changed files with 35 additions and 38 deletions

View File

@ -31,7 +31,7 @@ mStream Express is a special version of the server that comes with all the depen
[Download it from our website](http://www.mstream.io/mstream-express)
![mStream Express UI](public/img/designs/mstream-express.png)
![mStream Express UI](public/img/designs/mstream-express.png | width=386)
#### Install From Source

View File

@ -21,15 +21,18 @@ You can now access the mStream Player through the `MSTREAM` object
## The audioData object
When adding a song to the queue you add it in an object form. The object must contain the `filepath` key in order for it to work
When adding a song to the queue you add it in an object form. The object must contain the `url` key in order for it to work with the player. The webapp also uses the `filepath` key for a few other functions, but it's not necessary for the player to work.
```
{
url: "vPath/path/to/song.mp3?toke=xxx",
filepath: "path/to/song.mp3"
}
```
You can store metadata in this object. The structure of the metadata does not matter since it is not used by this library. audioData objects are added to the queue unmodified. This way when you retrieve an object in your view code, you can pull the metadata out exactly the way you stored it
## API
**`addSong(audioData)`**

View File

@ -356,7 +356,10 @@ $(document).ready(function(){
file_location = file_location + '?token=' + accessKey;
}
MSTREAM.addSong(file_location, false, raw_location);
MSTREAM.addSong({
url: file_location,
filepath: raw_location
});
}
@ -611,7 +614,7 @@ $('#search-explorer').on('click', function(){
var stuff = [];
for (let i = 0; i < MSTREAM.playlist.length; i++) {
//Do something
stuff.push(MSTREAM.playlist[i].rawLocation);
stuff.push(MSTREAM.playlist[i].filepath);
}
@ -677,7 +680,7 @@ $('#search-explorer').on('click', function(){
var stuff = [];
for (let i = 0; i < MSTREAM.playlist.length; i++) {
//Do something
stuff.push(MSTREAM.playlist[i].rawLocation);
stuff.push(MSTREAM.playlist[i].filepath);
}
@ -822,7 +825,7 @@ $("#filelist").on('click', '.playlistz', function() {
//loop through array and add each file to the playlist
var downloadFiles = [];
for (let i = 0; i < MSTREAM.playlist.length; i++) {
downloadFiles.push(MSTREAM.playlist[i].rawLocation);
downloadFiles.push(MSTREAM.playlist[i].filepath);
}
var downloadJOSN = JSON.stringify(downloadFiles);

View File

@ -10,22 +10,17 @@ var MSTREAM = (function () {
mstreamModule.playlist = [];
// The songObject looks like this
// The audioData looks like this
// var song = {
// "filepath":"path/to/song",
// "artist":"CCC",
// "album":"GGG",
// "name":" song name"
// "album-art":"path/to/art"
// "url":"vPath/path/to/song.mp3?token=xxx",
// "filepath": "path/to/song.mp3"
// }
mstreamModule.addSong = function(filepath, metadata = false, rawLocation = false){
// TODO: Rename filepath to url, since that what it really is
var song = {
filepath:filepath,
rawLocation:rawLocation
mstreamModule.addSong = function(audioData){
if(!audioData.url || audioData.url == false){
return false;
}
// Handle shuffle
@ -34,7 +29,7 @@ var MSTREAM = (function () {
shuffleCache.splice(pos, 0, song);
}
return addSongToPlaylist(song);
return addSongToPlaylist(audioData);
}
function addSongToPlaylist(song){
@ -107,13 +102,13 @@ var MSTREAM = (function () {
}
// TODO: Log Failures
mstreamModule.removeSongAtPosition = function(position, sanityCheckFilepath = false){
mstreamModule.removeSongAtPosition = function(position, sanityCheckUrl = false){
// Check that position is filled
if (position > mstreamModule.playlist.length || position < 0) {
return false;
}
// If sanityCheckFilepath, check that filepaths are the same
if(sanityCheckFilepath && sanityCheckFilepath != mstreamModule.playlist[position].filepath){
// If sanityCheckUrl, check that url are the same
if(sanityCheckUrl && sanityCheckUrl != mstreamModule.playlist[position].url){
return false;
}
@ -507,12 +502,12 @@ var MSTREAM = (function () {
function setMedia(song, player, play){
if(song.filepath.indexOf('.flac') !== -1 && Howler.codecs('flac') === false ){
if(song.url.indexOf('.flac') !== -1 && Howler.codecs('flac') === false ){
// Set via aurora
player.playerType = 'aurora';
player.playerObject = AV.Player.fromURL(song.filepath);
player.playerObject = AV.Player.fromURL(song.url);
player.playerObject.on("end", function() {
callMeOnStreamEnd();
}, false);
@ -536,7 +531,7 @@ var MSTREAM = (function () {
player.playerType = 'howler';
player.playerObject = new Howl({
src: [song.filepath],
src: [song.url],
html5: true, // Force to HTML5. Otherwise streaming will suck
// onplay: function() { },
onload: function() {

View File

@ -91,8 +91,8 @@ var VUEPLAYER = function() {
return '\u00A0\u00A0\u00A0Welcome To mStream!\u00A0\u00A0\u00A0';
}
// Use rawLocation instead
var filepathArray = currentSong.rawLocation.split("/");
// Use filepath instead
var filepathArray = currentSong.filepath.split("/");
return '\u00A0\u00A0\u00A0' + filepathArray[filepathArray.length-1] + '\u00A0\u00A0\u00A0';
}

View File

@ -278,7 +278,7 @@
<!-- see file: mstream.vue-player-controls.js -->
<div class="clear col scroll scrollBoxHeight2">
<draggable :list="playlist" @end="checkMove" id="playlist">
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.rawLocation">
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.filepath">
</div>
</draggable>
</div>

View File

@ -82,7 +82,12 @@
// Get playlist
for (var i = 0; i < playlist.length; i++) {
MSTREAM.addSong(vpath + '/' + playlist[i] + '?token=' + decoded.token, false, playlist[i] );
MSTREAM.addSong(
{
url: vpath + '/' + playlist[i] + '?token=' + decoded.token,
filepath: playlist[i]
}
);
}
@ -96,15 +101,6 @@
}
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3', false, '/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3', false, '/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
// MSTREAM.addSong('/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac', false, '/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3', false, '/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3', false, '/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3', false, '/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
//
</script>
@ -133,7 +129,7 @@
<!-- Playlist -->
<div class="playlist-container">
<draggable :list="playlist" @end="checkMove" id="playlist">
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.rawLocation" >
<div v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.filepath" >
</div>
</draggable>
</div>