Typescript conversion

vr180player/dom.js

@@ -0,0 +1,86 @@
+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;
+}