created database to store all relevant data

js/index.js

@@ -1,10 +1,11 @@
-var videos;
-var loadindex = 0;
-var scrollposition = 0;
+let videos;
+let loadindex = 0;
+let scrollposition = 0;
 
 $(document).ready(function () {
-    $.post('php/videoload.php', 'action', function (data) {
+    $.post('php/videoload.php', 'action=getMovies', function (data) {
         videos = data;
+        console.log(videos);
         loadPreviewBlock(12);
     }, 'json');
 
@@ -28,44 +29,48 @@ $(window).scroll(function () {
 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++;
-            }
-
+            loadPreview(videos[loadindex + i]);
         }
     }
     loadindex += nr;
 }
 
 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>");
-    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);
+    $.post('php/videoload.php', 'action=readThumbnail&movieid=' + src.movie_id, function (data) {
+        var preview = $(`
+<div class='videopreview'>
+    <div class='previewtitle'>${src.movie_name}</div>
+    <div class='previewpic'>
+        <img style='width:100%;height:100%' src="${data}" alt='no thumbnail found'/>
+    </div>
+</div>`);
+        preview.attr('movie_id', src.movie_id);
+        preview.click(function () {
+            console.log("preview clicked");
+            scrollposition = $(window).scrollTop();
+            loadVideo($(this).attr("movie_id"));
+        });
+        $(".previewcontainer").append(preview);
+    }, 'text');
 }
 
-function loadVideo(src, posterlink) {
-    $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
+function loadVideo(movieid) {
+    $.post('php/videoload.php', 'action=loadVideo&movieid=' + movieid, function (data) {
+        $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
 
-    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: data.movie_url,
+                    type: 'video/mp4',
+                    size: 1080,
+                }
+            ],
+            poster: data.thumbnail
+        };
+        $(".videopagewrapper").show();
+        $(".previewcontainer").hide();
+    }, "json");
 }