78 lines
3.8 KiB
HTML
78 lines
3.8 KiB
HTML
|
<!-- 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>
|