export function injectPlayerStyles(playerBase) {
    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(playerBase) {
    const playButton = document.createElement('button');
    playButton.type = 'button';
    playButton.className = 'vrwp-play-button';
    playButton.setAttribute('aria-label', 'Play video');
    const playImg = document.createElement('img');
    playImg.src = playerBase + 'images/play.png';
    playImg.alt = 'Play';
    playButton.appendChild(playImg);
    return playButton;
}
export function create2DControlPanel() {
    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 = document.createElement('button');
    fullscreenBtn.type = 'button';
    fullscreenBtn.className = 'vrwp-fullscreen';
    fullscreenBtn.setAttribute('aria-label', 'Toggle fullscreen');
    const nav = document.createElement('div');
    nav.className = 'vrwp-nav';
    const backBtn = document.createElement('button');
    backBtn.type = 'button';
    backBtn.className = 'vrwp-back';
    backBtn.setAttribute('aria-label', 'Back 15 seconds');
    const play2Btn = document.createElement('button');
    play2Btn.type = 'button';
    play2Btn.className = 'vrwp-play-toggle';
    play2Btn.setAttribute('aria-label', 'Play or pause');
    const forwardBtn = document.createElement('button');
    forwardBtn.type = 'button';
    forwardBtn.className = 'vrwp-forward';
    forwardBtn.setAttribute('aria-label', 'Forward 15 seconds');
    nav.appendChild(backBtn);
    nav.appendChild(play2Btn);
    nav.appendChild(forwardBtn);
    const muteBtn = document.createElement('button');
    muteBtn.type = 'button';
    muteBtn.className = 'vrwp-mute';
    muteBtn.setAttribute('aria-label', 'Toggle mute');
    controls.appendChild(fullscreenBtn);
    controls.appendChild(nav);
    controls.appendChild(muteBtn);
    panel.appendChild(status);
    panel.appendChild(controls);
    return panel;
}