You've already forked Atomcms-edit
root
0c6c558a59
- Embed widget: standalone iframe player with dark/light/transparent themes, copy-paste embed code admin page - Real-time SSE: streaming now-playing/listeners/dj events, replaces polling in radio-player and embed - Song history: auto-records song changes to radio_song_plays table, Filament resource to view - DJ moderation: unified panel for shouts approval, song request queue, DJ applications - Auto DJ: playlist management with round-robin playback when no DJ is live - Refactored radio-player Alpine component to use EventSource API with auto-reconnect
62 lines
3.7 KiB
PHP
62 lines
3.7 KiB
PHP
<?php
|
|
|
|
?>
|
|
|
|
<x-filament-panels::page>
|
|
{{ $this->form }}
|
|
|
|
<div class="space-y-6 mt-6">
|
|
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">Directe URL</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Gebruik deze URL om direct naar de embed player te navigeren:</p>
|
|
<div class="flex gap-2">
|
|
<input type="text" value="{{ $this->getDirectUrl() }}" readonly
|
|
class="flex-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm font-mono"
|
|
id="directUrl" />
|
|
<button onclick="navigator.clipboard.writeText('{{ $this->getDirectUrl() }}').then(() => { this.textContent = 'Gekopieerd!'; setTimeout(() => this.textContent = 'Kopieer', 2000); })"
|
|
class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 transition">
|
|
Kopieer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">Iframe Embed</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Voeg deze code toe aan je website om de radio player als iframe te tonen:</p>
|
|
<div class="flex gap-2">
|
|
<input type="text" value="{{ $this->getIframeCode() }}" readonly
|
|
class="flex-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm font-mono"
|
|
id="iframeCode" />
|
|
<button onclick="navigator.clipboard.writeText('{{ $this->getIframeCode() }}').then(() => { this.textContent = 'Gekopieerd!'; setTimeout(() => this.textContent = 'Kopieer', 2000); })"
|
|
class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 transition">
|
|
Kopieer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">JavaScript Embed</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Voeg deze code toe aan je website voor een dynamische embed (geeft meer controle):</p>
|
|
<div class="flex gap-2">
|
|
<textarea readonly rows="6"
|
|
class="flex-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm font-mono"
|
|
id="jsCode">{{ $this->getJsSnippet() }}</textarea>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button onclick="navigator.clipboard.writeText(document.getElementById('jsCode').value).then(() => { this.textContent = 'Gekopieerd!'; setTimeout(() => this.textContent = 'Kopieer JavaScript', 2000); })"
|
|
class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm hover:bg-primary-700 transition">
|
|
Kopieer JavaScript
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">Voorbeeld</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Live voorbeeld van de embed player:</p>
|
|
<div class="border border-gray-300 dark:border-gray-600 rounded-xl overflow-hidden">
|
|
<iframe src="{{ $this->getDirectUrl() }}" width="100%" height="400" frameborder="0" allow="autoplay"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-filament-panels::page>
|