aiden/VR-Web-Player
1
0
Fork 0
forked from EXT/VR180-Web-Player
Code Actions Activity

Removed the video-info div, button is now visible but disabled when VR is not available, button label respected, title attribute of the video div is displayed as the video title in the UI.

Browse Source
This commit is contained in:
Michael Verdi
2025-06-24 19:09:00 -05:00
parent 8539a54f40
commit df75e2a32d
2 changed files with 6 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -7,13 +7,11 @@
</head> </head>
<body> <body>
<div id="player-container"> <div id="player-container">
<div id="video-info" style="display: none;"><!-- You can put whatever you like in this div. It's only shown when VR is available. --> <video id="vrVideo" title="VR180 Video" controls crossOrigin="anonymous" playsinline webkit-playsinline>
<video id="vrVideo" controls crossOrigin="anonymous" playsinline webkit-playsinline>
<source src="REPLACE_THIS.mp4" type="video/mp4"> <source src="REPLACE_THIS.mp4" type="video/mp4">
</video> </video>
</div>
</div> </div>
<button id="enterVrBtn" data-enter-vr-text="Enter VR">Enter VR</button> <button id="enterVrBtn">Enter VR</button>
<script type="module" src="vr180-player.js"></script> <script type="module" src="vr180-player.js"></script>
</body> </body>
</html> </html>

52
vr180-player.js
View File

@@ -5,7 +5,7 @@ let vr180Mesh;
let xrSession = null; let xrSession = null;
let controller1, raycaster, uiElements = []; let controller1, raycaster, uiElements = [];
const tempMatrix = new THREE.Matrix4(); const tempMatrix = new THREE.Matrix4();
let videoElement, enterVrBtn, videoInfoDiv; let videoElement, enterVrBtn;
let frameCounter = 0; let frameCounter = 0;
let isXrLoopActive = false; let isXrLoopActive = false;
@@ -81,24 +81,16 @@ const SOUND_MUTED_SVG_PATH = "M6.9082 2.8985C7.71639 2.45747 8.74994 3.03437 8.7
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
videoElement = document.getElementById('vrVideo'); videoElement = document.getElementById('vrVideo');
videoInfoDiv = document.getElementById('video-info');
enterVrBtn = document.getElementById('enterVrBtn'); enterVrBtn = document.getElementById('enterVrBtn');
if (videoElement) { if (videoElement) {
videoElement.style.display = 'none'; videoElement.style.display = 'none';
} }
// Initially hide video-info. It will be shown if VR is supported.
if (videoInfoDiv) {
videoInfoDiv.style.display = 'none';
}
if (!videoElement || !enterVrBtn) { if (!videoElement || !enterVrBtn) {
console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found."); console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found.");
return; return;
} }
if (!videoInfoDiv) {
console.warn("WARN_DOM: video-info div not found. Video info will not be displayed.");
}
enterVrBtn.disabled = true; enterVrBtn.disabled = true;
if (videoElement) { if (videoElement) {
@@ -109,31 +101,20 @@ document.addEventListener('DOMContentLoaded', () => {
navigator.xr.isSessionSupported('immersive-vr').then((supported) => { navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
if (supported) { if (supported) {
enterVrBtn.dataset.xrSupported = "true"; enterVrBtn.dataset.xrSupported = "true";
// If VR is supported, show the video-info div on the 2D page
if (videoInfoDiv) {
console.log("VR is supported, showing video-info.");
videoInfoDiv.style.display = 'block';
}
init(); init();
} else { } else {
enterVrBtn.dataset.xrSupported = "false"; enterVrBtn.dataset.xrSupported = "false";
enterVrBtn.disabled = true; enterVrBtn.disabled = true;
// If VR is not supported, ensure video-info remains hidden
if (videoInfoDiv) videoInfoDiv.style.display = 'none';
} }
}).catch(err => { }).catch(err => {
console.error("XR Support Check Error:", err); console.error("XR Support Check Error:", err);
enterVrBtn.disabled = true; enterVrBtn.disabled = true;
// On error, ensure video-info remains hidden
if (videoInfoDiv) videoInfoDiv.style.display = 'none';
}); });
} else { } else {
// If navigator.xr itself is not available, VR is not supported // If navigator.xr itself is not available, VR is not supported
if (enterVrBtn) { if (enterVrBtn) {
enterVrBtn.disabled = true; enterVrBtn.disabled = true;
} }
// Ensure video-info remains hidden
if (videoInfoDiv) videoInfoDiv.style.display = 'none';
} }
}); });
@@ -343,7 +324,7 @@ function init() {
const textureCornerRadius = FIGMA_CORNER_RADIUS_PX * (PANEL_TEXTURE_WIDTH / FIGMA_PANEL_WIDTH_PX); const textureCornerRadius = FIGMA_CORNER_RADIUS_PX * (PANEL_TEXTURE_WIDTH / FIGMA_PANEL_WIDTH_PX);
drawRoundedRect(panelCtx, 0, 0, PANEL_TEXTURE_WIDTH, PANEL_TEXTURE_HEIGHT, textureCornerRadius, true, false); drawRoundedRect(panelCtx, 0, 0, PANEL_TEXTURE_WIDTH, PANEL_TEXTURE_HEIGHT, textureCornerRadius, true, false);
const videoTitle = videoElement.querySelector('source')?.src.split('/').pop()?.split('.')[0].replace(/-/g, ' ') || "Video Title"; const videoTitle = videoElement.getAttribute('title') || videoElement.querySelector('source')?.src.split('/').pop()?.split('.')[0].replace(/-/g, ' ') || "Video Title";
const titleFontSizeTexturePx = Math.round(FIGMA_TITLE_FONT_SIZE_PX * (PANEL_TEXTURE_HEIGHT / FIGMA_PANEL_HEIGHT_PX)); const titleFontSizeTexturePx = Math.round(FIGMA_TITLE_FONT_SIZE_PX * (PANEL_TEXTURE_HEIGHT / FIGMA_PANEL_HEIGHT_PX));
panelCtx.fillStyle = '#ffffff'; panelCtx.fillStyle = '#ffffff';
panelCtx.font = `500 ${titleFontSizeTexturePx}px Helvetica, Arial, sans-serif`; panelCtx.font = `500 ${titleFontSizeTexturePx}px Helvetica, Arial, sans-serif`;
@@ -823,12 +804,6 @@ async function actualSessionToggle() {
xrSession = session; xrSession = session;
xrSession.addEventListener('end', onVRSessionEnd); xrSession.addEventListener('end', onVRSessionEnd);
// Ensure video-info is visible when entering VR, if it exists
if (videoInfoDiv) {
console.log("Entering VR, ensuring video-info is visible.");
videoInfoDiv.style.display = 'block';
}
if (video && (video.paused || video.ended)) { if (video && (video.paused || video.ended)) {
try { try {
@@ -870,10 +845,6 @@ async function actualSessionToggle() {
await renderer.xr.setSession(xrSession); await renderer.xr.setSession(xrSession);
isXrLoopActive = true; isXrLoopActive = true;
renderer.setAnimationLoop(renderXR); renderer.setAnimationLoop(renderXR);
if (enterVrBtn) {
enterVrBtn.textContent = enterVrBtn.dataset.enterVrText;
}
frameCounter = 0; frameCounter = 0;
lastFadeTimestamp = performance.now(); lastFadeTimestamp = performance.now();
@@ -881,13 +852,6 @@ async function actualSessionToggle() {
const sessionStartError = "XR_ERROR: Failed to start VR session: " + (err.message || String(err)); const sessionStartError = "XR_ERROR: Failed to start VR session: " + (err.message || String(err));
console.error(sessionStartError, err); console.error(sessionStartError, err);
isXrLoopActive = false; isXrLoopActive = false;
// If VR entry fails, ensure video-info is hidden if it was shown by DOMContentLoaded
// (only if VR was initially thought to be supported)
if (videoInfoDiv && enterVrBtn && enterVrBtn.dataset.xrSupported === "true") {
videoInfoDiv.style.display = 'block'; // Keep it visible if VR was supported
} else if (videoInfoDiv) {
videoInfoDiv.style.display = 'none'; // Hide if VR was not supported
}
if (vr180Mesh) vr180Mesh.visible = false; if (vr180Mesh) vr180Mesh.visible = false;
if (sphereMaterial) { sphereMaterial.map = null; sphereMaterial.needsUpdate = true; } if (sphereMaterial) { sphereMaterial.map = null; sphereMaterial.needsUpdate = true; }
@@ -923,13 +887,7 @@ function onVRSessionEnd(event) {
} }
} }
if (enterVrBtn) enterVrBtn.textContent = 'Enter VR'; // No need to change button text when exiting VR as it should keep its original text
// When VR session ends, video-info should remain visible if VR is supported.
// Its visibility is primarily controlled by the initial check in DOMContentLoaded.
// So, no change to videoInfoDiv.style.display here.
// If it was 'block' because VR is supported, it stays 'block'.
// console.log("VR Session ended. Video-info display:", videoInfoDiv ? videoInfoDiv.style.display : "not found");
if (video && !video.paused) { if (video && !video.paused) {
@@ -967,9 +925,7 @@ function onVRSessionEnd(event) {
console.warn("onVRSessionEnd: Global xrSession was different from the endedSession. Global xrSession:", xrSession, "Ended session:", endedSession); console.warn("onVRSessionEnd: Global xrSession was different from the endedSession. Global xrSession:", xrSession, "Ended session:", endedSession);
xrSession = null; xrSession = null;
} }
if (enterVrBtn) { // No need to change button text when exiting VR as it should keep its original text
enterVrBtn.textContent = enterVrBtn.dataset.enterVrText;
}
onWindowResize(); onWindowResize();
} }