-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
106 lines (100 loc) · 4.27 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
<html>
<head>
<title>Multi Youtube</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bower_components/angularjs-slider/dist/rzslider.min.css" />
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<style></style>
</head>
<body class="container">
<div class="jumbotron">
<h1>Multi Youtube</h1>
<p>Easy to use. Easy to save. Easy to share.</p>
<p><s>Hard to debug.</s></p>
<p>Wondering how to use it? View our guide <a href="https://github.com/ntvy95/multiyoutube/blob/master/README.md">here</a>!</p>
</div>
<div ng-app="managelinks" ng-controller="managelinks_ctrl">
<textarea id="CSSTyle" class="form-control" ng-model="CSSTyle" disabled="true" rows="10"></textarea>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="display" ng-model="display" value="full">Full
</label>
<label class="radio-inline">
<input type="radio" name="display" ng-model="display" value="grid" checked>Grid
<div>
.viewers.display {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</div>
</label>
<label class="radio-inline">
<input type="radio" name="display" ng-model="display" value="large">Large
<div>
.viewers.display {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.viewers.display .viewer:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
}
.viewers.display .viewer:nth-child(2) {
grid-column-start: 3;
grid-column-end: 4;
}
</div>
</label>
<label class="radio-inline">
<input type="radio" name="display" ng-model="display" value="large-rev">Large (reversed)
<div>
.viewers.display {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.viewers.display .viewer:nth-child(2) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
}
.viewers.display .viewer:nth-child(1) {
grid-column-start: 3;
grid-column-end: 4;
}
</div>
</label>
<label class="radio-inline">
<input type="radio" name="display" ng-model="display" value="custom">Custom
</label>
</div>
<button class="btn btn-default pull-right" ng-click="getURL()">Get URL</button>
<button class="btn btn-default pull-right" ng-click="addNewLink()">Add</button>
<button class="btn btn-default" ng-click="spLink()" id="splink" disabled="true">{{ duration.interval_func != null ? 'Pause' : 'Play' }}</button><button class="btn btn-default" ng-click="stopLink()" ng-disabled="PlayerState == PS.STOPPED || (PlayerState == PS.UNSTARTED && duration.value == 0)">Stop</button>
<rzslider id="duration" rz-slider-model="duration.value" rz-slider-options="duration.options" ></rzslider>
<div class="viewers display">
<div data-ng-repeat="link in links track by $index" class="viewer" id="{{link.div_id}}" ng-controller="viewer_ctrl">
<div class="form-group playercontrol">
<input style="width: {{ links.length > 2 ? 'calc(100% - 265px)' : 'calc(100% - 225px)'; }};" class="form-control" ng-model="link.link" ng-change="updateLink($index)" />
<input type="number" style="width: 70px;" class="form-control" ng-model="link.at.hour" />
<input type="number" style="width: 70px;" class="form-control" ng-model="link.at.minute" />
<input type="number" style="width: 70px;" class="form-control" ng-model="link.at.second" />
</div>
<button class="btn btn-danger" ng-click="removeLink($index)" style="display: {{ links.length > 2 ? '' : 'none' }};">-</button>
<div id="player-{{link.div_id}}"></div>
</div>
</div>
<div id="getURL" title="Get URL" style="display: none;">
<p ng-bind="URL"></p>
</div>
</div>
</body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angularjs-slider/dist/rzslider.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="js/utility.js"></script>
<script src="js/managelinks.js"></script>
</html>