1310 lines
44 KiB
HTML
1310 lines
44 KiB
HTML
<!-- Meet - Video Conferencing -->
|
|
<div class="meet-container" id="meet-app">
|
|
<!-- Header -->
|
|
<header class="meet-header">
|
|
<div class="meet-brand">
|
|
<img src="/assets/icons/gb-meet.svg" alt="Meet" class="brand-icon">
|
|
<h1></h1>Meet</h1>
|
|
</div>
|
|
<div class="meet-actions">
|
|
<button class="btn-primary" onclick="showModal('create-modal')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
New Meeting
|
|
</button>
|
|
<button class="btn-secondary" onclick="showModal('join-modal')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
<polyline points="10 17 15 12 10 7"></polyline>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
</svg>
|
|
Join Meeting
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="meet-main">
|
|
<!-- Active Rooms Section -->
|
|
<section class="rooms-section">
|
|
<div class="section-header">
|
|
<h2>Active Rooms</h2>
|
|
<span class="room-count" id="room-count">0</span>
|
|
</div>
|
|
<div class="rooms-grid" id="rooms-list"
|
|
hx-get="/api/meet/rooms"
|
|
hx-trigger="load, every 10s"
|
|
hx-swap="innerHTML">
|
|
<!-- Rooms loaded via HTMX -->
|
|
<div class="loading-placeholder">
|
|
<div class="spinner"></div>
|
|
<span>Loading rooms...</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scheduled Meetings Section -->
|
|
<section class="scheduled-section">
|
|
<div class="section-header">
|
|
<h2>Scheduled Meetings</h2>
|
|
</div>
|
|
<div class="scheduled-list" id="scheduled-list"
|
|
hx-get="/api/meet/scheduled"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<!-- Scheduled meetings loaded via HTMX -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Recent Meetings Section -->
|
|
<section class="recent-section">
|
|
<div class="section-header">
|
|
<h2>Recent Meetings</h2>
|
|
</div>
|
|
<div class="recent-list" id="recent-list"
|
|
hx-get="/api/meet/recent"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<!-- Recent meetings loaded via HTMX -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Meeting Room (shown when in a call) -->
|
|
<div class="meeting-room hidden" id="meeting-room" hx-ext="ws" ws-connect="/ws/meet">
|
|
<!-- Room Header -->
|
|
<header class="room-header">
|
|
<div class="room-info">
|
|
<h2 id="room-title">Meeting Room</h2>
|
|
<span class="room-id" id="room-id"></span>
|
|
<span class="room-timer" id="room-timer">00:00:00</span>
|
|
</div>
|
|
<div class="room-controls-top">
|
|
<button class="control-btn" id="record-btn" title="Record Meeting"
|
|
hx-post="/api/meet/recording/start"
|
|
hx-include="#room-id-input"
|
|
hx-swap="none">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<circle cx="12" cy="12" r="4" fill="currentColor"></circle>
|
|
</svg>
|
|
<span>Record</span>
|
|
</button>
|
|
<button class="control-btn active" id="transcribe-btn" title="Toggle Transcription"
|
|
hx-post="/api/meet/transcription/toggle"
|
|
hx-include="#room-id-input"
|
|
hx-swap="none">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
</svg>
|
|
<span>Transcribe</span>
|
|
</button>
|
|
<button class="control-btn" id="participants-btn" title="Show Participants"
|
|
onclick="togglePanel('participants')">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
<span class="badge" id="participant-count">0</span>
|
|
</button>
|
|
<button class="control-btn" id="chat-btn" title="Toggle Chat"
|
|
onclick="togglePanel('chat')">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
<span class="badge hidden" id="unread-count">0</span>
|
|
</button>
|
|
<button class="control-btn" id="leave-btn" title="Leave Meeting"
|
|
onclick="leaveMeeting()">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
<polyline points="16 17 21 12 16 7"></polyline>
|
|
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" id="room-id-input" name="room_id" value="">
|
|
</header>
|
|
|
|
<!-- Video Grid -->
|
|
<div class="video-grid" id="video-grid">
|
|
<!-- Local Video -->
|
|
<div class="video-tile local-video" id="local-video-tile">
|
|
<video id="local-video" autoplay muted playsinline></video>
|
|
<div class="video-overlay">
|
|
<span class="participant-name">You</span>
|
|
<div class="video-indicators">
|
|
<span class="indicator mic-on" id="local-mic-indicator">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
|
|
<line x1="12" y1="19" x2="12" y2="23"></line>
|
|
<line x1="8" y1="23" x2="16" y2="23"></line>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="speaking-indicator hidden"></div>
|
|
</div>
|
|
<!-- Remote participants added dynamically -->
|
|
</div>
|
|
|
|
<!-- Sidebar Panels -->
|
|
<aside class="room-sidebar" id="room-sidebar">
|
|
<!-- Participants Panel -->
|
|
<div class="sidebar-panel hidden" id="participants-panel">
|
|
<div class="panel-header">
|
|
<h3>Participants</h3>
|
|
<button class="btn-icon-sm" onclick="togglePanel('participants')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="participants-list" id="participants-list"
|
|
hx-get="/api/meet/participants"
|
|
hx-include="#room-id-input"
|
|
hx-trigger="load, every 5s"
|
|
hx-swap="innerHTML">
|
|
<!-- Participants loaded via HTMX -->
|
|
</div>
|
|
<div class="panel-actions">
|
|
<button class="btn-secondary" onclick="showModal('invite-modal')">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
<line x1="20" y1="8" x2="20" y2="14"></line>
|
|
<line x1="23" y1="11" x2="17" y2="11"></line>
|
|
</svg>
|
|
Invite
|
|
</button>
|
|
<button class="btn-secondary"
|
|
hx-post="/api/meet/mute-all"
|
|
hx-include="#room-id-input"
|
|
hx-swap="none">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
|
|
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
|
|
<line x1="12" y1="19" x2="12" y2="23"></line>
|
|
<line x1="8" y1="23" x2="16" y2="23"></line>
|
|
</svg>
|
|
Mute All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Panel -->
|
|
<div class="sidebar-panel hidden" id="chat-panel">
|
|
<div class="panel-header">
|
|
<h3>Chat</h3>
|
|
<button class="btn-icon-sm" onclick="togglePanel('chat')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="chat-messages" id="chat-messages">
|
|
<!-- Chat messages via WebSocket -->
|
|
</div>
|
|
<form class="chat-form" ws-send>
|
|
<input type="hidden" name="type" value="chat">
|
|
<input type="text" name="message" id="chat-input" placeholder="Type a message..." autocomplete="off">
|
|
<button type="submit" class="btn-icon-sm">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"></line>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transcription Panel -->
|
|
<div class="sidebar-panel hidden" id="transcription-panel">
|
|
<div class="panel-header">
|
|
<h3>Transcription</h3>
|
|
<button class="btn-icon-sm" onclick="togglePanel('transcription')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div class="transcription-text" id="transcription-text">
|
|
<!-- Live transcription via WebSocket -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Bottom Controls -->
|
|
<footer class="room-controls">
|
|
<div class="controls-left">
|
|
<button class="control-btn-lg" id="mic-btn" title="Toggle Microphone"
|
|
hx-post="/api/voice/toggle"
|
|
hx-swap="none"
|
|
onclick="toggleMic()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="mic-icon">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
|
|
<line x1="12" y1="19" x2="12" y2="23"></line>
|
|
<line x1="8" y1="23" x2="16" y2="23"></line>
|
|
</svg>
|
|
<span>Mic</span>
|
|
</button>
|
|
<button class="control-btn-lg" id="camera-btn" title="Toggle Camera"
|
|
onclick="toggleCamera()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="camera-icon">
|
|
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
<span>Camera</span>
|
|
</button>
|
|
<button class="control-btn-lg" id="screen-btn" title="Share Screen"
|
|
hx-post="/api/meet/screen/share"
|
|
hx-include="#room-id-input"
|
|
hx-swap="none"
|
|
onclick="toggleScreenShare()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
|
<line x1="8" y1="21" x2="16" y2="21"></line>
|
|
<line x1="12" y1="17" x2="12" y2="21"></line>
|
|
</svg>
|
|
<span>Share</span>
|
|
</button>
|
|
</div>
|
|
<div class="controls-center">
|
|
<button class="control-btn-lg btn-danger" id="end-call-btn" title="End Call"
|
|
onclick="leaveMeeting()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"></path>
|
|
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
</svg>
|
|
<span>End</span>
|
|
</button>
|
|
</div>
|
|
<div class="controls-right">
|
|
<button class="control-btn-lg" id="reactions-btn" title="Reactions"
|
|
onclick="showReactions()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
|
|
<line x1="9" y1="9" x2="9.01" y2="9"></line>
|
|
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
|
</svg>
|
|
<span>React</span>
|
|
</button>
|
|
<button class="control-btn-lg" id="more-btn" title="More Options"
|
|
onclick="showMoreOptions()">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
</svg>
|
|
<span>More</span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Create Meeting Modal -->
|
|
<dialog class="modal" id="create-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Create Meeting</h3>
|
|
<button class="btn-icon-sm" onclick="hideModal('create-modal')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form class="modal-body"
|
|
hx-post="/api/meet/create"
|
|
hx-target="#meeting-room"
|
|
hx-swap="outerHTML"
|
|
hx-on::after-request="hideModal('create-modal'); enterMeeting()">
|
|
<div class="form-group">
|
|
<label for="meeting-title">Meeting Title</label>
|
|
<input type="text" id="meeting-title" name="title" placeholder="My Meeting" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="meeting-description">Description (Optional)</label>
|
|
<textarea id="meeting-description" name="description" placeholder="Meeting description..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Settings</label>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="transcription" checked>
|
|
<span>Enable live transcription</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="recording">
|
|
<span>Record meeting</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="ai_assistant" checked>
|
|
<span>Enable AI assistant</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="waiting_room">
|
|
<span>Use waiting room</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-secondary" onclick="hideModal('create-modal')">Cancel</button>
|
|
<button type="submit" class="btn-primary">Create & Join</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Join Meeting Modal -->
|
|
<dialog class="modal" id="join-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Join Meeting</h3>
|
|
<button class="btn-icon-sm" onclick="hideModal('join-modal')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form class="modal-body"
|
|
hx-post="/api/meet/join"
|
|
hx-target="#meeting-room"
|
|
hx-swap="outerHTML"
|
|
hx-on::after-request="hideModal('join-modal'); enterMeeting()">
|
|
<div class="form-group">
|
|
<label for="user-name">Your Name</label>
|
|
<input type="text" id="user-name" name="user_name" placeholder="Enter your name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="meeting-code">Meeting Code or Link</label>
|
|
<input type="text" id="meeting-code" name="meeting_code" placeholder="Enter meeting code" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Join Options</label>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="join_video" checked>
|
|
<span>Join with video</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" name="join_audio" checked>
|
|
<span>Join with audio</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="preview-container">
|
|
<video id="preview-video" autoplay muted playsinline></video>
|
|
<div class="preview-controls">
|
|
<button type="button" class="btn-icon" onclick="testAudio()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
|
|
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
|
|
</svg>
|
|
Test Audio
|
|
</button>
|
|
<button type="button" class="btn-icon" onclick="testVideo()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
Test Video
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-secondary" onclick="hideModal('join-modal')">Cancel</button>
|
|
<button type="submit" class="btn-primary">Join Meeting</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Invite Modal -->
|
|
<dialog class="modal" id="invite-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Invite Participants</h3>
|
|
<button class="btn-icon-sm" onclick="hideModal('invite-modal')">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form class="modal-body"
|
|
hx-post="/api/meet/invite"
|
|
hx-include="#room-id-input"
|
|
hx-swap="none"
|
|
hx-on::after-request="showNotification('Invites sent!')">
|
|
<div class="form-group">
|
|
<label>Meeting Link</label>
|
|
<div</label> class="copy-input">
|
|
<input type="text" id="meeting-link" readonly>
|
|
<button type="button" class="btn-icon" onclick="copyMeetingLink()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="invite-emails">Invite by Email</label>
|
|
<textarea id="invite-emails" name="emails" placeholder="Enter email addresses (one per line)"></textarea>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-secondary" onclick="hideModal('invite-modal')">Close</button>
|
|
<button type="submit" class="btn-primary">Send Invites</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Reactions Popup -->
|
|
<div class="reactions-popup hidden" id="reactions-popup">
|
|
<button class="reaction-btn" onclick="sendReaction('👍')">👍</button>
|
|
<button class="reaction-btn" onclick="sendReaction('👏')">👏</button>
|
|
<button class="reaction-btn" onclick="sendReaction('❤️')">❤️</button>
|
|
<button class="reaction-btn" onclick="sendReaction('😂')">😂</button>
|
|
<button class="reaction-btn" onclick="sendReaction('😮')">😮</button>
|
|
<button class="reaction-btn" onclick="sendReaction('🎉')">🎉</button>
|
|
<button class="reaction-btn" onclick="sendReaction('✋')">✋</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.meet-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.meet-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.meet-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.brand-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.meet-brand h1 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.meet-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--border);
|
|
}
|
|
|
|
.meet-main {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.room-count {
|
|
background: var(--primary);
|
|
color: white;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rooms-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.loading-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--primary);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Meeting Room Styles */
|
|
.meeting-room {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #000;
|
|
z-index: 100;
|
|
}
|
|
|
|
.meeting-room.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.room-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.room-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.room-info h2 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
color: white;
|
|
}
|
|
|
|
.room-id, .room-timer {
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.room-controls-top {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.control-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.control-btn.active {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.control-btn .badge {
|
|
background: var(--error);
|
|
color: white;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.control-btn .badge.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.video-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #111;
|
|
}
|
|
|
|
.video-tile {
|
|
position: relative;
|
|
background: #222;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.video-tile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.video-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.5rem;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.participant-name {
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.video-indicators {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
color: white;
|
|
}
|
|
|
|
.indicator.mic-off svg {
|
|
color: var(--error);
|
|
}
|
|
|
|
.room-sidebar {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50px;
|
|
bottom: 80px;
|
|
width: 320px;
|
|
background: var(--surface);
|
|
border-left: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.sidebar-panel.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.panel-header h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.participants-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.panel-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.chat-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: auto;
|
|
}
|
|
|
|
.chat-form input {
|
|
flex: 1;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.chat-form input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.room-controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
gap: 2rem;
|
|
}
|
|
|
|
.controls-left, .controls-center, .controls-right {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.control-btn-lg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
border-radius: 12px;
|
|
color: white;
|
|
font-size: 0.625rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
min-width: 64px;
|
|
}
|
|
|
|
.control-btn-lg:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.control-btn-lg.active {
|
|
background: var(--primary);
|
|
}
|
|
|
|
.control-btn-lg.btn-danger {
|
|
background: var(--error);
|
|
}
|
|
|
|
.control-btn-lg.btn-danger:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.control-btn-lg.muted {
|
|
background: var(--error);
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 200;
|
|
border: none;
|
|
padding: 0;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.modal::backdrop {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--surface);
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.375rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 0.625rem 0.75rem;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-group textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
width: auto;
|
|
}
|
|
|
|
.preview-container {
|
|
position: relative;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
aspect-ratio: 16 / 9;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.preview-container video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.preview-controls {
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.copy-input {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.copy-input input {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-icon, .btn-icon-sm {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem;
|
|
background: var(--surface-hover);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-icon:hover, .btn-icon-sm:hover {
|
|
background: var(--border);
|
|
}
|
|
|
|
.btn-icon-sm {
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
/* Reactions */
|
|
.reactions-popup {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--surface);
|
|
border-radius: 9999px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
z-index: 150;
|
|
}
|
|
|
|
.reactions-popup.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.reaction-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 50%;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, background 0.2s;
|
|
}
|
|
|
|
.reaction-btn:hover {
|
|
background: var(--surface-hover);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.meet-header {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.meet-actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.meet-actions button {
|
|
flex: 1;
|
|
}
|
|
|
|
.room-sidebar {
|
|
width: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.room-controls {
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.control-btn-lg {
|
|
min-width: 56px;
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Modal functions
|
|
function showModal(id) {
|
|
const modal = document.getElementById(id);
|
|
if (modal) modal.showModal();
|
|
}
|
|
|
|
function hideModal(id) {
|
|
const modal = document.getElementById(id);
|
|
if (modal) modal.close();
|
|
}
|
|
|
|
// Panel toggle
|
|
function togglePanel(name) {
|
|
const panels = ['participants', 'chat', 'transcription'];
|
|
panels.forEach(p => {
|
|
const panel = document.getElementById(p + '-panel');
|
|
if (panel) {
|
|
if (p === name) {
|
|
panel.classList.toggle('hidden');
|
|
} else {
|
|
panel.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Meeting functions
|
|
function enterMeeting() {
|
|
document.querySelector('.meet-main')?.classList.add('hidden');
|
|
document.querySelector('.meet-header')?.classList.add('hidden');
|
|
document.getElementById('meeting-room')?.classList.remove('hidden');
|
|
startTimer();
|
|
initializeMedia();
|
|
}
|
|
|
|
function leaveMeeting() {
|
|
document.getElementById('meeting-room')?.classList.add('hidden');
|
|
document.querySelector('.meet-main')?.classList.remove('hidden');
|
|
document.querySelector('.meet-header')?.classList.remove('hidden');
|
|
stopTimer();
|
|
stopMedia();
|
|
}
|
|
|
|
// Media controls
|
|
let localStream = null;
|
|
let isMuted = false;
|
|
let isCameraOff = false;
|
|
|
|
async function initializeMedia() {
|
|
try {
|
|
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
|
const localVideo = document.getElementById('local-video');
|
|
if (localVideo) localVideo.srcObject = localStream;
|
|
} catch (err) {
|
|
console.error('Error accessing media devices:', err);
|
|
}
|
|
}
|
|
|
|
function stopMedia() {
|
|
if (localStream) {
|
|
localStream.getTracks().forEach(track => track.stop());
|
|
localStream = null;
|
|
}
|
|
}
|
|
|
|
function toggleMic() {
|
|
if (localStream) {
|
|
const audioTrack = localStream.getAudioTracks()[0];
|
|
if (audioTrack) {
|
|
audioTrack.enabled = !audioTrack.enabled;
|
|
isMuted = !audioTrack.enabled;
|
|
const btn = document.getElementById('mic-btn');
|
|
btn?.classList.toggle('muted', isMuted);
|
|
}
|
|
}
|
|
}
|
|
|
|
function toggleCamera() {
|
|
if (localStream) {
|
|
const videoTrack = localStream.getVideoTracks()[0];
|
|
if (videoTrack) {
|
|
videoTrack.enabled = !videoTrack.enabled;
|
|
isCameraOff = !videoTrack.enabled;
|
|
const btn = document.getElementById('camera-btn');
|
|
btn?.classList.toggle('muted', isCameraOff);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function toggleScreenShare() {
|
|
try {
|
|
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
|
|
// Handle screen share stream
|
|
} catch (err) {
|
|
console.error('Error sharing screen:', err);
|
|
}
|
|
}
|
|
|
|
// Timer
|
|
let timerInterval = null;
|
|
let timerSeconds = 0;
|
|
|
|
function startTimer() {
|
|
timerInterval = setInterval(() => {
|
|
timerSeconds++;
|
|
const hours = Math.floor(timerSeconds / 3600);
|
|
const minutes = Math.floor((timerSeconds % 3600) / 60);
|
|
const seconds = timerSeconds % 60;
|
|
const display = [hours, minutes, seconds]
|
|
.map(v => v.toString().padStart(2, '0'))
|
|
.join(':');
|
|
const timerEl = document.getElementById('room-timer');
|
|
if (timerEl) timerEl.textContent = display;
|
|
}, 1000);
|
|
}
|
|
|
|
function stopTimer() {
|
|
if (timerInterval) {
|
|
clearInterval(timerInterval);
|
|
timerInterval = null;
|
|
}
|
|
timerSeconds = 0;
|
|
}
|
|
|
|
// Reactions
|
|
function showReactions() {
|
|
document.getElementById('reactions-popup')?.classList.toggle('hidden');
|
|
}
|
|
|
|
function sendReaction(emoji) {
|
|
// Send via WebSocket
|
|
console.log('Sending reaction:', emoji);
|
|
document.getElementById('reactions-popup')?.classList.add('hidden');
|
|
}
|
|
|
|
// Copy meeting link
|
|
function copyMeetingLink() {
|
|
const input = document.getElementById('meeting-link');
|
|
if (input) {
|
|
input.select();
|
|
navigator.clipboard.writeText(input.value);
|
|
}
|
|
}
|
|
|
|
// Preview for join modal
|
|
async function testVideo() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
const preview = document.getElementById('preview-video');
|
|
if (preview) preview.srcObject = stream;
|
|
} catch (err) {
|
|
console.error('Error testing video:', err);
|
|
}
|
|
}
|
|
|
|
function testAudio() {
|
|
// Test audio input/output
|
|
console.log('Testing audio...');
|
|
}
|
|
|
|
function showMoreOptions() {
|
|
// Show more options menu
|
|
console.log('More options...');
|
|
}
|
|
|
|
function showNotification(message) {
|
|
// Show notification toast
|
|
console.log('Notification:', message);
|
|
}
|
|
</script>
|