forked from EXT/VR180-Web-Player
87 lines
3.4 KiB
JavaScript
87 lines
3.4 KiB
JavaScript
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;
|
|
}
|