Replace master branch with local files
This commit is contained in:
doomtube
commit
875a53f499
60 changed files with 21637 additions and 0 deletions
504
frontend/src/routes/my-realms/+page.svelte
Normal file
504
frontend/src/routes/my-realms/+page.svelte
Normal file
|
|
@ -0,0 +1,504 @@
|
|||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { auth, isAuthenticated, isStreamer } from '$lib/stores/auth';
|
||||
import { goto } from '$app/navigation';
|
||||
import { connectWebSocket, disconnectWebSocket } from '$lib/websocket';
|
||||
|
||||
let realms = [];
|
||||
let loading = true;
|
||||
let error = '';
|
||||
let message = '';
|
||||
let showCreateModal = false;
|
||||
let statsInterval;
|
||||
|
||||
// Create form
|
||||
let newRealmName = '';
|
||||
|
||||
onMount(async () => {
|
||||
await auth.init();
|
||||
|
||||
if (!$isAuthenticated) {
|
||||
goto('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$isStreamer) {
|
||||
goto('/');
|
||||
return;
|
||||
}
|
||||
|
||||
await loadRealms();
|
||||
|
||||
// Start polling for stats
|
||||
statsInterval = setInterval(async () => {
|
||||
for (const realm of realms) {
|
||||
if (realm.isLive) {
|
||||
await updateRealmStats(realm.id);
|
||||
}
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Connect WebSocket for real-time updates
|
||||
connectWebSocket((data) => {
|
||||
if (data.type === 'stats_update') {
|
||||
const realm = realms.find(r => r.streamKey === data.stream_key);
|
||||
if (realm && data.stats) {
|
||||
realm.isLive = data.stats.is_live;
|
||||
realm.viewerCount = data.stats.connections || 0;
|
||||
realm.stats = data.stats;
|
||||
realms = realms;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (statsInterval) {
|
||||
clearInterval(statsInterval);
|
||||
}
|
||||
disconnectWebSocket();
|
||||
});
|
||||
|
||||
async function loadRealms() {
|
||||
loading = true;
|
||||
try {
|
||||
const response = await fetch('/api/realms', {
|
||||
headers: { 'Authorization': `Bearer ${$auth.token}` }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
realms = data.realms;
|
||||
|
||||
// Load stats for each realm
|
||||
for (const realm of realms) {
|
||||
await updateRealmStats(realm.id);
|
||||
}
|
||||
} else {
|
||||
error = 'Failed to load realms';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Error loading realms';
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRealmStats(realmId) {
|
||||
try {
|
||||
const response = await fetch(`/api/realms/${realmId}/stats`, {
|
||||
headers: { 'Authorization': `Bearer ${$auth.token}` }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const realm = realms.find(r => r.id === realmId);
|
||||
if (realm && data.success && data.stats) {
|
||||
realm.isLive = data.stats.is_live;
|
||||
realm.viewerCount = data.stats.connections || 0;
|
||||
realm.stats = data.stats;
|
||||
realms = realms;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch stats:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function createRealm() {
|
||||
error = '';
|
||||
|
||||
if (!validateRealmName(newRealmName)) {
|
||||
error = 'Realm name must be 3-30 characters, lowercase letters, numbers, and hyphens only';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/realms', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${$auth.token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ name: newRealmName })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
message = 'Realm created successfully';
|
||||
showCreateModal = false;
|
||||
newRealmName = '';
|
||||
await loadRealms();
|
||||
} else {
|
||||
error = data.error || 'Failed to create realm';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Error creating realm';
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
setTimeout(() => { message = ''; }, 3000);
|
||||
}
|
||||
|
||||
async function deleteRealm(realm) {
|
||||
if (!confirm(`Delete realm "${realm.name}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/realms/${realm.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${$auth.token}` }
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
message = 'Realm deleted successfully';
|
||||
await loadRealms();
|
||||
} else {
|
||||
error = 'Failed to delete realm';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Error deleting realm';
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
setTimeout(() => { message = ''; error = ''; }, 3000);
|
||||
}
|
||||
|
||||
async function regenerateKey(realm) {
|
||||
if (!confirm('Regenerate stream key? This will disconnect any active streams.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/realms/${realm.id}/regenerate-key`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${$auth.token}` }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
message = 'Stream key regenerated successfully';
|
||||
await loadRealms();
|
||||
} else {
|
||||
error = 'Failed to regenerate stream key';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Error regenerating stream key';
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
setTimeout(() => { message = ''; error = ''; }, 3000);
|
||||
}
|
||||
|
||||
function validateRealmName(name) {
|
||||
return /^[a-z0-9-]{3,30}$/.test(name);
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
message = 'Copied to clipboard!';
|
||||
setTimeout(() => message = '', 2000);
|
||||
}
|
||||
|
||||
function formatBitrate(bitrate) {
|
||||
if (bitrate > 1000000) {
|
||||
return (bitrate / 1000000).toFixed(2) + ' Mbps';
|
||||
} else if (bitrate > 1000) {
|
||||
return (bitrate / 1000).toFixed(0) + ' Kbps';
|
||||
} else {
|
||||
return bitrate + ' bps';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.realms-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.realms-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.realm-card {
|
||||
background: #111;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.realm-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.realm-title h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.realm-url {
|
||||
color: var(--gray);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.realm-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stream-info {
|
||||
background: rgba(86, 29, 94, 0.1);
|
||||
border: 1px solid rgba(86, 29, 94, 0.3);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stream-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stream-info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stream-info-label {
|
||||
font-weight: 600;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.stream-key {
|
||||
font-family: monospace;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-indicator.active {
|
||||
background: rgba(40, 167, 69, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-indicator.inactive {
|
||||
background: rgba(220, 53, 69, 0.2);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.stats-mini {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-mini-label {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.no-realms {
|
||||
text-align: center;
|
||||
padding: 4rem 0;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.no-realms-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="realms-header">
|
||||
<h1>My Realms</h1>
|
||||
<button
|
||||
class="btn"
|
||||
on:click={() => showCreateModal = true}
|
||||
disabled={realms.length >= 5}
|
||||
>
|
||||
Create Realm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if message}
|
||||
<div class="success" style="margin-bottom: 1rem;">{message}</div>
|
||||
{/if}
|
||||
|
||||
{#if error && !showCreateModal}
|
||||
<div class="error" style="margin-bottom: 1rem;">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<p>Loading realms...</p>
|
||||
{:else if realms.length === 0}
|
||||
<div class="no-realms">
|
||||
<div class="no-realms-icon">🏰</div>
|
||||
<h2>No realms yet</h2>
|
||||
<p>Create your first realm to start streaming!</p>
|
||||
<button
|
||||
class="btn"
|
||||
style="margin-top: 1rem;"
|
||||
on:click={() => showCreateModal = true}
|
||||
>
|
||||
Create Your First Realm
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="realms-grid">
|
||||
{#each realms as realm}
|
||||
<div class="realm-card">
|
||||
<div class="realm-header">
|
||||
<div class="realm-title">
|
||||
<h3>{realm.name}</h3>
|
||||
<p class="realm-url">/{realm.name}/live</p>
|
||||
</div>
|
||||
<div class="realm-actions">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
style="padding: 0.5rem 1rem;"
|
||||
on:click={() => deleteRealm(realm)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-row">
|
||||
<div class="status-indicator" class:active={realm.isLive} class:inactive={!realm.isLive}>
|
||||
{#if realm.isLive}
|
||||
<span>●</span> Live
|
||||
{:else}
|
||||
<span>●</span> Offline
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if realm.isLive && realm.stats}
|
||||
<div class="stats-mini">
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini-label">Viewers:</span>
|
||||
<span>{realm.viewerCount}</span>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini-label">Bitrate:</span>
|
||||
<span>{formatBitrate(realm.stats.bitrate)}</span>
|
||||
</div>
|
||||
{#if realm.stats.resolution !== 'N/A'}
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini-label">Resolution:</span>
|
||||
<span>{realm.stats.resolution}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="stream-info">
|
||||
<div class="stream-info-row">
|
||||
<span class="stream-info-label">Stream Key:</span>
|
||||
<span class="stream-key">{realm.streamKey}</span>
|
||||
<button on:click={() => copyToClipboard(realm.streamKey)}>Copy</button>
|
||||
</div>
|
||||
<div class="stream-info-row">
|
||||
<span class="stream-info-label">RTMP URL:</span>
|
||||
<span class="stream-key">rtmp://localhost:1935/app/{realm.streamKey}</span>
|
||||
<button on:click={() => copyToClipboard(`rtmp://localhost:1935/app/${realm.streamKey}`)}>Copy</button>
|
||||
</div>
|
||||
<div class="stream-info-row">
|
||||
<span class="stream-info-label">SRT URL:</span>
|
||||
<span class="stream-key">srt://localhost:9999?streamid={encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}</span>
|
||||
<button on:click={() => copyToClipboard(`srt://localhost:9999?streamid=${encodeURIComponent(`srt://localhost:9999/app/${realm.streamKey}`)}`)}>Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
style="width: 100%;"
|
||||
on:click={() => regenerateKey(realm)}
|
||||
>
|
||||
Regenerate Stream Key
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Create Realm Modal -->
|
||||
{#if showCreateModal}
|
||||
<div class="modal" on:click={() => showCreateModal = false}>
|
||||
<div class="modal-content" on:click|stopPropagation>
|
||||
<div class="modal-header">
|
||||
<h2>Create New Realm</h2>
|
||||
<button class="modal-close" on:click={() => showCreateModal = false}>×</button>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="error" style="margin-bottom: 1rem;">{error}</div>
|
||||
{/if}
|
||||
|
||||
<form on:submit|preventDefault={createRealm}>
|
||||
<div class="form-group">
|
||||
<label for="realm-name">Realm Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="realm-name"
|
||||
bind:value={newRealmName}
|
||||
required
|
||||
pattern="[a-z0-9-]{3,30}"
|
||||
placeholder="my-awesome-realm"
|
||||
/>
|
||||
<p class="form-hint">
|
||||
3-30 characters, lowercase letters, numbers, and hyphens only.
|
||||
This will be your realm's URL: /{newRealmName || 'realm-name'}/live
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-block">Create Realm</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
Loading…
Add table
Add a link
Reference in a new issue