286 lines
13 KiB
HTML
286 lines
13 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block body_header_additional %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')}}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/overrides.css')}}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-table.min.css')}}">
|
|
{% endblock body_header_additional%}
|
|
|
|
|
|
|
|
{% block body_content %}
|
|
<div class="row sticky-top">
|
|
<div class="col">
|
|
<!-- Server messages -->
|
|
<div class="row">
|
|
<div id="page-alert-zone" class="col">
|
|
</div>
|
|
</div>
|
|
<!-- Controls -->
|
|
<div class="row">
|
|
<div class="col text-center justify-content-center">
|
|
|
|
<div class="input-group input-group-sm justify-content-center">
|
|
<button title="Other Options..." class="btn btn-secondary btn-sm"
|
|
data-toggle="modal" data-target="#options-modal">⚙</button>
|
|
<button title="Refresh..." id="refresh-btn" class="btn btn-sm btn-secondary" hash="{{dHash}}">↻</button>
|
|
<button title="Back..." id="back-btn" class="btn btn-sm btn-secondary" hash="{{ddHash}}">⇐</button>
|
|
|
|
<input id="search-files-field" type="text" class="form-control"
|
|
aria-label="Search..." placeholder="Search..." style="max-width: 260px">
|
|
<div class="input-group-prepend">
|
|
<!-- <button title="Clears search..." id="clear-search-btn" class="btn btn-sm btn-secondary">X</button> -->
|
|
<span id="clear-search-btn" class="input-group-text" title="Clears search..." >X</span>
|
|
</div>
|
|
|
|
<button title="File viewer..." class="btn btn-secondary btn-sm"
|
|
data-toggle="modal" data-target="#file-view-modal">🖼</button>
|
|
{% if oidc_loggedin() %}
|
|
<a href="/logout">
|
|
<button title="Logout..." class="btn btn-danger btn-sm">
|
|
Logout
|
|
</button>
|
|
</a>
|
|
{% else %}
|
|
<a href="/login">
|
|
<button title="Login..." class="btn btn-success btn-sm">
|
|
Login
|
|
</button>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="row text-center justify-content-center">
|
|
<div class="col-auto">
|
|
<button class="btn btn-sm btn-secondary" data-toggle="modal"
|
|
data-target="#favorites-modal">Faves List ↕</button>
|
|
<button id="tggl-faves-btn" class="btn btn-sm btn-secondary" title="Add/Delete from favorites..." >☆</button>
|
|
<button id="lock-folders-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >🔒</button>
|
|
<button id="scroll-files-to-top-btn" class="btn btn-sm btn-secondary" title="Lock unlocked folders..." >Scroll Files To Top</button>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h3 id="path" ></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<ul id="file-grid" class="scroller">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Favorites modal -->
|
|
<div class="modal fade" id="favorites-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Favorites:</h3>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col scroller" style="max-height: 30em; overflow: auto;">
|
|
<ul id="faves-list">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File viewer modal -->
|
|
<div class="modal fade" id="file-view-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>File Viewer:</h3>
|
|
<button type="button" onclick="pauseVideo()" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body text-center justify-content-center">
|
|
<div class="row">
|
|
<div class="col scroller" style="max-height: 70vh; overflow: auto;">
|
|
<!-- For video -->
|
|
<div id="video-container">
|
|
<video id="video-viewer"
|
|
loop
|
|
src=""
|
|
autoplay=""
|
|
volume="0.75"
|
|
poster="{{ url_for('static', filename='imgs/icons/loading.gif')}}"
|
|
onmousemove="showControls()">
|
|
</video>
|
|
|
|
<div id="video-controls">
|
|
<div class="row pl-5 pr-5">
|
|
<div class="col-md-8">
|
|
<input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<span id="videoCurrentTime"></span>
|
|
/
|
|
<span id="videoDuration"></span>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<span id="volumeIcon" onclick="toggleVolumeControl()">🔈</span>
|
|
<input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
|
|
type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- For image -->
|
|
<img id="image-viewer"
|
|
style="width: inherit; height: auto; display: none;"
|
|
src="" alt="" />
|
|
|
|
<!-- For pdf -->
|
|
<iframe id="pdf-viewer"
|
|
src=""
|
|
width="720" height="460"
|
|
style="display: none;"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen="allowfullscreen"
|
|
mozallowfullscreen="mozallowfullscreen"
|
|
msallowfullscreen="msallowfullscreen"
|
|
oallowfullscreen="oallowfullscreen"
|
|
webkitallowfullscreen="webkitallowfullscreen">
|
|
</iframe>
|
|
|
|
<!-- For text -->
|
|
<pre id="text-viewer"
|
|
style="width: inherit; height: auto; display: none;">
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button onclick="pauseVideo()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Other Options modal -->
|
|
<div class="modal fade" id="options-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Settings:</h3>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col scroller" style="max-height: 30em; overflow: auto;">
|
|
|
|
<!-- <center>
|
|
<form>
|
|
<input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
|
|
<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="text" id="DIRPATHUL" name="DIRPATHUL" value="">
|
|
</form>
|
|
<br/>
|
|
<input type="text" id="NewItem" value=""/>
|
|
<input type="button" value="New Dir" onclick="createItem('dir')"/>
|
|
<input type="button" value="New File" onclick="createItem('file')"/>
|
|
<input type="button" value="Show Server Messages" onclick="tgglElmView('serverMsgView')"/>
|
|
<br/>
|
|
<input id="MergeType" type="checkbox" onchange="getDir('./')" />
|
|
<label for="MergeType">Show seassons in same list.</label>
|
|
</center> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Templates -->
|
|
<template id="dirTemplate">
|
|
<li class="dir-style" tabindex="1" style="background-image: url('')" hash="">
|
|
<input class="dir-title" type="text" value="" readonly="true" />
|
|
</li>
|
|
</template>
|
|
<template id="vidTemplate">
|
|
<li class="video-style" tabindex="1" style="background-image: url('')" hash="">
|
|
<span class="card-popout-btn" title="Open In Local Program">∽</span>
|
|
<input class="video-title" type="text" value="" readonly="true" />
|
|
</li>
|
|
</template>
|
|
<template id="imgTemplate">
|
|
<li class="image-style" tabindex="1" style="background-image: url('')" hash="">
|
|
</li>
|
|
</template>
|
|
<template id="filTemplate">
|
|
<li class="file-style" style="background-image: url('')" hash="">
|
|
<input class="file-title" type="text" value="" readonly="true" />
|
|
</li>
|
|
</template>
|
|
|
|
<!-- Background -->
|
|
<!-- <img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/000.png')}}" /> -->
|
|
|
|
<video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/particles.mp4')}}"
|
|
poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
|
|
autoplay loop>
|
|
</video>
|
|
|
|
|
|
{% block body_content_additional %}
|
|
{% endblock body_content_additional%}
|
|
{% endblock %}
|
|
|
|
|
|
{% block body_footer_additional %}
|
|
{% endblock body_footer_additional%}
|
|
|
|
|
|
{% block body_scripts_additional %}
|
|
<!-- Table scripts -->
|
|
<script src="{{ url_for('static', filename='js/libs/bootstrap/bootstrap-table.min.js')}}"></script>
|
|
|
|
<!-- Created scripts -->
|
|
<script src="{{ url_for('static', filename='js/libs/js.cookie.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/favorites.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/cookie-manager.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/ajax.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/events.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/video-events.js')}}"></script>
|
|
{% endblock body_scripts_additional %}
|