2b7466c6e3
- Enhanced the web component to include a kick participant feature. - Updated the UI to allow moderators to input participant identity for kicking. - Modified the room controller to handle the new kick participant request. - Refactored code for better readability and maintainability across various services and controllers. - Updated the index.mustache and room.mustache templates to reflect changes in functionality.
348 lines
9.5 KiB
Plaintext
348 lines
9.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OpenVidu Meet Tutorial</title>
|
|
<!-- Bootstrap -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="css/home.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Rooms List Section -->
|
|
<div class="rooms-container">
|
|
<div class="rooms-header">
|
|
<h2 class="text-center text-primary">Join a Room</h2>
|
|
<p class="text-muted text-center">Join to an existing room</p>
|
|
</div>
|
|
|
|
<div class="rooms-list">
|
|
<div class="action-buttons-container mb-3 text-center">
|
|
<div class="mb-3 text-center">
|
|
<form action="/delete-all-rooms" method="post">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-danger btn-sm"
|
|
id="delete-all-rooms-btn"
|
|
>
|
|
Delete All Rooms
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="mb-3 text-center">
|
|
<form action="/delete-all-recordings" method="post">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-danger btn-sm"
|
|
id="delete-all-recordings-btn"
|
|
>
|
|
Delete All Recordings
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{#rooms.length}}
|
|
<ul class="list-group">
|
|
{{#rooms}}
|
|
<li
|
|
id="{{ roomIdPrefix }}"
|
|
class="list-group-item d-flex justify-content-between align-items-center"
|
|
>
|
|
<span>{{ roomId }}</span>
|
|
<div class="dropdown-button">
|
|
<button
|
|
class="btn btn-primary btn-sm dropdown-toggle"
|
|
type="button"
|
|
data-bs-toggle="dropdown"
|
|
>
|
|
Join as
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<form action="/join-room" method="post">
|
|
<input
|
|
type="hidden"
|
|
name="roomUrl"
|
|
value="{{ moderatorRoomUrl }}"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="participantRole"
|
|
value="moderator"
|
|
/>
|
|
<input type="hidden" name="roomId" value="{{ roomId }}" />
|
|
|
|
<button
|
|
type="submit"
|
|
id="join-as-moderator"
|
|
class="dropdown-item"
|
|
>
|
|
Moderator
|
|
</button>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<form action="/join-room" method="post">
|
|
<input
|
|
type="hidden"
|
|
name="roomUrl"
|
|
value="{{ publisherRoomUrl }}"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="participantRole"
|
|
value="publisher"
|
|
/>
|
|
<input type="hidden" name="roomId" value="{{ roomId }}" />
|
|
|
|
<button
|
|
type="submit"
|
|
id="join-as-publisher"
|
|
class="dropdown-item"
|
|
>
|
|
Publisher
|
|
</button>
|
|
</form>
|
|
</li>
|
|
{{! SHOW ONLY RECORDINGS LINK }}
|
|
<li>
|
|
<form action="/join-room" method="post">
|
|
<input
|
|
type="hidden"
|
|
name="roomUrl"
|
|
value="{{ moderatorRoomUrl }}"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="participantRole"
|
|
value="moderator"
|
|
/>
|
|
<input type="hidden" name="roomId" value="{{ roomId }}" />
|
|
<input
|
|
type="hidden"
|
|
name="showOnlyRecordings"
|
|
value="true"
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
id="view-recordings"
|
|
class="dropdown-item"
|
|
>
|
|
View Recordings
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
{{/rooms}}
|
|
</ul>
|
|
{{/rooms.length}}
|
|
{{^rooms.length}}
|
|
<p class="text-muted text-center">No rooms available.</p>
|
|
{{/rooms.length}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Room Section -->
|
|
<div class="create-room">
|
|
<h2 class="text-center text-primary mb-3">Create a new Room</h2>
|
|
<p class="text-muted text-center mb-4">Generate a room from scratch</p>
|
|
|
|
<form action="/room" method="post" class="d-flex flex-column h-100">
|
|
<!-- Basic Information -->
|
|
<div class="form-section">
|
|
<div class="mb-3">
|
|
<label for="room-id-prefix" class="form-label"
|
|
>Room Prefix *</label
|
|
>
|
|
<input
|
|
type="text"
|
|
name="roomIdPrefix"
|
|
id="room-id-prefix"
|
|
class="form-control"
|
|
placeholder="e.g. Team meeting"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="expiration-date" class="form-label"
|
|
>Expiration Date</label
|
|
>
|
|
<input
|
|
type="date"
|
|
name="autoDeletionDate"
|
|
id="expiration-date"
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preferences Accordion -->
|
|
<div class="preferences-accordion">
|
|
<div class="accordion" id="preferencesAccordion">
|
|
<!-- Chat Preferences -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button
|
|
class="accordion-button"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#chatCollapse"
|
|
aria-expanded="true"
|
|
aria-controls="chatCollapse"
|
|
data-testid="chat-preferences-toggle"
|
|
>
|
|
Chat Settings
|
|
</button>
|
|
</h2>
|
|
<div
|
|
id="chatCollapse"
|
|
class="accordion-collapse collapse show"
|
|
data-bs-parent="#preferencesAccordion"
|
|
>
|
|
<div class="accordion-body">
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
name="preferences.chatPreferences.enabled"
|
|
id="chat-enabled"
|
|
class="form-check-input"
|
|
checked
|
|
data-testid="chat-enabled-checkbox"
|
|
/>
|
|
<label for="chat-enabled" class="form-check-label">
|
|
Enable Chat
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recording Preferences -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button
|
|
class="accordion-button collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#recordingCollapse"
|
|
aria-expanded="false"
|
|
aria-controls="recordingCollapse"
|
|
data-testid="recording-preferences-toggle"
|
|
>
|
|
Recording Settings
|
|
</button>
|
|
</h2>
|
|
<div
|
|
id="recordingCollapse"
|
|
class="accordion-collapse collapse"
|
|
data-bs-parent="#preferencesAccordion"
|
|
>
|
|
<div class="accordion-body">
|
|
<div class="form-check mb-2">
|
|
<input
|
|
type="checkbox"
|
|
name="preferences.recordingPreferences.enabled"
|
|
id="recording-enabled"
|
|
class="form-check-input"
|
|
checked
|
|
data-testid="recording-enabled-checkbox"
|
|
/>
|
|
<label for="recording-enabled" class="form-check-label">
|
|
Enable Recording
|
|
</label>
|
|
</div>
|
|
|
|
<div id="recording-access-section">
|
|
<label for="recording-access" class="form-label"
|
|
>Recording Access Level</label
|
|
>
|
|
<select
|
|
name="preferences.recordingPreferences.allowAccessTo"
|
|
id="recording-access"
|
|
class="form-select"
|
|
data-testid="recording-access-select"
|
|
>
|
|
<option value="admin">Admin Only</option>
|
|
<option value="admin-moderator">
|
|
Admin & Moderator
|
|
</option>
|
|
<option value="admin-moderator-publisher" selected>
|
|
Admin, Moderator & Publisher
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Virtual Background Preferences -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button
|
|
class="accordion-button collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#backgroundCollapse"
|
|
aria-expanded="false"
|
|
aria-controls="backgroundCollapse"
|
|
data-testid="background-preferences-toggle"
|
|
>
|
|
Virtual Background Settings
|
|
</button>
|
|
</h2>
|
|
<div
|
|
id="backgroundCollapse"
|
|
class="accordion-collapse collapse"
|
|
data-bs-parent="#preferencesAccordion"
|
|
>
|
|
<div class="accordion-body">
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
name="preferences.virtualBackgroundPreferences.enabled"
|
|
id="virtual-background-enabled"
|
|
class="form-check-input"
|
|
checked
|
|
data-testid="virtual-background-enabled-checkbox"
|
|
/>
|
|
<label
|
|
for="virtual-background-enabled"
|
|
class="form-check-label"
|
|
>
|
|
Enable Virtual Backgrounds
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Button - Always visible -->
|
|
<div class="mt-auto pt-3">
|
|
<button
|
|
type="submit"
|
|
class="create-room-btn btn btn-primary w-100"
|
|
data-testid="create-room-button"
|
|
>
|
|
Create Room
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|