5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1482 lines
68 KiB
TypeScript
1482 lines
68 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useTheme } from '@/lib/ThemeContext'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
|
|
// ============================================
|
|
// CONFIGURATION
|
|
// ============================================
|
|
|
|
// API calls now go through Next.js rewrites (see next.config.js)
|
|
// This avoids mixed-content issues when accessing via HTTPS
|
|
const getBackendUrl = () => {
|
|
// Return empty string to use relative URLs that go through Next.js proxy
|
|
return ''
|
|
}
|
|
const getJitsiUrl = () => {
|
|
if (typeof window === 'undefined') return 'http://localhost:8443'
|
|
const { hostname, protocol } = window.location
|
|
// Use /jitsi/ path on same origin to avoid SSL certificate issues with separate ports
|
|
return hostname === 'localhost' ? 'http://localhost:8443' : `${protocol}//${hostname}/jitsi`
|
|
}
|
|
|
|
// ============================================
|
|
// TYPES
|
|
// ============================================
|
|
|
|
type TabType = 'dashboard' | 'breakout' | 'recordings'
|
|
|
|
interface MeetingStats {
|
|
active: number
|
|
scheduled: number
|
|
recordings: number
|
|
participants: number
|
|
}
|
|
|
|
interface Meeting {
|
|
room_name: string
|
|
title: string
|
|
type: string
|
|
scheduled_at?: string
|
|
duration: number
|
|
participants?: number
|
|
started_at?: string
|
|
}
|
|
|
|
interface MeetingConfig {
|
|
enable_lobby: boolean
|
|
enable_recording: boolean
|
|
start_with_audio_muted: boolean
|
|
start_with_video_muted: boolean
|
|
}
|
|
|
|
interface Recording {
|
|
id: string
|
|
meeting_id: string
|
|
title: string
|
|
recorded_at: string
|
|
duration_seconds: number
|
|
file_size_bytes: number
|
|
status: string
|
|
transcription_status?: string
|
|
}
|
|
|
|
interface BreakoutRoom {
|
|
id: string
|
|
name: string
|
|
participants: string[]
|
|
}
|
|
|
|
// ============================================
|
|
// ICONS
|
|
// ============================================
|
|
|
|
const Icons = {
|
|
video: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
calendar: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
users: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
),
|
|
graduation: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l9-5-9-5-9 5 9 5z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
|
</svg>
|
|
),
|
|
record: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10" strokeWidth={2} />
|
|
<circle cx="12" cy="12" r="4" fill="currentColor" />
|
|
</svg>
|
|
),
|
|
clock: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
plus: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
),
|
|
copy: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
external: (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
),
|
|
close: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
),
|
|
grid: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
</svg>
|
|
),
|
|
play: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
download: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
),
|
|
trash: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
),
|
|
document: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
),
|
|
refresh: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
// ============================================
|
|
// MAIN COMPONENT
|
|
// ============================================
|
|
|
|
export default function MeetPage() {
|
|
const { isDark } = useTheme()
|
|
const { t } = useLanguage()
|
|
|
|
// Tab state
|
|
const [activeTab, setActiveTab] = useState<TabType>('dashboard')
|
|
|
|
const [stats, setStats] = useState<MeetingStats>({ active: 0, scheduled: 0, recordings: 0, participants: 0 })
|
|
const [scheduledMeetings, setScheduledMeetings] = useState<Meeting[]>([])
|
|
const [activeMeetings, setActiveMeetings] = useState<Meeting[]>([])
|
|
const [recordings, setRecordings] = useState<Recording[]>([])
|
|
const [recordingsFilter, setRecordingsFilter] = useState<string>('all')
|
|
const [loading, setLoading] = useState(true)
|
|
const [showNewMeetingModal, setShowNewMeetingModal] = useState(false)
|
|
const [showJoinModal, setShowJoinModal] = useState(false)
|
|
const [showTranscriptModal, setShowTranscriptModal] = useState(false)
|
|
const [currentMeetingUrl, setCurrentMeetingUrl] = useState('')
|
|
const [currentMeetingTitle, setCurrentMeetingTitle] = useState('')
|
|
const [currentRecording, setCurrentRecording] = useState<Recording | null>(null)
|
|
const [transcriptText, setTranscriptText] = useState('')
|
|
const [transcriptLoading, setTranscriptLoading] = useState(false)
|
|
|
|
// Breakout rooms state
|
|
const [breakoutRooms, setBreakoutRooms] = useState<BreakoutRoom[]>([
|
|
{ id: '1', name: 'Raum 1', participants: [] },
|
|
{ id: '2', name: 'Raum 2', participants: [] },
|
|
{ id: '3', name: 'Raum 3', participants: [] },
|
|
])
|
|
const [breakoutAssignment, setBreakoutAssignment] = useState('equal')
|
|
const [breakoutTimer, setBreakoutTimer] = useState(15)
|
|
const [hasActiveMeeting, setHasActiveMeeting] = useState(false)
|
|
|
|
// Form state
|
|
const [meetingType, setMeetingType] = useState('quick')
|
|
const [meetingTitle, setMeetingTitle] = useState('')
|
|
const [meetingDuration, setMeetingDuration] = useState(60)
|
|
const [meetingDateTime, setMeetingDateTime] = useState('')
|
|
const [enableLobby, setEnableLobby] = useState(true)
|
|
const [enableRecording, setEnableRecording] = useState(false)
|
|
const [muteOnStart, setMuteOnStart] = useState(true)
|
|
const [creating, setCreating] = useState(false)
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
|
|
|
// ============================================
|
|
// DATA FETCHING
|
|
// ============================================
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [])
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [statsRes, scheduledRes, activeRes, recordingsRes] = await Promise.all([
|
|
fetch(`${getBackendUrl()}/api/meetings/stats`).catch(() => null),
|
|
fetch(`${getBackendUrl()}/api/meetings/scheduled`).catch(() => null),
|
|
fetch(`${getBackendUrl()}/api/meetings/active`).catch(() => null),
|
|
fetch(`${getBackendUrl()}/api/recordings`).catch(() => null),
|
|
])
|
|
|
|
if (statsRes?.ok) {
|
|
const statsData = await statsRes.json()
|
|
setStats(statsData)
|
|
}
|
|
|
|
if (scheduledRes?.ok) {
|
|
const scheduledData = await scheduledRes.json()
|
|
setScheduledMeetings(scheduledData)
|
|
}
|
|
|
|
if (activeRes?.ok) {
|
|
const activeData = await activeRes.json()
|
|
setActiveMeetings(activeData)
|
|
setHasActiveMeeting(activeData.length > 0)
|
|
}
|
|
|
|
if (recordingsRes?.ok) {
|
|
const recordingsData = await recordingsRes.json()
|
|
setRecordings(recordingsData.recordings || recordingsData || [])
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch meeting data:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// ACTIONS
|
|
// ============================================
|
|
|
|
const createMeeting = async () => {
|
|
setCreating(true)
|
|
setErrorMessage(null)
|
|
try {
|
|
const response = await fetch(`${getBackendUrl()}/api/meetings/create`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type: meetingType,
|
|
title: meetingTitle || 'Neues Meeting',
|
|
duration: meetingDuration,
|
|
scheduled_at: meetingType !== 'quick' ? meetingDateTime : null,
|
|
config: {
|
|
enable_lobby: enableLobby,
|
|
enable_recording: enableRecording,
|
|
start_with_audio_muted: muteOnStart,
|
|
start_with_video_muted: false,
|
|
},
|
|
}),
|
|
})
|
|
|
|
if (response.ok) {
|
|
const meeting = await response.json()
|
|
setShowNewMeetingModal(false)
|
|
|
|
// If quick meeting, join immediately
|
|
if (meetingType === 'quick') {
|
|
joinMeeting(meeting.room_name, meetingTitle || 'Neues Meeting')
|
|
} else {
|
|
fetchData() // Refresh the list
|
|
}
|
|
|
|
// Reset form
|
|
setMeetingTitle('')
|
|
setMeetingType('quick')
|
|
} else {
|
|
const errorData = await response.json().catch(() => ({}))
|
|
const errorMsg = errorData.detail || `Server-Fehler: ${response.status}`
|
|
setErrorMessage(errorMsg)
|
|
console.error('Failed to create meeting:', response.status, errorData)
|
|
}
|
|
} catch (error) {
|
|
const errorMsg = error instanceof Error ? error.message : 'Netzwerkfehler - Backend nicht erreichbar'
|
|
setErrorMessage(errorMsg)
|
|
console.error('Failed to create meeting:', error)
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
const startQuickMeeting = async () => {
|
|
setCreating(true)
|
|
setErrorMessage(null)
|
|
try {
|
|
const response = await fetch(`${getBackendUrl()}/api/meetings/create`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
type: 'quick',
|
|
title: 'Sofort-Meeting',
|
|
duration: 60,
|
|
config: {
|
|
enable_lobby: false,
|
|
enable_recording: false,
|
|
start_with_audio_muted: true,
|
|
start_with_video_muted: false,
|
|
},
|
|
}),
|
|
})
|
|
|
|
if (response.ok) {
|
|
const meeting = await response.json()
|
|
joinMeeting(meeting.room_name, 'Sofort-Meeting')
|
|
} else {
|
|
const errorData = await response.json().catch(() => ({}))
|
|
const errorMsg = errorData.detail || `Server-Fehler: ${response.status}`
|
|
setErrorMessage(errorMsg)
|
|
console.error('Failed to create meeting:', response.status, errorData)
|
|
}
|
|
} catch (error) {
|
|
const errorMsg = error instanceof Error ? error.message : 'Netzwerkfehler - Backend nicht erreichbar'
|
|
setErrorMessage(errorMsg)
|
|
console.error('Failed to start quick meeting:', error)
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
const joinMeeting = (roomName: string, title: string) => {
|
|
const url = `${getJitsiUrl()}/${roomName}#config.prejoinPageEnabled=false&config.defaultLanguage=de&interfaceConfig.SHOW_JITSI_WATERMARK=false`
|
|
setCurrentMeetingUrl(url)
|
|
setCurrentMeetingTitle(title)
|
|
setShowJoinModal(true)
|
|
}
|
|
|
|
const openInNewTab = () => {
|
|
window.open(currentMeetingUrl, '_blank')
|
|
setShowJoinModal(false)
|
|
}
|
|
|
|
const copyMeetingLink = async (roomName: string) => {
|
|
const url = `${getJitsiUrl()}/${roomName}`
|
|
await navigator.clipboard.writeText(url)
|
|
}
|
|
|
|
const formatTime = (dateString: string) => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString)
|
|
const today = new Date()
|
|
const tomorrow = new Date(today)
|
|
tomorrow.setDate(tomorrow.getDate() + 1)
|
|
|
|
if (date.toDateString() === today.toDateString()) return 'Heute'
|
|
if (date.toDateString() === tomorrow.toDateString()) return 'Morgen'
|
|
return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })
|
|
}
|
|
|
|
const formatDuration = (seconds: number) => {
|
|
const h = Math.floor(seconds / 3600)
|
|
const m = Math.floor((seconds % 3600) / 60)
|
|
const s = seconds % 60
|
|
if (h > 0) {
|
|
return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
|
}
|
|
return `${m}:${String(s).padStart(2, '0')}`
|
|
}
|
|
|
|
const formatFileSize = (bytes: number) => {
|
|
if (bytes < 1024 * 1024) {
|
|
return (bytes / 1024).toFixed(1) + ' KB'
|
|
}
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
|
}
|
|
|
|
// Recording actions
|
|
const playRecording = (recordingId: string) => {
|
|
window.open(`${getBackendUrl()}/meetings/recordings/${recordingId}/play`, '_blank')
|
|
}
|
|
|
|
const viewTranscript = async (recording: Recording) => {
|
|
setCurrentRecording(recording)
|
|
setShowTranscriptModal(true)
|
|
setTranscriptLoading(true)
|
|
setTranscriptText('')
|
|
|
|
try {
|
|
const response = await fetch(`${getBackendUrl()}/api/recordings/${recording.id}/transcription/text`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setTranscriptText(data.text || 'Kein Transkript verfuegbar')
|
|
} else if (response.status === 404) {
|
|
setTranscriptText('PENDING')
|
|
} else {
|
|
setTranscriptText('Fehler beim Laden des Transkripts')
|
|
}
|
|
} catch {
|
|
setTranscriptText('Fehler beim Laden des Transkripts')
|
|
} finally {
|
|
setTranscriptLoading(false)
|
|
}
|
|
}
|
|
|
|
const startTranscription = async (recordingId: string) => {
|
|
try {
|
|
const response = await fetch(`${getBackendUrl()}/api/recordings/${recordingId}/transcribe`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ language: 'de', model: 'large-v3' }),
|
|
})
|
|
if (response.ok) {
|
|
alert('Transkription gestartet! Dies kann einige Minuten dauern.')
|
|
setShowTranscriptModal(false)
|
|
fetchData()
|
|
}
|
|
} catch {
|
|
alert('Fehler beim Starten der Transkription')
|
|
}
|
|
}
|
|
|
|
const downloadRecording = (recordingId: string) => {
|
|
window.location.href = `${getBackendUrl()}/api/recordings/${recordingId}/download`
|
|
}
|
|
|
|
const deleteRecording = async (recordingId: string) => {
|
|
const reason = prompt('Grund fuer die Loeschung (DSGVO-Dokumentation):')
|
|
if (!reason) return
|
|
|
|
try {
|
|
const response = await fetch(`${getBackendUrl()}/api/recordings/${recordingId}?reason=${encodeURIComponent(reason)}`, {
|
|
method: 'DELETE',
|
|
})
|
|
if (response.ok) {
|
|
fetchData()
|
|
}
|
|
} catch {
|
|
alert('Fehler beim Loeschen')
|
|
}
|
|
}
|
|
|
|
const filteredRecordings = recordings.filter((r) => {
|
|
if (recordingsFilter === 'all') return true
|
|
return r.status === recordingsFilter
|
|
})
|
|
|
|
const totalStorageBytes = recordings.reduce((sum, r) => sum + (r.file_size_bytes || 0), 0)
|
|
const maxStorageGB = 10
|
|
const storagePercent = ((totalStorageBytes / (maxStorageGB * 1024 * 1024 * 1024)) * 100).toFixed(1)
|
|
|
|
// Breakout room actions
|
|
const addBreakoutRoom = () => {
|
|
const newId = String(breakoutRooms.length + 1)
|
|
setBreakoutRooms([...breakoutRooms, { id: newId, name: `Raum ${newId}`, participants: [] }])
|
|
}
|
|
|
|
const removeBreakoutRoom = (id: string) => {
|
|
setBreakoutRooms(breakoutRooms.filter((r) => r.id !== id))
|
|
}
|
|
|
|
// Stats data
|
|
const statsData = [
|
|
{ label: 'Aktive Meetings', value: loading ? '-' : String(stats.active), icon: Icons.video, color: 'from-green-400 to-emerald-600' },
|
|
{ label: 'Geplante Termine', value: loading ? '-' : String(stats.scheduled), icon: Icons.calendar, color: 'from-blue-400 to-blue-600' },
|
|
{ label: 'Aufzeichnungen', value: loading ? '-' : String(stats.recordings), icon: Icons.record, color: 'from-red-400 to-rose-600' },
|
|
{ label: 'Teilnehmer', value: loading ? '-' : String(stats.participants), icon: Icons.users, color: 'from-amber-400 to-orange-600' },
|
|
]
|
|
|
|
// ============================================
|
|
// RENDER
|
|
// ============================================
|
|
|
|
return (
|
|
<div className={`min-h-screen relative overflow-hidden ${
|
|
isDark
|
|
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
|
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
|
|
}`}>
|
|
{/* Animated Background Blobs */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
|
|
isDark ? 'bg-purple-500 opacity-70' : 'bg-purple-300 opacity-50'
|
|
}`} />
|
|
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
|
|
isDark ? 'bg-blue-500 opacity-70' : 'bg-blue-300 opacity-50'
|
|
}`} />
|
|
<div className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
|
|
isDark ? 'bg-pink-500 opacity-70' : 'bg-pink-300 opacity-50'
|
|
}`} />
|
|
</div>
|
|
|
|
{/* Layout with Sidebar */}
|
|
<div className="relative z-10 flex min-h-screen gap-6 p-4">
|
|
{/* Sidebar */}
|
|
<Sidebar />
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className={`text-4xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
BreakPilot Meet
|
|
</h1>
|
|
<p className={isDark ? 'text-white/60' : 'text-slate-600'}>
|
|
Videokonferenzen, Schulungen und Elterngespraeche verwalten
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowNewMeetingModal(true)}
|
|
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-2xl font-medium hover:shadow-xl hover:shadow-purple-500/30 transition-all hover:scale-105"
|
|
>
|
|
{Icons.plus}
|
|
Neues Meeting
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className={`backdrop-blur-xl border rounded-2xl p-1 inline-flex gap-1 mb-8 ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
{[
|
|
{ id: 'dashboard', label: 'Dashboard' },
|
|
{ id: 'breakout', label: 'Breakout-Rooms' },
|
|
{ id: 'recordings', label: 'Aufzeichnungen' },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as TabType)}
|
|
className={`px-6 py-3 rounded-xl font-medium transition-all ${
|
|
activeTab === tab.id
|
|
? isDark
|
|
? 'bg-white/20 text-white shadow-lg'
|
|
: 'bg-white text-slate-900 shadow-lg'
|
|
: isDark
|
|
? 'text-white/60 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Dashboard Tab */}
|
|
{activeTab === 'dashboard' && (
|
|
<>
|
|
{/* Error Banner */}
|
|
{errorMessage && (
|
|
<div className={`mb-6 p-4 rounded-xl flex items-center justify-between ${
|
|
isDark ? 'bg-red-500/20 border border-red-500/30' : 'bg-red-50 border border-red-200'
|
|
}`}>
|
|
<div className="flex items-center gap-3">
|
|
<svg className={`w-5 h-5 ${isDark ? 'text-red-400' : 'text-red-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className={isDark ? 'text-red-200' : 'text-red-700'}>{errorMessage}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setErrorMessage(null)}
|
|
className={`p-1 rounded-lg transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-red-100'}`}
|
|
>
|
|
<svg className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<button
|
|
onClick={startQuickMeeting}
|
|
disabled={creating}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 text-left transition-all hover:scale-105 hover:shadow-xl ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4">
|
|
{Icons.video}
|
|
</div>
|
|
<div className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Sofort-Meeting</div>
|
|
<div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Jetzt starten</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => { setMeetingType('scheduled'); setShowNewMeetingModal(true) }}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 text-left transition-all hover:scale-105 hover:shadow-xl ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4">
|
|
{Icons.calendar}
|
|
</div>
|
|
<div className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Meeting planen</div>
|
|
<div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Termin festlegen</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => { setMeetingType('training'); setShowNewMeetingModal(true) }}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 text-left transition-all hover:scale-105 hover:shadow-xl ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4">
|
|
{Icons.graduation}
|
|
</div>
|
|
<div className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Schulung erstellen</div>
|
|
<div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Training planen</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => { setMeetingType('parent'); setShowNewMeetingModal(true) }}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 text-left transition-all hover:scale-105 hover:shadow-xl ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-amber-400 to-orange-600 rounded-2xl flex items-center justify-center text-white shadow-lg mb-4">
|
|
{Icons.users}
|
|
</div>
|
|
<div className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Elterngespraech</div>
|
|
<div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Termin vereinbaren</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Statistics */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
{statsData.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 transition-all hover:scale-105 hover:shadow-xl cursor-pointer ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className={`w-12 h-12 bg-gradient-to-br ${stat.color} rounded-2xl flex items-center justify-center text-white shadow-lg`}>
|
|
{stat.icon}
|
|
</div>
|
|
<svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
<p className={`text-sm mb-1 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{stat.label}</p>
|
|
<p className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{stat.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Active Meetings */}
|
|
{activeMeetings.length > 0 && (
|
|
<div className={`backdrop-blur-xl border rounded-3xl mb-8 overflow-hidden ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<div className={`p-6 border-b flex items-center justify-between ${
|
|
isDark ? 'border-white/10' : 'border-slate-200'
|
|
}`}>
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Aktive Meetings</h2>
|
|
<span className="px-3 py-1 bg-green-500/20 text-green-400 text-sm font-medium rounded-full">
|
|
{activeMeetings.length} Live
|
|
</span>
|
|
</div>
|
|
<div className="divide-y divide-white/10">
|
|
{activeMeetings.map((meeting) => (
|
|
<div key={meeting.room_name} className={`p-6 flex items-center gap-4 transition-colors ${
|
|
isDark ? 'hover:bg-white/5' : 'hover:bg-slate-50'
|
|
}`}>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl flex items-center justify-center text-white animate-pulse">
|
|
{Icons.video}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{meeting.title}</div>
|
|
<div className={`flex items-center gap-4 text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
<span className="flex items-center gap-1">{Icons.users} {meeting.participants || 0} Teilnehmer</span>
|
|
{meeting.started_at && (
|
|
<span className="flex items-center gap-1">{Icons.clock} Gestartet {formatTime(meeting.started_at)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => joinMeeting(meeting.room_name, meeting.title)}
|
|
className="px-5 py-2.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-green-500/30 transition-all hover:scale-105"
|
|
>
|
|
Beitreten
|
|
</button>
|
|
<button
|
|
onClick={() => copyMeetingLink(meeting.room_name)}
|
|
className={`p-2.5 rounded-xl transition-all ${
|
|
isDark
|
|
? 'text-white/40 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
title="Link kopieren"
|
|
>
|
|
{Icons.copy}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Scheduled Meetings */}
|
|
<div className={`backdrop-blur-xl border rounded-3xl overflow-hidden ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<div className={`p-6 border-b flex items-center justify-between ${
|
|
isDark ? 'border-white/10' : 'border-slate-200'
|
|
}`}>
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Naechste Meetings</h2>
|
|
<button className={`text-sm transition-colors ${
|
|
isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'
|
|
}`}>
|
|
Alle anzeigen →
|
|
</button>
|
|
</div>
|
|
{loading ? (
|
|
<div className={`p-12 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Laet...</div>
|
|
) : scheduledMeetings.length === 0 ? (
|
|
<div className="p-12 text-center">
|
|
<div className={`w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 ${
|
|
isDark ? 'bg-white/10' : 'bg-slate-100'
|
|
}`}>
|
|
<span className="text-4xl">{Icons.calendar}</span>
|
|
</div>
|
|
<p className={`mb-4 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>Keine geplanten Meetings</p>
|
|
<button
|
|
onClick={() => setShowNewMeetingModal(true)}
|
|
className="text-blue-500 hover:text-blue-400 font-medium"
|
|
>
|
|
Meeting planen
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className={`divide-y ${isDark ? 'divide-white/10' : 'divide-slate-100'}`}>
|
|
{scheduledMeetings.slice(0, 5).map((meeting) => (
|
|
<div key={meeting.room_name} className={`p-6 flex items-center gap-4 transition-colors ${
|
|
isDark ? 'hover:bg-white/5' : 'hover:bg-slate-50'
|
|
}`}>
|
|
<div className={`text-center min-w-[70px] px-3 py-2 rounded-2xl ${
|
|
isDark ? 'bg-white/10' : 'bg-slate-100'
|
|
}`}>
|
|
<div className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{meeting.scheduled_at ? formatTime(meeting.scheduled_at) : '--:--'}
|
|
</div>
|
|
<div className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{meeting.scheduled_at ? formatDate(meeting.scheduled_at) : ''}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{meeting.title}</div>
|
|
<div className={`flex items-center gap-4 text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
<span className="flex items-center gap-1">{Icons.clock} {meeting.duration} Min</span>
|
|
<span className="capitalize">{meeting.type}</span>
|
|
</div>
|
|
</div>
|
|
<span className={`px-3 py-1 text-xs font-medium rounded-full ${
|
|
isDark ? 'bg-blue-500/20 text-blue-300' : 'bg-blue-100 text-blue-700'
|
|
}`}>
|
|
Geplant
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => joinMeeting(meeting.room_name, meeting.title)}
|
|
className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105"
|
|
>
|
|
Beitreten
|
|
</button>
|
|
<button
|
|
onClick={() => copyMeetingLink(meeting.room_name)}
|
|
className={`p-2.5 rounded-xl transition-all ${
|
|
isDark
|
|
? 'text-white/40 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
title="Link kopieren"
|
|
>
|
|
{Icons.copy}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Breakout Rooms Tab */}
|
|
{activeTab === 'breakout' && (
|
|
<>
|
|
{/* Active Meeting Warning */}
|
|
{!hasActiveMeeting && (
|
|
<div className={`backdrop-blur-xl border rounded-3xl p-6 flex items-center gap-6 mb-8 ${
|
|
isDark
|
|
? 'bg-blue-500/10 border-blue-500/30'
|
|
: 'bg-blue-50 border-blue-200 shadow-lg'
|
|
}`}>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
|
|
{Icons.video}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Kein aktives Meeting</div>
|
|
<div className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
|
Breakout-Rooms koennen nur waehrend eines aktiven Meetings erstellt werden.
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={startQuickMeeting}
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-2xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105"
|
|
>
|
|
Meeting starten
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* How it works */}
|
|
<div className={`backdrop-blur-xl border rounded-3xl p-6 mb-8 ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>So funktionieren Breakout-Rooms</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{ icon: Icons.grid, color: 'from-blue-400 to-blue-600', title: '1. Raeume erstellen', desc: 'Erstellen Sie mehrere Breakout-Rooms fuer Gruppenarbeit.' },
|
|
{ icon: Icons.users, color: 'from-purple-400 to-purple-600', title: '2. Teilnehmer zuweisen', desc: 'Weisen Sie Teilnehmer manuell oder automatisch zu.' },
|
|
{ icon: Icons.play, color: 'from-green-400 to-emerald-600', title: '3. Sessions starten', desc: 'Starten Sie alle Raeume gleichzeitig oder einzeln.' },
|
|
{ icon: Icons.clock, color: 'from-amber-400 to-orange-600', title: '4. Timer setzen', desc: 'Setzen Sie einen Timer fuer automatisches Beenden.' },
|
|
].map((step, index) => (
|
|
<div key={index} className="text-center">
|
|
<div className={`w-14 h-14 bg-gradient-to-br ${step.color} rounded-2xl flex items-center justify-center text-white shadow-lg mx-auto mb-4`}>
|
|
{step.icon}
|
|
</div>
|
|
<h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>{step.title}</h4>
|
|
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{step.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Breakout Configuration */}
|
|
<div className={`backdrop-blur-xl border rounded-3xl overflow-hidden ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<div className={`p-6 border-b flex items-center justify-between ${
|
|
isDark ? 'border-white/10' : 'border-slate-200'
|
|
}`}>
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Breakout-Konfiguration</h2>
|
|
<button
|
|
onClick={addBreakoutRoom}
|
|
disabled={!hasActiveMeeting}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{Icons.plus}
|
|
Raum hinzufuegen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Breakout Rooms Grid */}
|
|
<div className="p-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
|
|
{breakoutRooms.map((room) => (
|
|
<div
|
|
key={room.id}
|
|
className={`backdrop-blur-xl border rounded-2xl p-4 transition-all ${
|
|
hasActiveMeeting
|
|
? isDark
|
|
? 'bg-white/5 border-white/10'
|
|
: 'bg-white/50 border-slate-200'
|
|
: 'opacity-50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{room.name}</span>
|
|
<span className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>{room.participants.length} Teilnehmer</span>
|
|
</div>
|
|
<div className={`min-h-[60px] rounded-xl p-3 text-sm ${
|
|
isDark ? 'bg-white/5 text-white/40' : 'bg-slate-50 text-slate-400'
|
|
}`}>
|
|
{room.participants.length > 0
|
|
? room.participants.join(', ')
|
|
: 'Keine Teilnehmer'}
|
|
</div>
|
|
{breakoutRooms.length > 1 && (
|
|
<button
|
|
onClick={() => removeBreakoutRoom(room.id)}
|
|
className="mt-3 text-sm text-red-500 hover:text-red-400 transition-colors"
|
|
>
|
|
Entfernen
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={`border-t pt-6 space-y-4 ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
|
|
Automatische Zuweisung
|
|
</label>
|
|
<select
|
|
value={breakoutAssignment}
|
|
onChange={(e) => setBreakoutAssignment(e.target.value)}
|
|
disabled={!hasActiveMeeting}
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
|
|
: 'bg-white border border-slate-300 text-slate-900 focus:ring-blue-300'
|
|
}`}
|
|
>
|
|
<option value="equal">Gleichmaessig verteilen</option>
|
|
<option value="random">Zufaellig zuweisen</option>
|
|
<option value="manual">Manuell zuweisen</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
|
|
Timer (Minuten)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={breakoutTimer}
|
|
onChange={(e) => setBreakoutTimer(Number(e.target.value))}
|
|
disabled={!hasActiveMeeting}
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
|
|
: 'bg-white border border-slate-300 text-slate-900 focus:ring-blue-300'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
disabled={!hasActiveMeeting}
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
|
>
|
|
Breakout-Sessions starten
|
|
</button>
|
|
<button
|
|
disabled={!hasActiveMeeting}
|
|
className={`px-6 py-3 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Alle zurueckholen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Recordings Tab */}
|
|
{activeTab === 'recordings' && (
|
|
<>
|
|
{/* Filter Tabs */}
|
|
<div className="flex flex-wrap gap-2 mb-8">
|
|
{[
|
|
{ key: 'all', label: 'Alle' },
|
|
{ key: 'uploaded', label: 'Neu' },
|
|
{ key: 'processing', label: 'In Verarbeitung' },
|
|
{ key: 'ready', label: 'Fertig' },
|
|
].map((filter) => (
|
|
<button
|
|
key={filter.key}
|
|
onClick={() => setRecordingsFilter(filter.key)}
|
|
className={`px-5 py-2.5 rounded-xl font-medium transition-all ${
|
|
recordingsFilter === filter.key
|
|
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
|
: isDark
|
|
? 'bg-white/10 text-white/60 hover:bg-white/20 hover:text-white'
|
|
: 'bg-white/70 text-slate-600 hover:bg-white hover:text-slate-900 shadow'
|
|
}`}
|
|
>
|
|
{filter.label}
|
|
</button>
|
|
))}
|
|
<div className="flex-1" />
|
|
<button
|
|
onClick={fetchData}
|
|
className={`flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-white/70 text-slate-700 hover:bg-white shadow'
|
|
}`}
|
|
>
|
|
{Icons.refresh}
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
|
|
{/* Recordings List */}
|
|
{loading ? (
|
|
<div className={`text-center py-12 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Lade Aufzeichnungen...</div>
|
|
) : filteredRecordings.length === 0 ? (
|
|
<div className={`backdrop-blur-xl border rounded-3xl p-12 text-center ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<div className={`w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 ${
|
|
isDark ? 'bg-white/10 text-white/40' : 'bg-slate-100 text-slate-400'
|
|
}`}>
|
|
{Icons.record}
|
|
</div>
|
|
<h3 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Keine Aufzeichnungen</h3>
|
|
<p className={`mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
Starten Sie eine Aufzeichnung in einem Meeting, um sie hier zu sehen.
|
|
</p>
|
|
<button
|
|
onClick={startQuickMeeting}
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105"
|
|
>
|
|
Meeting starten
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{filteredRecordings.map((recording) => (
|
|
<div
|
|
key={recording.id}
|
|
className={`backdrop-blur-xl border rounded-3xl p-6 flex items-center gap-4 transition-all hover:scale-[1.01] ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 hover:bg-white/15'
|
|
: 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
|
|
}`}
|
|
>
|
|
<div className="w-14 h-14 bg-gradient-to-br from-red-400 to-rose-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
|
|
{Icons.record}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className={`font-medium flex items-center gap-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{recording.title || `Aufzeichnung ${recording.meeting_id}`}
|
|
{recording.status === 'processing' && (
|
|
<span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs font-medium rounded-full">
|
|
Verarbeitung
|
|
</span>
|
|
)}
|
|
{recording.transcription_status === 'pending' && (
|
|
<span className="px-2 py-0.5 bg-blue-500/20 text-blue-400 text-xs font-medium rounded-full">
|
|
Transkript ausstehend
|
|
</span>
|
|
)}
|
|
{recording.transcription_status === 'completed' && (
|
|
<span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs font-medium rounded-full">
|
|
Transkript bereit
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{new Date(recording.recorded_at).toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
})},{' '}
|
|
{new Date(recording.recorded_at).toLocaleTimeString('de-DE', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})}{' '}
|
|
| {formatDuration(recording.duration_seconds || 0)} |{' '}
|
|
{formatFileSize(recording.file_size_bytes || 0)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => playRecording(recording.id)}
|
|
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{Icons.play}
|
|
Abspielen
|
|
</button>
|
|
<button
|
|
onClick={() => viewTranscript(recording)}
|
|
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{Icons.document}
|
|
Protokoll
|
|
</button>
|
|
<button
|
|
onClick={() => downloadRecording(recording.id)}
|
|
className={`p-2.5 rounded-xl transition-all ${
|
|
isDark
|
|
? 'text-white/40 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
title="Herunterladen"
|
|
>
|
|
{Icons.download}
|
|
</button>
|
|
<button
|
|
onClick={() => deleteRecording(recording.id)}
|
|
className={`p-2.5 rounded-xl transition-all ${
|
|
isDark
|
|
? 'text-white/40 hover:text-red-400 hover:bg-red-500/10'
|
|
: 'text-slate-400 hover:text-red-500 hover:bg-red-50'
|
|
}`}
|
|
title="Loeschen"
|
|
>
|
|
{Icons.trash}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Storage Info */}
|
|
<div className={`backdrop-blur-xl border rounded-3xl p-6 mt-8 ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20'
|
|
: 'bg-white/70 border-black/10 shadow-lg'
|
|
}`}>
|
|
<h3 className={`font-medium mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Speicherplatz</h3>
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<span className={isDark ? 'text-white/60' : 'text-slate-500'}>
|
|
{(totalStorageBytes / (1024 * 1024)).toFixed(1)} MB von {maxStorageGB} GB verwendet
|
|
</span>
|
|
<span className={isDark ? 'text-white/60' : 'text-slate-500'}>{storagePercent}%</span>
|
|
</div>
|
|
<div className={`h-3 rounded-full overflow-hidden ${isDark ? 'bg-white/10' : 'bg-slate-200'}`}>
|
|
<div
|
|
className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
|
|
style={{ width: `${Math.min(Number(storagePercent), 100)}%` }}
|
|
/>
|
|
</div>
|
|
<p className={`text-sm mt-3 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{recordings.length} Aufzeichnungen
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
|
|
{/* New Meeting Modal */}
|
|
{showNewMeetingModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowNewMeetingModal(false)} />
|
|
<div className={`relative w-full max-w-lg rounded-3xl border p-6 ${
|
|
isDark
|
|
? 'bg-slate-900 border-white/20'
|
|
: 'bg-white border-slate-200 shadow-2xl'
|
|
}`}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>Neues Meeting erstellen</h2>
|
|
<button
|
|
onClick={() => setShowNewMeetingModal(false)}
|
|
className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
{Icons.close}
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>Meeting-Typ</label>
|
|
<select
|
|
value={meetingType}
|
|
onChange={(e) => setMeetingType(e.target.value)}
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
|
|
: 'bg-slate-50 border border-slate-300 text-slate-900 focus:ring-blue-300'
|
|
}`}
|
|
>
|
|
<option value="quick">Sofort-Meeting</option>
|
|
<option value="scheduled">Geplantes Meeting</option>
|
|
<option value="training">Schulung</option>
|
|
<option value="parent">Elterngespraech</option>
|
|
<option value="class">Klassenkonferenz</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>Titel</label>
|
|
<input
|
|
type="text"
|
|
value={meetingTitle}
|
|
onChange={(e) => setMeetingTitle(e.target.value)}
|
|
placeholder="Meeting-Titel eingeben"
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white placeholder-white/40 focus:ring-white/30'
|
|
: 'bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 focus:ring-blue-300'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{meetingType !== 'quick' && (
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>Datum & Uhrzeit</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={meetingDateTime}
|
|
onChange={(e) => setMeetingDateTime(e.target.value)}
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
|
|
: 'bg-slate-50 border border-slate-300 text-slate-900 focus:ring-blue-300'
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-700'}`}>Dauer</label>
|
|
<select
|
|
value={meetingDuration}
|
|
onChange={(e) => setMeetingDuration(Number(e.target.value))}
|
|
className={`w-full px-4 py-3 rounded-xl transition-all focus:outline-none focus:ring-2 ${
|
|
isDark
|
|
? 'bg-white/10 border border-white/20 text-white focus:ring-white/30'
|
|
: 'bg-slate-50 border border-slate-300 text-slate-900 focus:ring-blue-300'
|
|
}`}
|
|
>
|
|
<option value={30}>30 Minuten</option>
|
|
<option value={60}>60 Minuten</option>
|
|
<option value={90}>90 Minuten</option>
|
|
<option value={120}>120 Minuten</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-2">
|
|
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={enableLobby}
|
|
onChange={(e) => setEnableLobby(e.target.checked)}
|
|
className="w-5 h-5 rounded text-blue-500 focus:ring-blue-500"
|
|
/>
|
|
<span className="text-sm">Warteraum aktivieren</span>
|
|
</label>
|
|
|
|
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={enableRecording}
|
|
onChange={(e) => setEnableRecording(e.target.checked)}
|
|
className="w-5 h-5 rounded text-blue-500 focus:ring-blue-500"
|
|
/>
|
|
<span className="text-sm">Aufzeichnung erlauben</span>
|
|
</label>
|
|
|
|
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white/70' : 'text-slate-700'}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={muteOnStart}
|
|
onChange={(e) => setMuteOnStart(e.target.checked)}
|
|
className="w-5 h-5 rounded text-blue-500 focus:ring-blue-500"
|
|
/>
|
|
<span className="text-sm">Teilnehmer stummschalten bei Beitritt</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-6 pt-6 border-t flex justify-end gap-3 ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
<button
|
|
onClick={() => setShowNewMeetingModal(false)}
|
|
className={`px-5 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'text-white/60 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={createMeeting}
|
|
disabled={creating}
|
|
className="px-6 py-2.5 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105 disabled:opacity-50 disabled:hover:scale-100"
|
|
>
|
|
{creating ? 'Erstellen...' : meetingType === 'quick' ? 'Meeting starten' : 'Meeting erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Join Meeting Modal (Embedded Jitsi) */}
|
|
{showJoinModal && (
|
|
<div className="fixed inset-0 bg-black/90 flex flex-col z-50">
|
|
<div className={`p-4 flex items-center justify-between ${isDark ? 'bg-slate-900' : 'bg-slate-800'}`}>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center text-white font-bold">
|
|
BP
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-white">{currentMeetingTitle}</div>
|
|
<div className="text-sm text-white/50">BreakPilot Meet</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={openInNewTab}
|
|
className="flex items-center gap-2 px-4 py-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
|
|
>
|
|
{Icons.external}
|
|
Im neuen Tab oeffnen
|
|
</button>
|
|
<button
|
|
onClick={() => setShowJoinModal(false)}
|
|
className="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
|
|
>
|
|
{Icons.close}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<iframe
|
|
src={currentMeetingUrl}
|
|
className="w-full h-full border-0"
|
|
allow="camera; microphone; fullscreen; display-capture; autoplay"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Transcript Modal */}
|
|
{showTranscriptModal && currentRecording && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowTranscriptModal(false)} />
|
|
<div className={`relative w-full max-w-2xl max-h-[80vh] flex flex-col rounded-3xl border ${
|
|
isDark
|
|
? 'bg-slate-900 border-white/20'
|
|
: 'bg-white border-slate-200 shadow-2xl'
|
|
}`}>
|
|
<div className={`p-6 border-b flex items-center justify-between ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Transkript: {currentRecording.title || `Aufzeichnung ${currentRecording.meeting_id}`}
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowTranscriptModal(false)}
|
|
className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
{Icons.close}
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
{transcriptLoading ? (
|
|
<div className={`text-center py-8 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Lade Transkript...</div>
|
|
) : transcriptText === 'PENDING' ? (
|
|
<div className="text-center py-8">
|
|
<div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${
|
|
isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-600'
|
|
}`}>
|
|
{Icons.clock}
|
|
</div>
|
|
<h4 className={`font-medium mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>Transkription ausstehend</h4>
|
|
<p className={`mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
Die Transkription wurde noch nicht gestartet oder ist in Bearbeitung.
|
|
</p>
|
|
<button
|
|
onClick={() => startTranscription(currentRecording.id)}
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all hover:scale-105"
|
|
>
|
|
Transkription starten
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className={`whitespace-pre-wrap leading-relaxed ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
|
|
{transcriptText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`p-6 border-t flex justify-end gap-3 ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
{transcriptText && transcriptText !== 'PENDING' && (
|
|
<>
|
|
<button
|
|
onClick={() => window.location.href = `${getBackendUrl()}/api/recordings/${currentRecording.id}/transcription/vtt`}
|
|
className={`px-4 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
WebVTT
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.href = `${getBackendUrl()}/api/recordings/${currentRecording.id}/transcription/srt`}
|
|
className={`px-4 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
SRT
|
|
</button>
|
|
</>
|
|
)}
|
|
<button
|
|
onClick={() => setShowTranscriptModal(false)}
|
|
className={`px-5 py-2.5 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'text-white/60 hover:text-white hover:bg-white/10'
|
|
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
Schliessen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Blob Animation Styles */}
|
|
<style jsx>{`
|
|
@keyframes blob {
|
|
0% { transform: translate(0px, 0px) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
100% { transform: translate(0px, 0px) scale(1); }
|
|
}
|
|
.animate-blob {
|
|
animation: blob 7s infinite;
|
|
}
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|