michael/web-learning-manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implement autoplay and redesign tool

Browse Source
This commit is contained in:
Michael Reber 2023-01-13 13:37:46 +01:00
parent 13c0db3539
commit b38f9aa66a
7 changed files with 64 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/login.css
View File

@ -44,8 +44,8 @@ button {
border: none;
}
.netcloud-logo {
background-image: url("../../assets/images/Netcloud-Logo_Weiss.png");
.mit-logo {
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;

15
assets/css/styles.css
View File

@ -13,8 +13,8 @@ html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../assets/images/background.jpg");
background-color: #373743;
background-image: url("../../assets/images/MITbg.jpg");
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;

BIN
assets/images/MITbg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 957 KiB

56
assets/js/script.js
View File

@ -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;"';
}
}
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>');
} else {
// Add whole array-elemtent to playlist.
playlist.push({
src: f.path,
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

57
index.php
View File

@ -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}}" />' +
'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>";
$(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;
});
});
'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
"</video>";
</script>
</body>

2
login.php
View File

@ -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">

2
manage.php
View File

@ -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 {