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 @@
-
+
-
+
+
-
-
-
-
-
+
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 = $("
");
- 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 = $("
");
+ 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;
}