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

update

Browse Source
This commit is contained in:
user
2013-03-11 01:39:49 +01:00
parent 7bc552605f
commit 8b71dfb0f1
3 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
css/style.css
View File

@@ -4,9 +4,11 @@
*{ *{
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: Arial, sans-serif; font-family: Helvetica,Arial, sans-serif;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: black;
text-decoration: none;
} }
html body{ html body{
@@ -72,13 +74,18 @@ html body{
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%);
} }
#timeline { #timeline {
color: white; color: white;
height: auto; height: auto;
min-height: 50%; min-height: 50%;
max-height: 100%; max-height: 100%;
} }
#timeline section {
color: white;
}
#player { #player {
height: auto; height: auto;
} }
#playerlistsec { #playerlistsec {
@@ -112,6 +119,11 @@ footer{
float: left; float: left;
} }
#playerlistsec .menu li a{
color: black;
text-decoration: none;
}
#playerlistsec .menu li.select{ #playerlistsec .menu li.select{
height: 5%; height: 5%;
min-height: 50px; min-height: 50px;
@@ -126,14 +138,9 @@ footer{
} }
#sidenav li { #sidenav li {
clear: both;
display: list-item;
height: 30px; height: 30px;
width: 100px; width: 100px;
}
#sidenav li.subli {
list-style: circle;
margin-left: 50px;
}
#sidenav ul {
margin-left: 50px; margin-left: 50px;
} }

4
index.html
View File

@@ -20,9 +20,7 @@
<ul> <ul>
<li>item1</li> <li>item1</li>
<li>item2</li> <li>item2</li>
<li>item3</li> <li><a href="#">item3</a>
<li class="subli">subitem1</li>
<li class="subli">subitem2</li>
<li>item4</li> <li>item4</li>
</ul> </ul>
</nav> </nav>

26
js/mlib.js
View File

@@ -19,10 +19,11 @@ function pageLoad() {
actTrack = 0; actTrack = 0;
actChapter = 0; actChapter = 0;
createPlayList(); createPlayList();
jumpById(actTrack, actChapter);
select = document.getElementById('list' + actTrack + '.' + actChapter); select = document.getElementById('list' + actTrack + '.' + actChapter);
select.setAttribute("class", "select"); select.setAttribute("class", "select");
jumpById(actTrack, actChapter);
} }
function createPlayList() { function createPlayList() {
@@ -34,10 +35,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 id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\">" + entryNumber++ + ": " + chapterObj.title + "</li>"; listEntries = listEntries + "<li id=\"list" + track + "." + chapter + "\" onclick=\"jumpById(" + track + "," + chapter + ");\"><a href=\"#\">" + entryNumber++ + ": " + chapterObj.title + "</a></li>";
} }
} else { } else {
listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\">" + entryNumber++ + ": " + trackObj.title + "</li>"; listEntries = listEntries + "<li id=\"list" + track + ".0\" onclick=\"jumpById(" + track + ",0);\"><a href=\"#\">" + entryNumber++ + ": " + trackObj.title + "</a></li>";
} }
} }
playList.innerHTML = listEntries; playList.innerHTML = listEntries;
@@ -58,22 +59,25 @@ function jumpById(trackId, chapterId) {
actTrack = trackId; actTrack = trackId;
actChapter = chapterId; actChapter = chapterId;
trackChapChanged(actTrack, actChapter);
mediaSource.src = trackSrc + "#t=" + trackTime; mediaSource.src = trackSrc + "#t=" + trackTime;
player.load(); player.load();
} }
function timeUpdate() { function timeUpdate() {
var oldChapter = actChapter;
actChapter = calcChapterId(actTrack, player.currentTime); actChapter = calcChapterId(actTrack, player.currentTime);
bread.innerHTML = createBreadCrumb(actTrack, actChapter); if (actChapter !== oldChapter) {
trackChapChanged(actTrack, actChapter);
}
} }
function createBreadCrumb(trackId, chapterId) { function trackChapChanged(trackId, chapterId) {
episodeInfo.innerHTML = ""; episodeInfo.innerHTML = "";
trackInfo.innerHTML = ""; trackInfo.innerHTML = "";
chapterInfo.innerHTML = ""; chapterInfo.innerHTML = "";
episodeInfo.innerHTML = episodeObj.info; episodeInfo.innerHTML = episodeObj.info;
var trackObj = episodeObj.tracks[trackId]; var trackObj = episodeObj.tracks[trackId];
trackInfo.innerHTML = trackObj.info; trackInfo.innerHTML = trackObj.info;
@@ -83,11 +87,12 @@ function createBreadCrumb(trackId, chapterId) {
chapterInfo.innerHTML = chapterObj.info; chapterInfo.innerHTML = chapterObj.info;
actNewTitle = actNewTitle + " -> " + chapterObj.title; actNewTitle = actNewTitle + " -> " + chapterObj.title;
} }
select.setAttribute("class", ""); select.setAttribute("class", "");
select = document.getElementById('list' + actTrack + '.' + actChapter); select = document.getElementById('list' + actTrack + '.' + actChapter);
select.setAttribute("class", "select"); select.setAttribute("class", "select");
return actNewTitle;
bread.innerHTML = actNewTitle;
} }
function calcChapterId(trackId, time) { function calcChapterId(trackId, time) {
var trackObj = episodeObj.tracks[trackId]; var trackObj = episodeObj.tracks[trackId];
@@ -104,5 +109,6 @@ function calcChapterId(trackId, time) {
} }
function trackEnded() { function trackEnded() {
jumpById(actTrack + 1, 0);
jumpById(actTrack+1, 0);
} }