Update fullscreen_playcanvas.js

fullscreen_playcanvas.js

@@ -1,9 +1,7 @@
 // fullscreen.js
 (function () {
   // ─── 1. Localiser la balise <script> ────────────────────────────────────────
-  const scriptTag =
-    document.currentScript ||
-    (function () {
+  const scriptTag = document.currentScript || (function () {
       const all = document.getElementsByTagName('script');
       for (let i = all.length - 1; i >= 0; i--) {
         if (all[i].src && all[i].src.includes('fullscreen.js')) return all[i];
@@ -12,51 +10,53 @@
     })();
 
   const playcanvasUrl = scriptTag.getAttribute('data-src');
-  if (!playcanvasUrl) {
-    console.warn('[fullscreen.js] Attribut data-src manquant.');
-    return;
-  }
+  if (!playcanvasUrl) return;
 
-  // ─── 2. Détection plateforme ─────────────────────────────────────────────────
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
-  // ─── 3. ID d'instance ────────────────────────────────────────────────────────
   const id = Math.random().toString(36).substr(2, 8);
 
-  // ─── 4. Calcul du padding-bottom (aspect ratio) ──────────────────────────────
+  // ─── 4. Calcul des ratios (Desktop & Mobile Portrait) ────────────────────────
   function computeAspectPadding(aspectStr) {
     if (!aspectStr) return null;
     if (aspectStr.includes(':')) {
       const [w, h] = aspectStr.split(':').map(Number);
-      if (w > 0 && h > 0) return (h / w) * 100 + '%';
-    } else {
-      const v = parseFloat(aspectStr);
-      if (v > 0) return (100 / v) + '%';
+      return (w > 0 && h > 0) ? (h / w) * 100 + '%' : null;
     }
-    return null;
+    const v = parseFloat(aspectStr);
+    return (v > 0) ? (100 / v) + '%' : null;
   }
 
-  const aspectPadding = computeAspectPadding(scriptTag.getAttribute('data-aspect')) || '56.25%';
+  const desktopPadding = computeAspectPadding(scriptTag.getAttribute('data-aspect')) || '56.25%';
+  const mobilePadding = computeAspectPadding(scriptTag.getAttribute('data-aspect-mobile')) || desktopPadding;
 
-  // ─── 5. Injection du CSS ─────────────────────────────────────────────────────
+  // ─── 5. Injection du CSS avec Media Queries ──────────────────────────────────
   const style = document.createElement('style');
   style.textContent = `
     .pc-embed-wrapper-${id} {
       position: relative;
       width: 100%;
       height: 0;
-      padding-bottom: ${aspectPadding};
       overflow: hidden;
       background: #000;
       box-sizing: border-box;
+      /* Ratio par défaut (Paysage / Desktop) */
+      padding-bottom: ${desktopPadding}; 
     }
+
+    /* Ratio Mobile Portrait : appliqué uniquement si l'écran est plus haut que large */
+    @media (orientation: portrait) and (max-width: 768px) {
+      .pc-embed-wrapper-${id} {
+        padding-bottom: ${mobilePadding};
+      }
+    }
+
     .pc-embed-wrapper-${id}.fake-fullscreen {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
       width: 100vw !important;
-      height: 100vh !important; /* Fallback */
-      height: 100dvh !important; /* iOS 16+ dynamique */
+      height: 100vh !important;
+      height: 100dvh !important;
       max-width: 100vw !important;
       max-height: 100dvh !important;
       padding-bottom: 0 !important;
@@ -89,8 +89,6 @@
       text-align: center;
       cursor: pointer;
       user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      transition: background 0.2s;
     }
   `;
   document.head.appendChild(style);
@@ -98,7 +96,6 @@
   // ─── 6. Construction du DOM ──────────────────────────────────────────────────
   const wrapper = document.createElement('div');
   wrapper.className = `pc-embed-wrapper-${id}`;
-  wrapper.setAttribute('data-original-padding', aspectPadding);
 
   const inner = document.createElement('div');
   inner.className = `pc-embed-inner-${id}`;
@@ -125,7 +122,6 @@
   let savedParent = null;
   let savedNextSibling = null;
 
-  // Détermine l'unité de hauteur à utiliser
   function getHeightUnit() {
     return (CSS && CSS.supports && CSS.supports('height', '100dvh')) ? '100dvh' : '100vh';
   }
@@ -155,8 +151,8 @@
   }
 
   function restoreStyles() {
-    wrapper.style.cssText = ''; // Nettoie les styles inline
-    wrapper.style.paddingBottom = aspectPadding;
+    wrapper.style.cssText = ''; 
+    // Le CSS via les Media Queries reprendra le dessus automatiquement ici
     wrapper.classList.remove('fake-fullscreen');
     fsBtn.textContent = '⇱';
     isFullscreen = false;