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