Skip to content

Commit

Permalink
Fix index.html formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@powerinside
powerinside committed Apr 22, 2017
1 parent 6904b0e commit 75ace2e
Showing 1 changed file with 175 additions and 175 deletions.
350 changes: 175 additions & 175 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,186 +1,186 @@
<html>
<meta charset="utf-8">
<head>
<script src="build/syncplay.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
</head>
<body>
<style>
body {
background: black;
}
#node {
width: 100%; height: 100%;
margin: 0; padding: 0;
}
#fpicker {
display: none;
}
#fpicker-div {
background: grey;
width: 98%; height: 96%;
position: fixed;
color: wheat;
text-align: center;
cursor: pointer;
border: 15px dashed wheat;
margin: -10px;
}
#fpicker-div > label {
position: absolute;
text-align: center;
font-size: 4em;
width: 100%;
top: 40%;
display: block;
cursor: pointer;
}
#float {
position: fixed;
margin: 10px;
display: none;
}
.file {
font-size: smaller;
margin-top: 4px;
opacity: 0.6;
}
</style>
<input id="fpicker" type="file" accept="video/*,audio/*" />
<div id="fpicker-div" onclick="pick();"><label>Click here to pick a file</label></div>
<button id="float">_</button>
<video id="node" controls="true" style="display: none;"></video>
<script>
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"showDuration": "30",
"hideDuration": "1000",
"timeOut": "2000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
function pick() {
$("#fpicker").click();
}
var vid_player = $("#node")[0];

var username = null;
while(username == null) {
username = prompt("Pick a name", "Guest_" + Math.ceil(Math.random()*1000));
}
document.title = username;

$("#fpicker").change(function(e) {
$("#node").attr("src", window.URL.createObjectURL($("#fpicker")[0].files[0]));
window.filename = $("#fpicker")[0].files[0].name;
window.filesize = $("#fpicker")[0].files[0].size;
});
vid_player.volume = 0.3;
$(vid_player).on("loadeddata", function(e) {
$("#fpicker-div").hide();
$("#node").show();
<meta charset="utf-8">
<head>
<script src="build/syncplay.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
</head>
<body>
<style>
body {
background: black;
}
#node {
width: 100%; height: 100%;
margin: 0; padding: 0;
}
#fpicker {
display: none;
}
#fpicker-div {
background: grey;
width: 98%; height: 96%;
position: fixed;
color: wheat;
text-align: center;
cursor: pointer;
border: 15px dashed wheat;
margin: -10px;
}
#fpicker-div > label {
position: absolute;
text-align: center;
font-size: 4em;
width: 100%;
top: 40%;
display: block;
cursor: pointer;
}
#float {
position: fixed;
margin: 10px;
display: none;
}
.file {
font-size: smaller;
margin-top: 4px;
opacity: 0.6;
}
</style>
<input id="fpicker" type="file" accept="video/*,audio/*" />
<div id="fpicker-div" onclick="pick();"><label>Click here to pick a file</label></div>
<button id="float">_</button>
<video id="node" controls="true" style="display: none;"></video>
<script>
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"showDuration": "30",
"hideDuration": "1000",
"timeOut": "2000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
function pick() {
$("#fpicker").click();
}
var vid_player = $("#node")[0];

function onconnect(e) {
if (e.connected) {
toastr.success("Connected!");
syncplayjs.set_file(filename, vid_player.duration, filesize);
}
}
var username = null;
while(username == null) {
username = prompt("Pick a name", "Guest_" + Math.ceil(Math.random()*1000));
}
document.title = username;

window.syncplayjs = new SyncPlay({
name: username,
room: document.location.hash || "test",
url: "127.0.0.1:9000"
}, onconnect, vid_player);
var getterFn = {
is_paused: function(vid_player) {
return vid_player.paused;
},
get_position: function(vid_player) {
return vid_player.currentTime;
}
};
syncplayjs.setStateGetters(getterFn, vid_player);
syncplayjs.connect();
});
$("#fpicker").change(function(e) {
$("#node").attr("src", window.URL.createObjectURL($("#fpicker")[0].files[0]));
window.filename = $("#fpicker")[0].files[0].name;
window.filesize = $("#fpicker")[0].files[0].size;
});
vid_player.volume = 0.3;
$(vid_player).on("loadeddata", function(e) {
$("#fpicker-div").hide();
$("#node").show();

$(vid_player).on("listusers", function(e) {
syncplayjs.seeked();
for (var i = 0; i < Object.keys(e.detail).length; i++) {
var user = Object.keys(e.detail)[i];
if (user == username) {
continue;
}
var filename = e.detail[user].file.name;
var filesize = e.detail[user].file.size; // bytes
var file_duration = e.detail[user].file.duration; // seconds
}
});
function onconnect(e) {
if (e.connected) {
toastr.success("Connected!");
syncplayjs.set_file(filename, vid_player.duration, filesize);
}
}

$(vid_player).on("userlist", function(e) {
var user = e.detail.user;
var user_event = e.detail.evt;
toastr.info("'" + user + "' " + user_event);
});
window.syncplayjs = new SyncPlay({
name: username,
room: document.location.hash || "test",
url: "127.0.0.1:9000"
}, onconnect, vid_player);
var getterFn = {
is_paused: function(vid_player) {
return vid_player.paused;
},
get_position: function(vid_player) {
return vid_player.currentTime;
}
};
syncplayjs.setStateGetters(getterFn, vid_player);
syncplayjs.connect();
});

window.seekFromEvent = false;
$(vid_player).on("listusers", function(e) {
syncplayjs.seeked();
for (var i = 0; i < Object.keys(e.detail).length; i++) {
var user = Object.keys(e.detail)[i];
if (user == username) {
continue;
}
var filename = e.detail[user].file.name;
var filesize = e.detail[user].file.size; // bytes
var file_duration = e.detail[user].file.duration; // seconds
}
});

$(vid_player).on("seeked", function(e) {
if (!window.seekFromEvent) {
syncplayjs.seeked();
}
window.seekFromEvent = false;
});
$(vid_player).on("userlist", function(e) {
var user = e.detail.user;
var user_event = e.detail.evt;
toastr.info("'" + user + "' " + user_event);
});

$(vid_player).on("fileupdate", function(e) {
var username = Object.keys(e.detail.user);
var duration = e.detail.user[username].file.duration; // seconds
var filename = e.detail.user[username].file.name;
var filesize = e.detail.user[username].file.size; // bytes
});

$(vid_player).on("userevent", function(e) {
var username = e.detail.setBy;
var position = e.detail.position;
var paused = e.detail.paused;
var doSeek = e.detail.doSeek
window.seekFromEvent = false;

if (!paused && vid_player.paused) {
var message = "'" + username + "' resumes at " + position;
vid_player.currentTime = e.detail.position;
vid_player.play();
toastr.info(message);
}
if (paused && !vid_player.paused) {
var message = "'" + username + "' paused at " + position;
vid_player.pause();
toastr.info(message);
}
if (doSeek == true) {
var message = "'" + username + "' seeked to " + position;
window.seekFromEvent = true;
vid_player.currentTime = e.detail.position;
toastr.warning(message);
}
});
$(vid_player).on("seeked", function(e) {
if (!window.seekFromEvent) {
syncplayjs.seeked();
}
window.seekFromEvent = false;
});

$(vid_player).on("play", function(e) {
syncplayjs.playPause();
});

$(vid_player).on("pause", function(e) {
syncplayjs.playPause();
});
</script>
</body>
$(vid_player).on("fileupdate", function(e) {
var username = Object.keys(e.detail.user);
var duration = e.detail.user[username].file.duration; // seconds
var filename = e.detail.user[username].file.name;
var filesize = e.detail.user[username].file.size; // bytes
});

$(vid_player).on("userevent", function(e) {
var username = e.detail.setBy;
var position = e.detail.position;
var paused = e.detail.paused;
var doSeek = e.detail.doSeek

if (!paused && vid_player.paused) {
var message = "'" + username + "' resumes at " + position;
vid_player.currentTime = e.detail.position;
vid_player.play();
toastr.info(message);
}
if (paused && !vid_player.paused) {
var message = "'" + username + "' paused at " + position;
vid_player.pause();
toastr.info(message);
}
if (doSeek == true) {
var message = "'" + username + "' seeked to " + position;
window.seekFromEvent = true;
vid_player.currentTime = e.detail.position;
toastr.warning(message);
}
});

$(vid_player).on("play", function(e) {
syncplayjs.playPause();
});

$(vid_player).on("pause", function(e) {
syncplayjs.playPause();
});
</script>
</body>
</html>

0 comments on commit 75ace2e

Please sign in to comment.