index.html

<!DOCTYPE html>
<html>
<head>
	<title>FilePlayer</title>
	<meta charset="UTF-8"/>
	<link rel="icon" type="image/x-icon" href="favicon.png"/>
	<link rel="stylesheet" href="../dep/fa/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="css/reset.css"/>
	<link rel="stylesheet" href="css/body.css"/>
	<link rel="stylesheet" href="css/btn.css"/>
	<link rel="stylesheet" href="css/overwrite-cuteslider.css"/>
	<link rel="stylesheet" href="css/overwrite-tooltip.css"/>
	<link rel="stylesheet" href="player/css/player.css"/>
	<link rel="stylesheet" href="player/css/screen.css"/>
	<link rel="stylesheet" href="player/css/placeholder.css"/>
	<link rel="stylesheet" href="player/css/menu.css"/>
	<link rel="stylesheet" href="player/css/controls.css"/>
	<link rel="stylesheet" href="player/css/position.css"/>
	<link rel="stylesheet" href="player/css/subtitles.css"/>
	<link rel="stylesheet" href="playlist/css/playlist.css"/>
	<link rel="stylesheet" href="playlist/css/nav.css"/>
	<link rel="stylesheet" href="playlist/css/list.css"/>
</head>
<body>

<div id="main">

	<div id="player">
		<div class="tableCellWrapper">
			<div class="placeholder">
				<h1 class="title">
					<i class="logo fa fa-eject"></i>
					FilePlayer
				</h1>
				<span>Drop files here…</span>
			</div>
			<div id="screen" class="no-select">
				<video></video>
				<canvas></canvas>
			</div>
			<div id="title" class="textOverflow textShadow">
				<i class="fa fa-fw"></i
				><span></span>
			</div>
			<div id="shortcutDesc" class="textShadow"></div>
			<div id="cues"><span class="textShadow"></span></div>
			<div id="ctrl" class="no-select">
				<span
					class="cuteslider-container"
					data-jquery-element="tooltip"
					data-tooltip-followmouse
					><input
						type="range"
						data-jquery-element="cuteslider"
						data-jquery-element-class="position"
						min="0" max="1" step=".0001"
					/>
					<div class="thumbnail">
						<video></video>
						<canvas></canvas>
						<div class="loading"></div>
					</div
				></span>
				<div class="bottom">
					<div class="left">
						<i
							class="btn stop fa fa-fw fa-stop"
							data-jquery-element="tooltip"
							data-tooltip-content="Stop"
						></i
						><i
							class="btn prev fa fa-fw fa-fast-backward"
							data-jquery-element="tooltip"
							data-tooltip-content="Previous"
						></i
						><i
							class="btn play fa fa-fw"
							data-jquery-element="tooltip"
						></i
						><i
							class="btn next fa fa-fw fa-fast-forward"
							data-jquery-element="tooltip"
							data-tooltip-content="Next"
						></i
						><span class="btn volume"
							><i
								class="fa fa-fw"
								data-jquery-element="tooltip"
							></i
							><span
								data-jquery-element="tooltip"
								><input
									type="range"
									data-jquery-element="cuteslider"
									min="0" max="1" step=".01"
							/></span
						></span
						><span class="txt btn position">
							<span class="time current"></span
							><span class="time duration"></span
							><span class="time remaining"></span>
						</span>
					</div
					><div class="right"
						><span class="btn rotation"
							><i class="fa fa-repeat"></i
							><div
								class="menu"
								><div class="content"
									><div class="header"
										><span class="title">Rotation : </span
										><b class="val"></b
									></div
									><ul
										><li
											><input
												type="range"
												data-jquery-element="cuteslider"
												min="0" max="360" value="0" step="1"
										/></li
									></ul
								></div
							></div
						></span
						><span class="btn visu"
							><i class="fa fa-fw fa-align-center fa-rotate-270"></i
							><div
								class="menu"
								><div class="content"
									><div class="header"
										><span class="title">Visualisations</span
										><input
												type="checkbox"
												data-jquery-element="slidebutton"
									/></div
									><ul></ul
								></div
							></div
						></span
						><span class="btn opacity"
							><i class="fa fa-fw"></i
							><div
								class="menu"
								><div class="content"
									><div class="header"
										><span class="title">Brightness : </span
										><b class="val"></b
									></div
									><ul><li>
										<i class="fa fa-moon-o"></i
										><input
											type="range"
											data-jquery-element="cuteslider"
											min="0" max="1" step=".01"
										/><i class="fa fa-lightbulb-o"></i>
									</li></ul
								></div
							></div
						></span
						><span class="btn subtitles"
							><i class="fa fa-fw fa-cc"></i
							><div class="menu"
								><div class="content"
									><div class="header"
										><span class="title">Subtitles</span
										><input
												type="checkbox"
												data-jquery-element="slidebutton"
									/></div
									><ul></ul
								></div
							></div
						></span
						><i
							class="btn playlist fa fa-fw fa-list"
							data-jquery-element="tooltip"
						></i
						><i
							class="btn fullscreen fa fa-fw"
							data-jquery-element="tooltip"
						></i
					></div>
				</div>
			</div>
		</div>
	</div>

	<div id="playlist" class="no-select">
		<div class="tableCellWrapper">
			<div class="extendWidth ew-resize"></div>
			<div class="content">
				<nav>
					<span class="index">
						<span class="current"></span
						><span class="total"></span>
					</span>
					<span class="right">
						<i
							class="btn shuffle fa fa-fw fa-random"
							data-jquery-element="tooltip"
							data-tooltip-side="bottom"
						></i><i
							class="btn repeat fa fa-fw fa-retweet"
							data-jquery-element="tooltip"
							data-tooltip-side="bottom"
						><b></b></i
						><i class="btn close fa fa-fw fa-times-circle"></i>
					</span>
				</nav>
				<div class="list"></div>
			</div>
		</div>
	</div>

</div>

<!-- Debug -->
<script>function lg( s ) { console.log( s ); }</script>

<!-- JS dependancies -->
<script src="../dep/jquery.min.js"></script>
<script src="../dep/jquery-element.js"></script>
<script src="../dep/tooltip.js"></script>
<script src="../dep/cuteslider.js"></script>
<script src="../dep/slidebutton.js"></script>

<!-- Generical functions -->
<script src="tools/utils.js"></script>

<!-- Wrap all the needed elements with jQuery -->
<script src="dom.js"></script>

<!-- API (no DOM treatment here) -->
<script src="api/api.js"></script>
<script src="api/files.js"></script>
<script src="api/fullscreen.js"></script>
<script src="api/keyboard.js"></script>
<script src="api/playlist.js"></script>
<script src="api/subtitles.js"></script>
<script src="api/thumbnail/cache.js"></script>
<script src="api/thumbnail/canvas.js"></script>
<script src="api/video.js"></script>
<script src="api/audio.js"></script>

<!-- All DOM treatment and events binding for the Player -->
<script src="player/player-ui.js"></script>
<script src="player/data-binding.js"></script>
<script src="player/events/drop.js"></script>
<script src="player/events/controls.js"></script>
<script src="player/events/subtitles.js"></script>
<script src="player/events/thumbnail.js"></script>
<script src="player/events/rotation.js"></script>
<script src="player/events/position.js"></script>
<script src="player/events/playpausestop.js"></script>
<script src="player/events/volume.js"></script>
<script src="player/events/speed.js"></script>
<script src="player/events/fullscreen.js"></script>
<script src="player/events/opacity.js"></script>
<script src="player/events/visualisations.js"></script>

<!-- All DOM treatment and events binding for the Playlist -->
<script src="playlist/playlist-ui.js"></script>
<script src="playlist/events/container.js"></script>
<script src="playlist/events/prevnextloop.js"></script>
<script src="playlist/events/scroll.js"></script>

<!-- Audio visualisations -->
<script src="../visualisations/oscilloscope.js"></script>

<!-- Initialisation (no function call before that) -->
<script src="init.js"></script>

</body>
</html>