Immersive Website Environments in visionOS Safari

import SwiftUI
import WebKit
import RealityKit

// MARK: - SwiftUI entry point for a visionOS app hosting an immersive website

struct ImmersiveWebsiteView: View {
    var body: some View {
        VStack {
            Text("Theater Seat Selector")
                .font(.title)
                .padding()
            WebViewContainer()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

// MARK: - WKWebView container with immersive-capable configuration

struct WebViewContainer: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        // On visionOS, WKWebView automatically supports the immersive web API
        // when the app's Info.plist declares the com.apple.developer.web-browser entitlement
        // or when loaded inside Safari. The host app needs no additional configuration.
        let config = WKWebViewConfiguration()

        // Allow inline media playback so video docking inside the environment works
        config.allowsInlineMediaPlayback = true
        config.mediaTypesRequiringUserActionForPlayback = []

        let webView = WKWebView(frame: .zero, configuration: config)
        webView.navigationDelegate = context.coordinator

        // Load your web experience — the HTML/JS side calls model.requestImmersive()
        if let url = URL(string: "https://example.com/theater-seat-selector") {
            webView.load(URLRequest(url: url))
        }
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {}

    func makeCoordinator() -> Coordinator { Coordinator() }

    // MARK: - Coordinator handles navigation events
    class Coordinator: NSObject, WKNavigationDelegate {
        func webView(_ webView: WKWebView,
                     didFinish navigation: WKNavigation!) {
            // Inject a helper that checks for immersive API support
            // and logs availability to the native side for debugging
            let checkScript = """
                (function() {
                    const model = document.querySelector('model');
                    if (!model) { return 'no-model-element'; }
                    const supported = typeof model.requestImmersive === 'function';
                    return supported ? 'immersive-supported' : 'immersive-not-supported';
                })()
            """
            webView.evaluateJavaScript(checkScript) { result, error in
                if let status = result as? String {
                    print("[ImmersiveWeb] API status: \(status)")
                }
            }
        }

        func webView(_ webView: WKWebView,
                     didFail navigation: WKNavigation!,
                     withError error: Error) {
            print("[ImmersiveWeb] Navigation failed: \(error.localizedDescription)")
        }
    }
}

// MARK: - Companion HTML/JS (served by your web server)
// The JavaScript below is the actual immersive API usage.
// It is embedded here as a Swift string to document the web-side contract.

let theaterPageJS = """
// 1. Feature-detect before showing the immersive button
const model = document.getElementById('theaterModel');
const btn = document.getElementById('enterBtn');
if (typeof model.requestImmersive === 'function') {
    btn.style.display = 'block';
}

// 2. Build the entity transform for inline vs immersive presentation
function buildTransform(seatAngle, seatTranslation, isImmersive) {
    const mat = new DOMMatrix();
    if (!isImmersive) {
        mat.translateSelf(seatTranslation.x, seatTranslation.y - 1.0, seatTranslation.z);
    }
    mat.rotateSelf(0, seatAngle + (isImmersive ? 15 : 0), 0);
    return mat;
}

// 3. Sync entity transform whenever immersive state changes
model.addEventListener('immersivechange', () => {
    const immersive = document.immersiveElement === model;
    const seat = currentSeat();
    model.entityTransform = buildTransform(seat.angle, seat.translation, immersive);
    document.getElementById('exitBtn').style.display = immersive ? 'block' : 'none';
});

// 4. Request immersive on user tap (must be inside a user-gesture handler)
btn.addEventListener('click', async () => {
    try {
        await model.requestImmersive();
    } catch (e) {
        console.error('Immersive request failed:', e);
    }
});
"""

#Preview {
    ImmersiveWebsiteView()
}