Update fullscreen_playcanvas.js

fullscreen_playcanvas.js

@@ -1,7 +1,4 @@
 // fullscreen.js
-// Intègre un projet PlayCanvas via une balise <script data-src="..." data-aspect="16:9">
-// Gère le plein écran natif (desktop/Android) et fake-fullscreen (iOS).
-
 (function () {
   // ─── 1. Localiser la balise <script> ────────────────────────────────────────
   const scriptTag =
@@ -21,12 +18,9 @@
   }
 
   // ─── 2. Détection plateforme ─────────────────────────────────────────────────
-  const isIOS =
-    /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  const isMobile =
-    isIOS || /Android/i.test(navigator.userAgent);
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
-  // ─── 3. ID d'instance (support multi-embed sur la même page) ─────────────────
+  // ─── 3. ID d'instance ────────────────────────────────────────────────────────
   const id = Math.random().toString(36).substr(2, 8);
 
   // ─── 4. Calcul du padding-bottom (aspect ratio) ──────────────────────────────
@@ -42,8 +36,7 @@
     return null;
   }
 
-  const aspectPadding =
-    computeAspectPadding(scriptTag.getAttribute('data-aspect')) || '56.25%'; // défaut 16:9
+  const aspectPadding = computeAspectPadding(scriptTag.getAttribute('data-aspect')) || '56.25%';
 
   // ─── 5. Injection du CSS ─────────────────────────────────────────────────────
   const style = document.createElement('style');
@@ -62,9 +55,10 @@
       top: 0 !important;
       left: 0 !important;
       width: 100vw !important;
-      height: 100vh !important;
+      height: 100vh !important; /* Fallback */
+      height: 100dvh !important; /* iOS 16+ dynamique */
       max-width: 100vw !important;
-      max-height: 100vh !important;
+      max-height: 100dvh !important;
       padding-bottom: 0 !important;
       margin: 0 !important;
       z-index: 99999;
@@ -98,9 +92,6 @@
       -webkit-tap-highlight-color: transparent;
       transition: background 0.2s;
     }
-    .pc-fs-btn-${id}:hover {
-      background: rgba(0,0,0,0.8);
-    }
   `;
   document.head.appendChild(style);
 
@@ -116,43 +107,38 @@
   const urlObj = new URL(playcanvasUrl);
   urlObj.searchParams.set('overlay', 'false');
   iframe.src = urlObj.href;
-
-  
   iframe.setAttribute('allowfullscreen', '');
   iframe.setAttribute('allow', 'autoplay; fullscreen');
-  iframe.setAttribute(
-    'sandbox',
-    'allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-forms'
-  );
+  iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-forms');
 
   const fsBtn = document.createElement('button');
   fsBtn.className = `pc-fs-btn-${id}`;
-  fsBtn.title = 'Plein écran';
   fsBtn.textContent = '⇱';
-  fsBtn.setAttribute('aria-label', 'Plein écran');
 
   inner.appendChild(iframe);
   wrapper.appendChild(inner);
   wrapper.appendChild(fsBtn);
   scriptTag.parentNode.insertBefore(wrapper, scriptTag.nextSibling);
 
-  // ─── 7. État fullscreen ──────────────────────────────────────────────────────
+  // ─── 7. État & Helper ────────────────────────────────────────────────────────
   let isFullscreen = false;
-  let savedPadding = aspectPadding;
   let savedParent = null;
   let savedNextSibling = null;
 
-  // ─── 8. Styles communs fullscreen (sans déplacement DOM) ─────────────────────
-  // Utilisé par le fullscreen natif (desktop/Android).
-  // NE PAS modifier cette fonction pour iOS — voir applyFakeFullscreenStyles.
+  // Détermine l'unité de hauteur à utiliser
+  function getHeightUnit() {
+    return (CSS && CSS.supports && CSS.supports('height', '100dvh')) ? '100dvh' : '100vh';
+  }
+
+  // ─── 8. Styles Plein Écran ───────────────────────────────────────────────────
   function applyFullscreenStyles() {
+    const h = isIOS ? getHeightUnit() : '100vh';
     wrapper.style.position = 'fixed';
     wrapper.style.top = '0';
     wrapper.style.left = '0';
     wrapper.style.width = '100vw';
-    wrapper.style.height = '100vh';
-    wrapper.style.maxWidth = '100vw';
-    wrapper.style.maxHeight = '100vh';
+    wrapper.style.height = h;
+    wrapper.style.maxHeight = h;
     wrapper.style.paddingBottom = '0';
     wrapper.style.margin = '0';
     wrapper.style.zIndex = '99999';
@@ -161,50 +147,20 @@
     isFullscreen = true;
   }
 
-  // ─── 9. Fake-fullscreen iOS avec téléportation DOM + correction hauteur ───────
-  // Sur iOS Safari, 100vh inclut la barre de navigation → le bas est masqué.
-  // On utilise 100dvh (dynamic viewport height) si supporté, sinon on compense
-  // avec env(safe-area-inset-bottom).
-  // La téléportation dans <body> permet d'échapper aux stacking contexts parents.
   function applyFakeFullscreenStyles() {
     savedParent = wrapper.parentNode;
     savedNextSibling = wrapper.nextSibling;
     document.body.appendChild(wrapper);
-
-    // Styles communs
     applyFullscreenStyles();
-
-    // Correction hauteur iOS uniquement
-    if (isIOS) {
-      if (CSS.supports('height', '1dvh')) {
-        // iOS 16+ : dvh exclut exactement la barre Safari
-        wrapper.style.height = '100dvh';
-        wrapper.style.maxHeight = '100dvh';
-      } else {
-        // iOS 15 et moins : compensation via safe-area-inset-bottom
-        wrapper.style.height = 'calc(100vh - env(safe-area-inset-bottom, 0px))';
-        wrapper.style.maxHeight = 'calc(100vh - env(safe-area-inset-bottom, 0px))';
-      }
-    }
   }
 
-  // ─── 10. Restaurer les styles normaux ────────────────────────────────────────
   function restoreStyles() {
-    wrapper.style.position = '';
-    wrapper.style.top = '';
-    wrapper.style.left = '';
-    wrapper.style.width = '100%';
-    wrapper.style.height = '0';
-    wrapper.style.maxWidth = '';
-    wrapper.style.maxHeight = '';
-    wrapper.style.paddingBottom = savedPadding;
-    wrapper.style.margin = '';
-    wrapper.style.zIndex = '';
+    wrapper.style.cssText = ''; // Nettoie les styles inline
+    wrapper.style.paddingBottom = aspectPadding;
     wrapper.classList.remove('fake-fullscreen');
     fsBtn.textContent = '⇱';
     isFullscreen = false;
 
-    // Remettre en place uniquement si on avait téléporté (iOS / fallback)
     if (savedParent) {
       savedParent.insertBefore(wrapper, savedNextSibling);
       savedParent = null;
@@ -212,105 +168,50 @@
     }
   }
 
-  // ─── 11. Entrée en plein écran ───────────────────────────────────────────────
+  // ─── 9. Gestionnaires d'événements ───────────────────────────────────────────
   function enterFullscreen() {
-    savedPadding =
-      wrapper.getAttribute('data-original-padding') || aspectPadding;
-
     if (isIOS) {
-      // iOS : fake-fullscreen avec téléportation DOM et correction hauteur
       applyFakeFullscreenStyles();
       document.body.style.overflow = 'hidden';
-      return;
-    }
-
-    // Tentative via l'API Fullscreen standard (desktop / Android)
-    const el = wrapper;
-    const req =
-      el.requestFullscreen ||
-      el.webkitRequestFullscreen ||
-      el.mozRequestFullScreen ||
-      el.msRequestFullscreen;
-
-    if (req) {
-      req.call(el).catch(() => {
-        // API refusée → fallback fake avec téléportation (sans correction iOS)
+    } else {
+      const el = wrapper;
+      const req = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
+      if (req) {
+        req.call(el).catch(() => {
+          applyFakeFullscreenStyles();
+          document.body.style.overflow = 'hidden';
+        });
+      } else {
         applyFakeFullscreenStyles();
         document.body.style.overflow = 'hidden';
-      });
-      // Sur succès, applyFullscreenStyles est appelé par onFullscreenChange
-    } else {
-      applyFakeFullscreenStyles();
-      document.body.style.overflow = 'hidden';
+      }
     }
   }
 
-  // ─── 12. Sortie du plein écran ───────────────────────────────────────────────
   function exitFullscreen() {
-    if (
-      document.fullscreenElement === wrapper ||
-      document.webkitFullscreenElement === wrapper
-    ) {
-      (document.exitFullscreen || document.webkitExitFullscreen || (() => {}))
-        .call(document)
-        .catch(() => {});
+    if (document.fullscreenElement || document.webkitFullscreenElement) {
+      (document.exitFullscreen || document.webkitExitFullscreen || function(){}).call(document);
     }
     restoreStyles();
     document.body.style.overflow = '';
   }
 
-  // ─── 13. Bouton fullscreen ───────────────────────────────────────────────────
-  fsBtn.addEventListener('click', function (e) {
+  fsBtn.addEventListener('click', (e) => {
     e.stopPropagation();
     isFullscreen ? exitFullscreen() : enterFullscreen();
   });
 
-  // Touch explicite pour iOS (évite le délai 300ms)
-  fsBtn.addEventListener('touchend', function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    isFullscreen ? exitFullscreen() : enterFullscreen();
-  });
-
-  // ─── 14. Écouter les changements natifs fullscreen ───────────────────────────
-  // NB : on appelle applyFullscreenStyles (sans dvh) car le fullscreen natif
-  // gère lui-même la hauteur — pas besoin de correction iOS ici.
-  function onFullscreenChange() {
-    const fsEl =
-      document.fullscreenElement || document.webkitFullscreenElement;
-
-    if (!fsEl && isFullscreen) {
-      restoreStyles();
-      document.body.style.overflow = '';
-    } else if (fsEl === wrapper && !isFullscreen) {
-      applyFullscreenStyles();
-    }
-  }
-
-  document.addEventListener('fullscreenchange', onFullscreenChange);
-  document.addEventListener('webkitfullscreenchange', onFullscreenChange);
-
-  // ─── 15. Touche Échap (fake-fullscreen iOS / fallback) ───────────────────────
-  document.addEventListener('keydown', function (e) {
-    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) {
-      exitFullscreen();
-    }
-  });
-
-  // ─── 16. Resize / orientation ────────────────────────────────────────────────
-  window.addEventListener('resize', function () {
-    if (isFullscreen) {
-      wrapper.style.width = '100vw';
-      wrapper.style.height = '100vh';
-    }
+  document.addEventListener('fullscreenchange', () => {
+    const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+    if (!fsEl && isFullscreen) exitFullscreen();
+    else if (fsEl === wrapper && !isFullscreen) applyFullscreenStyles();
   });
 
-  window.addEventListener('orientationchange', function () {
+  window.addEventListener('resize', () => {
     if (isFullscreen) {
-      setTimeout(function () {
-        wrapper.style.width = '100vw';
-        wrapper.style.height = '100vh';
-      }, 200);
+      const h = isIOS ? getHeightUnit() : '100vh';
+      wrapper.style.height = h;
+      wrapper.style.maxHeight = h;
     }
   });
 })();