erster Upload
This commit is contained in:
Erik Thiele
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
venv/
|
||||
__pycache__/
|
||||
test*
|
||||
*.old
|
||||
.venv/
|
||||
.DS_Store
|
||||
.vscode
|
||||
uploads
|
||||
12
Dockerfile
Normal file
12
Dockerfile
Normal file
@@ -0,0 +1,12 @@
|
||||
FROM python:3.12-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 5008
|
||||
|
||||
CMD ["python", "app.py"]
|
||||
250
app.py
Normal file
250
app.py
Normal file
@@ -0,0 +1,250 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from flask import Flask, abort, jsonify, redirect, render_template, request, send_from_directory, url_for
|
||||
from werkzeug.utils import secure_filename
|
||||
|
||||
|
||||
BASE_DIR = Path(__file__).resolve().parent
|
||||
UPLOAD_DIR = Path(os.environ.get("UPLOAD_DIR", str(BASE_DIR / "uploads")))
|
||||
UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
ALLOWED_EXTENSIONS = {
|
||||
"mp4", "webm", "ogg", "mp3", "wav", "m4a", "jpg", "jpeg", "png", "gif",
|
||||
}
|
||||
|
||||
app = Flask(__name__)
|
||||
app.config["UPLOAD_FOLDER"] = str(UPLOAD_DIR)
|
||||
|
||||
# ── Player State ──────────────────────────────────────────────────────
|
||||
player_state = {
|
||||
"version": 0,
|
||||
"current": None,
|
||||
"playing": False,
|
||||
"seek": 0,
|
||||
"volume": 1.0,
|
||||
}
|
||||
|
||||
|
||||
def _bump():
|
||||
player_state["version"] += 1
|
||||
|
||||
|
||||
def _set_current(name: str, kind: str):
|
||||
player_state["current"] = {"name": name, "kind": kind}
|
||||
|
||||
|
||||
def _clear_seek():
|
||||
player_state["seek"] = 0
|
||||
|
||||
|
||||
def _reset_seek():
|
||||
player_state["seek"] = 0
|
||||
|
||||
|
||||
# ── Helpers ───────────────────────────────────────────────────────────
|
||||
def allowed_file(filename: str) -> bool:
|
||||
return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
|
||||
|
||||
|
||||
def _kind_from_suffix(suffix: str) -> str:
|
||||
suffix = suffix.lower()
|
||||
if suffix in {"mp4", "webm", "ogg"}:
|
||||
return "video"
|
||||
if suffix in {"mp3", "wav", "m4a"}:
|
||||
return "audio"
|
||||
return "image"
|
||||
|
||||
|
||||
def media_items() -> list[dict[str, str]]:
|
||||
items: list[dict[str, str]] = []
|
||||
for entry in sorted(UPLOAD_DIR.iterdir(), key=lambda p: p.name.lower()):
|
||||
if entry.is_file() and allowed_file(entry.name):
|
||||
suffix = entry.suffix.lower().lstrip(".")
|
||||
items.append({"name": entry.name, "kind": _kind_from_suffix(suffix)})
|
||||
return items
|
||||
|
||||
|
||||
def _next_item(name: str) -> dict | None:
|
||||
items = media_items()
|
||||
for i, item in enumerate(items):
|
||||
if item["name"] == name:
|
||||
return items[(i + 1) % len(items)]
|
||||
return items[0] if items else None
|
||||
|
||||
|
||||
def _prev_item(name: str) -> dict | None:
|
||||
items = media_items()
|
||||
for i, item in enumerate(items):
|
||||
if item["name"] == name:
|
||||
return items[(i - 1) % len(items)]
|
||||
return items[-1] if items else None
|
||||
|
||||
|
||||
# ── Page Routes ───────────────────────────────────────────────────────
|
||||
@app.route("/")
|
||||
def index():
|
||||
return redirect(url_for("controller"))
|
||||
|
||||
|
||||
@app.route("/display")
|
||||
def display():
|
||||
return render_template("display.html")
|
||||
|
||||
|
||||
@app.route("/controller")
|
||||
def controller():
|
||||
return render_template("controller.html", items=media_items())
|
||||
|
||||
|
||||
# ── Player API ────────────────────────────────────────────────────────
|
||||
@app.route("/api/state")
|
||||
def api_state():
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/play", methods=["POST"])
|
||||
def api_play():
|
||||
data = request.get_json(silent=True) or {}
|
||||
name = data.get("name")
|
||||
if name:
|
||||
items = media_items()
|
||||
match = next((i for i in items if i["name"] == name), None)
|
||||
if not match:
|
||||
return jsonify({"error": "not found"}), 404
|
||||
_set_current(match["name"], match["kind"])
|
||||
_clear_seek()
|
||||
player_state["playing"] = True
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/stop", methods=["POST"])
|
||||
def api_stop():
|
||||
_clear_seek()
|
||||
player_state["playing"] = False
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/next", methods=["POST"])
|
||||
def api_next():
|
||||
current = player_state["current"]
|
||||
if current:
|
||||
nxt = _next_item(current["name"])
|
||||
if nxt:
|
||||
_set_current(nxt["name"], nxt["kind"])
|
||||
else:
|
||||
items = media_items()
|
||||
if items:
|
||||
_set_current(items[0]["name"], items[0]["kind"])
|
||||
_clear_seek()
|
||||
player_state["playing"] = True
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/prev", methods=["POST"])
|
||||
def api_prev():
|
||||
current = player_state["current"]
|
||||
if current:
|
||||
prv = _prev_item(current["name"])
|
||||
if prv:
|
||||
_set_current(prv["name"], prv["kind"])
|
||||
else:
|
||||
items = media_items()
|
||||
if items:
|
||||
_set_current(items[-1]["name"], items[-1]["kind"])
|
||||
_clear_seek()
|
||||
player_state["playing"] = True
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/seek", methods=["POST"])
|
||||
def api_seek():
|
||||
data = request.get_json(silent=True) or {}
|
||||
seconds = data.get("seconds", 0)
|
||||
player_state["seek"] = seconds
|
||||
player_state["playing"] = True
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
@app.route("/api/seek-ack", methods=["POST"])
|
||||
def api_seek_ack():
|
||||
player_state["seek"] = 0
|
||||
return jsonify({"ok": True})
|
||||
|
||||
|
||||
@app.route("/api/volume", methods=["POST"])
|
||||
def api_volume():
|
||||
data = request.get_json(silent=True) or {}
|
||||
vol = float(data.get("volume", 1.0))
|
||||
vol = max(0.0, min(1.0, vol))
|
||||
player_state["volume"] = vol
|
||||
_bump()
|
||||
return jsonify(player_state)
|
||||
|
||||
|
||||
# ── Upload / Media / Delete ───────────────────────────────────────────
|
||||
@app.route("/api/media", methods=["GET"])
|
||||
def api_media():
|
||||
return jsonify(media_items())
|
||||
|
||||
|
||||
@app.route("/upload", methods=["POST"])
|
||||
def upload():
|
||||
files = request.files.getlist("files")
|
||||
if not files:
|
||||
return redirect(url_for("controller"))
|
||||
for file in files:
|
||||
if not file.filename:
|
||||
continue
|
||||
if not allowed_file(file.filename):
|
||||
continue
|
||||
filename = secure_filename(file.filename)
|
||||
file.save(UPLOAD_DIR / filename)
|
||||
return redirect(url_for("controller"))
|
||||
|
||||
|
||||
@app.route("/media/<path:filename>")
|
||||
def media(filename: str):
|
||||
if not allowed_file(filename):
|
||||
abort(404)
|
||||
return send_from_directory(app.config["UPLOAD_FOLDER"], filename)
|
||||
|
||||
|
||||
@app.route("/api/state/media", methods=["GET"])
|
||||
def api_state_media():
|
||||
if player_state["current"]:
|
||||
name = player_state["current"]["name"]
|
||||
if not allowed_file(name):
|
||||
abort(404)
|
||||
return send_from_directory(app.config["UPLOAD_FOLDER"], name)
|
||||
abort(404)
|
||||
|
||||
|
||||
@app.route("/delete/<path:filename>", methods=["POST"])
|
||||
def delete(filename: str):
|
||||
if not allowed_file(filename):
|
||||
abort(404)
|
||||
path = UPLOAD_DIR / filename
|
||||
if path.exists():
|
||||
path.unlink()
|
||||
if player_state["current"] and player_state["current"]["name"] == filename:
|
||||
player_state["current"] = None
|
||||
player_state["playing"] = False
|
||||
_clear_seek()
|
||||
_bump()
|
||||
return redirect(url_for("controller"))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(
|
||||
host="0.0.0.0",
|
||||
port=int(os.environ.get("PORT", "5008")),
|
||||
debug=True,
|
||||
)
|
||||
13
docker-compose.yml
Normal file
13
docker-compose.yml
Normal file
@@ -0,0 +1,13 @@
|
||||
|
||||
services:
|
||||
videoplayer:
|
||||
container_name: videoplayer
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
platforms:
|
||||
- linux/amd64
|
||||
image: gitea.teamthiele.de/ethiele/videoplayer:latest
|
||||
ports:
|
||||
- "5008:5008"
|
||||
restart: unless-stopped
|
||||
1
requirements.txt
Normal file
1
requirements.txt
Normal file
@@ -0,0 +1 @@
|
||||
Flask>=3.0,<4.0
|
||||
6993
session-ses_1afb.md
Normal file
6993
session-ses_1afb.md
Normal file
File diff suppressed because one or more lines are too long
4
static/cancom.svg
Executable file
4
static/cancom.svg
Executable file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0"?>
|
||||
<!-- Created with xTool Creative Space (https://www.xtool.com/pages/software) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xcs="https://www.xtool.com/pages/software" version="1.1" preserveAspectRatio="xMinYMin meet" width="61.682394106284505mm" height="9.909010347638684mm" viewBox="136.55880294685778 209.2954948261807 61.682394106284505 9.909010347638684" xcs:version="2.7.22"><style></style>
|
||||
<path transform="matrix(0.158038,0,0,0.158038,133.2558,163.322122)" stroke="none" fill="#ffffff" data-view-type="laser" d="M125.9,352.1h18.9L119,291.7h-16.2l-25,60.4h18.2l14.6-38.9L125.9,352.1z M323.6,322 c0,8.8-6.1,16.4-15.4,16.4c-9.1,0-15.4-7.6-15.4-16.4s6.1-16.4,15.2-16.4C317,305.6,323.6,313.4,323.6,322 M340.5,322.3 c0-17.4-13.4-31.3-32.3-31.3c-18.7,0-32.3,14.1-32.3,31.3c0,17.4,13.4,31.3,32.3,31.3C326.9,353.6,340.5,339.4,340.5,322.3 M230.4,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.2,0-31.6,14.1-31.6,31.3 c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C236.5,338.4,230.4,331.4,230.4,322.5 M38,322.5c0-8.8,6.1-16.4,14.9-16.4c3,0,5.8,0.8,8.1,2l6.6-13.4c-3-2-8.1-3.8-14.9-3.8c-18.4,0-31.8,14.1-31.8,31.3 c0,18.2,12.6,31.1,31.6,31.1c17.2,0,26-10.6,28.8-21l-13.6-5.6c-1.8,5.8-6.3,11.6-14.4,11.6C44,338.4,38,331.4,38,322.5 M191.8,352.1h14.4v-59.8H190v33.1l-25-33.1h-15.4v60.1h16.2v-34.1L191.8,352.1z M411.2,352.1v-59.8h-17.7l-14.4,23.2l-14.4-23.2 h-17.7v60.1h16.4V318l15.4,23.2h0.3l15.4-23.5v34.6L411.2,352.1L411.2,352.1z" fill-rule="nonzero"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/favicon.ico
Executable file
BIN
static/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
494
templates/controller.html
Normal file
494
templates/controller.html
Normal file
@@ -0,0 +1,494 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Videoplayer – Steuerung</title>
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||||
<script>
|
||||
(() => {
|
||||
const storedTheme = window.localStorage.getItem('keyadmin-theme');
|
||||
const theme = storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : 'dark';
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--ccm-bg: #f4f6f8;
|
||||
--ccm-text: #212121;
|
||||
--ccm-primary: #da002d;
|
||||
--ccm-primary-hover: #b00024;
|
||||
--ccm-header: #2b2f36;
|
||||
--ccm-surface: #ffffff;
|
||||
--ccm-border: #d9dee3;
|
||||
--ccm-muted: #6b7280;
|
||||
--tblr-primary: var(--ccm-primary);
|
||||
--tblr-primary-rgb: 218, 0, 45;
|
||||
--tblr-success: var(--ccm-primary);
|
||||
--tblr-success-rgb: 218, 0, 45;
|
||||
}
|
||||
body {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
.page { min-height: 100vh; }
|
||||
.navbar-brand img { display: block; }
|
||||
.navbar-brand-logo {
|
||||
height: 1.3rem;
|
||||
width: auto;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.06rem;
|
||||
}
|
||||
.navbar-brand-wordmark {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.05;
|
||||
font-size: 0.82rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbar-brand-wordmark strong {
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navbar-brand-wordmark span {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.navbar {
|
||||
background: var(--ccm-header);
|
||||
box-shadow: none;
|
||||
}
|
||||
.topbar {
|
||||
background: var(--ccm-header);
|
||||
border-bottom: 0;
|
||||
}
|
||||
.topbar-main {
|
||||
padding-top: .55rem;
|
||||
padding-bottom: .55rem;
|
||||
}
|
||||
.topbar-metric {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: .45rem .85rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .45rem;
|
||||
color: #ffffff;
|
||||
font-size: .92rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.theme-toggle {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
min-height: 2.4rem;
|
||||
padding: .45rem .85rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.theme-toggle:hover,
|
||||
.theme-toggle:focus {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
[data-bs-theme="dark"] .theme-toggle {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
[data-bs-theme="light"] .theme-toggle {
|
||||
background: #ffffff;
|
||||
border-color: var(--ccm-border);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
[data-bs-theme="light"] .theme-toggle:hover,
|
||||
[data-bs-theme="light"] .theme-toggle:focus {
|
||||
background: #ffffff;
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
.card {
|
||||
border-color: var(--ccm-border);
|
||||
border-radius: 1rem;
|
||||
background: var(--ccm-surface);
|
||||
box-shadow: 0 12px 24px rgba(43, 47, 54, 0.08);
|
||||
}
|
||||
.card-header {
|
||||
background: transparent;
|
||||
border-bottom-color: var(--ccm-border);
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
[data-bs-theme="dark"] .card {
|
||||
background-color: var(--ccm-bg);
|
||||
border-color: var(--ccm-border);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
[data-bs-theme="dark"] .card-header {
|
||||
border-bottom-color: var(--ccm-border);
|
||||
}
|
||||
[data-bs-theme="dark"] {
|
||||
--ccm-bg: #15181d;
|
||||
--ccm-text: #e5e7eb;
|
||||
--ccm-header: #0f1720;
|
||||
--ccm-surface: #15181d;
|
||||
--ccm-border: #2b3440;
|
||||
--ccm-muted: #9aa4b2;
|
||||
}
|
||||
[data-bs-theme="dark"] body {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
.media-list .list-group-item.active {
|
||||
background: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
}
|
||||
.upload-dropzone {
|
||||
border: 1.5px dashed var(--ccm-border);
|
||||
border-radius: 0.85rem;
|
||||
background: var(--ccm-surface);
|
||||
padding: 0.95rem;
|
||||
text-align: center;
|
||||
color: var(--ccm-muted);
|
||||
cursor: pointer;
|
||||
transition: border-color .15s ease, background .15s ease, color .15s ease;
|
||||
user-select: none;
|
||||
}
|
||||
.upload-dropzone.dragover {
|
||||
border-color: var(--ccm-primary);
|
||||
background: rgba(218, 0, 45, 0.06);
|
||||
color: var(--ccm-primary);
|
||||
}
|
||||
[data-bs-theme="dark"] .upload-dropzone {
|
||||
background: #11161d;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
}
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
background-color: var(--ccm-primary-hover);
|
||||
border-color: var(--ccm-primary-hover);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
color: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
}
|
||||
.btn-outline-primary:hover,
|
||||
.btn-outline-primary:focus {
|
||||
background-color: var(--ccm-primary);
|
||||
border-color: var(--ccm-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-outline-danger:hover,
|
||||
.btn-outline-danger:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.status-line { color: var(--ccm-muted); }
|
||||
#now-playing {
|
||||
word-break: break-all;
|
||||
}
|
||||
.control-btn {
|
||||
min-width: 3.2rem;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.control-btn { min-width: 2.8rem; font-size: 0.85rem; }
|
||||
.control-btn i { font-size: 1.1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="navbar sticky-top topbar brand-surface">
|
||||
<div class="container-fluid d-flex align-items-center gap-3 topbar-main flex-wrap">
|
||||
<a class="navbar-brand d-flex align-items-center gap-2 m-0" href="#">
|
||||
<img class="navbar-brand-logo" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid py-3 py-lg-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<!-- Now Playing -->
|
||||
<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-screen-share"></i></span>
|
||||
<h3 class="card-title mb-0">Aktuelle Wiedergabe</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="now-playing" class="fs-5 fw-medium mb-1">–</div>
|
||||
<div id="play-status" class="status-line">Bereit.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<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-player-play"></i></span>
|
||||
<h3 class="card-title mb-0">Steuerung</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2 justify-content-center">
|
||||
<button type="button" class="btn btn-outline-secondary control-btn" onclick="apiPrev()"><i class="ti ti-player-track-prev"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary control-btn" onclick="apiSeek(-10)"><i class="ti ti-rewind-backward-10"></i></button>
|
||||
<button type="button" class="btn btn-primary control-btn" onclick="apiPlay()"><i class="ti ti-player-play"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary control-btn" onclick="apiStop()"><i class="ti ti-player-stop"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary control-btn" onclick="apiSeek(10)"><i class="ti ti-rewind-forward-10"></i></button>
|
||||
<button type="button" class="btn btn-outline-primary control-btn" onclick="apiNext()"><i class="ti ti-player-track-next"></i></button>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2 mt-3">
|
||||
<i class="ti ti-volume"></i>
|
||||
<input type="range" id="volume-slider" class="form-range" min="0" max="100" value="100">
|
||||
<span id="volume-label" class="fw-medium text-nowrap" style="min-width:2.8rem">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Library -->
|
||||
<div class="card shadow-sm">
|
||||
<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>
|
||||
<h3 class="card-title mb-0">Medienbibliothek</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data" class="mb-3">
|
||||
<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>
|
||||
<div>Dateien hier ablegen oder antippen</div>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-outline-primary" id="choose-files"><i class="ti ti-folder-open me-1"></i>Dateien wählen</button>
|
||||
<button type="submit" class="btn btn-primary"><i class="ti ti-upload me-1"></i>Hochladen</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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 volumeSlider = document.getElementById('volume-slider');
|
||||
const volumeLabel = document.getElementById('volume-label');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const uploadForm = document.getElementById('upload-form');
|
||||
const dropzone = document.getElementById('dropzone');
|
||||
const chooseFiles = document.getElementById('choose-files');
|
||||
|
||||
let selectedName = null;
|
||||
|
||||
// ── API calls ──────────────────────────────────────────────────────
|
||||
async function apiCall(method, body = {}) {
|
||||
const res = await fetch(method, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function apiPlay(name) {
|
||||
if (name) {
|
||||
apiCall('/api/play', { name }).then(updateFromState);
|
||||
} else {
|
||||
apiCall('/api/play', {}).then(updateFromState);
|
||||
}
|
||||
}
|
||||
|
||||
function apiStop() {
|
||||
apiCall('/api/stop').then(updateFromState);
|
||||
}
|
||||
|
||||
function apiNext() {
|
||||
apiCall('/api/next').then(updateFromState);
|
||||
}
|
||||
|
||||
function apiPrev() {
|
||||
apiCall('/api/prev').then(updateFromState);
|
||||
}
|
||||
|
||||
function apiSeek(seconds) {
|
||||
apiCall('/api/seek', { seconds }).then(updateFromState);
|
||||
}
|
||||
|
||||
function apiDelete(name) {
|
||||
if (!window.confirm(`Wirklich ${name} löschen?`)) return;
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = `/delete/${encodeURIComponent(name)}`;
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
// ── State handling ─────────────────────────────────────────────────
|
||||
function updateFromState(state) {
|
||||
if (state.current) {
|
||||
nowPlaying.textContent = state.current.name;
|
||||
playStatus.textContent = state.playing ? 'Wird wiedergegeben' : 'Angehalten';
|
||||
highlightMedia(state.current.name);
|
||||
} else {
|
||||
nowPlaying.textContent = '–';
|
||||
playStatus.textContent = 'Bereit.';
|
||||
clearHighlight();
|
||||
}
|
||||
updateVolume(state.volume);
|
||||
}
|
||||
|
||||
async function pollState() {
|
||||
try {
|
||||
const res = await fetch('/api/state');
|
||||
const state = await res.json();
|
||||
updateFromState(state);
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function highlightMedia(name) {
|
||||
document.querySelectorAll('#media-list .list-group-item').forEach(el => {
|
||||
el.classList.toggle('active', el.dataset.name === name);
|
||||
});
|
||||
}
|
||||
|
||||
function clearHighlight() {
|
||||
document.querySelectorAll('#media-list .list-group-item').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
// ── Media list click ──────────────────────────────────────────────
|
||||
document.getElementById('media-list').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.list-group-item');
|
||||
if (!btn) return;
|
||||
const name = btn.dataset.name;
|
||||
selectedName = name;
|
||||
apiPlay(name);
|
||||
});
|
||||
|
||||
// ── Upload ─────────────────────────────────────────────────────────
|
||||
function syncFileInput(files) {
|
||||
const dt = new DataTransfer();
|
||||
Array.from(files).forEach(file => dt.items.add(file));
|
||||
fileInput.files = dt.files;
|
||||
dropzone.textContent = `${dt.files.length} Datei(en) bereit zum Hochladen`;
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files.length) {
|
||||
dropzone.textContent = `${fileInput.files.length} Datei(en) ausgewählt`;
|
||||
}
|
||||
});
|
||||
|
||||
chooseFiles.addEventListener('click', () => fileInput.click());
|
||||
dropzone.addEventListener('click', () => fileInput.click());
|
||||
dropzone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropzone.classList.add('dragover');
|
||||
});
|
||||
dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));
|
||||
dropzone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropzone.classList.remove('dragover');
|
||||
if (e.dataTransfer.files.length) {
|
||||
syncFileInput(e.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
|
||||
uploadForm.addEventListener('submit', (e) => {
|
||||
if (!fileInput.files.length) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// ── Volume ─────────────────────────────────────────────────────────
|
||||
volumeSlider.addEventListener('input', () => {
|
||||
const vol = parseInt(volumeSlider.value) / 100;
|
||||
volumeLabel.textContent = `${parseInt(volumeSlider.value)}%`;
|
||||
apiCall('/api/volume', { volume: vol });
|
||||
});
|
||||
|
||||
function updateVolume(vol) {
|
||||
const pct = Math.round((vol ?? 1.0) * 100);
|
||||
volumeSlider.value = pct;
|
||||
volumeLabel.textContent = `${pct}%`;
|
||||
}
|
||||
|
||||
// ── Theme ──────────────────────────────────────────────────────────
|
||||
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>';
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-bs-theme', next);
|
||||
window.localStorage.setItem('keyadmin-theme', next);
|
||||
updateThemeToggle();
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', toggleTheme);
|
||||
|
||||
// ── Clock ──────────────────────────────────────────────────────────
|
||||
function updateClock() {
|
||||
clockLabel.textContent = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
setInterval(updateClock, 30000);
|
||||
|
||||
// ── Init ───────────────────────────────────────────────────────────
|
||||
window.addEventListener('load', () => {
|
||||
updateClock();
|
||||
updateThemeToggle();
|
||||
pollState();
|
||||
setInterval(pollState, 3000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
181
templates/display.html
Normal file
181
templates/display.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<title>Videoplayer – Display</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
#stage {
|
||||
width: 100%; height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
#stage video,
|
||||
#stage img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain;
|
||||
display: none;
|
||||
}
|
||||
#stage audio {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
}
|
||||
#empty {
|
||||
color: #444;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="stage">
|
||||
<video id="video" muted playsinline></video>
|
||||
<audio id="audio" muted controls></audio>
|
||||
<img id="image" alt="">
|
||||
<div id="empty">Warte auf Steuerung…</div>
|
||||
</div>
|
||||
<script>
|
||||
const video = document.getElementById('video');
|
||||
const audio = document.getElementById('audio');
|
||||
const image = document.getElementById('image');
|
||||
const empty = document.getElementById('empty');
|
||||
|
||||
let lastVersion = -1;
|
||||
let lastCurrentName = null;
|
||||
let audioUnlocked = false;
|
||||
|
||||
// AudioContext-Trick: entsperrt Audio in Chromium-basierten Browsern
|
||||
(function unlockAudio() {
|
||||
try {
|
||||
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
ctx.resume();
|
||||
const buf = ctx.createBuffer(1, 1, 22050);
|
||||
const src = ctx.createBufferSource();
|
||||
src.buffer = buf;
|
||||
src.connect(ctx.destination);
|
||||
src.start();
|
||||
// Sobald der Buffer abgespielt wurde, gilt Audio als entsperrt
|
||||
src.onended = () => { audioUnlocked = true; };
|
||||
audioUnlocked = true;
|
||||
} catch (_) {}
|
||||
})();
|
||||
|
||||
// Klick auf die Seite entsperrt Audio endgültig
|
||||
document.addEventListener('click', () => {
|
||||
audioUnlocked = true;
|
||||
video.muted = false;
|
||||
audio.muted = false;
|
||||
if (video.src && video.paused) video.play().catch(() => {});
|
||||
if (audio.src && audio.paused) audio.play().catch(() => {});
|
||||
}, { once: true });
|
||||
|
||||
function showOnly(el) {
|
||||
[video, audio, image, empty].forEach(e => { e.style.display = 'none'; });
|
||||
if (el) el.style.display = el === empty ? 'flex' : 'block';
|
||||
}
|
||||
|
||||
async function tryPlay(player) {
|
||||
player.muted = false;
|
||||
try {
|
||||
await player.play();
|
||||
return true;
|
||||
} catch (_) {
|
||||
player.muted = true;
|
||||
try {
|
||||
await player.play();
|
||||
return false;
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
try {
|
||||
const res = await fetch('/api/state');
|
||||
const state = await res.json();
|
||||
const versionChanged = state.version !== lastVersion;
|
||||
|
||||
if (versionChanged) {
|
||||
const prevVersion = lastVersion;
|
||||
lastVersion = state.version;
|
||||
|
||||
const currentName = state.current ? state.current.name : null;
|
||||
const currentChanged = currentName !== lastCurrentName;
|
||||
lastCurrentName = currentName;
|
||||
|
||||
// Seek
|
||||
if (state.seek && prevVersion >= 0 && state.current &&
|
||||
(state.current.kind === 'video' || state.current.kind === 'audio')) {
|
||||
const player = state.current.kind === 'video' ? video : audio;
|
||||
if (player.duration && isFinite(player.duration)) {
|
||||
player.currentTime = Math.max(0, Math.min(player.duration, player.currentTime + state.seek));
|
||||
}
|
||||
fetch('/api/seek-ack', { method: 'POST' }).catch(() => {});
|
||||
}
|
||||
|
||||
// Neues Medium laden
|
||||
if (currentChanged) {
|
||||
if (state.current) {
|
||||
const src = `/media/${encodeURIComponent(state.current.name)}`;
|
||||
const kind = state.current.kind;
|
||||
if (kind === 'video') {
|
||||
video.src = src;
|
||||
video.oncanplay = () => {
|
||||
if (lastCurrentName === state.current?.name && state.playing) {
|
||||
tryPlay(video);
|
||||
}
|
||||
};
|
||||
showOnly(video);
|
||||
} else if (kind === 'audio') {
|
||||
audio.src = src;
|
||||
audio.oncanplay = () => {
|
||||
if (lastCurrentName === state.current?.name && state.playing) {
|
||||
tryPlay(audio);
|
||||
}
|
||||
};
|
||||
showOnly(audio);
|
||||
} else {
|
||||
image.src = src;
|
||||
showOnly(image);
|
||||
}
|
||||
} else {
|
||||
showOnly(empty);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Play/pause: immer ausführen
|
||||
if (state.current && (state.current.kind === 'video' || state.current.kind === 'audio')) {
|
||||
const player = state.current.kind === 'video' ? video : audio;
|
||||
player.volume = state.volume ?? 1.0;
|
||||
if (state.playing && player.src) {
|
||||
tryPlay(player);
|
||||
} else if (!state.playing) {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
poll();
|
||||
setInterval(poll, 1500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user