forked from EXT/VR180-Web-Player
115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
import { createLucideIcon, type LucideIconName } from './icons.js';
|
|
|
|
export function injectPlayerStyles(playerBase: string): void {
|
|
if (document.querySelector('link[data-vr-web-player-stylesheet]')) {
|
|
return;
|
|
}
|
|
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = playerBase + 'vr180-player.css';
|
|
link.dataset.vrWebPlayerStylesheet = 'true';
|
|
|
|
if (document.head) {
|
|
document.head.appendChild(link);
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', () => document.head.appendChild(link), { once: true });
|
|
}
|
|
}
|
|
|
|
export function createPlayButton(): HTMLButtonElement {
|
|
const playButton = document.createElement('button');
|
|
playButton.type = 'button';
|
|
playButton.className = 'vrwp-play-button';
|
|
playButton.setAttribute('aria-label', 'Open media');
|
|
playButton.appendChild(createLucideIcon('circle-play'));
|
|
|
|
return playButton;
|
|
}
|
|
|
|
export function create2DControlPanel(): HTMLDivElement {
|
|
const panel = document.createElement('div');
|
|
panel.className = 'vrwp-panel';
|
|
|
|
const status = document.createElement('div');
|
|
status.className = 'vrwp-status';
|
|
|
|
const videoTitle = document.createElement('p');
|
|
videoTitle.className = 'vrwp-video-title';
|
|
videoTitle.textContent = 'Title';
|
|
|
|
const progress = document.createElement('div');
|
|
progress.className = 'vrwp-progress';
|
|
|
|
const currentTime = document.createElement('p');
|
|
currentTime.className = 'vrwp-current-time';
|
|
currentTime.textContent = '00:00:00';
|
|
|
|
const bar = document.createElement('div');
|
|
bar.className = 'vrwp-bar';
|
|
|
|
const played = document.createElement('div');
|
|
played.className = 'vrwp-played';
|
|
bar.appendChild(played);
|
|
|
|
const totalTime = document.createElement('p');
|
|
totalTime.className = 'vrwp-total-time';
|
|
totalTime.textContent = '00:00:00';
|
|
|
|
progress.appendChild(currentTime);
|
|
progress.appendChild(bar);
|
|
progress.appendChild(totalTime);
|
|
|
|
status.appendChild(videoTitle);
|
|
status.appendChild(progress);
|
|
|
|
const controls = document.createElement('div');
|
|
controls.className = 'vrwp-controls';
|
|
|
|
const fullscreenBtn = createControlButton('vrwp-fullscreen', 'Toggle fullscreen', 'maximize');
|
|
|
|
const nav = document.createElement('div');
|
|
nav.className = 'vrwp-nav';
|
|
|
|
const backBtn = createControlButton('vrwp-back', 'Back 15 seconds', 'rotate-ccw', '15');
|
|
|
|
const play2Btn = createControlButton('vrwp-play-toggle', 'Play or pause', 'play');
|
|
|
|
const forwardBtn = createControlButton('vrwp-forward', 'Forward 15 seconds', 'rotate-cw', '15');
|
|
|
|
nav.appendChild(backBtn);
|
|
nav.appendChild(play2Btn);
|
|
nav.appendChild(forwardBtn);
|
|
|
|
const muteBtn = createControlButton('vrwp-mute', 'Toggle mute', 'volume-2');
|
|
const loopBtn = createControlButton('vrwp-loop', 'Loop video', 'repeat');
|
|
loopBtn.setAttribute('aria-pressed', 'false');
|
|
|
|
controls.appendChild(fullscreenBtn);
|
|
controls.appendChild(nav);
|
|
controls.appendChild(loopBtn);
|
|
controls.appendChild(muteBtn);
|
|
|
|
panel.appendChild(status);
|
|
panel.appendChild(controls);
|
|
|
|
return panel;
|
|
}
|
|
|
|
function createControlButton(className: string, label: string, iconName: LucideIconName, skipLabel?: string): HTMLButtonElement {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = className;
|
|
button.setAttribute('aria-label', label);
|
|
button.appendChild(createLucideIcon(iconName));
|
|
|
|
if (skipLabel) {
|
|
const labelEl = document.createElement('span');
|
|
labelEl.className = 'vrwp-skip-label';
|
|
labelEl.textContent = skipLabel;
|
|
button.appendChild(labelEl);
|
|
}
|
|
|
|
return button;
|
|
}
|