Notification-Bot: Discord-Benachrichtigungen für Streams

- Neues Notification-Plugin mit eigenem Discord-Bot
- Admin-Modal im Streaming-Tab für Channel-Konfiguration
- Automatische Benachrichtigungen bei Stream-Start/Ende
- Stream-Links mit Passwort-Hinweis in Discord-Embeds
- Konfigurierbare Events pro Channel (stream_start, stream_end)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/plugins/streaming/StreamingTab.tsx

@@ -61,6 +61,17 @@ export default function StreamingTab({ data }: { data: any }) {
   const [openMenu, setOpenMenu] = useState<string | null>(null);
   const [copiedId, setCopiedId] = useState<string | null>(null);
 
+  // ── Admin / Notification Config ──
+  const [showAdmin, setShowAdmin] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [adminPwd, setAdminPwd] = useState('');
+  const [adminError, setAdminError] = useState('');
+  const [availableChannels, setAvailableChannels] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string }>>([]);
+  const [notifyConfig, setNotifyConfig] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string; events: string[] }>>([]);
+  const [configLoading, setConfigLoading] = useState(false);
+  const [configSaving, setConfigSaving] = useState(false);
+  const [notifyStatus, setNotifyStatus] = useState<{ online: boolean; botTag: string | null }>({ online: false, botTag: null });
+
   // ── Refs ──
   const wsRef = useRef<WebSocket | null>(null);
   const clientIdRef = useRef<string>('');
@@ -112,6 +123,18 @@ export default function StreamingTab({ data }: { data: any }) {
     return () => document.removeEventListener('click', handler);
   }, [openMenu]);
 
+  // Check admin status on mount
+  useEffect(() => {
+    fetch('/api/notifications/admin/status', { credentials: 'include' })
+      .then(r => r.json())
+      .then(d => setIsAdmin(d.admin === true))
+      .catch(() => {});
+    fetch('/api/notifications/status')
+      .then(r => r.json())
+      .then(d => setNotifyStatus(d))
+      .catch(() => {});
+  }, []);
+
   // ── Send via WS ──
   const wsSend = useCallback((d: Record<string, any>) => {
     if (wsRef.current?.readyState === WebSocket.OPEN) {
@@ -536,6 +559,98 @@ export default function StreamingTab({ data }: { data: any }) {
     setOpenMenu(null);
   }, [buildStreamLink]);
 
+  // ── Admin functions ──
+  const adminLogin = useCallback(async () => {
+    setAdminError('');
+    try {
+      const resp = await fetch('/api/notifications/admin/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password: adminPwd }),
+        credentials: 'include',
+      });
+      if (resp.ok) {
+        setIsAdmin(true);
+        setAdminPwd('');
+        loadNotifyConfig();
+      } else {
+        const d = await resp.json();
+        setAdminError(d.error || 'Fehler');
+      }
+    } catch {
+      setAdminError('Verbindung fehlgeschlagen');
+    }
+  }, [adminPwd]);
+
+  const adminLogout = useCallback(async () => {
+    await fetch('/api/notifications/admin/logout', { method: 'POST', credentials: 'include' });
+    setIsAdmin(false);
+    setShowAdmin(false);
+  }, []);
+
+  const loadNotifyConfig = useCallback(async () => {
+    setConfigLoading(true);
+    try {
+      const [chResp, cfgResp] = await Promise.all([
+        fetch('/api/notifications/channels', { credentials: 'include' }),
+        fetch('/api/notifications/config', { credentials: 'include' }),
+      ]);
+      if (chResp.ok) {
+        const chData = await chResp.json();
+        setAvailableChannels(chData.channels || []);
+      }
+      if (cfgResp.ok) {
+        const cfgData = await cfgResp.json();
+        setNotifyConfig(cfgData.channels || []);
+      }
+    } catch { /* silent */ }
+    finally { setConfigLoading(false); }
+  }, []);
+
+  const openAdmin = useCallback(() => {
+    setShowAdmin(true);
+    if (isAdmin) loadNotifyConfig();
+  }, [isAdmin, loadNotifyConfig]);
+
+  const toggleChannelEvent = useCallback((channelId: string, channelName: string, guildId: string, guildName: string, event: string) => {
+    setNotifyConfig(prev => {
+      const existing = prev.find(c => c.channelId === channelId);
+      if (existing) {
+        const hasEvent = existing.events.includes(event);
+        const newEvents = hasEvent
+          ? existing.events.filter(e => e !== event)
+          : [...existing.events, event];
+        if (newEvents.length === 0) {
+          return prev.filter(c => c.channelId !== channelId);
+        }
+        return prev.map(c => c.channelId === channelId ? { ...c, events: newEvents } : c);
+      } else {
+        return [...prev, { channelId, channelName, guildId, guildName, events: [event] }];
+      }
+    });
+  }, []);
+
+  const saveNotifyConfig = useCallback(async () => {
+    setConfigSaving(true);
+    try {
+      const resp = await fetch('/api/notifications/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channels: notifyConfig }),
+        credentials: 'include',
+      });
+      if (resp.ok) {
+        // brief visual feedback handled by configSaving state
+      }
+    } catch { /* silent */ }
+    finally { setConfigSaving(false); }
+  }, [notifyConfig]);
+
+  const isChannelEventEnabled = useCallback((channelId: string, event: string): boolean => {
+    const ch = notifyConfig.find(c => c.channelId === channelId);
+    return ch?.events.includes(event) ?? false;
+  }, [notifyConfig]);
+
   // ── Render ──
 
   // Fullscreen viewer overlay
@@ -619,6 +734,9 @@ export default function StreamingTab({ data }: { data: any }) {
             {starting ? 'Starte...' : '\u{1F5A5}\uFE0F Stream starten'}
           </button>
         )}
+        <button className="stream-admin-btn" onClick={openAdmin} title="Notification Einstellungen">
+          {'\u2699\uFE0F'}
+        </button>
       </div>
 
       {streams.length === 0 && !isBroadcasting ? (
@@ -722,6 +840,101 @@ export default function StreamingTab({ data }: { data: any }) {
           </div>
         </div>
       )}
+
+      {/* ── Notification Admin Modal ── */}
+      {showAdmin && (
+        <div className="stream-admin-overlay" onClick={() => setShowAdmin(false)}>
+          <div className="stream-admin-panel" onClick={e => e.stopPropagation()}>
+            <div className="stream-admin-header">
+              <h3>{'\uD83D\uDD14'} Benachrichtigungen</h3>
+              <button className="stream-admin-close" onClick={() => setShowAdmin(false)}>{'\u2715'}</button>
+            </div>
+
+            {!isAdmin ? (
+              <div className="stream-admin-login">
+                <p>Admin-Passwort eingeben:</p>
+                <div className="stream-admin-login-row">
+                  <input
+                    type="password"
+                    className="stream-input"
+                    placeholder="Passwort"
+                    value={adminPwd}
+                    onChange={e => setAdminPwd(e.target.value)}
+                    onKeyDown={e => { if (e.key === 'Enter') adminLogin(); }}
+                    autoFocus
+                  />
+                  <button className="stream-btn" onClick={adminLogin}>Login</button>
+                </div>
+                {adminError && <p className="stream-admin-error">{adminError}</p>}
+              </div>
+            ) : (
+              <div className="stream-admin-content">
+                <div className="stream-admin-toolbar">
+                  <span className="stream-admin-status">
+                    {notifyStatus.online
+                      ? <>{'\u2705'} Bot online: <b>{notifyStatus.botTag}</b></>
+                      : <>{'\u26A0\uFE0F'} Bot offline — <code>DISCORD_TOKEN_NOTIFICATIONS</code> setzen</>}
+                  </span>
+                  <button className="stream-admin-logout" onClick={adminLogout}>Logout</button>
+                </div>
+
+                {configLoading ? (
+                  <div className="stream-admin-loading">Lade Kan{'\u00E4'}le...</div>
+                ) : availableChannels.length === 0 ? (
+                  <div className="stream-admin-empty">
+                    {notifyStatus.online
+                      ? 'Keine Text-Kan\u00E4le gefunden. Bot hat m\u00F6glicherweise keinen Zugriff.'
+                      : 'Bot ist nicht verbunden. Bitte DISCORD_TOKEN_NOTIFICATIONS konfigurieren.'}
+                  </div>
+                ) : (
+                  <>
+                    <p className="stream-admin-hint">
+                      W{'\u00E4'}hle die Kan{'\u00E4'}le, in die Benachrichtigungen gesendet werden sollen:
+                    </p>
+                    <div className="stream-admin-channel-list">
+                      {availableChannels.map(ch => (
+                        <div key={ch.channelId} className="stream-admin-channel">
+                          <div className="stream-admin-channel-info">
+                            <span className="stream-admin-channel-name">#{ch.channelName}</span>
+                            <span className="stream-admin-channel-guild">{ch.guildName}</span>
+                          </div>
+                          <div className="stream-admin-channel-events">
+                            <label className={`stream-admin-event-toggle${isChannelEventEnabled(ch.channelId, 'stream_start') ? ' active' : ''}`}>
+                              <input
+                                type="checkbox"
+                                checked={isChannelEventEnabled(ch.channelId, 'stream_start')}
+                                onChange={() => toggleChannelEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_start')}
+                              />
+                              {'\uD83D\uDD34'} Stream Start
+                            </label>
+                            <label className={`stream-admin-event-toggle${isChannelEventEnabled(ch.channelId, 'stream_end') ? ' active' : ''}`}>
+                              <input
+                                type="checkbox"
+                                checked={isChannelEventEnabled(ch.channelId, 'stream_end')}
+                                onChange={() => toggleChannelEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_end')}
+                              />
+                              {'\u23F9\uFE0F'} Stream Ende
+                            </label>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                    <div className="stream-admin-actions">
+                      <button
+                        className="stream-btn stream-admin-save"
+                        onClick={saveNotifyConfig}
+                        disabled={configSaving}
+                      >
+                        {configSaving ? 'Speichern...' : '\uD83D\uDCBE Speichern'}
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

web/src/plugins/streaming/streaming.css

@@ -471,3 +471,171 @@
   color: var(--text-normal);
   border-color: var(--text-faint);
 }
+
+/* ── Admin Button ── */
+.stream-admin-btn {
+  margin-left: auto;
+  padding: 8px;
+  border: none;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  transition: all var(--transition);
+  line-height: 1;
+}
+.stream-admin-btn:hover { color: var(--text-normal); background: var(--bg-tertiary); }
+
+/* ── Admin Overlay ── */
+.stream-admin-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, .6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  animation: fadeIn .15s ease;
+}
+@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+
+.stream-admin-panel {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  width: 560px;
+  max-width: 95vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
+  overflow: hidden;
+}
+
+.stream-admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+.stream-admin-header h3 { margin: 0; font-size: 16px; color: var(--text-normal); }
+.stream-admin-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius);
+}
+.stream-admin-close:hover { color: var(--text-normal); background: var(--bg-tertiary); }
+
+/* ── Admin Login ── */
+.stream-admin-login { padding: 24px 20px; }
+.stream-admin-login p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
+.stream-admin-login-row { display: flex; gap: 8px; }
+.stream-admin-login-row .stream-input { flex: 1; }
+.stream-admin-error { color: #ed4245; font-size: 13px; margin-top: 8px; }
+
+/* ── Admin Content ── */
+.stream-admin-content { padding: 16px 20px; overflow-y: auto; }
+
+.stream-admin-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+.stream-admin-status { font-size: 13px; color: var(--text-muted); }
+.stream-admin-status b { color: var(--text-normal); }
+.stream-admin-logout {
+  padding: 4px 12px;
+  border: 1px solid var(--bg-tertiary);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+.stream-admin-logout:hover { color: #ed4245; border-color: #ed4245; }
+
+.stream-admin-loading, .stream-admin-empty {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+.stream-admin-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
+
+/* ── Channel List ── */
+.stream-admin-channel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 45vh;
+  overflow-y: auto;
+}
+.stream-admin-channel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--bg-deep);
+  border-radius: var(--radius);
+  gap: 12px;
+}
+.stream-admin-channel-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.stream-admin-channel-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.stream-admin-channel-guild {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+.stream-admin-channel-events {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.stream-admin-event-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.stream-admin-event-toggle input { display: none; }
+.stream-admin-event-toggle:hover { color: var(--text-normal); }
+.stream-admin-event-toggle.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+/* ── Actions ── */
+.stream-admin-actions {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+.stream-admin-save {
+  padding: 8px 24px;
+}