Compare commits
No commits in common. "master" and "testing" have entirely different histories.
15 changed files with 250 additions and 847 deletions
|
|
@ -1,16 +0,0 @@
|
|||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('books', '0002_ebookbookmarks_ebookhighlights'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='ebookprogress',
|
||||
name='position_anchor',
|
||||
field=models.CharField(blank=True, default='', max_length=30),
|
||||
),
|
||||
]
|
||||
|
|
@ -21,7 +21,6 @@ class EBookProgress(models.Model):
|
|||
user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='ebook_progress')
|
||||
book = models.ForeignKey(EBook, on_delete=models.CASCADE, related_name='progress')
|
||||
scroll_fraction = models.FloatField(default=0.0)
|
||||
position_anchor = models.CharField(max_length=30, blank=True, default='')
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import base64
|
||||
import json
|
||||
import re
|
||||
|
||||
from django.conf import settings
|
||||
from django.http import JsonResponse
|
||||
|
|
@ -28,14 +27,13 @@ def book_list(request):
|
|||
b['uploaded_at'] = b['uploaded_at'].isoformat()
|
||||
# Include saved scroll_fraction for each book
|
||||
progress_map = {
|
||||
p.book_id: (p.scroll_fraction, p.updated_at, p.position_anchor)
|
||||
p.book_id: (p.scroll_fraction, p.updated_at)
|
||||
for p in EBookProgress.objects.filter(user=request.user)
|
||||
}
|
||||
for b in books:
|
||||
prog = progress_map.get(b['id'])
|
||||
b['scroll_fraction'] = prog[0] if prog else 0.0
|
||||
b['last_read'] = prog[1].isoformat() if prog else None
|
||||
b['position_anchor'] = prog[2] if prog else ''
|
||||
return JsonResponse(books, safe=False)
|
||||
|
||||
|
||||
|
|
@ -67,7 +65,7 @@ def upload_book(request):
|
|||
return JsonResponse({'error': 'invalid base64 in data_ct'}, status=400)
|
||||
|
||||
if raw_size > max_bytes:
|
||||
return JsonResponse({'error': 'file too large (max 50 MB)'}, status=400)
|
||||
return JsonResponse({'error': 'file too large (max 10 MB)'}, status=400)
|
||||
|
||||
book = EBook.objects.create(
|
||||
user=request.user,
|
||||
|
|
@ -76,7 +74,6 @@ def upload_book(request):
|
|||
data_ct=data_ct,
|
||||
data_iv=data_iv,
|
||||
)
|
||||
EBookProgress.objects.create(user=request.user, book=book)
|
||||
return JsonResponse({'ok': True, 'id': book.id})
|
||||
|
||||
|
||||
|
|
@ -130,18 +127,12 @@ def save_progress(request, pk):
|
|||
scroll_fraction = float(body.get('scroll_fraction', 0.0))
|
||||
scroll_fraction = max(0.0, min(1.0, scroll_fraction))
|
||||
|
||||
raw_anchor = body.get('position_anchor', '')
|
||||
position_anchor = ''
|
||||
if isinstance(raw_anchor, str) and re.fullmatch(r'\d{1,7}:\d(\.\d{1,6})?', raw_anchor):
|
||||
position_anchor = raw_anchor
|
||||
|
||||
progress, _ = EBookProgress.objects.get_or_create(
|
||||
user=request.user,
|
||||
book=book,
|
||||
)
|
||||
progress.scroll_fraction = scroll_fraction
|
||||
progress.position_anchor = position_anchor
|
||||
progress.save(update_fields=['scroll_fraction', 'position_anchor', 'updated_at'])
|
||||
progress.save(update_fields=['scroll_fraction', 'updated_at'])
|
||||
|
||||
return JsonResponse({'ok': True})
|
||||
|
||||
|
|
@ -181,7 +172,7 @@ def book_highlights(request, pk):
|
|||
raw_size = len(base64.b64decode(ct))
|
||||
except Exception:
|
||||
return JsonResponse({'error': 'invalid base64 in ct'}, status=400)
|
||||
if raw_size > getattr(settings, 'HIGHLIGHTS_MAX_BYTES', 700 * 1024):
|
||||
if raw_size > 700 * 1024:
|
||||
return JsonResponse({'error': 'highlights data too large (max 700 KB)'}, status=400)
|
||||
|
||||
row, _ = EBookHighlights.objects.get_or_create(user=request.user, book=book)
|
||||
|
|
@ -226,7 +217,7 @@ def book_bookmarks(request, pk):
|
|||
raw_size = len(base64.b64decode(ct))
|
||||
except Exception:
|
||||
return JsonResponse({'error': 'invalid base64 in ct'}, status=400)
|
||||
if raw_size > getattr(settings, 'BOOKMARKS_MAX_BYTES', 100 * 1024):
|
||||
if raw_size > 100 * 1024:
|
||||
return JsonResponse({'error': 'bookmarks data too large (max 100 KB)'}, status=400)
|
||||
|
||||
row, _ = EBookBookmarks.objects.get_or_create(user=request.user, book=book)
|
||||
|
|
|
|||
|
|
@ -3,11 +3,3 @@ from django.conf import settings
|
|||
|
||||
def build_info(request):
|
||||
return {'BUILD_TIME': getattr(settings, 'BUILD_TIME', '')}
|
||||
|
||||
|
||||
def upload_limits(request):
|
||||
return {
|
||||
'EBOOK_MAX_BYTES': getattr(settings, 'EBOOK_MAX_BYTES', 10 * 1024 * 1024),
|
||||
'BG_MAX_BYTES': getattr(settings, 'BG_MAX_BYTES', 5 * 1024 * 1024),
|
||||
'PODCAST_INBOX_PAGE_SIZE': getattr(settings, 'PODCAST_INBOX_PAGE_SIZE', 200),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ INSTALLED_APPS = [
|
|||
'gpodder',
|
||||
]
|
||||
|
||||
EBOOK_MAX_BYTES = 50 * 1024 * 1024 # 50 MB
|
||||
EBOOK_MAX_BYTES = 10 * 1024 * 1024 # 10 MB
|
||||
|
||||
# Encrypted uploads are base64-encoded (~33% overhead) so allow ~75 MB body
|
||||
DATA_UPLOAD_MAX_MEMORY_SIZE = 75 * 1024 * 1024
|
||||
# Encrypted uploads are base64-encoded (~33% overhead) so allow ~25 MB body
|
||||
DATA_UPLOAD_MAX_MEMORY_SIZE = 25 * 1024 * 1024
|
||||
|
||||
MIDDLEWARE = [
|
||||
'django.middleware.security.SecurityMiddleware',
|
||||
|
|
@ -62,7 +62,6 @@ TEMPLATES = [
|
|||
'django.contrib.auth.context_processors.auth',
|
||||
'django.contrib.messages.context_processors.messages',
|
||||
'diora.context_processors.build_info',
|
||||
'diora.context_processors.upload_limits',
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -102,12 +101,6 @@ MEDIA_URL = '/media/'
|
|||
MEDIA_ROOT = BASE_DIR / 'media'
|
||||
|
||||
BG_MAX_BYTES = 5 * 1024 * 1024 # 5 MB
|
||||
HIGHLIGHTS_MAX_BYTES = 700 * 1024 # 700 KB
|
||||
BOOKMARKS_MAX_BYTES = 100 * 1024 # 100 KB
|
||||
|
||||
VOLUME_DEFAULT = 204 # out of 255
|
||||
ITUNES_TIMEOUT = 6 # seconds
|
||||
PODCAST_INBOX_PAGE_SIZE = 200
|
||||
|
||||
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ def subscriptions_by_device(request, username, deviceid):
|
|||
return JsonResponse({'add': added, 'remove': removed, 'timestamp': _now_ts(), 'update_urls': []})
|
||||
else:
|
||||
urls = list(PodcastFeed.objects.filter(user=request.user).values_list('rss_url', flat=True))
|
||||
return JsonResponse({'add': urls, 'remove': [], 'timestamp': _now_ts(), 'update_urls': []})
|
||||
return JsonResponse(urls, safe=False)
|
||||
|
||||
elif request.method == 'POST':
|
||||
try:
|
||||
|
|
@ -178,7 +178,7 @@ def subscriptions_all(request, username):
|
|||
return JsonResponse({'add': added, 'remove': removed, 'timestamp': _now_ts(), 'update_urls': []})
|
||||
else:
|
||||
urls = list(PodcastFeed.objects.filter(user=request.user).values_list('rss_url', flat=True))
|
||||
return JsonResponse({'add': urls, 'remove': [], 'timestamp': _now_ts(), 'update_urls': []})
|
||||
return JsonResponse(urls, safe=False)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
|
|
@ -242,7 +242,7 @@ def episode_actions(request, username):
|
|||
except Exception:
|
||||
pass
|
||||
|
||||
return JsonResponse({'timestamp': _now_ts(), 'update_urls': []})
|
||||
return JsonResponse({'timestamp': _now_ts()})
|
||||
|
||||
elif request.method == 'GET':
|
||||
since = request.GET.get('since')
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ def podcast_search(request):
|
|||
|
||||
try:
|
||||
url = f'https://itunes.apple.com/search?term={urllib.parse.quote(q)}&media=podcast&limit=20'
|
||||
resp = requests.get(url, timeout=getattr(settings, 'ITUNES_TIMEOUT', 6))
|
||||
resp = requests.get(url, timeout=6)
|
||||
resp.raise_for_status()
|
||||
raw = resp.json().get('results', [])
|
||||
except Exception as e:
|
||||
|
|
@ -620,7 +620,7 @@ def inbox(request):
|
|||
).values_list('episode_id', flat=True)
|
||||
)
|
||||
|
||||
limit = min(int(request.GET.get('limit', getattr(settings, 'PODCAST_INBOX_PAGE_SIZE', 200))), 1000)
|
||||
limit = min(int(request.GET.get('limit', 200)), 1000)
|
||||
offset = max(int(request.GET.get('offset', 0)), 0)
|
||||
|
||||
episodes = list(
|
||||
|
|
|
|||
|
|
@ -18,5 +18,4 @@ urlpatterns = [
|
|||
path('radio/notes/<int:pk>/', views.save_station_notes, name='save_station_notes'),
|
||||
path('radio/focus/record/', views.record_focus_session, name='record_focus_session'),
|
||||
path('radio/focus/stats/', views.focus_stats, name='focus_stats'),
|
||||
path('radio/stream-player/', views.stream_player, name='stream_player'),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import json
|
||||
import socket
|
||||
import ssl as ssl_module
|
||||
import time
|
||||
import urllib.parse
|
||||
from datetime import datetime
|
||||
|
|
@ -206,7 +204,7 @@ def affiliate_links(request):
|
|||
f"https://itunes.apple.com/search"
|
||||
f"?term={urllib.parse.quote(track)}&media=music&limit=1"
|
||||
)
|
||||
resp = requests.get(itunes_url, timeout=getattr(settings, 'ITUNES_TIMEOUT', 6))
|
||||
resp = requests.get(itunes_url, timeout=5)
|
||||
resp.raise_for_status()
|
||||
results = resp.json().get('results', [])
|
||||
if results:
|
||||
|
|
@ -575,19 +573,3 @@ def import_m3u(request):
|
|||
skipped += 1
|
||||
|
||||
return JsonResponse({'ok': True, 'added': added, 'skipped': skipped})
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Minimal HTTP stream player (standalone tab for mixed-content streams)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def stream_player(request):
|
||||
url = request.GET.get('url', '').strip()
|
||||
name = request.GET.get('name', '').strip()
|
||||
_vol_default = getattr(settings, 'VOLUME_DEFAULT', 204)
|
||||
vol = request.GET.get('vol', str(_vol_default)).strip()
|
||||
try:
|
||||
vol = max(0, min(255, int(vol)))
|
||||
except ValueError:
|
||||
vol = _vol_default
|
||||
return render(request, 'radio/stream_player.html', {'stream_url': url, 'stream_name': name, 'stream_vol': vol})
|
||||
|
|
|
|||
|
|
@ -8,17 +8,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
scrollbar-color: #333 #000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #000; }
|
||||
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
|
||||
:root {
|
||||
--bg: #000;
|
||||
--bg-card: transparent;
|
||||
|
|
@ -107,16 +96,8 @@ a:hover {
|
|||
justify-content: space-between;
|
||||
height: var(--nav-h);
|
||||
padding: 0 1.5rem;
|
||||
background: var(--bg);
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--border);
|
||||
/* Window Controls Overlay: extend navbar into the titlebar area */
|
||||
padding-left: max(1.5rem, env(titlebar-area-x, 1.5rem));
|
||||
padding-top: env(titlebar-area-y, 0);
|
||||
height: calc(var(--nav-h) + env(titlebar-area-y, 0px));
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.navbar a, .navbar button, .navbar input, .navbar form {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
|
@ -150,8 +131,6 @@ a:hover {
|
|||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.5rem calc(var(--bar-h) + 2rem);
|
||||
height: calc(100% - var(--nav-h));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
|
|
@ -183,7 +162,7 @@ a:hover {
|
|||
left: 0;
|
||||
right: 0;
|
||||
height: var(--bar-h);
|
||||
background: var(--bg);
|
||||
background: transparent;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -755,10 +734,8 @@ a:hover {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.volume-label,
|
||||
.volume-slider,
|
||||
.volume-num {
|
||||
display: none;
|
||||
.volume-slider {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.affiliate-section {
|
||||
|
|
@ -1575,8 +1552,6 @@ body.dnd-mode .timer-display {
|
|||
.reader-content {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
padding: 24px 16px;
|
||||
line-height: 1.8;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
|
|
@ -1597,13 +1572,23 @@ body.dnd-mode .timer-display {
|
|||
}
|
||||
|
||||
/* --- Focus station sidebar --- */
|
||||
/* --- Radio sidebar --- */
|
||||
.rsb-nowplaying { margin-bottom: 12px; }
|
||||
.rsb-station-name { font-weight: 600; }
|
||||
.rsb-track { font-size: 0.85rem; margin-top: 2px; }
|
||||
.rsb-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
|
||||
.rsb-vol { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted, #888); }
|
||||
.rsb-station-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
||||
.focus-preset-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.focus-preset-list li.focus-preset-active button {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.focus-custom-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* --- Table of contents sidebar --- */
|
||||
.toc-list {
|
||||
|
|
@ -1668,56 +1653,10 @@ body.dnd-mode .timer-display {
|
|||
/* PDF invert */
|
||||
#reader-overlay.pdf-inverted .pdf-page { filter:invert(1); }
|
||||
|
||||
/* ---- Immersive reader mode ---- */
|
||||
.navbar { transition: transform 0.35s ease; }
|
||||
.now-playing-bar{ transition: transform 0.35s ease; }
|
||||
.reader-overlay { transition: top 0.35s ease, bottom 0.35s ease; }
|
||||
.reader-header { overflow: hidden; max-height: 60px;
|
||||
transition: max-height 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease; }
|
||||
|
||||
body.reader-immersive .navbar { transform: translateY(-100%); }
|
||||
body.reader-immersive .now-playing-bar { transform: translateY(100%); }
|
||||
body.reader-immersive .reader-overlay { top: 0; bottom: 0; }
|
||||
body.reader-immersive .reader-header { max-height: 0; padding-top: 0; padding-bottom: 0; }
|
||||
|
||||
body.reader-immersive.reader-show-top .navbar { transform: none; }
|
||||
body.reader-immersive.reader-show-top .reader-overlay { top: var(--nav-h); }
|
||||
body.reader-immersive.reader-show-top .reader-header { max-height: 60px; padding-top: 8px; padding-bottom: 8px; }
|
||||
|
||||
body.reader-immersive.reader-show-bottom .now-playing-bar { transform: none; }
|
||||
body.reader-immersive.reader-show-bottom .reader-overlay { bottom: var(--bar-h); }
|
||||
|
||||
/* PDF paginated */
|
||||
.reader-content.pdf-paginated { overflow:hidden !important; display:flex; align-items:center; justify-content:center; }
|
||||
.pdf-paginated .pdf-page-wrapper { margin:0; }
|
||||
|
||||
/* PDF loading overlay */
|
||||
.pdf-loading-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
z-index: 200;
|
||||
}
|
||||
.pdf-loading-spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid #333;
|
||||
border-top-color: var(--accent, #e63946);
|
||||
border-radius: 50%;
|
||||
animation: pdf-spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes pdf-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* PDF two-page spread */
|
||||
.pdf-spread-wrapper { display:flex; flex-direction:row; gap:8px; justify-content:center; margin-bottom:1rem; }
|
||||
.pdf-spread-wrapper .pdf-page-wrapper { margin:0; }
|
||||
.pdf-spread-cover { margin-bottom:1rem; }
|
||||
/* Disable text selection during pinch */
|
||||
#reader-content.pinch-active { user-select:none; -webkit-user-select:none; }
|
||||
|
||||
/* Highlight popover */
|
||||
.highlight-popover { position:fixed; z-index:500; display:flex; gap:6px; background:var(--bg-card,#1a1a1a); border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
|
||||
.hl-color-btn { width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; font-weight:700; font-size:12px; color:#000; line-height:1; }
|
||||
|
|
@ -1725,8 +1664,6 @@ body.reader-immersive.reader-show-bottom .reader-overlay { bottom: var(--bar-h)
|
|||
.hl-note-btn { background:none; border:1px solid var(--border); color:var(--fg); padding:2px 6px; border-radius:var(--radius); cursor:pointer; }
|
||||
|
||||
/* Highlight marks */
|
||||
.reader-no-bold * { font-weight: normal !important; }
|
||||
.reader-content img { max-width: 100%; height: auto; display: block; }
|
||||
.epub-highlight { border-radius:2px; cursor:pointer; }
|
||||
.epub-highlight[data-color="yellow"] { background:rgba(241,196,15,.4); }
|
||||
.epub-highlight[data-color="green"] { background:rgba(46,204,113,.35); }
|
||||
|
|
|
|||
702
static/js/app.js
702
static/js/app.js
File diff suppressed because it is too large
Load diff
|
|
@ -4,7 +4,6 @@
|
|||
"description": "Internet radio player",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"display_override": ["window-controls-overlay", "standalone"],
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#000000",
|
||||
"orientation": "any",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
<link rel="apple-touch-icon" href="/static/icon-192.png">
|
||||
<link rel="stylesheet" href="/static/css/app.css">
|
||||
<title>{% block title %}diora{% endblock %}</title>
|
||||
<script>const DIORA_CONFIG = { ebookMaxBytes: {{ EBOOK_MAX_BYTES }}, bgMaxBytes: {{ BG_MAX_BYTES }}, podcastInboxPageSize: {{ PODCAST_INBOX_PAGE_SIZE }} };</script>
|
||||
{% if encrypted_bg_json %}
|
||||
<script>const ENCRYPTED_BG = {{ encrypted_bg_json|safe }};</script>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</label>
|
||||
<button class="btn btn-save" id="save-station-btn" style="display:none;" onclick="saveCurrentStation()">★ Save</button>
|
||||
<button class="btn-icon" id="dnd-btn" onclick="toggleDND()" title="Focus mode (hides UI, press Esc to exit)">⊙</button>
|
||||
<button class="btn-icon" id="focus-station-btn" onclick="openRadioSidebar()" title="Radio">📻</button>
|
||||
<button class="btn-icon" id="focus-station-btn" onclick="openFocusStationSidebar()" title="Focus station">📻</button>
|
||||
</div>
|
||||
<div class="podcast-seek-bar" id="podcast-seek-bar" style="display:none;">
|
||||
<button class="btn-icon skip-btn" onclick="skipBack()" title="Back 15s">⏪ 15</button>
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ stream_name|default:"Radio" }}</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #0d0d0d;
|
||||
color: #e0e0e0;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
#station-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
#track-name {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
#play-btn {
|
||||
background: #e63946;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 8px 20px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
min-width: 90px;
|
||||
}
|
||||
#play-btn:hover { background: #c1121f; }
|
||||
.vol-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
#vol-slider { width: 90px; accent-color: #e63946; }
|
||||
#vol-num {
|
||||
width: 42px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
color: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
#back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #555;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#back-btn:hover { color: #aaa; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="station-name">{{ stream_name|default:"Radio" }}</div>
|
||||
<div id="track-name"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="play-btn">▶ Play</button>
|
||||
<div class="vol-wrap">
|
||||
<span>vol</span>
|
||||
<input type="range" id="vol-slider" min="0" max="255" value="{{ stream_vol }}">
|
||||
<input type="number" id="vol-num" min="0" max="255" value="{{ stream_vol }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="back-btn" onclick="window.close()">← close tab</button>
|
||||
|
||||
<script>
|
||||
const audio = new Audio();
|
||||
let playing = false;
|
||||
let sse = null;
|
||||
|
||||
const streamUrl = '{{ stream_url|escapejs }}';
|
||||
const stationName = '{{ stream_name|escapejs }}';
|
||||
|
||||
// Volume
|
||||
function setVol(v) {
|
||||
v = Math.max(0, Math.min(255, Math.round(v)));
|
||||
audio.volume = v / 255;
|
||||
document.getElementById('vol-slider').value = v;
|
||||
document.getElementById('vol-num').value = v;
|
||||
try { localStorage.setItem('diora_volume', v); } catch (_) {}
|
||||
}
|
||||
|
||||
const slider = document.getElementById('vol-slider');
|
||||
const numIn = document.getElementById('vol-num');
|
||||
slider.addEventListener('input', () => setVol(parseInt(slider.value, 10)));
|
||||
numIn.addEventListener('change', () => setVol(parseInt(numIn.value, 10)));
|
||||
|
||||
// Play / Stop
|
||||
const playBtn = document.getElementById('play-btn');
|
||||
|
||||
function startPlay() {
|
||||
audio.src = streamUrl;
|
||||
setVol(parseInt(slider.value, 10));
|
||||
audio.play().then(() => {
|
||||
playing = true;
|
||||
playBtn.innerHTML = '▮▮ Stop';
|
||||
|
||||
if (sse) sse.close();
|
||||
sse = new EventSource('/radio/sse/?url=' + encodeURIComponent(streamUrl));
|
||||
sse.onmessage = e => {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.track) {
|
||||
document.getElementById('track-name').textContent = data.track;
|
||||
document.title = data.track + ' — ' + stationName;
|
||||
}
|
||||
} catch (_) {}
|
||||
};
|
||||
}).catch(() => {
|
||||
// Autoplay blocked — reset state, prompt user to click
|
||||
playing = false;
|
||||
audio.src = '';
|
||||
playBtn.innerHTML = '▶ Play';
|
||||
document.getElementById('track-name').textContent = 'Click Play to start';
|
||||
});
|
||||
}
|
||||
|
||||
function stopPlay() {
|
||||
audio.pause();
|
||||
audio.src = '';
|
||||
playing = false;
|
||||
playBtn.innerHTML = '▶ Play';
|
||||
document.getElementById('track-name').textContent = '';
|
||||
document.title = stationName;
|
||||
if (sse) { sse.close(); sse = null; }
|
||||
}
|
||||
|
||||
playBtn.addEventListener('click', () => {
|
||||
if (playing) stopPlay(); else startPlay();
|
||||
});
|
||||
|
||||
document.getElementById('track-name').textContent = 'Click Play to start';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue