Bumped to Bootstrap 5

This commit is contained in:
itdominator 2021-09-28 17:37:20 -05:00
parent f61789ffb8
commit 633cb5b955
22 changed files with 410 additions and 845 deletions

View File

@ -1,471 +0,0 @@
/*!
* Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
padding: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #999;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid #999;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #999;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
background-image: linear-gradient(to bottom, #08c, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #999;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(to bottom, #08c, #0044cc);
background-image: -ms-linear-gradient(to bottom, #08c, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0044cc));
background-image: -webkit-linear-gradient(to bottom, #08c, #0044cc);
background-image: -o-linear-gradient(to bottom, #08c, #0044cc);
background-image: linear-gradient(to bottom, #08c, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #999;
}
.datepicker .datepicker-switch {
width: 145px;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}
/*# sourceMappingURL=bootstrap-datepicker.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -50,12 +50,16 @@
.card-title-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.volume-control-positioner { .volume-control-positioner {
position: absolute; position: absolute;
bottom: 2em; bottom: 3.5em;
right: 50%; right: 2.5%;
left: 50%;
} }
.icon-style { .icon-style {

View File

@ -18,7 +18,7 @@ document.body.onload = (eve) => {
setTimeout(function () { setTimeout(function () {
getFavesAjax(); getFavesAjax();
reloadDirectory(); reloadDirectory();
}, 200); }, 400);
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -76,16 +76,16 @@ class FilesList extends React.Component {
final.push( final.push(
<li class="col-sm-12 col-md-6 col-lg-4" title={name}> <li class="col-sm-12 col-md-6 col-lg-4" title={name}>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header card-title-text">
{card_header} {card_header}
</div> </div>
<div class="card-body text-center noselect" title={name} hash={hash} ftype={filetype} onDoubleClick={this.openThis}> <div class="card-body text-center noselect" title={name} hash={hash} ftype={filetype} onDoubleClick={this.openThis}>
{card_body} {card_body}
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href={"api/file-manager-action/files/" + hash} download class="btn btn-secondary btn-sm float-left">Download</a> <a href={"api/file-manager-action/files/" + hash} download class="btn btn-dark btn-sm float-start">Download</a>
<input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/> <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-dark btn-sm float-start" type="button" value="Open Locally"/>
<input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/> <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-dark btn-sm float-end" title={name} type="button" value="Open"/>
</div> </div>
</div> </div>
</li> </li>

View File

@ -1,253 +1,207 @@
const ipRegexWithPort = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]\:?)$/; const reloadDirectory = () => {
const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; const target = document.getElementById('refresh-btn');
const hash = target.getAttribute("hash");
listFilesAjax(hash);
}
const goUpADirectory = () => {
const target = document.getElementById('back-btn')
const hash = target.getAttribute("hash");
listFilesAjax(hash);
}
const scrollFilesToTop = () => {
const target = document.getElementById('files');
target.scrollIntoView();
}
const closeFile = () => {
const video = document.getElementById("video");
let title = document.getElementById("selectedFile");
// Background Functions document.getElementById("image-viewer").style.display = "none";
const getBackgrounds = async () => { document.getElementById("text-viewer").style.display = "none";
const ulElm = document.getElementById('backgroundSelection'); document.getElementById("pdf-viewer").style.display = "none";
const data = await fetchData( formatURL("backgrounds") ); document.getElementById("video-controls").style.display = "none";
title.innerText = "";
video.style.display = "none";
video.style.cursor = '';
video.pause();
}
const showFile = async (title, hash, extension, type) => {
document.getElementById("image-viewer").style.display = "none";
document.getElementById("text-viewer").style.display = "none";
document.getElementById("pdf-viewer").style.display = "none";
document.getElementById("video").style.display = "none";
document.getElementById("video-controls").style.display = "none";
let titleElm = document.getElementById("selectedFile");
titleElm.innerText = title;
if (type === "video") {
setupVideo(hash, extension);
}
if (type === "file") {
setupFile(hash, extension);
}
}
const setupVideo = async (hash, extension) => {
let video = document.getElementById("video");
let controls = document.getElementById("video-controls");
video.poster = "static/imgs/icons/loading.gif";
video.style.display = "";
video.src = "#"
video_path = "api/file-manager-action/files/" + hash;
let modal = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
try {
if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) {
if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) {
data = await fetchData( "api/file-manager-action/remux/" + hash );
if ( data.hasOwnProperty('path') ) {
video_path = data.path;
} else {
displayMessage(data.message.text, data.message.type, 3);
return ;
}
} else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) {
modal.hide();
openWithLocalProgram(hash, extension);
return ;
}
}
modal.show();
controls.style.display = "none";
video.src = video_path;
} catch (e) {
video.style.display = "none";
console.log(e);
}
}
const setupFile = async (hash, extension) => {
let viewer = null;
let type = "local";
let modal = new bootstrap.Modal(document.getElementById('file-view-modal'), { keyboard: false });
if ((/\.(png|jpg|jpeg|gif|ico)$/i).test(extension)) {
type = "image";
viewer = document.getElementById("image-viewer");
}
if ((/\.(txt|text|sh|cfg|conf)$/i).test(extension)) {
type = "text";
viewer = document.getElementById("text-viewer");
}
if ((/\.(mp3|ogg|flac)$/i).test(extension)) {
type = "music";
viewer = document.getElementById("video");
}
if ((/\.(pdf)$/i).test(extension)) {
type = "pdf";
viewer = document.getElementById("pdf-viewer");
}
if (type !== "text" && type !== "local" ) {
modal.show();
let response = await fetch("api/file-manager-action/files/" + hash);
let src_obj = URL.createObjectURL(await response.blob()); // IE10+
viewer.src = src_obj;
}
if (type == "text") {
let response = await fetch("api/file-manager-action/files/" + hash);
let textData = await response.text(); // IE10+
viewer.innerText = textData;
}
if (type !== "local") {
viewer.style.display = "";
modal.show();
}
if (type == "local") {
openWithLocalProgram(hash);
}
}
const openWithLocalProgram = async (hash, extension = "") => {
const url = "api/file-manager-action/run-locally/" + hash;
const data = await fetchData(url);
let message = data.message;
displayMessage(message.text, message.type, 3);
}
const searchPage = () => {
const query = document.getElementById('search-files-field').value.toLowerCase();
const list = document.getElementById("files").querySelectorAll("li[title]");
const size = list.length;
size = data.backgrounds.length - 1;
backgrounds = data.backgrounds;
for (var i = 0; i < size; i++) { for (var i = 0; i < size; i++) {
generateBgElm(ulElm, backgrounds[i]); if (!list[i].title.toLowerCase().includes(query)) {
list[i].style.display = "none";
} else {
list[i].style.display = "";
}
} }
} }
const generateBgElm = (ulElm, background) => { const clearSearch = () => {
const liElm = document.createElement("LI"); const list = document.getElementById("files").querySelectorAll("li[title]");
const imgElm = document.createElement("IMG"); const size = list.length;
const imgPath = formatURL("static/imgs/backgrounds/" + background);
imgElm.src = imgPath; document.getElementById('search-files-field').value = "";
imgElm.className = "bgimgs"; for (var i = 0; i < size; i++) {
list[i].style.display = "";
liElm.appendChild(imgElm); }
ulElm.appendChild(liElm);
} }
const loadBackground = () => {
let bgElm = document.getElementById("bg");
let val = getCookie('bgSlug');
if (val == "" || val == undefined) { const updateBackground = (srcLink, isvideo = true) => {
let path = formatURL('static/imgs/backgrounds/background.png'); try {
setCookie('bgSlug', path); let elm = document.getElementById("bg");
bgElm.src = path; if (isvideo) {
if (elm.getAttribute('src') === "") {
elm.src = srcLink;
}
} else {
elm.src = "";
elm.setAttribute("poster", srcLink);
}
} catch (e) { }
}
const manageFavorites = (elm) => {
const classType = "btn-info";
const hasClass = elm.classList.contains(classType);
if (hasClass) {
elm.classList.remove(classType);
action = "delete";
} else { } else {
bgElm.src = val; elm.classList.add(classType);
} action = "add";
}
const setBackgroundCookie = (path) => {
document.getElementById("bg").src = path;
setCookie('bgSlug', path);
}
const clearBackgroundList = () => {
let bgList = document.getElementById("backgroundSelection");
clearChildNodes(bgList);
}
// Fave Modal and List Functions
const loadFavorites = async () => {
const isLoggedIn = document.getElementsByClassName("btn btn-success")[0].innerText.includes("Login");
if (!isLoggedIn) {
const data = await fetchData( formatURL("favorites") );
const ulElm = document.getElementById('favoritesSelection');
size = data.faves.length;
faves = data.faves;
for (var i = 0; i < size; i++) {
generateFaveLinkElm(ulElm, faves[i][0], faves[i][1], faves[i][2]);
}
}
}
const setFaveLinkIco = (link) => {
let iconElm = document.getElementById("faveLinkImage");
let gIcoElm = document.getElementsByName('faveIconGoo')[0];
let iIcoElm = document.getElementsByName('faveIconIco')[0];
let pIcoElm = document.getElementsByName('faveIconPng')[0];
let jIcoelm = document.getElementsByName('faveIconJpg')[0];
let gfIcoElm = document.getElementsByName('faveIconGif')[0];
let gIcon = 'http://www.google.com/s2/favicons?domain=';
let dArry = link.split('/');
let iIcon = "";
let pIcon = "";
let jIcon = "";
let gfIcon = "";
// Check if we can see domain...
if (dArry.length >= 3) {
let domain = dArry[2];
gIcon = gIcon += domain;
iIcon = "//" + domain + "/favicon.ico";
pIcon = "//" + domain + "/favicon.png";
jIcon = "//" + domain + "/favicon.jpg";
gfIcon = "//" + domain + "/favicon.gif";
} else {
// Check if IP
if ( ipRegex.test(link) || ipRegexWithPort.test(link) ) {
iIcon = link + "/favicon.ico";
pIcon = link + "/favicon.png";
jIcon = link + "/favicon.jpg";
gfIcon = link + "/favicon.gif";
} else { // set generic fave icon.
clearFaveIcons();
return ;
}
} }
iconElm.src = iIcon; manageFavoritesAjax(action);
gIcoElm.src = gIcon;
iIcoElm.src = iIcon;
pIcoElm.src = pIcon;
jIcoelm.src = jIcon;
gfIcoElm.src = gfIcon;
} }
const clearFaveIcons = () => {
const domain = "/static/imgs/icons/link-icon.png"; const loadFavorite = (id) => {
document.getElementById("faveLinkImage").src = domain; loadFavoriteLink(id);
document.getElementsByName('faveIconGoo')[0].src = domain; document.getElementById("favorites-modal")
document.getElementsByName('faveIconIco')[0].src = domain; .getElementsByClassName("modal-footer")[0]
document.getElementsByName('faveIconPng')[0].src = domain; .children[0].click()
document.getElementsByName('faveIconJpg')[0].src = domain;
document.getElementsByName('faveIconGif')[0].src = domain;
document.getElementsByName("customFaveIconImg")[0].src = domain;
} }
const faveLinkFieldManager = (eve) => {
const link = eve.target.value.trim();
const pattern = /(https|http)/ig;
const result = pattern.test(link);
if (result === true) {
setFaveLinkIco(link);
}
}
const saveFaveLink = () => {
const title = document.getElementById("faveTitleField").value.trim()
const link = document.getElementById("faveLinkField").value.trim()
const icon = document.getElementById("faveLinkImage").src;
addFaveLinkAjax(title, icon, link);
}
const generateFaveLinkElm = async (ulElm, titleTxt, pathTxt, aTxt) => {
const liElm = document.createElement("LI");
const aElm = document.createElement("A");
const imgElm = document.createElement("IMG");
const h3Elm = document.createElement("H3");
const title = document.createTextNode(titleTxt);
const imgPath = pathTxt;
const aLink = aTxt;
aElm.href = aLink;
imgElm.title = aLink;
imgElm.src = imgPath;
imgElm.className = "faveimgs";
h3Elm.appendChild(title)
aElm.appendChild(imgElm);
aElm.appendChild(h3Elm);
liElm.appendChild(aElm);
ulElm.appendChild(liElm);
}
const manageIcoCheckBoxs = (target = null) => {
if (target == null)
return ;
let ulElm = document.getElementById('faveIcoUlList');
let list = ulElm.getElementsByTagName("INPUT");
for (var i = 0; i < list.length; i++) {
item = list[i];
if (target.id != item.id) { // unceck all others
item.checked = false;
} else { // Act on target but insure one is checked at all times...
if (!target.checked)
target.checked = true;
const src = target.nextElementSibling.nextElementSibling.src;
document.getElementById("faveLinkImage").src = src;
}
}
}
const customIconFieldManager = (eve) => {
let isChecked = document.getElementById('customIconChkBx').checked;
if (isChecked) {
let target = eve.target;
const src = target.value.trim();
document.getElementById("faveLinkImage").src = src;
document.getElementsByName("customFaveIconImg")[0].src = src;
}
}
const generateBackgroundDirectoryElm = (bgDirsList, name, path) => {
let pthTxt = document.createTextNode(name);
let liElm = document.createElement('LI');
let spnElm = document.createElement('SPAN');
let spnElm2 = document.createElement('SPAN');
liElm.className = "list-group-item";
liElm.setAttribute('title', path);
liElm.setAttribute('class', "list-group-item");
spnElm2.setAttribute('class', "badge badge-danger label-as-badge");
spnElm2.setAttribute('value', path);
spnElm2.addEventListener("click", eve => {
removeBgFolder(eve.target);
});
spnElm2.innerText = "X";
spnElm.appendChild(pthTxt);
liElm.appendChild(spnElm);
liElm.appendChild(spnElm2);
bgDirsList.appendChild(liElm);
}
const getHackerNews = async () => {
const response = await fetch("https://hacker-news.firebaseio.com/v0/beststories.json");
const ids = await response.json();
let table = document.getElementById("hackerNewsTable");
let arrySize = ids.length;
let j = 1;
for (var i = 0; i < arrySize; i++) {
let artJSON = "https://hacker-news.firebaseio.com/v0/item/" + ids[i] + ".json";
generateNewsElm(table, artJSON, j);
j++;
}
}
const generateNewsElm = async (table, artJSON, j) => {
const response = await fetch(artJSON);
const article = await response.json();
let trItem = document.createElement("TR");
let tdItemNumber = document.createElement("TD");
let tdItemLink = document.createElement("TD");
let anchorItem = document.createElement("A");
let numberText = document.createTextNode(j);
let titleText = document.createTextNode(article["title"]);
anchorItem.href = article["url"];
anchorItem.target = "_blank";
anchorItem.appendChild(titleText);
tdItemNumber.appendChild(numberText);
tdItemLink.appendChild(anchorItem);
trItem.setAttribute("scope", "row");
trItem.appendChild(tdItemNumber);
trItem.appendChild(tdItemLink);
table.appendChild(trItem);
}
// Message handler // Message handler
const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => { const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => {
@ -257,13 +211,13 @@ const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") =
let spnElm = document.createElement("SPAN"); let spnElm = document.createElement("SPAN");
let textElm = document.createTextNode(message); let textElm = document.createTextNode(message);
divElm.setAttribute("class", "alert alert-" + type); divElm.setAttribute("class", "alert alert-dismissible fade show alert-" + type);
divElm.setAttribute("role", "alert"); divElm.setAttribute("role", "alert");
divElm.appendChild(textElm); divElm.appendChild(textElm);
btnElm.type = "button"; btnElm.type = "button";
textElm = document.createTextNode("X"); textElm = document.createTextNode("X");
btnElm.setAttribute("class", "close"); btnElm.setAttribute("class", "btn-dark btn-close");
btnElm.setAttribute("data-dismiss", "alert"); btnElm.setAttribute("data-bs-dismiss", "alert");
btnElm.setAttribute("aria-label", "close"); btnElm.setAttribute("aria-label", "close");
spnElm.setAttribute("aria-hidden", "true"); spnElm.setAttribute("aria-hidden", "true");
spnElm.appendChild(textElm); spnElm.appendChild(textElm);
@ -283,3 +237,35 @@ const clearChildNodes = (parent) => {
parent.removeChild(parent.firstChild); parent.removeChild(parent.firstChild);
} }
} }
// Cache Buster
const clearCache = () => {
const rep = /.*\?.*/;
let links = document.getElementsByTagName('link'),
scripts = document.getElementsByTagName('script'),
video = document.getElementsByTagName('video'),
process_scripts = false;
for (let i = 0; i < links.length; i++) {
let link = links[i],
href = link.href;
if(rep.test(href)) {
link.href = href + '&' + Date.now();
} else {
link.href = href + '?' + Date.now();
}
}
if(process_scripts) {
for (let i = 0; i < scripts.length; i++) {
let script = scripts[i],
src = script.src;
if(rep.test(src)) {
script.src = src+'&'+Date.now();
} else {
script.src = src+'?'+Date.now();
}
}
}
}

View File

@ -195,6 +195,17 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
videoDuration.innerText = getTimeFormatted(video.currentTime); videoDuration.innerText = getTimeFormatted(video.currentTime);
}); });
// $( "#video" ).bind( "ended", async function(eve) {
// alert("Hello...")
// // let videoDuration = document.getElementById("videoCurrentTime");
// // const video = eve.target;
// // const seekto = document.getElementById("seek-slider");
// // const vt = video.currentTime * (100 / video.duration);
// //
// // seekto.value = vt;
// // videoDuration.innerText = getTimeFormatted(video.currentTime);
// });
$( "#seek-slider" ).bind( "change", async function(eve) { $( "#seek-slider" ).bind( "change", async function(eve) {
const slider = eve.target; const slider = eve.target;
let video = document.getElementById("video"); let video = document.getElementById("video");

View File

@ -1,20 +1,21 @@
{% if current_directory %} {% if current_directory %}
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center fixed-bottom"> <nav class="navbar navbar-dark bg-dark navbar-expand-lg justify-content-center text-center fixed-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" <div class="container-fluid">
data-target="#navbarTogglerFooter" aria-controls="navbarTogglerFooter" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerFooter"
aria-expanded="false" aria-label="Toggle Footer Navigation"> aria-controls="navbarTogglerFooter" aria-expanded="false" aria-label="Toggle Footer Navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="navbarTogglerFooter" class="row collapse navbar-collapse"> <div id="navbarTogglerFooter" class="row collapse navbar-collapse">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item mr-2"> <li class="nav-item mr-2">
<span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >&#9734;</span> <span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >&#9734;</span>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<span id="path">{{current_directory}}</span> <span id="path">{{current_directory}}</span>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</nav> </nav>
{% endif %} {% endif %}

View File

@ -1,82 +1,86 @@
<nav class="container navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center sticky-top"> <nav class="container navbar navbar-expand-sm bg-dark navbar-dark justify-content-center text-center sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader" data-bs-target="#navbarTogglerHeader" aria-controls="navbarTogglerHeader"
aria-expanded="false" aria-label="Toggle Header Navigation"> aria-expanded="false" aria-label="Toggle Header Navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="navbarTogglerHeader" class="row collapse navbar-collapse"> <div id="navbarTogglerHeader" class="row collapse navbar-collapse">
{% if current_directory %} {% if current_directory %}
<!-- Left menues --> <div class="col">
<ul class="navbar-nav"> <!-- Left menues -->
<li class="nav-item" data-toggle="modal" data-target="#file-view-modal"> <ul class="navbar-nav">
<i class="nav-link" aria-hidden="true" title="File viewer..." > <li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
🖼 <i class="nav-link" aria-hidden="true" title="File viewer..." >
</i> 🖼
</li> </i>
<li class="nav-item"> </li>
<div class="input-group"> <li class="nav-item">
<input id="search-files-field" type="text" class="form-control" <div class="input-group">
aria-label="Search..." placeholder="Search..." style="max-width: 260px"> <input id="search-files-field" type="text" class="form-control"
<div class="input-group-prepend"> aria-label="Search..." placeholder="Search..." style="max-width: 260px">
<span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span> <div class="input-group-prepend">
<span id="clear-search-btn" class="input-group-text" title="Clears search...">X</span>
</div>
</div> </div>
</div> </li>
</li> <li class="nav-item" data-bs-toggle="modal" data-bs-target="#favorites-modal">
<li class="nav-item" data-toggle="modal" data-target="#favorites-modal"> <i class="nav-link" aria-hidden="true" title="Faves list..." >
<i class="nav-link" aria-hidden="true" title="Faves list..." > Faves List
Faves List &#8597; </i>
</i> </li>
</li> <li class="nav-item">
<li class="nav-item"> <i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
<i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." > Scroll To Top
Scroll Files To Top </i>
</i> </li>
</li> </ul>
</ul> </div>
{% endif %} {% endif %}
<!-- Right menues --> <div class="col col-auto">
<ul class="navbar-nav ml-auto"> <!-- Right menues -->
{% if current_directory %} <ul class="navbar-nav">
<li class="nav-item"> {% if current_directory %}
<i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}"> <li class="nav-item">
Back <i id="back-btn" class="fa fa-arrow-left nav-link" aria-hidden="true" title="Back..." hash="{{dot_dots[1][1]}}">
Back
</i>
</li>
<li class="nav-item">
<i id="refresh-btn" class="fa fa-refresh nav-link" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}">
Refresh
</i>
</li>
{% endif %}
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#options-modal">
<i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
Settings
</i> </i>
</li> </li>
<li class="nav-item"> {% if current_user.is_authenticated or oidc_loggedin() %}
<i id="refresh-btn" class="fa fa-refresh nav-link" aria-hidden="true" title="Refresh..." hash="{{dot_dots[0][1]}}"> <li class="nav-item">
Refresh <a class="nav-link" href="{{ url_for('logout') }}">
</i> <i class="fas fa-sign-out-alt"></i> Logout
</li>
{% endif %}
<li class="nav-item" data-toggle="modal" data-target="#options-modal">
<i class="nav-link fa fa-gear" aria-hidden="true" title="Other options..." >
Settings
</i>
</li>
{% if current_user.is_authenticated or oidc_loggedin() %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logout') }}">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</li>
{% endif %}
{% if not current_user.is_authenticated and not oidc_loggedin() %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Account
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ url_for('login') }}">
<i title="Login" class="fas fa-user"></i>&nbsp;&nbsp;Login
</a> </a>
<a class="dropdown-item" href="{{ url_for('register') }}"> </li>
<i title="Register A User..." class="fas fa-user-plus"></i>&nbsp;&nbsp;Register {% endif %}
{% if not current_user.is_authenticated and not oidc_loggedin() %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
Account
</a> </a>
</div> <div class="dropdown-menu">
</li> <a class="dropdown-item" href="{{ url_for('login') }}">
{% endif %} <i title="Login" class="fas fa-user"></i>&nbsp;&nbsp;Login
</ul> </a>
<a class="dropdown-item" href="{{ url_for('register') }}">
<i title="Register A User..." class="fas fa-user-plus"></i>&nbsp;&nbsp;Register
</a>
</div>
</li>
{% endif %}
</ul>
</div>
</div> </div>
</nav> </nav>

View File

@ -20,7 +20,7 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-datepicker.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/mdb.dark.min.css')}}">
<!-- Font Awesome CSS Notes --> <!-- Font Awesome CSS Notes -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> --> <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> -->
@ -99,19 +99,18 @@
{% block body_scripts %} {% block body_scripts %}
<!-- For internal scripts... -->
<script src="{{ url_for('static', filename='js/libs/jquery-3.6.0.min.js')}}"></script>
<!-- For Bootstrap in this exact order... --> <!-- For Bootstrap in this exact order... -->
<script src="{{ url_for('static', filename='js/libs/bootstrap/jquery-3.3.1.slim.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/bootstrap/popper.min.js')}}"></script> <script src="{{ url_for('static', filename='js/libs/bootstrap/popper.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap.min.js')}}"></script> <script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/bootstrap/mdb.min.js')}}"></script>
<!-- For DatePicker -->
<script src="{{ url_for('static', filename='js/libs/bootstrap/moment.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap-datepicker.min.js')}}"></script>
<!-- For React --> <!-- For React -->
<script src="{{ url_for('static', filename='js/libs/react/react.production.min.js')}}"></script> <script src="{{ url_for('static', filename='js/libs/react/react.production.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min.js')}}"></script> <script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/libs/react/babel.min.js')}}"></script> <script src="{{ url_for('static', filename='js/libs/babel.min.js')}}"></script>
<!-- Application Imports --> <!-- Application Imports -->
{% block body_scripts_additional %} {% block body_scripts_additional %}

View File

@ -5,7 +5,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3>Favorites:</h3> <h3>Favorites:</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
@ -20,7 +20,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button> <button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3>File Viewer:</h3> <span id="selectedFile"></span> <h3>File Viewer:</h3> <span id="selectedFile"></span>
<button onclick="closeFile()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button> <button onclick="closeFile()" type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
</div> </div>
<div class="modal-body text-center justify-content-center"> <div class="modal-body text-center justify-content-center">
@ -25,7 +25,7 @@
<div id="video-controls"> <div id="video-controls">
<div class="row pl-5 pr-5"> <div class="row pl-5 pr-5">
<div class="col-md-8"> <div class="col-md-8">
<input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/> <input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<span id="videoCurrentTime"></span> <span id="videoCurrentTime"></span>

View File

@ -5,7 +5,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3>Settings:</h3> <h3>Settings:</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
@ -16,7 +16,7 @@
<!-- <center> <!-- <center>
<form> <form>
<input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple /> <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-bs-multiple-caption="{count} files selected" multiple />
<input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" /> <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
<input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;"> <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
<input type="text" id="DIRPATHUL" name="DIRPATHUL" value=""> <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
@ -36,7 +36,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button> <button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
</div> </div>
</div> </div>
</div> </div>