delete unused files
closebutton bindings work correct now.
This commit is contained in:
86
index.html
86
index.html
@@ -1,86 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>hub</title>
|
||||
<link rel="stylesheet" href="src/css/plyr.css"/>
|
||||
<link rel="stylesheet" href="src/css/index.css">
|
||||
<link rel="stylesheet" href="src/css/video.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 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">
|
||||
<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>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
130
js/index.js
130
js/index.js
@@ -1,130 +0,0 @@
|
||||
let videos;
|
||||
let loadindex = 0;
|
||||
let scrollposition = 0;
|
||||
let loadedvideoid = -1;
|
||||
|
||||
$(document).ready(function () {
|
||||
$.post('php/videoload.php', 'action=getMovies', function (data) {
|
||||
videos = data;
|
||||
loadPreviewBlock(15);
|
||||
}, 'json');
|
||||
|
||||
$.post('php/videoload.php', 'action=getDbSize', function (data) {
|
||||
console.log(data);
|
||||
}, 'json');
|
||||
|
||||
$(".closebutton").click(function () {
|
||||
$("#likebtn").off();
|
||||
$("#tagbutton").off();
|
||||
$(".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) {
|
||||
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");
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
125
js/random.js
125
js/random.js
@@ -1,125 +0,0 @@
|
||||
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");
|
||||
}
|
||||
17
src/App.js
17
src/App.js
@@ -10,6 +10,7 @@ class App extends React.Component {
|
||||
|
||||
// bind this to the method for being able to call methods such as this.setstate
|
||||
this.showVideo = this.showVideo.bind(this);
|
||||
this.hideVideo = this.hideVideo.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -20,17 +21,18 @@ class App extends React.Component {
|
||||
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" onClick={() => this.loadHomePage()} href="#">Home</a>
|
||||
<a className="nav-link" onClick={() => this.loadHomePage()} href='# '>Home</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" onClick={() => this.loadRandomPage()} href="#">Random Video</a>
|
||||
<a className="nav-link" onClick={() => this.loadRandomPage()} href="# ">Random Video</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" onClick={() => this.loadCategoriesPage()} href="#">Categories</a>
|
||||
<a className="nav-link" onClick={() => this.loadCategoriesPage()} href="# ">Categories</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
|
||||
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
|
||||
videoelement={this.element}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -57,6 +59,13 @@ class App extends React.Component {
|
||||
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
hideVideo() {
|
||||
this.setState({
|
||||
page: "default"
|
||||
});
|
||||
this.element = null;
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Preview from "./Preview";
|
||||
import './css/video.css'
|
||||
import "./css/HomePage.css"
|
||||
|
||||
class HomePage extends React.Component {
|
||||
// stores all available movies
|
||||
@@ -40,12 +40,22 @@ class HomePage extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<div><h1>Home page</h1></div>
|
||||
{this.state.loadeditems.map(elem => (
|
||||
<Preview
|
||||
name={elem.movie_name}
|
||||
movie_id={elem.movie_id}
|
||||
showvideo={this.props.showvideo}/>
|
||||
))}
|
||||
<div className='sideinfo'>
|
||||
beep beep
|
||||
</div>
|
||||
<div className='maincontent'>
|
||||
{this.state.loadeditems.map(elem => (
|
||||
<Preview
|
||||
key={elem.movie_id}
|
||||
name={elem.movie_name}
|
||||
movie_id={elem.movie_id}
|
||||
viewbinding={this.props.viewbinding}/>
|
||||
))}
|
||||
</div>
|
||||
<div className='rightinfo'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ class MainBody extends React.Component {
|
||||
render() {
|
||||
let page;
|
||||
if (this.props.page === "default") {
|
||||
page = <HomePage showvideo={this.props.showvideo}/>;
|
||||
page = <HomePage viewbinding={this.props.viewbinding}/>;
|
||||
} else if (this.props.page === "video") {
|
||||
// show videoelement if neccessary
|
||||
page = this.props.videoelement;
|
||||
|
||||
137
src/Player.js
137
src/Player.js
@@ -7,24 +7,76 @@ class Player extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
sources: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: '',
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
}
|
||||
],
|
||||
poster: ''
|
||||
}
|
||||
};
|
||||
this.state = {};
|
||||
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
options = {
|
||||
controls: [
|
||||
'play-large', // The large play button in the center
|
||||
'play', // Play/pause playback
|
||||
'progress', // The progress bar and scrubber for playback and buffering
|
||||
'current-time', // The current time of playback
|
||||
'duration', // The full duration of the media
|
||||
'mute', // Toggle mute
|
||||
'volume', // Volume control
|
||||
'captions', // Toggle captions
|
||||
'settings', // Settings menu
|
||||
'airplay', // Airplay (currently Safari only)
|
||||
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
|
||||
'fullscreen', // Toggle fullscreen
|
||||
]
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchMovieData();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col-sm-2">
|
||||
<div className="videoleftbanner">
|
||||
<div className="likefield">Likes: {this.state.likes}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<div className="videowrapper">
|
||||
<div className='myvideo'>
|
||||
{this.state.sources ? <PlyrComponent
|
||||
sources={this.state.sources}
|
||||
options={this.options}/> :
|
||||
<div>not loaded yet</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-2">
|
||||
<div className="closebutton" onClick={() => {this.closebtn()}}>Close</div>
|
||||
<div className="videorightbanner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-5">
|
||||
|
||||
|
||||
</div>
|
||||
<div className="col-sm-2">
|
||||
<button className='btn btn-primary' onClick={() => {this.likebtn()}}>Like it!</button>
|
||||
<button className='btn btn-info' id="tagbutton">Tag it!</button>
|
||||
|
||||
</div>
|
||||
<div className="col-sm-5">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
fetchMovieData(){
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'loadVideo');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
@@ -43,52 +95,33 @@ class Player extends React.Component {
|
||||
}
|
||||
],
|
||||
poster: result.thumbnail
|
||||
}
|
||||
},
|
||||
likes: result.likes
|
||||
});
|
||||
console.log(this.state);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col-sm-2">
|
||||
<div className="videoleftbanner">
|
||||
<div className="likefield">Likes: 10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<div className="videowrapper">
|
||||
<div className='myvideo'>
|
||||
{this.state.sources.sources[0].src ? <PlyrComponent sources={this.state.sources}/> :
|
||||
<div>not loaded yet</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-2">
|
||||
<div className="closebutton">Close</div>
|
||||
<div className="videorightbanner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-5">
|
||||
|
||||
/* Click Listener */
|
||||
likebtn() {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'addLike');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
|
||||
</div>
|
||||
<div className="col-sm-2">
|
||||
<button id="likebtn">Like it!</button>
|
||||
<button id="tagbutton">Tag it!</button>
|
||||
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
if(result.result === "success"){
|
||||
this.fetchMovieData();
|
||||
}else{
|
||||
console.log("an error occured while liking");
|
||||
console.log(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</div>
|
||||
<div className="col-sm-5">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
closebtn() {
|
||||
this.props.viewbinding.hideVideo();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
import "./css/Preview.css"
|
||||
import ReactDOM from "react-dom";
|
||||
import Player from "./Player";
|
||||
|
||||
class Preview extends React.Component {
|
||||
@@ -51,9 +50,9 @@ class Preview extends React.Component {
|
||||
}
|
||||
|
||||
itemClick() {
|
||||
console.log("item clicked!"+this.state.name);
|
||||
console.log("item clicked!" + this.state.name);
|
||||
|
||||
this.props.showvideo(<Player movie_id={this.props.movie_id}/>);
|
||||
this.props.viewbinding.showVideo(<Player viewbinding={this.props.viewbinding} movie_id={this.props.movie_id}/>);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
14
src/css/HomePage.css
Normal file
14
src/css/HomePage.css
Normal file
@@ -0,0 +1,14 @@
|
||||
.sideinfo{
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.maincontent{
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.rightinfo{
|
||||
float: left;
|
||||
width: 10%;
|
||||
}
|
||||
@@ -29,3 +29,10 @@
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
/* todo check if neccessary*/
|
||||
.previewcontainer {
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
.hideit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.previewcontainer {
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
Reference in New Issue
Block a user