added shuffling features
This commit is contained in:
parent
b1efcd823a
commit
024814429e
47
category.html
Normal file
47
category.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>hub</title>
|
||||||
|
<link rel="stylesheet" href="css/plyr.css"/>
|
||||||
|
<link rel="stylesheet" href="css/index.css">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<!-- jQuery library -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Popper JS -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Latest compiled JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
|
||||||
|
|
||||||
|
<script src="js/plyr.js"></script>
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Grey with black text -->
|
||||||
|
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
|
||||||
|
<!-- Brand -->
|
||||||
|
<a class="navbar-brand" href="#">Lukis Tube</a>
|
||||||
|
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link" href="index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="random.html">Random Video</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="category.html">Categories</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
0
css/random.css
Normal file
0
css/random.css
Normal file
70
css/video.css
Normal file
70
css/video.css
Normal file
@ -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%;
|
||||||
|
}
|
||||||
23
index.html
23
index.html
@ -5,6 +5,7 @@
|
|||||||
<title>hub</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">
|
||||||
|
<link rel="stylesheet" href="css/video.css">
|
||||||
|
|
||||||
|
|
||||||
<!-- Latest compiled and minified CSS -->
|
<!-- Latest compiled and minified CSS -->
|
||||||
@ -25,7 +26,25 @@
|
|||||||
<script src="js/index.js"></script>
|
<script src="js/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>lukis hub</h1>
|
<!-- Grey with black text -->
|
||||||
|
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
|
||||||
|
<!-- Brand -->
|
||||||
|
<a class="navbar-brand" href="#">Lukis Tube</a>
|
||||||
|
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="random.html">Random Video</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="category.html">Categories</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<div class="videopagewrapper hideit">
|
<div class="videopagewrapper hideit">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-2">
|
<div class="col-sm-2">
|
||||||
@ -48,7 +67,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-sm-2">
|
<div class="col-sm-2">
|
||||||
<button id="likebtn">Like it!</button>
|
<button id="likebtn">Like it!</button>
|
||||||
<button id="tagbutton">Like it!</button>
|
<button id="tagbutton">Tag it!</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-5">
|
<div class="col-sm-5">
|
||||||
|
|||||||
125
js/random.js
Normal file
125
js/random.js
Normal file
@ -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 = $(`
|
||||||
|
<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();
|
||||||
|
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("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
|
||||||
|
|
||||||
|
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(`<div>${tag}</div>`);
|
||||||
|
}
|
||||||
|
|
||||||
|
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:
|
||||||
|
<pre><code>${answers}</code></pre>
|
||||||
|
`,
|
||||||
|
confirmButtonText: 'Lovely!'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".videopagewrapper").show();
|
||||||
|
$(".previewcontainer").hide();
|
||||||
|
}, "json");
|
||||||
|
}
|
||||||
@ -8,7 +8,17 @@ if (isset($_POST['action'])) {
|
|||||||
$action = $_POST['action'];
|
$action = $_POST['action'];
|
||||||
switch ($action) {
|
switch ($action) {
|
||||||
case "getMovies":
|
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);
|
$result = $conn->query($query);
|
||||||
$rows = array();
|
$rows = array();
|
||||||
while ($r = mysqli_fetch_assoc($result)) {
|
while ($r = mysqli_fetch_assoc($result)) {
|
||||||
|
|||||||
85
random.html
Normal file
85
random.html
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>hub</title>
|
||||||
|
<link rel="stylesheet" href="css/plyr.css"/>
|
||||||
|
<link rel="stylesheet" href="css/video.css">
|
||||||
|
<link rel="stylesheet" href="css/random.css">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<!-- jQuery library -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Popper JS -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Latest compiled JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
|
||||||
|
|
||||||
|
<script src="js/plyr.js"></script>
|
||||||
|
<script src="js/random.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Grey with black text -->
|
||||||
|
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
|
||||||
|
<!-- Brand -->
|
||||||
|
<a class="navbar-brand" href="#">Lukis Tube</a>
|
||||||
|
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="random.html">Random Video</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="category.html">Categories</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="videopagewrapper hideit">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<div class="videoleftbanner">
|
||||||
|
<div class="likefield">Likes: 10</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<div class="videowrapper"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<div class="closebutton">Close</div>
|
||||||
|
<div class="videorightbanner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-5">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<button id="likebtn">Like it!</button>
|
||||||
|
<button id="tagbutton">Tag it!</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-5">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="previewcontainer">
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%"><button type="button" id="shufflebtn" class="btn btn-success">Shuffle</button></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user