stubbfel/mlib5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
user
2013-03-09 16:19:12 +01:00
parent 7b25d7e446
commit 4c83b22288
3 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@@ -68,16 +68,18 @@ html body{
float:left; float:left;
margin-left: 1%; margin-left: 1%;
margin-right : 1%; margin-right : 1%;
margin-bottom: auto; height: auto;
background: linear-gradient(to bottom, rgba(155,155,155,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(to bottom, rgba(155,155,155,1) 0%,rgba(14,14,14,1) 100%);
vertical-align: bottom;
} }
#timeline { #timeline {
height: 90%; color: white;
height: auto;
min-height: 50%;
} }
#player { #player {
height: 10%; height: auto;
} }
#playerlistsec { #playerlistsec {
width: 29%; width: 29%;
float:left; float:left;
@@ -109,16 +111,17 @@ footer{
float: left; float: left;
} }
#playerlistsec .menu li.subli{ #playerlistsec .menu li.select{
width: auto; height: 5%;
height: 3%; min-height: 50px;
min-height: 30px; line-height: 50px;
line-height: 30px; list-style-type: none;
margin: 1%; text-align: center;
padding-left: 5px; vertical-align: middle;
padding-right: 5px; margin-bottom: 1%;
background: linear-gradient(to bottom, rgba(250,207,207,1) 0%,rgba(198,99,99,1) 100%);;
cursor: pointer;
float: left; float: left;
background: linear-gradient(to left, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%);
} }
#sidenav li { #sidenav li {

7
index.html
View File

@@ -28,7 +28,11 @@
</nav> </nav>
<section id="playersec"> <section id="playersec">
<div id="timeline">test</div> <div id="timeline">
<section id="episodeInfo"></section>
<section id="trackInfo"></section>
<section id="chapterInfo"></section>
</div>
<audio controls autoplay id="player"> <audio controls autoplay id="player">
<source id ="playersource" src="">; <source id ="playersource" src="">;
</audio> </audio>
@@ -43,7 +47,6 @@
</div> </div>
<object data="js/test.json" type="application/json" id="episode" hidden> <object data="js/test.json" type="application/json" id="episode" hidden>
<param name="src" value="js/test.json">
</object> </object>
</body> </body>
</html> </html>

30
js/mlib.js
View File

@@ -6,10 +6,12 @@ function pageLoad() {
bread = document.getElementById('breadcrumb'); bread = document.getElementById('breadcrumb');
player = document.getElementById('player'); player = document.getElementById('player');
mediaSource = document.getElementById('playersource'); mediaSource = document.getElementById('playersource');
episodeInfo = document.getElementById('episodeInfo');
trackInfo = document.getElementById('trackInfo');
chapterInfo = document.getElementById('chapterInfo');
player.addEventListener('timeupdate', timeUpdate); player.addEventListener('timeupdate', timeUpdate);
player.addEventListener('ended', trackEnded); player.addEventListener('ended', trackEnded);
var episodeHTML = document.getElementById('episode'); var episodeHTML = document.getElementById('episode');
var episodeJson = episodeHTML.contentDocument.body.firstChild.innerHTML; var episodeJson = episodeHTML.contentDocument.body.firstChild.innerHTML;
episodeObj = jsonParse(episodeJson); episodeObj = jsonParse(episodeJson);
@@ -18,6 +20,9 @@ function pageLoad() {
actChapter = 0; actChapter = 0;
createPlayList(); createPlayList();
jumpById(actTrack, actChapter); jumpById(actTrack, actChapter);
select = document.getElementById('list' + actTrack + '.' + actChapter);
select.setAttribute("class", "select");
} }
function createPlayList() { function createPlayList() {
@@ -29,10 +34,10 @@ function createPlayList() {
if (trackObj.chapters) { if (trackObj.chapters) {
for (var chapter in trackObj.chapters) { for (var chapter in trackObj.chapters) {
var chapterObj = trackObj.chapters[chapter]; var chapterObj = trackObj.chapters[chapter];
listEntries = listEntries + "<li onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>"; listEntries = listEntries + "<li id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>";
} }
} else { } else {
listEntries = listEntries + "<li onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>"; listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>";
} }
} }
playList.innerHTML = listEntries; playList.innerHTML = listEntries;
@@ -50,24 +55,35 @@ function jumpById(trackId, chapterId) {
var chapterObj = trackObj.chapters[chapterId]; var chapterObj = trackObj.chapters[chapterId];
trackTime = chapterObj.time; trackTime = chapterObj.time;
} }
actTrack = trackId; actTrack = trackId;
actChapter = chapterId; actChapter = chapterId;
mediaSource.src = trackSrc + "#t=" + trackTime; mediaSource.src = trackSrc + "#t=" + trackTime;
player.load(); player.load();
} }
function timeUpdate() { function timeUpdate() {
actChapter = calcChapterId(actTrack, player.currentTime); actChapter = calcChapterId(actTrack, player.currentTime);
bread.innerHTML = createBreadCrumb(actTrack,actChapter); bread.innerHTML = createBreadCrumb(actTrack, actChapter);
select.setAttribute("class", "");
select = document.getElementById('list' + actTrack + '.' + actChapter);
select.setAttribute("class", "select");
} }
function createBreadCrumb(trackId, chapterId) { function createBreadCrumb(trackId, chapterId) {
episodeInfo.innerHTML = episodeObj.info;
var trackObj = episodeObj.tracks[trackId]; var trackObj = episodeObj.tracks[trackId];
trackInfo.innerHTML = trackObj.info;
var actNewTitle = episodeObj.title + " -> " + trackObj.title; var actNewTitle = episodeObj.title + " -> " + trackObj.title;
if (trackObj.chapters && chapterId < trackObj.chapters.length) { if (trackObj.chapters && chapterId < trackObj.chapters.length) {
var chapterObj = trackObj.chapters[chapterId]; var chapterObj = trackObj.chapters[chapterId];
actNewTitle = actNewTitle + " -> "+chapterObj.title; chapterInfo.innerHTML = chapterObj.info;
actNewTitle = actNewTitle + " -> " + chapterObj.title;
} }
return actNewTitle; return actNewTitle;
} }
@@ -86,5 +102,5 @@ function calcChapterId(trackId, time) {
} }
function trackEnded() { function trackEnded() {
jumpById(actTrack+1, 0); jumpById(actTrack + 1, 0);
} }