ethiele/videoplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Änderung Controller

Browse Source
This commit is contained in:
Erik Thiele
2026-05-27 23:08:12 +02:00
parent 08b57d447f
commit 186b778051
3 changed files with 115 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app.py
View File

@@ -1,6 +1,7 @@
from __future__ import annotations
import os
import time
from pathlib import Path
from flask import Flask, abort, jsonify, redirect, render_template, request, send_from_directory, url_for
@@ -17,6 +18,17 @@ ALLOWED_EXTENSIONS = {
app = Flask(__name__)
app.config["UPLOAD_FOLDER"] = str(UPLOAD_DIR)
APP_VERSION = "1.0.0"
@app.context_processor
def inject_globals():
return {
"app_year": time.localtime().tm_year,
"app_version": APP_VERSION,
"app_host": request.host.split(":")[0],
}
# ── Player State ──────────────────────────────────────────────────────
player_state = {
@@ -27,6 +39,9 @@ player_state = {
"volume": 1.0,
}
_display_last_seen = 0.0
DISPLAY_TIMEOUT = 8
def _bump():
player_state["version"] += 1
@@ -102,7 +117,9 @@ def controller():
# ── Player API ────────────────────────────────────────────────────────
@app.route("/api/state")
def api_state():
return jsonify(player_state)
resp = dict(player_state)
resp["display_online"] = (time.time() - _display_last_seen) < DISPLAY_TIMEOUT
return jsonify(resp)
@app.route("/api/play", methods=["POST"])
@@ -179,6 +196,13 @@ def api_seek_ack():
return jsonify({"ok": True})
@app.route("/api/display/ping", methods=["POST"])
def api_display_ping():
global _display_last_seen
_display_last_seen = time.time()
return jsonify({"ok": True})
@app.route("/api/volume", methods=["POST"])
def api_volume():
data = request.get_json(silent=True) or {}

107
templates/controller.html
View File

@@ -150,8 +150,12 @@
color: var(--ccm-text);
}
.media-list .list-group-item.active {
background: var(--ccm-primary);
border-color: var(--ccm-primary);
background: #e9ecef;
border-color: #d9dee3;
}
[data-bs-theme="dark"] .media-list .list-group-item.active {
background: #2b3440;
border-color: #3a4555;
}
.upload-dropzone {
border: 1.5px dashed var(--ccm-border);
@@ -202,9 +206,31 @@
.control-btn {
min-width: 3.2rem;
}
.app-footer {
margin-top: 1rem;
padding: 0.65rem 1.5rem 0.95rem;
color: var(--ccm-muted);
font-size: 0.82rem;
background: transparent;
}
.app-footer-inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.75rem;
justify-content: flex-start;
align-items: center;
text-align: left;
}
.app-footer-separator {
color: #b0b7c3;
}
@media (max-width: 575.98px) {
.control-btn { min-width: 2.8rem; font-size: 0.85rem; }
.control-btn i { font-size: 1.1rem; }
.app-footer-inner { gap: 0.1rem 0.5rem; font-size: 0.75rem; }
}
</style>
</head>
@@ -217,8 +243,8 @@
<span class="navbar-brand-wordmark"><strong>Videoplayer</strong><span>Media Kiosk</span></span>
</a>
<div class="ms-auto d-flex align-items-center gap-2 flex-wrap justify-content-end">
<button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i><span>Theme</span></button>
<div class="topbar-metric"><i class="ti ti-circle-check-filled"></i><span>Online</span></div>
<button type="button" class="topbar-metric theme-toggle" id="theme-toggle" aria-label="Theme wechseln"><i class="ti ti-moon-stars"></i></button>
<div class="topbar-metric" id="online-indicator"><i class="ti ti-circle-check-filled"></i><span id="online-label">Online</span></div>
<div class="topbar-metric"><i class="ti ti-device-tv"></i><span id="host-label">{{ request.host }}</span></div>
<div class="topbar-metric"><i class="ti ti-clock-hour-4"></i><span id="clock-label">--:--</span></div>
</div>
@@ -268,7 +294,7 @@
</div>
<!-- Media Library -->
<div class="card shadow-sm">
<div class="card shadow-sm mb-3">
<div class="card-header">
<div class="d-flex align-items-center gap-2">
<span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-photo-scan"></i></span>
@@ -276,7 +302,31 @@
</div>
</div>
<div class="card-body">
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data" class="mb-3">
<div class="mb-2 fw-medium">Dateien</div>
<div class="list-group media-list" id="media-list">
{% for item in items %}
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
<span class="text-truncate" style="min-width:0">{{ item.name }}</span>
<span class="ms-auto d-flex align-items-center gap-1 flex-shrink-0">
<span class="badge bg-secondary-lt text-secondary">{{ item.kind }}</span>
<i class="ti ti-trash text-danger" style="cursor:pointer;font-size:1.05rem" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen"></i>
</span>
</button>
{% endfor %}
</div>
</div>
</div>
<!-- Upload -->
<div class="card shadow-sm mb-3">
<div class="card-header">
<div class="d-flex align-items-center gap-2">
<span class="avatar avatar-sm" style="background: var(--tblr-primary); color: #fff;"><i class="ti ti-cloud-upload"></i></span>
<h3 class="card-title mb-0">Dateien hochladen</h3>
</div>
</div>
<div class="card-body">
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
<input id="file-input" class="d-none" type="file" name="files" multiple accept="video/*,audio/*,image/*">
<div id="dropzone" class="upload-dropzone mb-2">
<div class="mb-1"><i class="ti ti-cloud-upload fs-2"></i></div>
@@ -287,33 +337,33 @@
<button type="submit" class="btn btn-primary"><i class="ti ti-upload me-1"></i>Hochladen</button>
</div>
</form>
</div>
</div>
<div class="mb-2 fw-medium">Dateien</div>
<div class="list-group media-list" id="media-list">
{% for item in items %}
<button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-name="{{ item.name }}" data-kind="{{ item.kind }}">
<span class="text-truncate me-2">{{ item.name }}</span>
<span>
<span class="badge bg-secondary-lt text-secondary me-2">{{ item.kind }}</span>
<button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" onclick="event.stopPropagation(); apiDelete('{{ item.name }}')" title="Löschen">
<i class="ti ti-trash"></i>
</button>
</span>
</button>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="app-footer">
<div class="app-footer-inner">
<span>Videoplayer Media Kiosk</span>
<span class="app-footer-separator">|</span>
<span>&copy; {{ app_year }} CANCOM GmbH</span>
<span class="app-footer-separator">|</span>
<span>Version {{ app_version }}</span>
<span class="app-footer-separator">|</span>
<span>Host {{ app_host }}</span>
</div>
</footer>
<script>
const clockLabel = document.getElementById('clock-label');
const themeToggle = document.getElementById('theme-toggle');
const nowPlaying = document.getElementById('now-playing');
const playStatus = document.getElementById('play-status');
const onlineIndicator = document.getElementById('online-indicator');
const onlineLabel = document.getElementById('online-label');
const volumeSlider = document.getElementById('volume-slider');
const volumeLabel = document.getElementById('volume-label');
const fileInput = document.getElementById('file-input');
@@ -378,6 +428,17 @@
clearHighlight();
}
updateVolume(state.volume);
updateOnline(state.display_online);
}
function updateOnline(online) {
if (online) {
onlineLabel.textContent = 'Online';
onlineIndicator.style.opacity = '1';
} else {
onlineLabel.textContent = 'Offline';
onlineIndicator.style.opacity = '0.5';
}
}
async function pollState() {
@@ -461,8 +522,8 @@
function updateThemeToggle() {
const theme = document.documentElement.getAttribute('data-bs-theme');
themeToggle.innerHTML = theme === 'dark'
? '<i class="ti ti-sun-high"></i><span>Theme</span>'
: '<i class="ti ti-moon-stars"></i><span>Theme</span>';
? '<i class="ti ti-sun-high"></i>'
: '<i class="ti ti-moon-stars"></i>';
}
function toggleTheme() {

6
templates/display.html
View File

@@ -172,9 +172,15 @@
} catch (_) {}
}
function heartbeat() {
fetch('/api/display/ping', { method: 'POST' }).catch(() => {});
}
window.addEventListener('load', () => {
poll();
heartbeat();
setInterval(poll, 1500);
setInterval(heartbeat, 5000);
});
</script>
</body>