testapp: delete home.ts and videoRoom.ts files
This commit is contained in:
Carlos Santos
parent
cde60eca82
commit
a0964aa4ca
@ -1,117 +0,0 @@
|
|||||||
import { formatDate as formatDateUtil, getRelativeTimeString as getRelativeTimeStringUtil } from '../../utils/common.js';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Interface for room data
|
|
||||||
*/
|
|
||||||
interface Room {
|
|
||||||
roomId: string;
|
|
||||||
roomIdPrefix: string;
|
|
||||||
moderatorRoomUrl: string;
|
|
||||||
publisherRoomUrl: string;
|
|
||||||
viewerRoomUrl: string;
|
|
||||||
createdAt: number;
|
|
||||||
autoDeletionDate: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
setupRoomElements();
|
|
||||||
setupFormValidation();
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set up dynamic room elements and event handlers
|
|
||||||
*/
|
|
||||||
function setupRoomElements(): void {
|
|
||||||
// Format dates in the room cards
|
|
||||||
document.querySelectorAll('[data-timestamp]').forEach((element) => {
|
|
||||||
const timestamp = parseInt(element.getAttribute('data-timestamp') || '0', 10);
|
|
||||||
if (timestamp > 0) {
|
|
||||||
element.textContent = formatDateUtil(timestamp);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set relative time for room creation
|
|
||||||
document.querySelectorAll('[data-created-at]').forEach((element) => {
|
|
||||||
const timestamp = parseInt(element.getAttribute('data-created-at') || '0', 10);
|
|
||||||
if (timestamp > 0) {
|
|
||||||
element.textContent = getRelativeTimeStringUtil(timestamp);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize copy URL buttons
|
|
||||||
document.querySelectorAll('.copy-url-btn').forEach((button) => {
|
|
||||||
button.addEventListener('click', (event) => handleCopyUrl(event as MouseEvent));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle click event for copying URLs
|
|
||||||
*/
|
|
||||||
function handleCopyUrl(event: MouseEvent): void {
|
|
||||||
const button = event.currentTarget as HTMLButtonElement;
|
|
||||||
const url = button.getAttribute('data-url');
|
|
||||||
|
|
||||||
if (url) {
|
|
||||||
navigator.clipboard.writeText(url).then(
|
|
||||||
() => {
|
|
||||||
// Show success feedback
|
|
||||||
const originalText = button.textContent || '';
|
|
||||||
button.textContent = 'Copied!';
|
|
||||||
button.classList.add('copied');
|
|
||||||
|
|
||||||
// Reset button text after 2 seconds
|
|
||||||
setTimeout(() => {
|
|
||||||
button.textContent = originalText;
|
|
||||||
button.classList.remove('copied');
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
console.error('Failed to copy text: ', err);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set up form validation for the create room form
|
|
||||||
*/
|
|
||||||
function setupFormValidation(): void {
|
|
||||||
const createRoomForm = document.getElementById('create-room-form') as HTMLFormElement | null;
|
|
||||||
|
|
||||||
if (createRoomForm) {
|
|
||||||
createRoomForm.addEventListener('submit', (event) => {
|
|
||||||
const roomIdPrefixInput = document.getElementById('roomIdPrefix') as HTMLInputElement;
|
|
||||||
const autoDeletionDateInput = document.getElementById('autoDeletionDate') as HTMLInputElement;
|
|
||||||
|
|
||||||
// Basic validation
|
|
||||||
if (!roomIdPrefixInput.value.trim()) {
|
|
||||||
event.preventDefault();
|
|
||||||
alert('Please enter a room prefix');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!autoDeletionDateInput.value) {
|
|
||||||
event.preventDefault();
|
|
||||||
alert('Please select an auto deletion date');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set minimum date to today
|
|
||||||
const today = new Date();
|
|
||||||
today.setHours(0, 0, 0, 0);
|
|
||||||
const selectedDate = new Date(autoDeletionDateInput.value);
|
|
||||||
|
|
||||||
if (selectedDate < today) {
|
|
||||||
event.preventDefault();
|
|
||||||
alert('Auto deletion date must be today or in the future');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set minimum date for the date picker to today
|
|
||||||
const autoDeletionDateInput = document.getElementById('autoDeletionDate') as HTMLInputElement;
|
|
||||||
if (autoDeletionDateInput) {
|
|
||||||
const today = new Date().toISOString().split('T')[0];
|
|
||||||
autoDeletionDateInput.min = today;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
/**
|
|
||||||
* Event types that can be emitted by the OpenVidu-Meet web component
|
|
||||||
*/
|
|
||||||
type MeetEvent = 'JOIN' | 'LEFT' | 'ERROR';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Interface for OpenVidu-Meet component events
|
|
||||||
*/
|
|
||||||
interface MeetEventDetail {
|
|
||||||
participantId?: string;
|
|
||||||
participantName?: string;
|
|
||||||
roomId?: string;
|
|
||||||
timestamp: number;
|
|
||||||
error?: {
|
|
||||||
message: string;
|
|
||||||
code: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Interface for OpenVidu-Meet web component
|
|
||||||
*/
|
|
||||||
interface OpenViduMeetElement extends HTMLElement {
|
|
||||||
endMeeting(): void;
|
|
||||||
leaveRoom(): void;
|
|
||||||
toggleChat(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Interface for webhook events
|
|
||||||
*/
|
|
||||||
interface WebhookEvent {
|
|
||||||
event: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set up event listeners when the DOM is loaded
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// Set up button click handlers
|
|
||||||
setupButtonHandlers();
|
|
||||||
|
|
||||||
// Initialize socket.io connection
|
|
||||||
const socket = io();
|
|
||||||
|
|
||||||
// Get API key from the data attribute
|
|
||||||
const apiKey = document.getElementById('meeting-container')?.dataset.apiKey || '';
|
|
||||||
|
|
||||||
// Store API key in a variable that can be used for fetch requests
|
|
||||||
window.meetApiKey = apiKey;
|
|
||||||
|
|
||||||
// Listen for webhook events from the server
|
|
||||||
socket.on('webhookEvent', (payload: WebhookEvent) => {
|
|
||||||
console.log('Webhook event received:', payload);
|
|
||||||
addWebhookToLog(payload);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('DOM loaded');
|
|
||||||
const meet = document.querySelector('openvidu-meet') as OpenViduMeetElement;
|
|
||||||
|
|
||||||
if (meet) {
|
|
||||||
// Event listener for when the local participant joined the room
|
|
||||||
meet.addEventListener('JOIN', ((event: CustomEvent<MeetEventDetail>) => {
|
|
||||||
addEventToLog('JOIN', JSON.stringify(event.detail));
|
|
||||||
}) as EventListener);
|
|
||||||
|
|
||||||
// Event listener for when the local participant left the room
|
|
||||||
meet.addEventListener('LEFT', ((event: CustomEvent<MeetEventDetail>) => {
|
|
||||||
addEventToLog('LEFT', JSON.stringify(event.detail));
|
|
||||||
}) as EventListener);
|
|
||||||
|
|
||||||
// Error event listener
|
|
||||||
meet.addEventListener('ERROR', ((event: CustomEvent<MeetEventDetail>) => {
|
|
||||||
addEventToLog('ERROR', JSON.stringify(event.detail));
|
|
||||||
}) as EventListener);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set up button click handlers
|
|
||||||
*/
|
|
||||||
function setupButtonHandlers(): void {
|
|
||||||
const meet = document.querySelector('openvidu-meet') as OpenViduMeetElement;
|
|
||||||
|
|
||||||
// End meeting button click handler
|
|
||||||
document.getElementById('end-meeting-btn')?.addEventListener('click', () => {
|
|
||||||
if (meet) {
|
|
||||||
meet.endMeeting();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Leave room button click handler
|
|
||||||
document.getElementById('leave-room-btn')?.addEventListener('click', () => {
|
|
||||||
if (meet) {
|
|
||||||
meet.leaveRoom();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Toggle chat button click handler
|
|
||||||
document.getElementById('toggle-chat-btn')?.addEventListener('click', () => {
|
|
||||||
if (meet) {
|
|
||||||
meet.toggleChat();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add a component event to the events log
|
|
||||||
*/
|
|
||||||
function addEventToLog(eventType: MeetEvent, eventMessage: string): void {
|
|
||||||
const eventsList = document.getElementById('events-list');
|
|
||||||
if (eventsList) {
|
|
||||||
const li = document.createElement('li');
|
|
||||||
li.textContent = `[ ${eventType} ] : ${eventMessage}`;
|
|
||||||
eventsList.appendChild(li);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add a webhook event to the webhooks log
|
|
||||||
*/
|
|
||||||
function addWebhookToLog(payload: WebhookEvent): void {
|
|
||||||
const webhookLogList = document.getElementById('webhook-log-list');
|
|
||||||
if (webhookLogList) {
|
|
||||||
const li = document.createElement('li');
|
|
||||||
li.textContent = `[ ${payload.event} ] : ${JSON.stringify(payload)}`;
|
|
||||||
webhookLogList.appendChild(li);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Utility function to make API requests with the API key
|
|
||||||
*/
|
|
||||||
function fetchWithApiKey(url: string, options: RequestInit = {}): Promise<Response> {
|
|
||||||
// Ensure headers object exists
|
|
||||||
const headers = new Headers(options.headers || {});
|
|
||||||
|
|
||||||
// Add API key to headers
|
|
||||||
headers.append('X-API-KEY', window.meetApiKey);
|
|
||||||
headers.append('Accept', 'application/json');
|
|
||||||
|
|
||||||
// Handle JSON request body
|
|
||||||
if (options.body && typeof options.body !== 'string') {
|
|
||||||
headers.append('Content-Type', 'application/json');
|
|
||||||
options.body = JSON.stringify(options.body);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create new options object with merged headers
|
|
||||||
const fetchOptions: RequestInit = {
|
|
||||||
...options,
|
|
||||||
headers
|
|
||||||
};
|
|
||||||
|
|
||||||
return fetch(url, fetchOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add meetApiKey to window interface
|
|
||||||
declare global {
|
|
||||||
interface Window {
|
|
||||||
meetApiKey: string;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user