You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
467 lines
14 KiB
JavaScript
467 lines
14 KiB
JavaScript
$(function () {
|
|
|
|
var filemanager = $('.filemanager'),
|
|
breadcrumbs = $('.breadcrumbs'),
|
|
fileList = filemanager.find('.data');
|
|
|
|
// Start by fetching the file data from scan.php with an AJAX request
|
|
$.get('scan.php', function (data) {
|
|
|
|
var response = [data],
|
|
currentPath = '',
|
|
breadcrumbsUrls = [];
|
|
|
|
var folders = [],
|
|
files = [];
|
|
|
|
// This event listener monitors changes on the URL. We use it to
|
|
// capture back/forward navigation in the browser.
|
|
|
|
$(window).on('hashchange', function () {
|
|
|
|
goto(window.location.hash);
|
|
|
|
// We are triggering the event. This will execute
|
|
// this function on page load, so that we show the correct folder:
|
|
|
|
}).trigger('hashchange');
|
|
|
|
// Hiding and showing the search box
|
|
filemanager.find('.search').click(function () {
|
|
|
|
var search = $(this);
|
|
|
|
search.find('span').hide();
|
|
search.find('input[type=search]').show().focus();
|
|
});
|
|
|
|
// Listening for keyboard input on the search field.
|
|
// We are using the "input" event which detects cut and paste
|
|
// in addition to keyboard input.
|
|
|
|
filemanager.find('input').on('input', function (e) {
|
|
|
|
folders = [];
|
|
files = [];
|
|
|
|
var value = this.value.trim();
|
|
|
|
if (value.length) {
|
|
|
|
filemanager.addClass('searching');
|
|
|
|
// Update the hash on every key stroke
|
|
window.location.hash = 'search=' + value.trim();
|
|
}
|
|
else {
|
|
filemanager.removeClass('searching');
|
|
window.location.hash = encodeURIComponent(currentPath);
|
|
}
|
|
|
|
}).on('keyup', function (e) {
|
|
|
|
// Clicking 'ESC' button triggers focusout and cancels the search
|
|
var search = $(this);
|
|
|
|
if (e.keyCode == 27) {
|
|
search.trigger('focusout');
|
|
}
|
|
|
|
}).focusout(function (e) {
|
|
|
|
// Cancel the search
|
|
var search = $(this);
|
|
|
|
if (!search.val().trim().length) {
|
|
|
|
window.location.hash = encodeURIComponent(currentPath);
|
|
search.hide();
|
|
search.parent().find('span').show();
|
|
}
|
|
});
|
|
|
|
// Clicking on folders
|
|
fileList.on('click', 'li.folders', function (e) {
|
|
e.preventDefault();
|
|
|
|
var nextDir = $(this).find('a.folders').attr('href');
|
|
|
|
if (filemanager.hasClass('searching')) {
|
|
|
|
// Building the breadcrumbs
|
|
breadcrumbsUrls = generateBreadcrumbs(nextDir);
|
|
|
|
filemanager.removeClass('searching');
|
|
filemanager.find('input[type=search]').val('').hide();
|
|
filemanager.find('span').show();
|
|
}
|
|
else {
|
|
breadcrumbsUrls.push(nextDir);
|
|
}
|
|
|
|
window.location.hash = encodeURIComponent(nextDir);
|
|
currentPath = nextDir;
|
|
});
|
|
|
|
// Clicking on breadcrumbs
|
|
breadcrumbs.on('click', 'a', function (e) {
|
|
e.preventDefault();
|
|
|
|
var index = breadcrumbs.find('a').index($(this)),
|
|
nextDir = breadcrumbsUrls[index];
|
|
|
|
breadcrumbsUrls.length = Number(index);
|
|
|
|
window.location.hash = encodeURIComponent(nextDir);
|
|
|
|
});
|
|
|
|
function getCookie(cname) {
|
|
var name = cname + "=";
|
|
var decodedCookie = decodeURIComponent(document.cookie);
|
|
var ca = decodedCookie.split(';');
|
|
for (var i = 0; i < ca.length; i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0) == ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(name) == 0) {
|
|
return c.substring(name.length, c.length);
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|
|
// Navigates to the given hash (path)
|
|
function goto(hash) {
|
|
|
|
hash = decodeURIComponent(hash).slice(1).split('=');
|
|
|
|
if (hash.length) {
|
|
var rendered = '';
|
|
|
|
// if hash has search in it
|
|
if (hash[0] === 'search') {
|
|
|
|
filemanager.addClass('searching');
|
|
rendered = searchData(response, hash[1].toLowerCase());
|
|
|
|
if (rendered.length) {
|
|
currentPath = hash[0];
|
|
render(rendered);
|
|
}
|
|
else {
|
|
render(rendered);
|
|
}
|
|
}
|
|
|
|
// if hash is some path
|
|
else if (hash[0].trim().length) {
|
|
|
|
rendered = searchByPath(hash[0]);
|
|
|
|
if (rendered.length) {
|
|
|
|
currentPath = hash[0];
|
|
breadcrumbsUrls = generateBreadcrumbs(hash[0]);
|
|
render(rendered);
|
|
}
|
|
else {
|
|
currentPath = hash[0];
|
|
breadcrumbsUrls = generateBreadcrumbs(hash[0]);
|
|
render(rendered);
|
|
}
|
|
}
|
|
|
|
// if there is no hash
|
|
else {
|
|
currentPath = data.path;
|
|
breadcrumbsUrls.push(data.path);
|
|
render(searchByPath(data.path));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Splits a file path and turns it into clickable breadcrumbs
|
|
function generateBreadcrumbs(nextDir) {
|
|
var path = nextDir.split('/').slice(0);
|
|
for (var i = 1; i < path.length; i++) {
|
|
path[i] = path[i - 1] + '/' + path[i];
|
|
}
|
|
return path;
|
|
}
|
|
|
|
|
|
// Locates a file by path
|
|
function searchByPath(dir) {
|
|
var path = dir.split('/'),
|
|
demo = response,
|
|
flag = 0;
|
|
|
|
for (var i = 0; i < path.length; i++) {
|
|
for (var j = 0; j < demo.length; j++) {
|
|
if (demo[j].name === path[i]) {
|
|
flag = 1;
|
|
demo = demo[j].items;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
demo = flag ? demo : [];
|
|
return demo;
|
|
}
|
|
|
|
|
|
// Recursively search through the file tree
|
|
function searchData(data, searchTerms) {
|
|
|
|
data.forEach(function (d) {
|
|
if (d.type === 'folder') {
|
|
|
|
searchData(d.items, searchTerms);
|
|
|
|
if (d.name.toLowerCase().match(searchTerms)) {
|
|
folders.push(d);
|
|
}
|
|
}
|
|
else if (d.type === 'file') {
|
|
if (d.name.toLowerCase().match(searchTerms)) {
|
|
files.push(d);
|
|
}
|
|
}
|
|
});
|
|
return { folders: folders, files: files };
|
|
}
|
|
|
|
|
|
// Render the HTML for the file manager
|
|
function render(data) {
|
|
|
|
var scannedFolders = [],
|
|
scannedFiles = [];
|
|
|
|
if (Array.isArray(data)) {
|
|
|
|
data.forEach(function (d) {
|
|
|
|
if (d.type === 'folder') {
|
|
scannedFolders.push(d);
|
|
}
|
|
else if (d.type === 'file') {
|
|
scannedFiles.push(d);
|
|
}
|
|
|
|
});
|
|
}
|
|
else if (typeof data === 'object') {
|
|
|
|
scannedFolders = data.folders;
|
|
scannedFiles = data.files;
|
|
}
|
|
|
|
|
|
// Empty the old result and make the new one
|
|
fileList.empty().hide();
|
|
|
|
if (!scannedFolders.length && !scannedFiles.length) {
|
|
filemanager.find('.nothingfound').show();
|
|
}
|
|
else {
|
|
filemanager.find('.nothingfound').hide();
|
|
}
|
|
|
|
if (scannedFolders.length) {
|
|
|
|
scannedFolders.forEach(function (f) {
|
|
|
|
var itemsLength = f.items.length,
|
|
name = escapeHTML(f.name),
|
|
|
|
icon = '<span class="icon folder"></span>';
|
|
|
|
// Function need to checked by MR! -> Otherwise delete!!!
|
|
// icon = '<span class="icon folder"></span>',
|
|
// iconpath = 'images/icons/' + f.path + '.png';
|
|
|
|
|
|
// function imageExists(image_url){
|
|
|
|
// var http = new XMLHttpRequest();
|
|
|
|
// http.open('HEAD', image_url, false);
|
|
// http.send();
|
|
//
|
|
// return http.status != 404;
|
|
// }
|
|
|
|
// if (imageExists(iconpath)) {
|
|
// icon = '<div style="display:inline-block;margin:5px 5px 5px 5px;border-radius:8px;width:100px;height:100px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' +iconpath + '\');"></div>';
|
|
// } else if(itemsLength) {
|
|
// icon = '<span class="icon folder full"></span>';
|
|
// }
|
|
|
|
if (itemsLength) {
|
|
icon = '<span class="icon folder full"></span>';
|
|
}
|
|
|
|
if (itemsLength == 1) {
|
|
itemsLength += ' item';
|
|
}
|
|
else if (itemsLength > 1) {
|
|
itemsLength += ' items';
|
|
}
|
|
else {
|
|
itemsLength = 'Empty';
|
|
}
|
|
|
|
var folder = $('<li class="folders"><a href="' + f.path + '" onclick="_paq.push([\'trackEvent\', \'video-folder\', \'' + f.path + '\']);" title="' + f.path + '" class="folders">' + icon + '<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span><span class="watchStatus"></span></a></li>');
|
|
fileList.append(folder)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (scannedFiles.length) {
|
|
|
|
// empty playlist
|
|
var playlist = [];
|
|
|
|
scannedFiles.forEach(function (f) {
|
|
|
|
var fileSize = bytesToSize(f.size),
|
|
name = escapeHTML(f.name),
|
|
fileType = name.split('.'),
|
|
icon = '<span class="icon file"></span>';
|
|
|
|
fileType = fileType[fileType.length - 1];
|
|
|
|
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>');
|
|
} else if (fileType == "jpeg") {
|
|
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>'); file.appendTo(fileList);
|
|
} else if (fileType == "png") {
|
|
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 + '" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>'); file.appendTo(fileList);
|
|
} else if (fileType == "gif") {
|
|
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 + '" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>'); file.appendTo(fileList);
|
|
} else {
|
|
icon = '<span class="icon file f-' + fileType + '">.' + fileType + '</span>';
|
|
}
|
|
|
|
if (fileType == "mp4") {
|
|
|
|
var style = "";
|
|
// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
|
|
// get saved cookie information
|
|
var json_str = getCookie("watchedVideoArray");
|
|
if (json_str != "") {
|
|
var arr_watchstatus = JSON.parse(json_str);
|
|
if (arr_watchstatus.includes(f.path)) {
|
|
style = 'style="display: inline;"';
|
|
}
|
|
}
|
|
// 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">❌</span><span class="watchStatus" id="nowWatched"' + style + '>✅</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
|
|
var url = '';
|
|
|
|
if (filemanager.hasClass('searching')) {
|
|
|
|
url = '<span>Search results: </span>';
|
|
fileList.removeClass('animated');
|
|
|
|
}
|
|
else {
|
|
fileList.addClass('animated');
|
|
|
|
breadcrumbsUrls.forEach(function (u, i) {
|
|
|
|
var name = u.split('/');
|
|
|
|
if (i !== breadcrumbsUrls.length - 1) {
|
|
url += '<a href="' + u + '"><span class="folderName">' + name[name.length - 1] + '</span></a> <span class="arrow">→</span> ';
|
|
document.getElementById("backButton").href = "#" + u;
|
|
}
|
|
else {
|
|
url += '<span class="folderName">' + name[name.length - 1] + '</span>';
|
|
}
|
|
});
|
|
}
|
|
|
|
breadcrumbs.text('').append(url);
|
|
|
|
// Show the generated elements and hide loader
|
|
document.querySelector(".loader").style.display = "none";
|
|
fileList.fadeIn();
|
|
|
|
}
|
|
|
|
// This function escapes special html characters in names
|
|
function escapeHTML(text) {
|
|
return text.replace(/\&/g, '&').replace(/\</g, '<').replace(/\>/g, '>');
|
|
}
|
|
|
|
// Convert file sizes from bytes to human readable units
|
|
function bytesToSize(bytes) {
|
|
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
if (bytes == 0) return '0 Bytes';
|
|
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
|
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
|
|
}
|
|
|
|
});
|
|
});
|