94 lines
3.0 KiB
HTML
94 lines
3.0 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block title %}
|
|
Screen Recordings
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-8">
|
|
<div class="card shadow mb-5">
|
|
<div class="card-header bg-dark text-white">
|
|
<i class="fas fa-video me-2"></i>Currently Playing
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<video id="video" class="screen-player" controls autoplay>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="mt-3">
|
|
<span class="badge bg-secondary">
|
|
<i class="fas fa-eye me-2"></i>
|
|
<span id="mycurrentview"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<a href="/screenrecords/download/{{ clip }}" class="btn btn-danger btn-sm">
|
|
<i class="fas fa-download me-2"></i>Download Current Recording
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<i class="fas fa-list-ul me-2"></i>Available Recordings
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group">
|
|
{% for row in rows %}
|
|
<a href="/screenrecords/{{ row[0] }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fas fa-file-video me-3 text-primary"></i>
|
|
{{ row[0]|replace('.mp4', '')|replace('_', ' ') }}
|
|
</div>
|
|
<div class="text-end">
|
|
<small class="text-muted d-block">
|
|
{{ row[0]|datetimeformat }}
|
|
</small>
|
|
<small class="text-muted">
|
|
{{ (row[1] / 1024 / 1024)|round(2) }} MB
|
|
</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.screen-player {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 640px;
|
|
border-radius: 10px;
|
|
background: #000;
|
|
border: 3px solid #dee2e6;
|
|
}
|
|
|
|
.list-group-item {
|
|
transition: all 0.2s;
|
|
margin: 2px 0;
|
|
border-radius: 5px!important;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
transform: translateX(5px);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const video = document.getElementById("video");
|
|
video.src = "/screenrecords/play/pipe/{{ clip }}";
|
|
document.getElementById("mycurrentview").textContent = "{{ clip }}".replace('.mp4', '');
|
|
|
|
video.addEventListener('play', () => {
|
|
video.style.maxWidth = '100%';
|
|
video.style.height = 'auto';
|
|
});
|
|
</script>
|
|
{% endblock %} |