Loop and other fixes

src/vr180player/vr180-player.ts

@@ -26,6 +26,7 @@ import { bindVideoEvents } from './media/video-events.js';
 import {
 	createVrControlPanel,
 	type VrControlPanel,
+	updateVrLoopButtonIcon,
 	updateVrPlayPauseButtonIcon,
 	updateVrSeekBarAppearance,
 	updateVrVolumeButtonIcon
@@ -227,10 +228,12 @@ function init() {
 			callbacks: {
 				createMediaTexture,
 				forward: navigateForward,
+				getIsLooping: () => mediaController?.isLooping() ?? false,
 				positionPlaneForPresentation,
 				rewind: navigateBackward,
 				seekToProgress: (progress) => mediaController?.seekToProgress(progress),
 				showActiveContentMesh,
+				toggleLoop,
 				toggleMute: () => mediaController?.toggleMute(),
 				togglePlayPause: () => mediaController?.togglePlayPause()
 			},
@@ -304,6 +307,10 @@ function updateVRPlayPauseButtonIcon() {
 	updateVrPlayPauseButtonIcon(vrPanel, video.paused || video.ended);
 }
 
+function updateVRLoopButtonIcon() {
+	updateVrLoopButtonIcon(vrPanel, mediaController?.isLooping() ?? false);
+}
+
 function updateVRVolumeButtonIcon() {
 	if (!video) {
 		return;
@@ -326,6 +333,10 @@ function showPanel() {
 	vrPanelVisibility.show();
 }
 
+function showPanelPersistent() {
+	vrPanelVisibility.showPersistent();
+}
+
 function hidePanel() {
 	vrPanelVisibility.hide();
 }
@@ -369,10 +380,22 @@ function update2DMuteButton() {
 	twoDMode?.updateMuteButton();
 }
 
+function toggleLoop() {
+	const isLooping = mediaController?.toggleLoop() ?? false;
+	updateVRLoopButtonIcon();
+	return isLooping;
+}
+
 function handle2DVideoEnd() {
 	twoDMode?.handleVideoEnd();
 }
 
+function handleVrVideoEnd() {
+	updateVRPlayPauseButtonIcon();
+	updateSeekBarAppearance();
+	showPanelPersistent();
+}
+
 function resetToOriginalState() {
 	if (mediaController) {
 		mediaController.resetToOriginalState();
@@ -394,28 +417,22 @@ function onVideoEnded() {
 	}
 
 	mediaController.handleEnded({
-		cleanupFailedVrExit,
-		exitVr: actualSessionToggle,
 		isIn2DMode: is2DModeActive,
 		isInVr: () => Boolean(xrSession && renderer && renderer.xr.isPresenting),
 		on2DEnded: handle2DVideoEnd,
+		onVrEnded: handleVrVideoEnd,
 		resetToOriginalState
 	});
 }
 
-function cleanupFailedVrExit() {
-	if (xrSession) {
-		const sessionToClean = xrSession;
-		xrSession = null;
-		sessionToClean.removeEventListener('end', onVRSessionEnd);
-		sessionToClean.end().catch(e => {}).finally(() => onVRSessionEnd({session: sessionToClean}));
-	} else {
-		 onVRSessionEnd({session: null});
-	}
-}
-
 function onSelectStartVR(event) {
 	handleVrControllerSelect(event, {
+		beginSeekDrag: (controller) => {
+			xrInputRig?.beginSeekDrag(controller, vrPanel, (progress) => {
+				mediaController?.seekToProgress(progress);
+				updateSeekBarAppearance();
+			});
+		},
 		exitVr: () => {
 			if (xrSession) actualSessionToggle();
 		},
@@ -436,6 +453,7 @@ function onSelectStartVR(event) {
 		toggleMute: () => {
 			mediaController?.toggleMute();
 		},
+		toggleLoop,
 		togglePlayPause: () => {
 			mediaController?.togglePlayPause();
 		},
@@ -519,6 +537,7 @@ async function actualSessionToggle() {
 			showActiveContentMesh();
 
 			updateVRPlayPauseButtonIcon();
+			updateVRLoopButtonIcon();
 			updateVRVolumeButtonIcon();
 			if (vrControlPanel) {
 				vrPanelVisibility.hideImmediately();
@@ -624,10 +643,7 @@ function renderXR(timestamp, frame) {
 	if (vrPanelVisibility.isFading) {
 		animatePanelFade(timestamp);
 	}
-	const isInputHoveringVrPanel = xrInputRig?.update(timestamp, getVisibleVrPanelInteractables()) ?? false;
-	if (isInputHoveringVrPanel) {
-		vrPanelVisibility.show();
-	}
+	xrInputRig?.update(timestamp, getVisibleVrPanelInteractables());
 
 	if (!frame) {
 		console.warn("renderXR called without an XRFrame. Skipping render.");