From 4ad29fd072c9a7e2d54c3928c3cbf9ed291eda60 Mon Sep 17 00:00:00 2001 From: lukas Date: Mon, 18 May 2020 22:55:26 +0200 Subject: [PATCH] lots of improvements: hover animation correct jumpback position after video view load when scroll - not all at beginning --- css/index.css | 60 +++++++++++--------- index.html | 34 +++++------- js/index.js | 104 +++++++++++++++++++++-------------- php/extractvideopreviews.php | 2 +- php/sqlinit.php | 7 +-- 5 files changed, 113 insertions(+), 94 deletions(-) diff --git a/css/index.css b/css/index.css index 8479da6..4dc4e57 100755 --- a/css/index.css +++ b/css/index.css @@ -1,35 +1,43 @@ -.myvideo{ - width: 80%; - margin-left: 10%; - float: left; +.myvideo { + width: 80%; + margin-left: 10%; + float: left; } -.previewcontainer{ - margin-left: 10%; - width: 80%; - margin-right: 10%; +.previewcontainer { + margin-left: 10%; + width: 80%; + margin-right: 10%; } -.videopreview{ - height: 300px; - width: 30%; - float: left; - margin: 1%; - background-color: #7F7F7F; - cursor: pointer; -} -.previewtitle{ - height: 10%; -} -.previewpic{ - height: 90%; +.videopreview { + height: 300px; + width: 30%; + float: left; + margin: 1%; + background-color: #7F7F7F; + cursor: pointer; + opacity: 0.9; } -.hideit{ - display: none; +.videopreview:hover { + opacity: 1; + transition: opacity 0.5s; } -.closebutton{ - height: 15px; - background-color: #FF0000; +.previewtitle { + height: 10%; +} + +.previewpic { + height: 90%; +} + +.hideit { + display: none; +} + +.closebutton { + height: 15px; + background-color: #FF0000; } diff --git a/index.html b/index.html index 3e01e86..5420873 100755 --- a/index.html +++ b/index.html @@ -1,37 +1,29 @@ - + - - + hub + - - - - -

lukis pornhub

-
-
+ + +

lukis pornhub

+
+
-
-
- -
+
+
+
+
-
-
- - - + diff --git a/js/index.js b/js/index.js index dcdcf4d..d6e4ac5 100755 --- a/js/index.js +++ b/js/index.js @@ -1,51 +1,71 @@ -$(document).ready(function() { - console.log("finished loading page"); - $.post('php/videoload.php','action',function(data){ - 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]); - } +var videos; +var loadindex = 0; +var scrollposition = 0; - } - },'json'); - //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'); +$(document).ready(function () { + $.post('php/videoload.php', 'action', function (data) { + videos = data; + loadPreviewBlock(12); + }, 'json'); - $(".closebutton").click(function() { - $(".videopagewrapper").hide(); - $(".previewcontainer").show(); - $(".videowrapper").html(""); - }); + $(".closebutton").click(function () { + $(".videopagewrapper").hide(); + $(".previewcontainer").show(); + // scroll back to last scroll position + $(window).scrollTop(scrollposition); + $(".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) { - var preview = $("
"+src+"
no thumbnail found
"); - preview.attr('videourl',"videos/prn/"+src); - preview.attr('thumbnailurl',"videos/thumbnails/"+src); - preview.click(function() { - console.log("preview clicked"); - loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg"); - }); - $(".previewcontainer").append(preview); + var preview = $("
" + src + "
no thumbnail found
"); + preview.attr('videourl', "videos/prn/" + src); + preview.attr('thumbnailurl', "videos/thumbnails/" + src); + preview.click(function () { + console.log("preview clicked"); + scrollposition = $(window).scrollTop(); + loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg"); + }); + $(".previewcontainer").append(preview); } -function loadVideo(src,posterlink) { - $(".videowrapper").html("
"); +function loadVideo(src, posterlink) { + $(".videowrapper").html("
"); - const player = new Plyr('#player'); - player.source = { - type: 'video', - sources: [ - { - src: src, - type: 'video/mp4', - size: 1080, - } - ], - poster: posterlink - }; - $(".videopagewrapper").show(); - $(".previewcontainer").hide(); + const player = new Plyr('#player'); + player.source = { + type: 'video', + sources: [ + { + src: src, + type: 'video/mp4', + size: 1080, + } + ], + poster: posterlink + }; + $(".videopagewrapper").show(); + $(".previewcontainer").hide(); } diff --git a/php/extractvideopreviews.php b/php/extractvideopreviews.php index 51b7f2e..141cd91 100755 --- a/php/extractvideopreviews.php +++ b/php/extractvideopreviews.php @@ -2,5 +2,5 @@ $arr = scandir("../videos/prn/"); foreach ($arr as $elem) { - shell_exec("ffmpeg -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 \"$elem.jpg\""); + shell_exec("ffmpeg -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 \"$elem.jpg\""); } diff --git a/php/sqlinit.php b/php/sqlinit.php index 34b054b..af4eace 100755 --- a/php/sqlinit.php +++ b/php/sqlinit.php @@ -5,8 +5,7 @@ $user = "mwit"; $password = "3MnDApF3bu6XDGOE"; $database = "mwitdb"; -$mysqli = new mysqli($server, $user, $password,$database); -if($mysqli->connect_errno) -{ -echo "connecton failed... nr: ". $mysqli->connect_errno. " -- " . $mysqli->connect_error; +$mysqli = new mysqli($server, $user, $password, $database); +if ($mysqli->connect_errno) { + echo "connecton failed... nr: " . $mysqli->connect_errno . " -- " . $mysqli->connect_error; }