diff --git a/category.html b/category.html new file mode 100644 index 0000000..1a0aa9b --- /dev/null +++ b/category.html @@ -0,0 +1,47 @@ + + + + + hub + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index 1c6fca1..e69de29 100755 --- a/css/index.css +++ b/css/index.css @@ -1,70 +0,0 @@ -.myvideo { - width: 100%; - float: left; -} - -.videoleftbanner{ - float: left; - width: 100%; - height: 100%; - background-color: #e5e5ff; - border-radius: 40px; -} -.likefield{ - margin-top: 15px; - margin-left: 15px; - margin-right: 15px; - height: 30px; - background-color: #9e5353; - border-radius: 10px; - text-align: center; - color: white; - -} - -.previewcontainer { - margin-left: 10%; - width: 80%; - margin-right: 10%; -} - -.videopreview { - height: 300px; - width: 30%; - float: left; - margin: 1%; - background-color: #7F7F7F; - cursor: pointer; - opacity: 0.9; - border: 10px; - border-radius: 20px; -} - -.videopreview:hover { - opacity: 1; - transition: opacity 0.5s; -} - -.previewtitle { - height: 10%; - color: white; - text-align: center; -} - -.previewpic { - height: 80%; -} - -.hideit { - display: none; -} - -.closebutton { - color: white; - height: 35px; - width: 90px; - margin-right: 80px; - float: right; - background-color: #FF0000; - cursor: pointer; -} diff --git a/css/random.css b/css/random.css new file mode 100644 index 0000000..e69de29 diff --git a/css/video.css b/css/video.css new file mode 100644 index 0000000..5b8e2bc --- /dev/null +++ b/css/video.css @@ -0,0 +1,70 @@ +.hideit { + display: none; +} + +.closebutton { + color: white; + height: 35px; + width: 90px; + margin-right: 80px; + float: right; + background-color: #FF0000; + cursor: pointer; +} + +.myvideo { + width: 100%; + float: left; +} + +.videoleftbanner{ + float: left; + width: 100%; + height: 100%; + background-color: #e5e5ff; + border-radius: 40px; +} +.likefield{ + margin-top: 15px; + margin-left: 15px; + margin-right: 15px; + height: 30px; + background-color: #9e5353; + border-radius: 10px; + text-align: center; + color: white; + +} + +.previewcontainer { + margin-left: 10%; + width: 80%; + margin-right: 10%; +} + +.videopreview { + height: 300px; + width: 30%; + float: left; + margin: 1%; + background-color: #7F7F7F; + cursor: pointer; + opacity: 0.9; + border: 10px; + border-radius: 20px; +} + +.videopreview:hover { + opacity: 1; + transition: opacity 0.5s; +} + +.previewtitle { + height: 10%; + color: white; + text-align: center; +} + +.previewpic { + height: 80%; +} \ No newline at end of file diff --git a/index.html b/index.html index ccf47e0..a40461e 100755 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ hub + @@ -25,7 +26,25 @@ -

lukis hub

+ + + +
@@ -48,7 +67,7 @@
- +
diff --git a/js/random.js b/js/random.js new file mode 100644 index 0000000..a212d8d --- /dev/null +++ b/js/random.js @@ -0,0 +1,125 @@ +let videos; +let loadindex = 0; +let loadedvideoid = -1; + +$(document).ready(function () { + $.post('php/videoload.php', 'action=getRandomMovies&number=6', function (data) { + videos = data; + loadPreviewBlock(6); + }, 'json'); + + $(".closebutton").click(function () { + $("#likebtn").off(); + $("#tagbutton").off(); + $(".videopagewrapper").hide(); + $(".previewcontainer").show(); + // scroll back to last scroll position + $(window).scrollTop(scrollposition); + $(".videowrapper").html(""); + }); + + $("#shufflebtn").click(function () { + $(".previewcontainer").html(""); + $.post('php/videoload.php', 'action=getRandomMovies&number=6', function (data) { + videos = data; + loadPreviewBlock(6); + }, 'json'); + }); +}); + +function loadPreviewBlock(nr) { + for (let i = 0; i < nr; i++) { + if (loadindex + i < videos.length) { + loadPreview(videos[loadindex + i]); + } + } + loadindex += nr; +} + +function loadPreview(src) { + $.post('php/videoload.php', 'action=readThumbnail&movieid=' + src.movie_id, function (data) { + var preview = $(` +
+
${src.movie_name}
+
+ no thumbnail found +
+
`); + preview.attr('movie_id', src.movie_id); + preview.click(function () { + console.log("preview clicked"); + scrollposition = $(window).scrollTop(); + loadedvideoid = $(this).attr("movie_id"); + loadVideo(loadedvideoid); + }); + $(".previewcontainer").append(preview); + }, 'text'); +} + +function loadVideo(movieid) { + $.post('php/videoload.php', 'action=loadVideo&movieid=' + movieid, function (data) { + $(".videowrapper").html("
"); + + const player = new Plyr('#player'); + player.source = { + type: 'video', + sources: [ + { + src: data.movie_url, + type: 'video/mp4', + size: 1080, + } + ], + poster: data.thumbnail + }; + + $(".likefield").html("Likes: " + data.likes); + + $.post('php/videoload.php', 'action=getTags&movieid=' + loadedvideoid, function (data) { + for (const tag in data.tags) { + $(".videoleftbanner").append(`
${tag}
`); + } + + console.log(data); + }, "json"); + + $("#likebtn").click(function () { + console.log("likebtn clicked"); + $.post('php/videoload.php', 'action=addLike&movieid=' + loadedvideoid, function (data) { + console.log(data); + }, "json"); + }); + + $("#tagbutton").click(function () { + console.log("tagbrn clicked"); + Swal.mixin({ + input: 'text', + confirmButtonText: 'Next →', + showCancelButton: true, + progressSteps: ['1', '2', '3'] + }).queue([ + { + title: 'Question 1', + text: 'Chaining swal2 modals is easy' + }, + 'Question 2', + 'Question 3' + ]).then((result) => { + if (result.value) { + const answers = JSON.stringify(result.value) + Swal.fire({ + title: 'All done!', + html: ` + Your answers: + 
${answers}
+ `, + confirmButtonText: 'Lovely!' + }) + } + }) + }); + + $(".videopagewrapper").show(); + $(".previewcontainer").hide(); + }, "json"); +} diff --git a/php/videoload.php b/php/videoload.php index 83f4a4c..16dcc7d 100755 --- a/php/videoload.php +++ b/php/videoload.php @@ -8,7 +8,17 @@ if (isset($_POST['action'])) { $action = $_POST['action']; switch ($action) { case "getMovies": - $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC,, create_date ASC, movie_name ASC"; + $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC"; + $result = $conn->query($query); + $rows = array(); + while ($r = mysqli_fetch_assoc($result)) { + array_push($rows, $r); + } + + echo(json_encode($rows)); + break; + case "getRandomMovies": + $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT ".$_POST['number']; $result = $conn->query($query); $rows = array(); while ($r = mysqli_fetch_assoc($result)) { diff --git a/random.html b/random.html new file mode 100644 index 0000000..5bbfe36 --- /dev/null +++ b/random.html @@ -0,0 +1,85 @@ + + + + + hub + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
Likes: 10
+
+
+
+
+
+
+
Close
+
+
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+ + +
+
+
+ + + \ No newline at end of file