74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
import { createIconElement, createTextElement, textValue } from '../../shared/dom.js';
|
|
|
|
function createParticipantPlaceholder() {
|
|
const placeholder = document.createElement('div');
|
|
placeholder.className = 'participant-video-placeholder absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80 hidden';
|
|
placeholder.innerHTML = `
|
|
<div class="text-center">
|
|
<div class="w-20 h-20 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-video-slash text-2xl text-white/70"></i>
|
|
</div>
|
|
<p class="text-white text-sm font-medium">\u6444\u50cf\u5934\u5df2\u5173\u95ed</p>
|
|
</div>
|
|
`;
|
|
return placeholder;
|
|
}
|
|
|
|
export function createParticipantTile(connectionId, displayName) {
|
|
const tile = document.createElement('div');
|
|
tile.className = 'relative bg-black/60 rounded-xl overflow-hidden flex items-center justify-center';
|
|
tile.dataset.participantId = textValue(connectionId);
|
|
|
|
const video = document.createElement('video');
|
|
video.className = 'w-full h-full object-contain';
|
|
video.autoplay = true;
|
|
video.playsinline = true;
|
|
video.muted = false;
|
|
video.id = `participantVideo_${textValue(connectionId)}`;
|
|
tile.appendChild(video);
|
|
tile.appendChild(createParticipantPlaceholder());
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'absolute bottom-3 left-3 glass px-3 py-1 rounded-full text-xs flex items-center gap-2';
|
|
label.appendChild(createIconElement('fas fa-user text-purple-400'));
|
|
label.appendChild(createTextElement('span', '', displayName, '\u53c2\u4e0e\u8005'));
|
|
tile.appendChild(label);
|
|
|
|
const liveTag = document.createElement('div');
|
|
liveTag.className = 'absolute top-3 right-3 bg-green-500/80 px-2 py-0.5 rounded-full text-xs flex items-center gap-1';
|
|
const pulse = document.createElement('span');
|
|
pulse.className = 'w-1.5 h-1.5 bg-white rounded-full animate-pulse';
|
|
liveTag.appendChild(pulse);
|
|
liveTag.appendChild(createTextElement('span', '', '\u5728\u7ebf'));
|
|
tile.appendChild(liveTag);
|
|
|
|
return tile;
|
|
}
|
|
|
|
export function getParticipantTile(grid, participantId) {
|
|
if (!grid) return null;
|
|
const expectedId = textValue(participantId);
|
|
return Array.from(grid.querySelectorAll('[data-participant-id]'))
|
|
.find(tile => tile.dataset.participantId === expectedId) || null;
|
|
}
|
|
|
|
export function updateParticipantTilePlaceholder(grid, participantId, showPlaceholder) {
|
|
const tile = getParticipantTile(grid, participantId);
|
|
if (!tile) return;
|
|
|
|
const placeholder = tile.querySelector('.participant-video-placeholder');
|
|
if (placeholder) {
|
|
placeholder.classList.toggle('hidden', !showPlaceholder);
|
|
}
|
|
}
|
|
|
|
export function updateParticipantTileName(grid, participantId, name) {
|
|
const tile = getParticipantTile(grid, participantId);
|
|
if (!tile) return;
|
|
|
|
const label = tile.querySelector('.absolute.bottom-3 span');
|
|
if (label && name) {
|
|
label.textContent = name;
|
|
}
|
|
}
|