-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·133 lines (121 loc) · 5.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="pt" manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<title>Media Center</title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/fontello.css" />
<link rel="stylesheet" href="css/animation.css" />
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
} else {
alert('The File APIs are not fully supported in this browser.');
}
</script>
</head>
<body>
<header id="header">
<ul class="menu">
<li class="block"><a class="links" onclick="changeContent('player')"><i class="icon icon-play"></i>Player</a></li>
<li class="block"><a class="links" onclick="changeContent('movies')"><i class="icon icon-video"></i>Movies</a></li>
<li class="block"><a class="links" onclick="changeContent('load')"><i class="icon icon-upload"></i>Load Movies</a></li>
</ul>
</header>
<div id="container" class="container">
<div id="player" class="content">
<video class="video" id="video" onmousemove="_wt('controls').show()" onmouseout="_wt('controls').hide()">
</video>
<div id="controls" onmouseover="_wt('controls').show()">
<i class="icon icon-stop" onclick="doStop()"></i>
<i class="icon icon-play" onclick="doPlay()"></i>
<i class="icon icon-pause" onclick="doPause()"></i>
<i class="icon icon-resize-full" onclick="doFullscreen()"></i>
<i class="icon icon-volume-off" onclick="doVolumeOff()"></i>
<i class="icon icon-volume-down" onclick="doVolumeDown()"></i>
<i class="icon icon-volume-up" onclick="doVolumeUp()"></i>
</div>
</div>
<div id="movies" class="content active">
<ul id="movies_list">
</ul>
<footer>
<a class="links" onclick="refreshMoviesList()"><i class="icon icon-refresh"></i>Refresh</a>
</footer>
</div>
<div id="load" class="content">
<div class="instructions">
<p>
Choose the files to load on your Media Center.
</p>
<p>
You can select them from your file explorer.
</p>
<input type="file" id="files" name="files[]" multiple accept="video/*" />
<p>
Or drop them in the box.
</p>
<div id="drop_zone" class="batatas">Drop files here</div>
</div>
<div class="new_movies_container">
<table id="loaded_list" class="movies_list" >
<thead class="thead">
<tr>
<th>Title</th>
<th>Type</th>
<th>Playable</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="help" id="help">
<p class="title">Keyboard Shortcuts</p>
<p>
<span>?</span>: Show help (this page)<br />
<span>l</span>: Go to the load page<br />
<span>m</span>: Jump to the movies list<br />
<span>p</span>: Go to the player<br />
<span>q</span>: Close this help<br />
Player commands<br />
<span>Space</span>: Play / pause de player<br />
<span>+</span>: Volume Up<br />
<span>-</span>: Volume Down<br />
<span>*</span>: Volume Off<br />
<span>f</span>: Fullscreen<br />
</p>
<p class="title">About the App</p>
<p>
HTML5 Media Center
</p>
<p class="title">Author</p>
<p>
Walter Tavares
</p>
<p class="title">Things to know</p>
<p>
Own javascript framework (_wt)<br />
Needs a PHP server to render the images<br />
</p>
<p class="title">Used API</p>
<p>
IndexedDB<br />
JSON<br />
Video<br />
DragAndDrop<br />
FileReader<br />
</p>
</div>
<script type="text/javascript" src="js/_wt.js" ></script>
<script type="text/javascript" src="js/script.js" ></script>
<script type="text/javascript" src="js/db.js" ></script>
<script>
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileDrop, false);
</script>
</body>
</html>