implement autoplay and redesign tool

assets/css/login.css

@@ -44,8 +44,8 @@ button {
 	border: none;
 }
 
-.netcloud-logo {
+.mit-logo {
-	background-image: url("../../assets/images/Netcloud-Logo_Weiss.png");
+	background-image: url("../../assets/images/michu-it_logo_weiss.png");
 	width: 104px;
 	height: 60px;
 	background-size: contain;
@@ -56,7 +56,7 @@ button {
 .container {
 	position: relative;
 	height: 100%;
-	background-image: url("../../assets/images/background.jpg");
+	background-image: url("../../assets/images/MITbg.jpg");
 	background-size: cover;
 	overflow: auto;
 	font-family: "Open Sans", Helvetica, Arial, sans-serif;

assets/css/styles.css

@@ -13,8 +13,8 @@ html {
 	/* Full height */
 	height: 100%;
 	/* The image used */
-	background-image: url("../../assets/images/background.jpg");
+	background-image: url("../../assets/images/MITbg.jpg");
-	background-color: #373743;
+	background-color: #1e1e1e;
 	/* Center and scale the image nicely */
 	background-position: center center;
 	background-size: cover;
@@ -24,7 +24,7 @@ html {
 	/*Fix for moving page because of scrole baar*/
 }
 
-.netcloud-logo {
+.mit-logo {
 	background-image: url("../../assets/images/michu-it_logo_weiss.png");
 	width: 132px;
 	height: 60px;
@@ -49,7 +49,7 @@ html {
 	min-height: 500px;
 	position: relative;
 	margin: 30px auto 50px;
-	background-color: rgb(0 0 0 / 40%);
+	background-color: rgb(0 0 0 / 66%);
 }
 
 @media all and (max-width: 965px) {
@@ -271,7 +271,7 @@ html {
 
 .filemanager .data li {
 	border-radius: 3px;
-	background-color: #373743;
+	background-color: #3e3e3e;
 	width: 307px;
 	height: 118px;
 	list-style-type: none;
@@ -553,9 +553,6 @@ html {
 	border-bottom-color: #30837c;
 }
 
-/*----------------------------
-	The Demo Footer
------------------------------*/
 
 footer {
 	width: 770px;
@@ -699,7 +696,7 @@ footer #tzine-actions iframe {
 }
 
 .button {
-	background-color: #373743;
+	background-color: #002751;
 	border: none;
 	color: white;
 	padding: 15px 32px;

assets/js/script.js

@@ -323,6 +323,9 @@ $(function () {
 
 			if (scannedFiles.length) {
 
+				// empty playlist
+				var playlist = [];
+
 				scannedFiles.forEach(function (f) {
 
 					var fileSize = bytesToSize(f.size),
@@ -335,7 +338,6 @@ $(function () {
 					if (fileType == "db") {
 						return;
 					}
-
 					if (fileType == "jpg") {
 						icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>';
 						var file = $('<li class="files"><a data-fancybox="images" href="' + f.path + '" title="' + f.path + '" target="_blank" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>');
@@ -354,11 +356,6 @@ $(function () {
 
 					if (fileType == "mp4") {
 
-						// adding watched courses to cookie information - dev
-						//var arr = ['001 - Course Introduction.mp4', 'bar', 'Home/IT Basics and Sysadmin Topics/DNS and BIND Deep Dive/004 - DNS Concepts - Terms and Definitions.mp4'];
-						//var json_str = JSON.stringify(arr);
-						//setCookie('watchedVideoArray', json_str);
-
 						var style = "";
 						// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
 						// get saved cookie information
@@ -369,16 +366,53 @@ $(function () {
 								style = 'style="display: inline;"';
 							}
 						}
-
+						// Add whole array-elemtent to playlist.
-						var file = $('<li class="files"><a data-fancybox data-touch="false" data-src="' + f.path + '" title="' + f.path + '" href="#" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span><span class="watchStatus" id="notWatchedJet">&#10060;</span><span class="watchStatus" id="nowWatched"' + style + '>&#9989;</span></a></li>');
+						playlist.push({
-
+							src: f.path,
-					} else {
+							opts: {
+								caption: name
+							}
+						});
+						var file = $('<li class="files"><a data-fancybox="playlist" data-touch="false" data-src="' + f.path + '" title="' + f.path + '" href="#" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span><span class="watchStatus" id="notWatchedJet">&#10060;</span><span class="watchStatus" id="nowWatched"' + style + '>&#9989;</span></a></li>');
+					} 
+					else {
 						var file = $('<li class="files"><a href="' + f.path + '" title="' + f.path + '" target="_blank" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>');
 					}
-
 					file.appendTo(fileList);
 				});
+				
+				//console.log(playlist);  // Print Playlist to dev-console
 
+				//Fancybox initialisieren
+				$('[data-fancybox="playlist"]').fancybox({
+					loop: false,
+					buttons : [
+						'fullScreen',
+						'thumbs',
+						'close'
+					],
+					thumbs : {
+						autoStart : true
+					},
+					afterLoad : function(instance, current) {
+						console.log("next video! :)");
+						console.log("--------------");
+						console.log(instance);
+						console.log("--------------");
+						console.log(current);
+						console.log("--------------");
+						// append new value to the array
+						arr_watchstatus.push(current.opts.$orig[0].dataset.src); // adds new video path to array!
+						var json_str = JSON.stringify(arr_watchstatus); // JSON encodes the array
+						setCookie('watchedVideoArray', json_str); // Set new JSON Value to cookie
+
+						current.opts.$orig[0].childNodes[5].style.display = "inline"; // Set green thick!
+					},
+					//Playlist als Option übergeben
+					video: {
+						playList: playlist
+					}
+				});
 			}
 
 			// Generate the breadcrumbs

index.php

@@ -51,7 +51,7 @@ define('PROJECT_ROOT', getcwd());
 		<a class="button folderName" id="backButton" href=""><i class="fa fa-arrow-left" aria-hidden="true"></i> Go Back</a>
 		<a class="button" href="./"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
 
-		<div class="netcloud-logo"></div>
+		<div class="mit-logo"></div>
 		<div class="loader">Loading...</div>
 		
 		<ul class="data"></ul>
@@ -64,7 +64,7 @@ define('PROJECT_ROOT', getcwd());
 
 	<!-- Include our script files -->
 	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-	<script src="assets/js/script.js?random=<?php echo uniqid(); ?>"></script>
+	<script src="assets/js/script2.js?random=<?php echo uniqid(); ?>"></script>
 	<!-- FancyBox -->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
 	<script type="text/javascript">
@@ -88,66 +88,23 @@ define('PROJECT_ROOT', getcwd());
 			document.cookie = cname + "=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
 		}
 
-		// initialize array only if emty
 		var json_str = getCookie("watchedVideoArray");
+		// initialize array only if emty
 		if (json_str == "") {
 			// If never used this page create an initial array
 			var arr_watchstatus = [
-				"netcloud-init"
+				"michu-it-init"
 			];
 		} else {
 			// Decode allready watched elements from cookie
 			var arr_watchstatus = JSON.parse(json_str);
 		}
 		
-		// initiate video container
+		// Overrrides Default for HTML5 video
 		$.fancybox.defaults.video.tpl = '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
-			  '<source src="{{src}}" type="{{format}}" />' +
+			'<source src="{{src}}" type="{{format}}" />' +
-			  'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!!' +
+			'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
-			  "</video><div class='speedControl'><div class='indicator'>1x</div></div>";
+			"</video>";
-
-		$(document).on('afterClose.fb', function(e, instance, slide) {
-			console.info(slide.opts.$orig);
-			//console.info( slide.opts.$orig[0].dataset.src ); //Gets Video Path from clicked link
-
-			// append new value to the array
-			arr_watchstatus.push(slide.opts.$orig[0].dataset.src); // adds new video path to array!
-			var json_str = JSON.stringify(arr_watchstatus); // JSON encodes the array
-			setCookie('watchedVideoArray', json_str); // Set new JSON Value to cookie
-			//parent.location.reload(true);
-
-			slide.opts.$orig[0].childNodes[5].style.display = "inline"; // After closing set green thick!
-		});
-		
-		// setup video play speed functions on modal open:
-		$(document).on('afterLoad.fb', function( e, instance, slide ) {
-
-			//console.info( "Works" );
-			const video = document.querySelector('video');
-			const speedControl = document.querySelector('.speedControl');
-			const indicator = document.querySelector('.indicator');
-
-			let mousedown = false;
-
-			speedControl.addEventListener('mousedown', () => mousedown = true);
-			speedControl.addEventListener('mouseup', () => mousedown = false);
-			speedControl.addEventListener('mouseleave', () => mousedown = false);
-
-			speedControl.addEventListener('mousemove', function(e) {
-			  if (!mousedown) return;
-			  const min = 0.5;
-			  const max = 2;
-			  const position = e.pageY - this.offsetTop;
-			  const percent = position / this.offsetHeight;
-			  const height = Math.floor(percent * 1000) / 10 + '%';
-			  const playbackRate = percent * (max - min) + min;
-			  if (playbackRate < 0.5) playbackRate = 0.5;
-			  
-			  indicator.style.height = height;
-			  indicator.innerText = playbackRate.toFixed(1) + 'x';
-			  video.playbackRate = playbackRate;
-			});
-		});
 	</script>
 </body>
 

login.php

@@ -89,7 +89,7 @@ if ($user_ip != "83.150.6.68") {
 				<div class="row">
 					<div class="login">
 						<div class="login__lock">
-							<div class="netcloud-logo"></div>
+							<div class="mit-logo"></div>
 							<i class="fa fa-lock" aria-hidden="true"></i>
 						</div>
 						<div class="login__form">

manage.php

@@ -3387,7 +3387,7 @@ global $lang, $root_url, $favicon_path;
     <title><?php echo fm_enc(APP_TITLE) ?></title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
     <style>
-        body.fm-login-page{ background-color:#f7f9fb;font-size:14px;background-color:#f7f9fb;background-image:url("assets/images/background.jpg");}
+        body.fm-login-page{ background-color:#f7f9fb;font-size:14px;background-color:#f7f9fb;background-image:url("assets/images/MITbg.jpg");}
         .fm-login-page .brand{ width:121px;overflow:hidden;margin:0 auto;position:relative;z-index:1}
         .fm-login-page .brand img{ width:100%}
 		.netcloud-logo {