Rodrigo Rodriguez (Pragmatismo)
d8e52bf330
- Add JavaScript to load user profile from /api/auth/me endpoint - Save access_token to localStorage/sessionStorage on login - Update user menu to show actual user name and email - Toggle Sign in/Sign out based on authentication state - Add IDs to user menu elements for dynamic updates
1751 lines
56 KiB
HTML
1751 lines
56 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 data-i18n="nav-meet">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>
|
|
<span data-i18n="meet-new-meeting">New Meeting</span>
|
|
</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>
|
|
<span data-i18n="meet-join-meeting">Join Meeting</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="meet-main">
|
|
<!-- Active Rooms Section -->
|
|
<section class="rooms-section">
|
|
<div class="section-header">
|
|
<h2 data-i18n="meet-active-rooms">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) -->
|
|
<!-- Note: ws-connect="/ws/meet" removed until backend WebSocket endpoint is implemented -->
|
|
<div class="meeting-room hidden" id="meeting-room">
|
|
<!-- Room Header -->
|
|
<header class="room-header">
|
|
<div class="room-info">
|
|
<h2 id="room-title" data-i18n="meet-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 data-i18n="meet-record">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 data-i18n="meet-participants">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 data-i18n="nav-chat">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 data-i18n="meet-mute">Mute</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 data-i18n="meet-camera">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 data-i18n="meet-share">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 data-i18n="meet-info">Info</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 data-i18n="meet-leave">Leave</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 data-i18n="meet-more">More</span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Create Meeting Modal -->
|
|
<dialog class="modal" id="create-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="meet-share-meeting">Share 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" data-i18n="meet-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 data-i18n="nav-settings">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 data-i18n="meet-waiting-room">Enable 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 data-i18n="meet-new-meeting">New 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="display-name" data-i18n="label-your-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" data-i18n="meet-meeting-code">Meeting Code</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 data-i18n="meet-meeting-link">Meeting Link</label>
|
|
<div 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')"
|
|
>
|
|
<button type="button" onclick="hideModal('share-modal')" data-i18n="action-close">
|
|
Close
|
|
</button>
|
|
<button type="submit" class="btn-primary" data-i18n="meet-send-invite">
|
|
Send Invite
|
|
</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: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
z-index: 200;
|
|
border: none;
|
|
padding: 0;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.modal[open] {
|
|
display: flex;
|
|
}
|
|
|
|
.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>
|
|
// Guard against re-execution - check BEFORE any declarations
|
|
if (!window._meetModuleLoaded) {
|
|
window._meetModuleLoaded = true;
|
|
|
|
// Use window object for all state to avoid redeclaration
|
|
window._meetState = window._meetState || {
|
|
localStream: null,
|
|
isMuted: false,
|
|
isCameraOff: false,
|
|
timerInterval: null,
|
|
timerSeconds: 0
|
|
};
|
|
|
|
// Modal functions
|
|
window.showModal = function(id) {
|
|
var modal = document.getElementById(id);
|
|
if (modal) modal.showModal();
|
|
};
|
|
|
|
window.hideModal = function(id) {
|
|
var modal = document.getElementById(id);
|
|
if (modal) modal.close();
|
|
};
|
|
|
|
// Panel toggle
|
|
window.togglePanel = function(name) {
|
|
var panels = ["participants", "chat", "transcription"];
|
|
panels.forEach(function(p) {
|
|
var panel = document.getElementById(p + "-panel");
|
|
if (panel) {
|
|
if (p === name) {
|
|
panel.classList.toggle("hidden");
|
|
} else {
|
|
panel.classList.add("hidden");
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// Meeting functions
|
|
window.enterMeeting = function() {
|
|
var meetMain = document.querySelector(".meet-main");
|
|
var meetHeader = document.querySelector(".meet-header");
|
|
var meetingRoom = document.getElementById("meeting-room");
|
|
if (meetMain) meetMain.classList.add("hidden");
|
|
if (meetHeader) meetHeader.classList.add("hidden");
|
|
if (meetingRoom) meetingRoom.classList.remove("hidden");
|
|
window.startTimer();
|
|
window.initializeMedia();
|
|
};
|
|
|
|
window.leaveMeeting = function() {
|
|
var meetingRoom = document.getElementById("meeting-room");
|
|
var meetMain = document.querySelector(".meet-main");
|
|
var meetHeader = document.querySelector(".meet-header");
|
|
if (meetingRoom) meetingRoom.classList.add("hidden");
|
|
if (meetMain) meetMain.classList.remove("hidden");
|
|
if (meetHeader) meetHeader.classList.remove("hidden");
|
|
window.stopTimer();
|
|
window.stopMedia();
|
|
};
|
|
|
|
// Media controls
|
|
window.initializeMedia = async function() {
|
|
try {
|
|
window._meetState.localStream = await navigator.mediaDevices.getUserMedia({
|
|
video: true,
|
|
audio: true,
|
|
});
|
|
var localVideo = document.getElementById("local-video");
|
|
if (localVideo) localVideo.srcObject = window._meetState.localStream;
|
|
} catch (err) {
|
|
console.error("Error accessing media devices:", err);
|
|
}
|
|
};
|
|
|
|
window.stopMedia = function() {
|
|
if (window._meetState.localStream) {
|
|
window._meetState.localStream.getTracks().forEach(function(track) { track.stop(); });
|
|
window._meetState.localStream = null;
|
|
}
|
|
};
|
|
|
|
window.toggleMic = function() {
|
|
if (window._meetState.localStream) {
|
|
var audioTrack = window._meetState.localStream.getAudioTracks()[0];
|
|
if (audioTrack) {
|
|
audioTrack.enabled = !audioTrack.enabled;
|
|
window._meetState.isMuted = !audioTrack.enabled;
|
|
var btn = document.getElementById("mic-btn");
|
|
if (btn) btn.classList.toggle("muted", window._meetState.isMuted);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.toggleCamera = function() {
|
|
if (window._meetState.localStream) {
|
|
var videoTrack = window._meetState.localStream.getVideoTracks()[0];
|
|
if (videoTrack) {
|
|
videoTrack.enabled = !videoTrack.enabled;
|
|
window._meetState.isCameraOff = !videoTrack.enabled;
|
|
var btn = document.getElementById("camera-btn");
|
|
if (btn) btn.classList.toggle("muted", window._meetState.isCameraOff);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.toggleScreenShare = async function() {
|
|
try {
|
|
var screenStream = await navigator.mediaDevices.getDisplayMedia({
|
|
video: true,
|
|
});
|
|
// Handle screen share stream
|
|
} catch (err) {
|
|
console.error("Error sharing screen:", err);
|
|
}
|
|
};
|
|
|
|
// Timer
|
|
window.startTimer = function() {
|
|
window._meetState.timerInterval = setInterval(function() {
|
|
window._meetState.timerSeconds++;
|
|
var hours = Math.floor(window._meetState.timerSeconds / 3600);
|
|
var minutes = Math.floor((window._meetState.timerSeconds % 3600) / 60);
|
|
var seconds = window._meetState.timerSeconds % 60;
|
|
var display = [hours, minutes, seconds]
|
|
.map(function(v) { return v.toString().padStart(2, "0"); })
|
|
.join(":");
|
|
var timerEl = document.getElementById("room-timer");
|
|
if (timerEl) timerEl.textContent = display;
|
|
}, 1000);
|
|
};
|
|
|
|
window.stopTimer = function() {
|
|
if (window._meetState.timerInterval) {
|
|
clearInterval(window._meetState.timerInterval);
|
|
window._meetState.timerInterval = null;
|
|
}
|
|
window._meetState.timerSeconds = 0;
|
|
};
|
|
|
|
// Reactions
|
|
window.showReactions = function() {
|
|
var popup = document.getElementById("reactions-popup");
|
|
if (popup) popup.classList.toggle("hidden");
|
|
};
|
|
|
|
window.sendReaction = function(emoji) {
|
|
console.log("Sending reaction:", emoji);
|
|
var popup = document.getElementById("reactions-popup");
|
|
if (popup) popup.classList.add("hidden");
|
|
};
|
|
|
|
// Copy meeting link
|
|
window.copyMeetingLink = function() {
|
|
var input = document.getElementById("meeting-link");
|
|
if (input) {
|
|
input.select();
|
|
navigator.clipboard.writeText(input.value);
|
|
}
|
|
};
|
|
|
|
// Preview for join modal
|
|
window.testVideo = async function() {
|
|
try {
|
|
var stream = await navigator.mediaDevices.getUserMedia({
|
|
video: true,
|
|
});
|
|
var preview = document.getElementById("preview-video");
|
|
if (preview) preview.srcObject = stream;
|
|
} catch (err) {
|
|
console.error("Error testing video:", err);
|
|
}
|
|
};
|
|
|
|
window.testAudio = function() {
|
|
console.log("Testing audio...");
|
|
};
|
|
|
|
window.showMoreOptions = function() {
|
|
console.log("More options...");
|
|
};
|
|
|
|
window.showNotification = function(message) {
|
|
console.log("Notification:", message);
|
|
};
|
|
}
|
|
</script>
|