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>
|
||||
<link rel="stylesheet" href="css/plyr.css"/>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="css/video.css">
|
||||
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
@ -25,7 +26,25 @@
|
||||
<script src="js/index.js"></script>
|
||||
</head>
|
||||
<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="row">
|
||||
<div class="col-sm-2">
|
||||
@ -48,7 +67,7 @@
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<button id="likebtn">Like it!</button>
|
||||
<button id="tagbutton">Like it!</button>
|
||||
<button id="tagbutton">Tag it!</button>
|
||||
|
||||
</div>
|
||||
<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'];
|
||||
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)) {
|
||||
|
||||
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