init

2020-05-16 20:18:32 +02:00
commit 90e2f38c04
8 changed files with 152 additions and 0 deletions
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,35 @@
+.myvideo{
+  width: 80%;
+  margin-left: 10%;
+  float: left;
+}
+
+.previewcontainer{
+  margin-left: 10%;
+  width: 80%;
+  margin-right: 10%;
+}
+
+.videopreview{
+  height: 300px;
+  width: 30%;
+  float: left;
+  margin: 1%;
+  background-color: #7F7F7F;
+  cursor: pointer;
+}
+.previewtitle{
+  height: 10%;
+}
+.previewpic{
+  height: 90%;
+}
+
+.hideit{
+  display: none;
+}
+
+.closebutton{
+  height: 15px;
+  background-color: #FF0000;
+}
--- a/css/plyr.css
+++ b/css/plyr.css
--- a/index.html
+++ b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="css/plyr.css" />
+    <link rel="stylesheet" href="css/index.css">
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="js/plyr.js"></script>
+
+    <script>
+
+    </script>
+    <script src="js/index.js"></script>
+  </head>
+  <body>
+    <h1>lukis pornhub</h1>
+    <div class="videopagewrapper hideit">
+      <div class="closebutton">
+
+      </div>
+      <div class="videowrapper">
+
+      </div>
+    </div>
+
+
+
+
+    <div class="previewcontainer">
+    </div>
+
+
+  </body>
+</html>
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,51 @@
+$(document).ready(function() {
+  console.log("finished loading page");
+  $.post('php/videoload.php','action',function(data){
+    console.log(data);
+    for (var i in data) {
+      if (data[i] != "." && data[i] != "..") {
+        //loadVideo("videos/prn/"+data[i],"");
+        loadPreview(data[i]);
+        console.log(data[i]);
+      }
+
+    }
+  },'json');
+  //loadVideo("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg');
+
+  $(".closebutton").click(function() {
+    $(".videopagewrapper").hide();
+    $(".previewcontainer").show();
+    $(".videowrapper").html("");
+  });
+});
+
+function loadPreview(src) {
+  var preview = $("<div class='videopreview'><div class='previewtitle'>"+src+"</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/"+src+".jpg\" alt='no thumbnail found'></img></div></div>");
+  preview.attr('videourl',"videos/prn/"+src);
+  preview.attr('thumbnailurl',"videos/thumbnails/"+src);
+  preview.click(function() {
+    console.log("preview clicked");
+    loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg");
+  });
+  $(".previewcontainer").append(preview);
+}
+
+function loadVideo(src,posterlink) {
+  $(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
+
+  const player = new Plyr('#player');
+  player.source = {
+    type: 'video',
+    sources: [
+      {
+      src: src,
+      type: 'video/mp4',
+      size: 1080,
+      }
+    ],
+    poster: posterlink
+  };
+  $(".videopagewrapper").show();
+  $(".previewcontainer").hide();
+}
--- a/js/plyr.js
+++ b/js/plyr.js
--- a/php/extractvideopreviews.php
+++ b/php/extractvideopreviews.php
@@ -0,0 +1,6 @@
+<?php
+$arr = scandir("../videos/prn/");
+
+foreach ($arr as $elem) {
+  shell_exec("ffmpeg -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 \"$elem.jpg\"");
+}
--- a/php/sqlinit.php
+++ b/php/sqlinit.php
@@ -0,0 +1,12 @@
+<?php
+
+$server = "172.17.0.2";
+$user = "mwit";
+$password = "3MnDApF3bu6XDGOE";
+$database = "mwitdb";
+
+$mysqli = new mysqli($server, $user, $password,$database);
+if($mysqli->connect_errno)
+{
+echo "connecton failed... nr: ". $mysqli->connect_errno. " -- " . $mysqli->connect_error;
+}
--- a/php/videoload.php
+++ b/php/videoload.php
@@ -0,0 +1,8 @@
+<?php
+
+$arr = scandir("../videos/prn/");
+echo(json_encode($arr));
+
+if (isset($_POST['action'])) {
+
+}