delete unused files
closebutton bindings work correct now.
This commit is contained in:
parent
e0f5d62edf
commit
d30cc41f7a
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
|
// bind this to the method for being able to call methods such as this.setstate
|
||||||
this.showVideo = this.showVideo.bind(this);
|
this.showVideo = this.showVideo.bind(this);
|
||||||
|
this.hideVideo = this.hideVideo.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -20,17 +21,18 @@ class App extends React.Component {
|
|||||||
|
|
||||||
<ul className="navbar-nav">
|
<ul className="navbar-nav">
|
||||||
<li className="nav-item">
|
<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>
|
||||||
<li className="nav-item">
|
<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>
|
||||||
<li className="nav-item">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -57,6 +59,13 @@ class App extends React.Component {
|
|||||||
|
|
||||||
this.element = element;
|
this.element = element;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hideVideo() {
|
||||||
|
this.setState({
|
||||||
|
page: "default"
|
||||||
|
});
|
||||||
|
this.element = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Preview from "./Preview";
|
import Preview from "./Preview";
|
||||||
import './css/video.css'
|
import "./css/HomePage.css"
|
||||||
|
|
||||||
class HomePage extends React.Component {
|
class HomePage extends React.Component {
|
||||||
// stores all available movies
|
// stores all available movies
|
||||||
@ -40,13 +40,23 @@ class HomePage extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div><h1>Home page</h1></div>
|
<div><h1>Home page</h1></div>
|
||||||
|
<div className='sideinfo'>
|
||||||
|
beep beep
|
||||||
|
</div>
|
||||||
|
<div className='maincontent'>
|
||||||
{this.state.loadeditems.map(elem => (
|
{this.state.loadeditems.map(elem => (
|
||||||
<Preview
|
<Preview
|
||||||
|
key={elem.movie_id}
|
||||||
name={elem.movie_name}
|
name={elem.movie_name}
|
||||||
movie_id={elem.movie_id}
|
movie_id={elem.movie_id}
|
||||||
showvideo={this.props.showvideo}/>
|
viewbinding={this.props.viewbinding}/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<div className='rightinfo'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@ class MainBody extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
let page;
|
let page;
|
||||||
if (this.props.page === "default") {
|
if (this.props.page === "default") {
|
||||||
page = <HomePage showvideo={this.props.showvideo}/>;
|
page = <HomePage viewbinding={this.props.viewbinding}/>;
|
||||||
} else if (this.props.page === "video") {
|
} else if (this.props.page === "video") {
|
||||||
// show videoelement if neccessary
|
// show videoelement if neccessary
|
||||||
page = this.props.videoelement;
|
page = this.props.videoelement;
|
||||||
|
|||||||
137
src/Player.js
137
src/Player.js
@ -7,24 +7,76 @@ class Player extends React.Component {
|
|||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
this.state = {
|
this.state = {};
|
||||||
sources: {
|
|
||||||
type: 'video',
|
|
||||||
sources: [
|
|
||||||
{
|
|
||||||
src: '',
|
|
||||||
type: 'video/mp4',
|
|
||||||
size: 1080,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
poster: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.props = props;
|
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() {
|
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();
|
const updateRequest = new FormData();
|
||||||
updateRequest.append('action', 'loadVideo');
|
updateRequest.append('action', 'loadVideo');
|
||||||
updateRequest.append('movieid', this.props.movie_id);
|
updateRequest.append('movieid', this.props.movie_id);
|
||||||
@ -43,52 +95,33 @@ class Player extends React.Component {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
poster: result.thumbnail
|
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>
|
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
|
||||||
<div className="col-sm-2">
|
.then((response) => response.json())
|
||||||
<button id="likebtn">Like it!</button>
|
.then((result) => {
|
||||||
<button id="tagbutton">Tag it!</button>
|
if(result.result === "success"){
|
||||||
|
this.fetchMovieData();
|
||||||
|
}else{
|
||||||
|
console.log("an error occured while liking");
|
||||||
|
console.log(result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
closebtn() {
|
||||||
<div className="col-sm-5">
|
this.props.viewbinding.hideVideo();
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import "./css/Preview.css"
|
import "./css/Preview.css"
|
||||||
import ReactDOM from "react-dom";
|
|
||||||
import Player from "./Player";
|
import Player from "./Player";
|
||||||
|
|
||||||
class Preview extends React.Component {
|
class Preview extends React.Component {
|
||||||
@ -51,9 +50,9 @@ class Preview extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
itemClick() {
|
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;
|
opacity: 1;
|
||||||
transition: opacity 0.5s;
|
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%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user