Skip to content

Commit 75ace2e

Browse files
powerinsidepowerinside
committed
Fix index.html formatting
1 parent 6904b0e commit 75ace2e

File tree

1 file changed

+175
-175
lines changed

1 file changed

+175
-175
lines changed

‎index.html

Lines changed: 175 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,186 @@
11
<html>
2-
<meta charset="utf-8">
3-
<head>
4-
<script src="build/syncplay.js"></script>
5-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
6-
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
7-
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
8-
</head>
9-
<body>
10-
<style>
11-
body {
12-
background: black;
13-
}
14-
#node {
15-
width: 100%; height: 100%;
16-
margin: 0; padding: 0;
17-
}
18-
#fpicker {
19-
display: none;
20-
}
21-
#fpicker-div {
22-
background: grey;
23-
width: 98%; height: 96%;
24-
position: fixed;
25-
color: wheat;
26-
text-align: center;
27-
cursor: pointer;
28-
border: 15px dashed wheat;
29-
margin: -10px;
30-
}
31-
#fpicker-div > label {
32-
position: absolute;
33-
text-align: center;
34-
font-size: 4em;
35-
width: 100%;
36-
top: 40%;
37-
display: block;
38-
cursor: pointer;
39-
}
40-
#float {
41-
position: fixed;
42-
margin: 10px;
43-
display: none;
44-
}
45-
.file {
46-
font-size: smaller;
47-
margin-top: 4px;
48-
opacity: 0.6;
49-
}
50-
</style>
51-
<input id="fpicker" type="file" accept="video/*,audio/*" />
52-
<div id="fpicker-div" onclick="pick();"><label>Click here to pick a file</label></div>
53-
<button id="float">_</button>
54-
<video id="node" controls="true" style="display: none;"></video>
55-
<script>
56-
toastr.options = {
57-
"closeButton": true,
58-
"debug": false,
59-
"newestOnTop": true,
60-
"progressBar": true,
61-
"positionClass": "toast-top-right",
62-
"preventDuplicates": true,
63-
"showDuration": "30",
64-
"hideDuration": "1000",
65-
"timeOut": "2000",
66-
"extendedTimeOut": "1000",
67-
"showEasing": "swing",
68-
"hideEasing": "linear",
69-
"showMethod": "fadeIn",
70-
"hideMethod": "fadeOut"
71-
}
72-
function pick() {
73-
$("#fpicker").click();
74-
}
75-
var vid_player = $("#node")[0];
76-
77-
var username = null;
78-
while(username == null) {
79-
username = prompt("Pick a name", "Guest_" + Math.ceil(Math.random()*1000));
80-
}
81-
document.title = username;
82-
83-
$("#fpicker").change(function(e) {
84-
$("#node").attr("src", window.URL.createObjectURL($("#fpicker")[0].files[0]));
85-
window.filename = $("#fpicker")[0].files[0].name;
86-
window.filesize = $("#fpicker")[0].files[0].size;
87-
});
88-
vid_player.volume = 0.3;
89-
$(vid_player).on("loadeddata", function(e) {
90-
$("#fpicker-div").hide();
91-
$("#node").show();
2+
<meta charset="utf-8">
3+
<head>
4+
<script src="build/syncplay.js"></script>
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<style>
11+
body {
12+
background: black;
13+
}
14+
#node {
15+
width: 100%; height: 100%;
16+
margin: 0; padding: 0;
17+
}
18+
#fpicker {
19+
display: none;
20+
}
21+
#fpicker-div {
22+
background: grey;
23+
width: 98%; height: 96%;
24+
position: fixed;
25+
color: wheat;
26+
text-align: center;
27+
cursor: pointer;
28+
border: 15px dashed wheat;
29+
margin: -10px;
30+
}
31+
#fpicker-div > label {
32+
position: absolute;
33+
text-align: center;
34+
font-size: 4em;
35+
width: 100%;
36+
top: 40%;
37+
display: block;
38+
cursor: pointer;
39+
}
40+
#float {
41+
position: fixed;
42+
margin: 10px;
43+
display: none;
44+
}
45+
.file {
46+
font-size: smaller;
47+
margin-top: 4px;
48+
opacity: 0.6;
49+
}
50+
</style>
51+
<input id="fpicker" type="file" accept="video/*,audio/*" />
52+
<div id="fpicker-div" onclick="pick();"><label>Click here to pick a file</label></div>
53+
<button id="float">_</button>
54+
<video id="node" controls="true" style="display: none;"></video>
55+
<script>
56+
toastr.options = {
57+
"closeButton": true,
58+
"debug": false,
59+
"newestOnTop": true,
60+
"progressBar": true,
61+
"positionClass": "toast-top-right",
62+
"preventDuplicates": true,
63+
"showDuration": "30",
64+
"hideDuration": "1000",
65+
"timeOut": "2000",
66+
"extendedTimeOut": "1000",
67+
"showEasing": "swing",
68+
"hideEasing": "linear",
69+
"showMethod": "fadeIn",
70+
"hideMethod": "fadeOut"
71+
}
72+
function pick() {
73+
$("#fpicker").click();
74+
}
75+
var vid_player = $("#node")[0];
9276

93-
function onconnect(e) {
94-
if (e.connected) {
95-
toastr.success("Connected!");
96-
syncplayjs.set_file(filename, vid_player.duration, filesize);
97-
}
98-
}
77+
var username = null;
78+
while(username == null) {
79+
username = prompt("Pick a name", "Guest_" + Math.ceil(Math.random()*1000));
80+
}
81+
document.title = username;
9982

100-
window.syncplayjs = new SyncPlay({
101-
name: username,
102-
room: document.location.hash || "test",
103-
url: "127.0.0.1:9000"
104-
}, onconnect, vid_player);
105-
var getterFn = {
106-
is_paused: function(vid_player) {
107-
return vid_player.paused;
108-
},
109-
get_position: function(vid_player) {
110-
return vid_player.currentTime;
111-
}
112-
};
113-
syncplayjs.setStateGetters(getterFn, vid_player);
114-
syncplayjs.connect();
115-
});
83+
$("#fpicker").change(function(e) {
84+
$("#node").attr("src", window.URL.createObjectURL($("#fpicker")[0].files[0]));
85+
window.filename = $("#fpicker")[0].files[0].name;
86+
window.filesize = $("#fpicker")[0].files[0].size;
87+
});
88+
vid_player.volume = 0.3;
89+
$(vid_player).on("loadeddata", function(e) {
90+
$("#fpicker-div").hide();
91+
$("#node").show();
11692

117-
$(vid_player).on("listusers", function(e) {
118-
syncplayjs.seeked();
119-
for (var i = 0; i < Object.keys(e.detail).length; i++) {
120-
var user = Object.keys(e.detail)[i];
121-
if (user == username) {
122-
continue;
123-
}
124-
var filename = e.detail[user].file.name;
125-
var filesize = e.detail[user].file.size; // bytes
126-
var file_duration = e.detail[user].file.duration; // seconds
127-
}
128-
});
93+
function onconnect(e) {
94+
if (e.connected) {
95+
toastr.success("Connected!");
96+
syncplayjs.set_file(filename, vid_player.duration, filesize);
97+
}
98+
}
12999

130-
$(vid_player).on("userlist", function(e) {
131-
var user = e.detail.user;
132-
var user_event = e.detail.evt;
133-
toastr.info("'" + user + "' " + user_event);
134-
});
100+
window.syncplayjs = new SyncPlay({
101+
name: username,
102+
room: document.location.hash || "test",
103+
url: "127.0.0.1:9000"
104+
}, onconnect, vid_player);
105+
var getterFn = {
106+
is_paused: function(vid_player) {
107+
return vid_player.paused;
108+
},
109+
get_position: function(vid_player) {
110+
return vid_player.currentTime;
111+
}
112+
};
113+
syncplayjs.setStateGetters(getterFn, vid_player);
114+
syncplayjs.connect();
115+
});
135116

136-
window.seekFromEvent = false;
117+
$(vid_player).on("listusers", function(e) {
118+
syncplayjs.seeked();
119+
for (var i = 0; i < Object.keys(e.detail).length; i++) {
120+
var user = Object.keys(e.detail)[i];
121+
if (user == username) {
122+
continue;
123+
}
124+
var filename = e.detail[user].file.name;
125+
var filesize = e.detail[user].file.size; // bytes
126+
var file_duration = e.detail[user].file.duration; // seconds
127+
}
128+
});
137129

138-
$(vid_player).on("seeked", function(e) {
139-
if (!window.seekFromEvent) {
140-
syncplayjs.seeked();
141-
}
142-
window.seekFromEvent = false;
143-
});
130+
$(vid_player).on("userlist", function(e) {
131+
var user = e.detail.user;
132+
var user_event = e.detail.evt;
133+
toastr.info("'" + user + "' " + user_event);
134+
});
144135

145-
$(vid_player).on("fileupdate", function(e) {
146-
var username = Object.keys(e.detail.user);
147-
var duration = e.detail.user[username].file.duration; // seconds
148-
var filename = e.detail.user[username].file.name;
149-
var filesize = e.detail.user[username].file.size; // bytes
150-
});
151-
152-
$(vid_player).on("userevent", function(e) {
153-
var username = e.detail.setBy;
154-
var position = e.detail.position;
155-
var paused = e.detail.paused;
156-
var doSeek = e.detail.doSeek
136+
window.seekFromEvent = false;
157137

158-
if (!paused && vid_player.paused) {
159-
var message = "'" + username + "' resumes at " + position;
160-
vid_player.currentTime = e.detail.position;
161-
vid_player.play();
162-
toastr.info(message);
163-
}
164-
if (paused && !vid_player.paused) {
165-
var message = "'" + username + "' paused at " + position;
166-
vid_player.pause();
167-
toastr.info(message);
168-
}
169-
if (doSeek == true) {
170-
var message = "'" + username + "' seeked to " + position;
171-
window.seekFromEvent = true;
172-
vid_player.currentTime = e.detail.position;
173-
toastr.warning(message);
174-
}
175-
});
138+
$(vid_player).on("seeked", function(e) {
139+
if (!window.seekFromEvent) {
140+
syncplayjs.seeked();
141+
}
142+
window.seekFromEvent = false;
143+
});
176144

177-
$(vid_player).on("play", function(e) {
178-
syncplayjs.playPause();
179-
});
180-
181-
$(vid_player).on("pause", function(e) {
182-
syncplayjs.playPause();
183-
});
184-
</script>
185-
</body>
145+
$(vid_player).on("fileupdate", function(e) {
146+
var username = Object.keys(e.detail.user);
147+
var duration = e.detail.user[username].file.duration; // seconds
148+
var filename = e.detail.user[username].file.name;
149+
var filesize = e.detail.user[username].file.size; // bytes
150+
});
151+
152+
$(vid_player).on("userevent", function(e) {
153+
var username = e.detail.setBy;
154+
var position = e.detail.position;
155+
var paused = e.detail.paused;
156+
var doSeek = e.detail.doSeek
157+
158+
if (!paused && vid_player.paused) {
159+
var message = "'" + username + "' resumes at " + position;
160+
vid_player.currentTime = e.detail.position;
161+
vid_player.play();
162+
toastr.info(message);
163+
}
164+
if (paused && !vid_player.paused) {
165+
var message = "'" + username + "' paused at " + position;
166+
vid_player.pause();
167+
toastr.info(message);
168+
}
169+
if (doSeek == true) {
170+
var message = "'" + username + "' seeked to " + position;
171+
window.seekFromEvent = true;
172+
vid_player.currentTime = e.detail.position;
173+
toastr.warning(message);
174+
}
175+
});
176+
177+
$(vid_player).on("play", function(e) {
178+
syncplayjs.playPause();
179+
});
180+
181+
$(vid_player).on("pause", function(e) {
182+
syncplayjs.playPause();
183+
});
184+
</script>
185+
</body>
186186
</html>

0 commit comments

Comments
 (0)