carosel images

src/vr180player/vr180-player.ts

@@ -116,6 +116,39 @@ function createMediaTexture() {
 	return textureManager.create();
 }
 
+function refreshMediaTexture() {
+	if (!mediaAdapter || !textureManager || !sphereMaterial) {
+		return;
+	}
+
+	textureManager.setSource(mediaAdapter.textureSource);
+	textureManager.assignToMaterial(sphereMaterial);
+
+	if (renderer?.xr?.isPresenting || twoDMode?.isActive) {
+		mediaAdapter.hideElement();
+	}
+}
+
+function navigateForward() {
+	if (mediaAdapter?.next?.()) {
+		refreshMediaTexture();
+		return;
+	}
+
+	mediaController?.forward();
+	updateSeekBarAppearance();
+}
+
+function navigateBackward() {
+	if (mediaAdapter?.previous?.()) {
+		refreshMediaTexture();
+		return;
+	}
+
+	mediaController?.rewind();
+	updateSeekBarAppearance();
+}
+
 function is2DModeActive() {
 	return twoDMode?.isActive ?? false;
 }
@@ -193,9 +226,9 @@ function init() {
 		twoDMode = new TwoDMode({
 			callbacks: {
 				createMediaTexture,
-				forward: () => mediaController?.forward(),
+				forward: navigateForward,
 				positionPlaneForPresentation,
-				rewind: () => mediaController?.rewind(),
+				rewind: navigateBackward,
 				seekToProgress: (progress) => mediaController?.seekToProgress(progress),
 				showActiveContentMesh,
 				toggleMute: () => mediaController?.toggleMute(),
@@ -387,15 +420,13 @@ function onSelectStartVR(event) {
 			if (xrSession) actualSessionToggle();
 		},
 		forward: () => {
-			mediaController?.forward();
-			updateSeekBarAppearance();
+			navigateForward();
 		},
 		hidePanel,
 		isPanelVisible: () => vrPanelVisibility.isVisible,
 		raycaster,
 		rewind: () => {
-			mediaController?.rewind();
-			updateSeekBarAppearance();
+			navigateBackward();
 		},
 		seek: (progress) => {
 			mediaController?.seekToProgress(progress);