diff options
-rw-r--r-- | bin/backend.php | 9 | ||||
-rw-r--r-- | bin/textfiles/browseAudio.txt | 21 | ||||
-rw-r--r-- | bin/textfiles/browseFolder-aud.txt | 36 | ||||
-rw-r--r-- | bin/textfiles/getGlobals.txt | 2 | ||||
-rw-r--r-- | bin/textfiles/streamAudio.txt | 2 | ||||
-rw-r--r-- | css/istreamdev.css | 8 | ||||
-rw-r--r-- | index.html | 20 | ||||
-rw-r--r-- | js/istreamdev.js | 89 |
8 files changed, 122 insertions, 65 deletions
diff --git a/bin/backend.php b/bin/backend.php index 54e0058..b2c41b3 100644 --- a/bin/backend.php +++ b/bin/backend.php @@ -105,9 +105,16 @@ switch ($action) if ( $path == "/video/" ) { $tree = file_get_contents("textfiles/browseFolder-rec.txt"); } - else { + else if ( $path == "/mnt/media/Videos/" ) { $tree = file_get_contents("textfiles/browseFolder-vid.txt"); } + else if ( $path == "/mnt/media/Music/" ) { + $tree = file_get_contents("textfiles/browseFolder-aud.txt"); + } + else + { + $tree = file_get_contents("textfiles/browseFolder-rec.txt"); + } print $tree; break; diff --git a/bin/textfiles/browseAudio.txt b/bin/textfiles/browseAudio.txt deleted file mode 100644 index 2f91c4f..0000000 --- a/bin/textfiles/browseAudio.txt +++ /dev/null @@ -1,21 +0,0 @@ -{ - "list": - [ - { - "type": "folder", - "name": "album1", - "path": "/mnt/music/album1" - }, - { - "type": "folder", - "name": "album2", - "path": "/mnt/music/album2" - }, - { - "type": "audio", - "name": "audiofile.mp3", - "length": "3.30", - "path": "/mnt/music/audiofile.mp3" - } - ] -} diff --git a/bin/textfiles/browseFolder-aud.txt b/bin/textfiles/browseFolder-aud.txt new file mode 100644 index 0000000..e2e71be --- /dev/null +++ b/bin/textfiles/browseFolder-aud.txt @@ -0,0 +1,36 @@ +{ + "list": + [ + { + "type": "folder", + "name": "album1", + "path": "/mnt/music/album1" + }, + { + "type": "folder", + "name": "album2", + "path": "/mnt/music/album2" + }, + { + "type": "audio", + "name": "audiofile.mp3", + "number": "1", + "length": "3.30", + "path": "/mnt/music/audiofile.mp3" + }, + { + "type": "audio", + "name": "audiofile2.mp3", + "number": "2", + "length": "2.27", + "path": "/mnt/music/audiofile2.mp3" + }, + { + "type": "audio", + "name": "audiofile3.mp3", + "number": "3", + "length": "4.03", + "path": "/mnt/music/audiofile3.mp3" + } + ] +} diff --git a/bin/textfiles/getGlobals.txt b/bin/textfiles/getGlobals.txt index 87a9994..d4795e4 100644 --- a/bin/textfiles/getGlobals.txt +++ b/bin/textfiles/getGlobals.txt @@ -1,6 +1,6 @@ { "streamdev_server": "http://127.0.0.1:3000", "rec_path": "/video/", - "video_path": "/mnt/media/Video/", + "video_path": "/mnt/media/Videos/", "audio_path": "/mnt/media/Music/" } diff --git a/bin/textfiles/streamAudio.txt b/bin/textfiles/streamAudio.txt index 28cca73..a90d122 100644 --- a/bin/textfiles/streamAudio.txt +++ b/bin/textfiles/streamAudio.txt @@ -1,5 +1,5 @@ { - playlist: + track: [ { "file": "/istreamdev/playlist/track1.mp3" diff --git a/css/istreamdev.css b/css/istreamdev.css index ac58b7a..aa07a18 100644 --- a/css/istreamdev.css +++ b/css/istreamdev.css @@ -272,7 +272,7 @@ height: 20px; padding: 0; } -li.track .numberbox { +li.track a .numberbox { position: relative; width: 23px; height: 42px; @@ -283,7 +283,7 @@ margin-right: 3px; border-right: 1px solid #333333; -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0; } -li.track .number { +li.track a .number { position: absolute; color: #9c9ea0; top: 10px; @@ -295,7 +295,7 @@ left: 32px; padding-left: 4px; top: -3px; } -li.track div.timebox { +li.track a div.timebox { position: relative; width: 30px; height: 42px; @@ -306,7 +306,7 @@ margin-left: 3px; border-left: 1px solid #333333; -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0; } -li.track .time { +li.track a .time { position: absolute; color: #9c9ea0; top: 13px; @@ -32,8 +32,8 @@ </ul> <ul class="rounded"> <li><span class="menutitle">FILES</span></li> - <li class="arrow"><a id="video_but" href="#browser"><img class="menuicon" src="img/video.png" /><span class="menuname">Video</span></a></li> - <li class="arrow"><a id="audio_but" class="cube" href="#audio"><img class="menuicon" src="img/audio.png" /><span class="menuname">Audio</span></a></li> + <li class="arrow"><a id="video_but" href="#"><img class="menuicon" src="img/video.png" /><span class="menuname">Video</span></a></li> + <li class="arrow"><a id="audio_but" href="#"><img class="menuicon" src="img/audio.png" /><span class="menuname">Audio</span></a></li> </ul> </div> <!----------------------------------/ HOME SCREEN ----------------------------------> @@ -223,22 +223,6 @@ </form> </div> <!---------------------------------- /TIMERS SCREEN ----------------------------------> - <!---------------------------------- AUDIO ----------------------------------------> - <div id="audio"> - <div class="toolbar"> - <a href="#" class="back">Home</a> - <h1><img class="menuicon" src="img/audio.png" /> Audio</h1> - </div> - <ul class="rounded"> - <li class="arrow"><a class="cube" href="#audio"><span class="menuname">Album1</span></a></li> - <li class="arrow"><a class="cube" href="#audio"><span class="menuname">Album2</span></a></li> - <li class="track"><div class="numberbox"><span class="number">1</span></div><a class="cube" href="#startstream"><span class="tracktitle">track1.mp3</span></a><div class="timebox"><span class="time">2:35</span></div></li> - <li class="track"><div class="numberbox"><span class="number">2</span></div><a class="cube" href="#startstream"><span class="tracktitle">track2.mp3</span></a><div class="timebox"><span class="time">1:12</span></div></li> - <li class="track"><div class="numberbox"><span class="number">3</span></div><a class="cube" href="#startstream"><span class="tracktitle">track3.mp3</span></a><div class="timebox"><span class="time">3:25</span></div></li> - <li class="track"><div class="numberbox"><span class="number">4</span></div><a class="cube" href="#startstream"><span class="tracktitle">track4.mp3</span></a><div class="timebox"><span class="time">4:02</span></div></li> - </ul> - </div> - <!---------------------------------- /AUDIO ----------------------------------------> </div> </body> </html>
\ No newline at end of file diff --git a/js/istreamdev.js b/js/istreamdev.js index fc9247b..6e21e35 100644 --- a/js/istreamdev.js +++ b/js/istreamdev.js @@ -120,6 +120,14 @@ $('#video_but').tap(function(event) { gen_browser(video_path,browser,"Videos","vid");
return false;
});
+
+$('#audio_but').tap(function(event) {
+ event.preventDefault();
+ json_start(this);
+ browser = 1;
+ gen_browser(audio_path,browser,"Audio","aud");
+ return false;
+});
// [/HOME SECTION]
// [TV SECTION]
@@ -389,11 +397,16 @@ function playvideo(session,name) { // [BROWSER SECTION]
//buttons
-$('ul[rel="filelist"] li.arrow a').tap(function(event) {
+$('ul[rel="filelist"] li a').tap(function(event) {
event.preventDefault();
json_start(this);
var type = $(this).attr('rel');
+ if ( type == 'audio' ) {
+ var name = $(this).find('span[class="tracktitle"]').html();
+ }
+ else {
var name = $(this).find('span[class="menuname"]').html();
+ }
var path = $(this).parents('div').find('span[rel="path"]').html();
var browser = $(this).parents('div').find('span[rel="currentbrowser"]').html();
var foldertype = $(this).parents('div').find('span[rel="foldertype"]').html();
@@ -412,6 +425,15 @@ $('ul[rel="filelist"] li.arrow a').tap(function(event) { {
gen_streamvid(name,path);
}
+ else if ( type == "rec" )
+ {
+ gen_streamrec(name,path);
+ }
+ else if ( type == "audio" )
+ {
+ var track = $(this).find('span[class="number"]').html();
+ addplayer(path,name,track);
+ }
return false;
});
@@ -429,7 +451,7 @@ $('div[rel="browser"] #home_but').tap(function(event) { });
});
-//functions
+//Generate browser div according to type
function gen_browser(path,browser,name,foldertype) {
browser_template = '<div class="toolbar"></div>';
browser_template += '<ul rel="filelist" class="rounded"></ul>';
@@ -440,26 +462,32 @@ function gen_browser(path,browser,name,foldertype) { browser_template += '</div>';
$('#jqt').append('<div id="browser' + browser + '" rel="browser"></div>'),
$('#browser'+browser).html(browser_template);
- if ( path == rec_path || path == video_path ) {
- toolbar = '<a href="#" class="back">Home</a>';
- if ( foldertype == 'rec' ){
+ if ( path == rec_path || path == video_path || path == audio_path ) {
+ toolbar = '<a href="#" class="back">Home</a>';
+ if ( foldertype == 'rec' ){
toolbar += '<h1><img class="menuicon" src="img/record.png" /> ' + name + '</h1>';
- }
- else {
- toolbar += '<h1><img class="menuicon" src="img/video.png" /> ' + name + '</h1>';
- }
- $('#browser' + browser + ' div[class="toolbar"]').html(toolbar);
+ }
+ else if ( foldertype == 'vid' ){
+ toolbar += '<h1><img class="menuicon" src="img/video.png" /> ' + name + '</h1>';
+ }
+ else if ( foldertype == 'aud' ){
+ toolbar += '<h1><img class="menuicon" src="img/audio.png" /> ' + name + '</h1>';
+ }
+ $('#browser' + browser + ' div[class="toolbar"]').html(toolbar);
}
else {
- toolbar = '<a href="#" class="back">Back</a>';
- toolbar += '<a href="#home" id="home_but" class="button">Home</a>';
- if ( foldertype == 'rec' ){
- toolbar += '<h1><img class="menuicon" src="img/record.png" /> ' + name + '</h1>';
- }
- else {
- toolbar += '<h1><img class="menuicon" src="img/video.png" /> ' + name + '</h1>';
- }
- $('#browser' + browser + ' div[class="toolbar"]').html(toolbar);
+ toolbar = '<a href="#" class="back">Back</a>';
+ toolbar += '<a href="#home" id="home_but" class="button">Home</a>';
+ if ( foldertype == 'rec' ){
+ toolbar += '<h1><img class="menuicon" src="img/record.png" /> ' + name + '</h1>';
+ }
+ else if ( foldertype == 'vid' ){
+ toolbar += '<h1><img class="menuicon" src="img/video.png" /> ' + name + '</h1>';
+ }
+ else if ( foldertype == 'aud' ){
+ toolbar += '<h1><img class="menuicon" src="img/audio.png" /> ' + name + '</h1>';
+ }
+ $('#browser' + browser + ' div[class="toolbar"]').html(toolbar);
}
var dataString = 'action=browseFolder&path='+path+'&browser=' + browser;
$.getJSON("bin/backend.php",
@@ -478,11 +506,34 @@ function gen_browser(path,browser,name,foldertype) { else if ( list.type == "video" ) {
$("#browser" + browser).find('ul').append('<li class="arrow"><a href="#" rel="video"><img class="menuicon" src="img/video.png" /><span class="menuname">' + list.name + '</span></a></li>');
}
+ else if ( list.type == "audio" ) {
+ $("#browser" + browser).find('ul').append('<li class="track"><a href="" rel="audio"><div class="numberbox"><span class="number">' + list.number + '</span></div><span class="tracktitle">' + list.name + '</span><div class="timebox"><span class="time">' + list.length +'</span></div></a></li>');
+ }
});
json_complete('#browser' + browser,'cube');
});
}
+//Add audio player code when needed
+function addplayer(path,name,track) {
+ $('#div_player').remove();
+ $('#jqt').append('<div style="position:absolute; left:0; top:0" name="div_player" id="div_player">');
+ //get playlist data
+ dataString = 'action=streamAudio&path=' + path + '&file=' + name;
+ $.getJSON("bin/backend.php",
+ dataString,
+ function(data) {
+ track = data.track;
+ playercode= "<embed target='myself' src='" + escape(track[track.length-1].file) + "' width='0' height='0' autoplay='true' name='player' type='audio/mp3' loop='true' controller='false' ";
+ for ( var i=track.length-1; i>1; i-=1 ){
+ playercode += "qtnext" + i + "='<" + escape(track[i].file) + ">' ";
+ }
+ playercode+= "></embed>";
+ $('#div_player').html(playercode);
+ hide_loader();
+ $('#div_player player').play();
+ });
+}
// [/BROWSER SECTION]
|