add Guest Star collaboration panel
This commit is contained in:
+55
-1
@@ -50,6 +50,11 @@
|
||||
let moderationReason = '';
|
||||
let moderationBusy = false;
|
||||
let moderationError = '';
|
||||
let collaborationSession: { id: string; guests: Array<{ user_id: string; user_display_name?: string | null; slot_id?: string | null; is_live?: boolean | null }> } | null = null;
|
||||
let collaborationInvites: Array<{ user_id: string; invited_at: string; status: string }> = [];
|
||||
let collaborationBusy = false;
|
||||
let collaborationError = '';
|
||||
let showCollaboration = false;
|
||||
let oauthLink = '';
|
||||
let oauthIdentity: 'streamer' | 'bot' = 'streamer';
|
||||
let oauthBusy = false;
|
||||
@@ -100,6 +105,7 @@
|
||||
await loadActivity();
|
||||
await loadNotifications();
|
||||
await loadDiagnostics();
|
||||
await loadCollaboration();
|
||||
await loadStreamInfo();
|
||||
connectRealtime();
|
||||
if (!mustReplaceCredentials) password = '';
|
||||
@@ -151,6 +157,9 @@
|
||||
showNotifications = false;
|
||||
diagnostics = undefined;
|
||||
chatMessages = [];
|
||||
collaborationSession = null;
|
||||
collaborationInvites = [];
|
||||
showCollaboration = false;
|
||||
chatReplyParent = undefined;
|
||||
pinnedMessageIds = [];
|
||||
}
|
||||
@@ -227,6 +236,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCollaboration() {
|
||||
try {
|
||||
const response = await fetch(`${serverAddress}/api/v1/twitch/collaboration/session`, { headers: { authorization: `Bearer ${sessionToken}` } });
|
||||
if (!response.ok) return;
|
||||
collaborationSession = await response.json();
|
||||
if (collaborationSession?.id) {
|
||||
const invites = await fetch(`${serverAddress}/api/v1/twitch/collaboration/invites?session_id=${encodeURIComponent(collaborationSession.id)}`, { headers: { authorization: `Bearer ${sessionToken}` } });
|
||||
if (invites.ok) collaborationInvites = await invites.json();
|
||||
}
|
||||
} catch {
|
||||
collaborationSession = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function createCollaboration() {
|
||||
collaborationBusy = true;
|
||||
collaborationError = '';
|
||||
try {
|
||||
const response = await fetch(`${serverAddress}/api/v1/twitch/collaboration/session`, { method: 'POST', headers: { authorization: `Bearer ${sessionToken}` } });
|
||||
if (!response.ok) throw new Error('Twitch could not start a Guest Star session.');
|
||||
collaborationSession = await response.json();
|
||||
await loadCollaboration();
|
||||
} catch (error) {
|
||||
collaborationError = error instanceof Error ? error.message : 'Collaboration session failed.';
|
||||
} finally {
|
||||
collaborationBusy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function endCollaboration() {
|
||||
if (!collaborationSession) return;
|
||||
collaborationBusy = true;
|
||||
collaborationError = '';
|
||||
try {
|
||||
const response = await fetch(`${serverAddress}/api/v1/twitch/collaboration/session/end?session_id=${encodeURIComponent(collaborationSession.id)}`, { method: 'POST', headers: { authorization: `Bearer ${sessionToken}` } });
|
||||
if (!response.ok) throw new Error('Twitch could not end the Guest Star session.');
|
||||
collaborationSession = null;
|
||||
collaborationInvites = [];
|
||||
} catch (error) {
|
||||
collaborationError = error instanceof Error ? error.message : 'Collaboration session could not end.';
|
||||
} finally {
|
||||
collaborationBusy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function markNotificationSeen(notificationId: string) {
|
||||
const response = await fetch(`${serverAddress}/api/v1/admin/notifications/${notificationId}/seen`, {
|
||||
method: 'POST',
|
||||
@@ -512,7 +566,7 @@
|
||||
<section class="panel preview-panel"><div class="panel-header"><span>STREAM PREVIEW</span><span class="panel-menu">⋮</span></div>{#if playerSrc}<iframe class="twitch-player" title={`Twitch player for ${streamerName}`} src={playerSrc} allowfullscreen></iframe>{:else}<div class="preview-stage"><div class="offline-mark">STREAM OFFLINE</div><div class="offline-subtitle">CONNECT TWITCH TO BEGIN</div></div>{/if}<div class="panel-footer"><span class="micro">VIDEO PLAYER</span><span class="badge">{playerSrc ? streamerName : 'OFFLINE'}</span></div></section>
|
||||
<section class="panel activity-panel"><div class="panel-header"><span>ACTIVITY FEED</span><span class="panel-menu">⋮</span></div><div class="panel-tabs"><button class:active={activityFilter === 'all'} class="tab" onclick={() => (activityFilter = 'all')}>ALL ACTIVITY</button><button class:active={activityFilter === 'moderation'} class="tab" onclick={() => (activityFilter = 'moderation')}>MODERATION</button></div>{#if activityEvents.filter((event) => activityFilter === 'all' || event.event_type.startsWith('moderation.')).length}<div class="activity-list">{#each activityEvents.filter((event) => activityFilter === 'all' || event.event_type.startsWith('moderation.')) as event}<div class="activity-row"><span class="activity-type">{event.event_type}</span><span class="activity-time">{new Date(event.occurred_at).toLocaleTimeString()}</span></div>{/each}</div>{:else}<div class="empty-state"><div class="empty-glyph">◌</div><strong>Nothing here yet</strong><span>{activityFilter === 'moderation' ? 'Moderation events will appear here.' : 'Follows, subscriptions, raids, and server events will appear here.'}</span></div>{/if}</section>
|
||||
<section class="panel chat-panel"><div class="panel-header"><span>MY CHAT</span><span class="panel-menu">⋮</span></div>{#if pinnedMessageIds.length}<div class="pinned-messages"><span class="micro">PINNED</span>{#each chatMessages.filter((message) => pinnedMessageIds.includes(message.message_id)) as message}<div class="pinned-message"><span class="chat-user">{message.user_name}</span><span>{message.text}</span></div>{/each}</div>{/if}{#if chatMessages.length}<div class="chat-message-list">{#each chatMessages as message}<div class:message-pinned={pinnedMessageIds.includes(message.message_id)} class="chat-message"><button class="chat-user" onclick={() => moderateChatUser(message.user_id)}>{message.user_name}</button><span class="chat-text">{#if message.fragments.length}{#each message.fragments as fragment}{#if fragment.type === 'emote' && fragment.emote_id}<img class="chat-emote" src={`https://static-cdn.jtvnw.net/emoticons/v2/${encodeURIComponent(fragment.emote_id)}/static/dark/2.0`} alt={fragment.text} />{:else}{fragment.text}{/if}{/each}{:else}{message.text}{/if}</span><span class="chat-actions"><button class="chat-reply" onclick={() => togglePinnedMessage(message.message_id)}>{pinnedMessageIds.includes(message.message_id) ? 'UNPIN' : 'PIN'}</button><button class="chat-reply" onclick={() => replyToChatMessage(message)}>REPLY</button><button class="chat-reply danger" onclick={() => deleteChatMessage(message)}>DELETE</button></span></div>{/each}</div>{:else}<div class="chat-empty"><div class="empty-glyph">⌁</div><strong>Chat is waiting</strong><span>Connect a streamer or bot account to begin.</span></div>{/if}<div class="chat-composer">{#if chatReplyParent}<div class="chat-reply-context">REPLYING TO @{chatReplyParent.user_name}<button class="secondary" onclick={() => (chatReplyParent = undefined)}>×</button></div>{/if}<div class="chat-identity-toggle"><button class:active={chatIdentity === 'streamer'} class="chat-identity" onclick={() => (chatIdentity = 'streamer')}>STREAMER</button><button class:active={chatIdentity === 'bot'} class="chat-identity" onclick={() => (chatIdentity = 'bot')}>BOT</button></div>{#if chatEmoteOptions.length}<div class="chat-emote-picker">{#each chatEmoteOptions as emote}<button class="chat-emote-option" onclick={() => selectChatEmote(emote.name)}><img src={emote.url} alt={emote.name} /><span>{emote.name}</span><span class="micro">{emote.provider}</span></button>{/each}</div>{/if}<div class="chat-send-row"><input class="control" bind:value={chatMessage} maxlength="500" placeholder={`Send as ${chatIdentity}`} oninput={() => searchChatEmotes(chatMessage)} onkeydown={(event) => event.key === 'Enter' && sendChatMessage()} /><button class="primary" onclick={sendChatMessage} disabled={chatBusy || !chatMessage.trim()}>SEND</button></div>{#if chatError}<div class="auth-error">{chatError}</div>{/if}</div></section>
|
||||
<section class="panel quick-panel"><div class="panel-header"><span>QUICK ACTIONS</span><span class="panel-menu">⋮</span></div><div class="quick-grid"><button class="quick-action accent" onclick={() => (showStreamEditor = !showStreamEditor)}>EDIT STREAM INFO</button><button class="quick-action" onclick={() => (showModeration = !showModeration)}>MODERATION</button><button class="quick-action">BOT COMMANDS</button><button class="quick-action">OVERLAYS</button></div>{#if showStreamEditor}<div class="stream-editor"><label class="micro" for="stream-title">TITLE</label><input id="stream-title" class="control" bind:value={streamTitle} maxlength="140" /><label class="micro" for="stream-category">CATEGORY</label><input id="stream-category" class="control" value={categorySearch} oninput={(event) => searchCategories(event.currentTarget.value)} autocomplete="off" placeholder="Search Twitch categories" />{#if categoryOptions.length}<div class="category-options">{#each categoryOptions as category}<button class="category-option" onclick={() => { streamGameId = category.id; categorySearch = category.name; categoryOptions = []; }}><span>{category.name}</span><span class="mono">{category.id}</span></button>{/each}</div>{/if}<label class="micro" for="stream-language">LANGUAGE</label><input id="stream-language" class="control" bind:value={streamLanguage} maxlength="10" /><label class="micro" for="stream-tags">TAGS</label><input id="stream-tags" class="control" bind:value={streamTags} placeholder="comma, separated" /><label class="micro" for="stream-labels">CLASSIFICATION LABELS</label><input id="stream-labels" class="control" bind:value={streamClassificationLabels} placeholder="comma, separated" /><button class="primary control-button" onclick={saveStreamInfo} disabled={streamBusy}>SAVE STREAM INFO</button>{#if streamError}<div class="auth-error">{streamError}</div>{/if}</div>{/if}{#if showModeration}<div class="stream-editor"><label class="micro" for="moderation-action">ACTION</label><select id="moderation-action" class="control" bind:value={moderationAction}><option value="timeout">TIMEOUT</option><option value="ban">BAN</option><option value="unban">UNBAN</option><option value="delete_message">DELETE MESSAGE</option></select><label class="micro" for="moderation-user">USER ID</label><input id="moderation-user" class="control" bind:value={moderationUserId} maxlength="64" /><label class="micro" for="moderation-message">MESSAGE ID (DELETE)</label><input id="moderation-message" class="control" bind:value={moderationMessageId} maxlength="128" /><label class="micro" for="moderation-duration">TIMEOUT SECONDS</label><input id="moderation-duration" class="control" type="number" min="1" max="1209600" bind:value={moderationDuration} /><label class="micro" for="moderation-reason">REASON</label><input id="moderation-reason" class="control" maxlength="500" bind:value={moderationReason} /><button class="primary control-button" onclick={applyModeration} disabled={moderationBusy || !moderationUserId}>APPLY MODERATION</button>{#if moderationError}<div class="auth-error">{moderationError}</div>{/if}</div>{/if}</section>
|
||||
<section class="panel quick-panel"><div class="panel-header"><span>QUICK ACTIONS</span><span class="panel-menu">⋮</span></div><div class="quick-grid"><button class="quick-action accent" onclick={() => (showStreamEditor = !showStreamEditor)}>EDIT STREAM INFO</button><button class="quick-action" onclick={() => (showModeration = !showModeration)}>MODERATION</button><button class="quick-action" onclick={() => (showCollaboration = !showCollaboration)}>COLLABORATION</button><button class="quick-action">OVERLAYS</button></div>{#if showCollaboration}<div class="stream-editor collaboration-panel"><div class="micro">GUEST STAR SESSION</div>{#if collaborationSession}<div class="collaboration-status">ACTIVE · {collaborationSession.guests.length} GUESTS</div><button class="primary control-button" onclick={endCollaboration} disabled={collaborationBusy}>END SESSION</button>{#if collaborationInvites.length}<div class="micro">PENDING INVITES</div>{#each collaborationInvites as invite}<div class="collaboration-invite"><span>{invite.user_id}</span><span class="micro">{invite.status}</span></div>{/each}{/if}{:else}<div class="empty-row">No active collaboration.</div><button class="primary control-button" onclick={createCollaboration} disabled={collaborationBusy}>START GUEST STAR</button>{/if}{#if collaborationError}<div class="auth-error">{collaborationError}</div>{/if}</div>{/if}{#if showStreamEditor}<div class="stream-editor"><label class="micro" for="stream-title">TITLE</label><input id="stream-title" class="control" bind:value={streamTitle} maxlength="140" /><label class="micro" for="stream-category">CATEGORY</label><input id="stream-category" class="control" value={categorySearch} oninput={(event) => searchCategories(event.currentTarget.value)} autocomplete="off" placeholder="Search Twitch categories" />{#if categoryOptions.length}<div class="category-options">{#each categoryOptions as category}<button class="category-option" onclick={() => { streamGameId = category.id; categorySearch = category.name; categoryOptions = []; }}><span>{category.name}</span><span class="mono">{category.id}</span></button>{/each}</div>{/if}<label class="micro" for="stream-language">LANGUAGE</label><input id="stream-language" class="control" bind:value={streamLanguage} maxlength="10" /><label class="micro" for="stream-tags">TAGS</label><input id="stream-tags" class="control" bind:value={streamTags} placeholder="comma, separated" /><label class="micro" for="stream-labels">CLASSIFICATION LABELS</label><input id="stream-labels" class="control" bind:value={streamClassificationLabels} placeholder="comma, separated" /><button class="primary control-button" onclick={saveStreamInfo} disabled={streamBusy}>SAVE STREAM INFO</button>{#if streamError}<div class="auth-error">{streamError}</div>{/if}</div>{/if}{#if showModeration}<div class="stream-editor"><label class="micro" for="moderation-action">ACTION</label><select id="moderation-action" class="control" bind:value={moderationAction}><option value="timeout">TIMEOUT</option><option value="ban">BAN</option><option value="unban">UNBAN</option><option value="delete_message">DELETE MESSAGE</option></select><label class="micro" for="moderation-user">USER ID</label><input id="moderation-user" class="control" bind:value={moderationUserId} maxlength="64" /><label class="micro" for="moderation-message">MESSAGE ID (DELETE)</label><input id="moderation-message" class="control" bind:value={moderationMessageId} maxlength="128" /><label class="micro" for="moderation-duration">TIMEOUT SECONDS</label><input id="moderation-duration" class="control" type="number" min="1" max="1209600" bind:value={moderationDuration} /><label class="micro" for="moderation-reason">REASON</label><input id="moderation-reason" class="control" maxlength="500" bind:value={moderationReason} /><button class="primary control-button" onclick={applyModeration} disabled={moderationBusy || !moderationUserId}>APPLY MODERATION</button>{#if moderationError}<div class="auth-error">{moderationError}</div>{/if}</div>{/if}</section>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user