lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

lots of improvements:

Browse Source 
hover animation
correct jumpback position after video view
load when scroll - not all at beginning
This commit is contained in:
lukas 2020-05-18 22:55:26 +02:00
parent 90e2f38c04
commit 4ad29fd072
5 changed files with 113 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/index.css
View File

@ -1,35 +1,43 @@
.myvideo{ .myvideo {
width: 80%; width: 80%;
margin-left: 10%; margin-left: 10%;
float: left; float: left;
} }
.previewcontainer{ .previewcontainer {
margin-left: 10%; margin-left: 10%;
width: 80%; width: 80%;
margin-right: 10%; margin-right: 10%;
} }
.videopreview{ .videopreview {
height: 300px; height: 300px;
width: 30%; width: 30%;
float: left; float: left;
margin: 1%; margin: 1%;
background-color: #7F7F7F; background-color: #7F7F7F;
cursor: pointer; cursor: pointer;
opacity: 0.9;
} }
.previewtitle{
.videopreview:hover {
opacity: 1;
transition: opacity 0.5s;
}
.previewtitle {
height: 10%; height: 10%;
} }
.previewpic{
.previewpic {
height: 90%; height: 90%;
} }
.hideit{ .hideit {
display: none; display: none;
} }
.closebutton{ .closebutton {
height: 15px; height: 15px;
background-color: #FF0000; background-color: #FF0000;
} }

32
index.html
View File

@ -1,37 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title>hub</title>
<link rel="stylesheet" href="css/plyr.css" /> <link rel="stylesheet" href="css/plyr.css"/>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/plyr.js"></script> <script src="js/plyr.js"></script>
<script>
</script>
<script src="js/index.js"></script> <script src="js/index.js"></script>
</head> </head>
<body> <body>
<h1>lukis pornhub</h1> <h1>lukis pornhub</h1>
<div class="videopagewrapper hideit"> <div class="videopagewrapper hideit">
<div class="closebutton"> <div class="closebutton">
</div> </div>
<div class="videowrapper"> <div class="videowrapper"></div>
</div>
</div>
</div>
<div class="previewcontainer">
</div>
<div class="previewcontainer"> </body>
</div>
</body>
</html> </html>

60
js/index.js
View File

@ -1,37 +1,57 @@
$(document).ready(function() { var videos;
console.log("finished loading page"); var loadindex = 0;
$.post('php/videoload.php','action',function(data){ var scrollposition = 0;
console.log(data);
for (var i in data) {
if (data[i] != "." && data[i] != "..") {
//loadVideo("videos/prn/"+data[i],"");
loadPreview(data[i]);
console.log(data[i]);
}
} $(document).ready(function () {
},'json'); $.post('php/videoload.php', 'action', function (data) {
//loadVideo("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg'); videos = data;
loadPreviewBlock(12);
}, 'json');
$(".closebutton").click(function() { $(".closebutton").click(function () {
$(".videopagewrapper").hide(); $(".videopagewrapper").hide();
$(".previewcontainer").show(); $(".previewcontainer").show();
// scroll back to last scroll position
$(window).scrollTop(scrollposition);
$(".videowrapper").html(""); $(".videowrapper").html("");
}); });
}); });
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height() - 60))) {
if ($(".videowrapper").html() == "") {
loadPreviewBlock(6);
}
}
});
function loadPreviewBlock(nr) {
for (let i = 0; i < nr; i++) {
if (loadindex + i < videos.length) {
if (videos[loadindex + i] != "." && videos[loadindex + i] != "..") {
loadPreview(videos[loadindex + i]);
} else {
nr++;
}
}
}
loadindex += nr;
}
function loadPreview(src) { function loadPreview(src) {
var preview = $("<div class='videopreview'><div class='previewtitle'>"+src+"</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/"+src+".jpg\" alt='no thumbnail found'></img></div></div>"); var preview = $("<div class='videopreview'><div class='previewtitle'>" + src + "</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/" + src + ".jpg\" alt='no thumbnail found'></img></div></div>");
preview.attr('videourl',"videos/prn/"+src); preview.attr('videourl', "videos/prn/" + src);
preview.attr('thumbnailurl',"videos/thumbnails/"+src); preview.attr('thumbnailurl', "videos/thumbnails/" + src);
preview.click(function() { preview.click(function () {
console.log("preview clicked"); console.log("preview clicked");
loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg"); scrollposition = $(window).scrollTop();
loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg");
}); });
$(".previewcontainer").append(preview); $(".previewcontainer").append(preview);
} }
function loadVideo(src,posterlink) { function loadVideo(src, posterlink) {
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>"); $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
const player = new Plyr('#player'); const player = new Plyr('#player');

7
php/sqlinit.php
View File

@ -5,8 +5,7 @@ $user = "mwit";
$password = "3MnDApF3bu6XDGOE"; $password = "3MnDApF3bu6XDGOE";
$database = "mwitdb"; $database = "mwitdb";
$mysqli = new mysqli($server, $user, $password,$database); $mysqli = new mysqli($server, $user, $password, $database);
if($mysqli->connect_errno) if ($mysqli->connect_errno) {
{ echo "connecton failed... nr: " . $mysqli->connect_errno . " -- " . $mysqli->connect_error;
echo "connecton failed... nr: ". $mysqli->connect_errno. " -- " . $mysqli->connect_error;
} }