-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (142 loc) · 8.69 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Youtube DJ</title>
<meta name="description" content="Youtube DJ - DJ like a pro!">
<!-- favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- YT Player (including jquery) -->
<link href="YTPlayer/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="YTPlayer/jquery.mb.YTPlayer.js"></script>
<!-- Knockout draggable -->
<!-- <script type='text/javascript' src='../ext/jquery-1.9.1.js'></script> -->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type='text/javascript' src="js/knockout-3.4.0.js"></script>
<script type='text/javascript' src="js/knockout-sortable.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Condensed" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-R02H4SHRG9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R02H4SHRG9');
</script>
<!-- My Files -->
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<a href="https://github.com/YTDJ/YTDJ.github.io" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:orange; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container">
<div class="text-center">
<h1> <img src="ytdj.svg" /> YTDJ - Youtube DJ</h1>
</div>
<div class="row">
<div class="col-md-12 marquee">
<!-- ko if: loadedVideos().length > 0 -->
<h2 data-bind="text: loadedVideos()[0].title"></h2>
<!-- /ko -->
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-offset-1 col-lg-5">
<div class="row">
<div id="contols" data-bind="css: { 'transitioningClass' : transitioning }" class="col-xs-12 col-md-offset-1 col-lg-offset-2 col-lg-8 text-center">
<!-- ko if: !$root.playing() -->
<span id="play-button" data-bind="click: play" class="col-md-4 glyphicon glyphicon-play"></span>
<!-- /ko -->
<!-- ko if: $root.playing() -->
<span id="pause-button" data-bind="click: pause" class="col-md-4 glyphicon glyphicon-pause"></span>
<!-- /ko -->
<span id="skip-button" data-bind="click: skip" class="col-md-4 glyphicon glyphicon-forward"></span>
<span id="settings-button" onclick="$('#settings').toggle()" class="col-md-4 glyphicon glyphicon-cog"></span>
<br>
</div>
</div>
<div id="settings" style="display:none">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-5 col-xs-offset-2" for="inSpeed">In Speed</label>
<input class="col-xs-3" data-bind="value: inSpeed" type="number" max="20" min="0" />
</div>
<div class="form-group">
<label class="col-xs-5 col-xs-offset-2" for="outSpeed">Out Speed</label>
<input class="col-xs-3" data-bind="value: outSpeed" type="number" max="20" min="0"/>
</div>
<div class="form-group">
<label class="col-xs-5 col-xs-offset-2" for="outSpeed">Crossfade Delay</label>
<input class="col-xs-3" data-bind="value: crossfadeDuration" id="crossfadeDuration" type="number" max="20" min="0"/>
</div>
<div class="form-group">
<label class="col-xs-5 col-xs-offset-2" for="cacheEnabled">Save Playlist (
<a id="cachingPopover" data-toggle="popover" data-placement="top"
title="Playlist Caching"
data-content="Save Playlist functionality enables the browser
to keep a copy of your playlist in local storage. When enabled,
a backup of the playlist is taken on every playlist change
and that backup will be used to automatically load songs on page refresh.
Note that caching may affect performance if playlist is large.">
?</a>)
</label>
<input type="checkbox" id="cacheEnabled">
</div>
</div>
<div class="row">
<button class="col-xs-4 col-xs-offset-1 btn" id="exportPlaylist" data-bind="click: exportPlaylist">Export Playlist</button>
<button class="col-xs-4 col-xs-offset-2 btn" id="importPlaylist" data-bind="click: importPlaylist">Import Playlist</button>
</div>
</div>
<!-- http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html -->
<div class="col-xs-12" data-bind="sortable: songs">
<div class="item row">
<div data-bind="attr:{href:id}, text: title, click: $root.selectedSong"
class="col-xs-11 text-left"></div>
<div class="text-right">
<span data-bind="click: $root.deleteSong" class="glyphicon glyphicon-remove">
</div>
</div>
</div>
<div class="col-xs-12 text-center">
<form class="addSong input-group">
<input id="addSongInput" type="text" class="form-control" data-bind="value: newSongId" placeholder="Enter a video ID from YouTube URL...">
<span id="addSongSpan" class="input-group-addon" data-bind="click: addNewSong">
<span id="addSongPlus" class="glyphicon glyphicon-plus"></span></span>
<!-- Button duplicates logic in span. I enables ENTER key adds. -->
<button style="display:none" data-bind="click: addNewSong"></button>
</form>
</div>
</div>
<div class="col-sm-6 col-md-7 col-lg-4 col-lg-offset-1" id="videobox"></div>
</div><!-- close row -->
<div id="exportDialog" class="dialog" title="Export Playlist" style="display:none;">
<p>Copy and paste the playlist data somewhere safe. When you come back, it can be quickly imported.</p>
<textarea onclick="this.focus();this.select()" readonly="readonly"></textarea>
</div>
<div id="importDialog" class="dialog" title="Import Playlist" style="display:none;">
<p>Paste and import!</p>
<textarea></textarea>
<div class="text-center">
<div class="checkbox">
<label>
<input type="checkbox" checked="checked" id="clearPlaylist"> Clear current playlist
</label>
</div>
<button type="button" class="btn" data-bind="click: importNow">Import</button>
</div>
</div>
</div> <!-- close container -->
</div>
</body>
</html>