forked from EXT/VR180-Web-Player
141 lines
3.2 KiB
JavaScript
141 lines
3.2 KiB
JavaScript
const fileInput = document.querySelector('[data-local-media-file]');
|
|
const launchButton = document.querySelector('[data-local-media-launch]');
|
|
const projectionSelect = document.querySelector('[data-local-media-projection]');
|
|
const preview = document.querySelector('[data-local-media-preview]');
|
|
const fileName = document.querySelector('[data-local-media-name]');
|
|
|
|
let activeObjectUrl = '';
|
|
|
|
fileInput?.addEventListener('change', () => {
|
|
const file = fileInput.files?.[0];
|
|
if (!file) {
|
|
clearLocalMedia();
|
|
return;
|
|
}
|
|
|
|
const mediaType = getMediaType(file);
|
|
if (!mediaType) {
|
|
clearLocalMedia();
|
|
setPreviewMessage('Choose an image or video file.');
|
|
return;
|
|
}
|
|
|
|
if (activeObjectUrl) {
|
|
URL.revokeObjectURL(activeObjectUrl);
|
|
}
|
|
|
|
activeObjectUrl = URL.createObjectURL(file);
|
|
updateLauncher(file, mediaType, activeObjectUrl);
|
|
renderPreview(file, mediaType, activeObjectUrl);
|
|
});
|
|
|
|
projectionSelect?.addEventListener('change', () => {
|
|
if (launchButton && projectionSelect) {
|
|
launchButton.dataset.projection = projectionSelect.value;
|
|
}
|
|
});
|
|
|
|
window.addEventListener('pagehide', () => {
|
|
if (activeObjectUrl) {
|
|
URL.revokeObjectURL(activeObjectUrl);
|
|
}
|
|
});
|
|
|
|
function clearLocalMedia() {
|
|
if (activeObjectUrl) {
|
|
URL.revokeObjectURL(activeObjectUrl);
|
|
activeObjectUrl = '';
|
|
}
|
|
|
|
if (launchButton) {
|
|
launchButton.disabled = true;
|
|
delete launchButton.dataset.src;
|
|
delete launchButton.dataset.mediaType;
|
|
delete launchButton.dataset.type;
|
|
delete launchButton.dataset.title;
|
|
}
|
|
|
|
if (fileName) {
|
|
fileName.textContent = 'No file selected';
|
|
}
|
|
|
|
setPreviewMessage('Preview will appear here.');
|
|
}
|
|
|
|
function getMediaType(file) {
|
|
if (file.type.startsWith('image/')) {
|
|
return 'image';
|
|
}
|
|
|
|
if (file.type.startsWith('video/')) {
|
|
return 'video';
|
|
}
|
|
|
|
const extension = file.name.split('.').pop()?.toLowerCase();
|
|
if (['avif', 'gif', 'jpeg', 'jpg', 'png', 'webp'].includes(extension)) {
|
|
return 'image';
|
|
}
|
|
|
|
if (['m4v', 'mov', 'mp4', 'ogv', 'webm'].includes(extension)) {
|
|
return 'video';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
function updateLauncher(file, mediaType, objectUrl) {
|
|
if (!launchButton || !projectionSelect) {
|
|
return;
|
|
}
|
|
|
|
launchButton.disabled = false;
|
|
launchButton.dataset.src = objectUrl;
|
|
launchButton.dataset.mediaType = mediaType;
|
|
launchButton.dataset.projection = projectionSelect.value;
|
|
launchButton.dataset.title = file.name;
|
|
|
|
if (file.type) {
|
|
launchButton.dataset.type = file.type;
|
|
} else {
|
|
delete launchButton.dataset.type;
|
|
}
|
|
|
|
if (fileName) {
|
|
fileName.textContent = `${file.name} (${mediaType})`;
|
|
}
|
|
}
|
|
|
|
function renderPreview(file, mediaType, objectUrl) {
|
|
if (!preview) {
|
|
return;
|
|
}
|
|
|
|
preview.replaceChildren();
|
|
|
|
if (mediaType === 'image') {
|
|
const image = document.createElement('img');
|
|
image.src = objectUrl;
|
|
image.alt = file.name;
|
|
preview.appendChild(image);
|
|
return;
|
|
}
|
|
|
|
const video = document.createElement('video');
|
|
video.src = objectUrl;
|
|
video.controls = true;
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.preload = 'metadata';
|
|
preview.appendChild(video);
|
|
}
|
|
|
|
function setPreviewMessage(message) {
|
|
if (!preview) {
|
|
return;
|
|
}
|
|
|
|
const placeholder = document.createElement('p');
|
|
placeholder.textContent = message;
|
|
preview.replaceChildren(placeholder);
|
|
}
|