Create interface.js

interface.js

@@ -0,0 +1,213 @@
+// fullscreen.js
+(function () {
+  // ─── 1. Localiser la balise <script> ────────────────────────────────────────
+  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];
+      }
+      return all[all.length - 1];
+    })();
+
+  const playcanvasUrl = scriptTag.getAttribute('data-src');
+  if (!playcanvasUrl) return;
+
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  const id = Math.random().toString(36).substr(2, 8);
+
+  // ─── 4. Calcul des ratios (Desktop & Mobile Portrait) ────────────────────────
+  function computeAspectPadding(aspectStr) {
+    if (!aspectStr) return null;
+    if (aspectStr.includes(':')) {
+      const [w, h] = aspectStr.split(':').map(Number);
+      return (w > 0 && h > 0) ? (h / w) * 100 + '%' : null;
+    }
+    const v = parseFloat(aspectStr);
+    return (v > 0) ? (100 / v) + '%' : null;
+  }
+
+  const desktopPadding = computeAspectPadding(scriptTag.getAttribute('data-aspect')) || '56.25%';
+  const mobilePadding = computeAspectPadding(scriptTag.getAttribute('data-aspect-mobile')) || desktopPadding;
+
+  // ─── 5. Injection du CSS avec Media Queries ──────────────────────────────────
+  const style = document.createElement('style');
+  style.textContent = `
+    .pc-embed-wrapper-${id} {
+      position: relative;
+      width: 100%;
+      height: 0;
+      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;
+      height: 100dvh !important;
+      max-width: 100vw !important;
+      max-height: 100dvh !important;
+      padding-bottom: 0 !important;
+      margin: 0 !important;
+      z-index: 99999;
+    }
+    .pc-embed-inner-${id} {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+    }
+    .pc-embed-inner-${id} iframe {
+      width: 100%; height: 100%;
+      border: none;
+      display: block;
+    }
+    .pc-fs-btn-${id} {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 10;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border: none;
+      background: #2E2E2EB3;
+      color: #fff;
+      font-size: 18px;
+      line-height: 36px;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // ─── 6. Construction du DOM ──────────────────────────────────────────────────
+  const wrapper = document.createElement('div');
+  wrapper.className = `pc-embed-wrapper-${id}`;
+
+  const inner = document.createElement('div');
+  inner.className = `pc-embed-inner-${id}`;
+
+  const iframe = document.createElement('iframe');
+  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');
+
+  const fsBtn = document.createElement('button');
+  fsBtn.className = `pc-fs-btn-${id}`;
+  fsBtn.textContent = '⇱';
+
+  inner.appendChild(iframe);
+  wrapper.appendChild(inner);
+  wrapper.appendChild(fsBtn);
+  scriptTag.parentNode.insertBefore(wrapper, scriptTag.nextSibling);
+
+  // ─── 7. État & Helper ────────────────────────────────────────────────────────
+  let isFullscreen = false;
+  let savedParent = null;
+  let savedNextSibling = null;
+
+  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 = h;
+    wrapper.style.maxHeight = h;
+    wrapper.style.paddingBottom = '0';
+    wrapper.style.margin = '0';
+    wrapper.style.zIndex = '99999';
+    wrapper.classList.add('fake-fullscreen');
+    fsBtn.textContent = '⇲';
+    isFullscreen = true;
+  }
+
+  function applyFakeFullscreenStyles() {
+    savedParent = wrapper.parentNode;
+    savedNextSibling = wrapper.nextSibling;
+    document.body.appendChild(wrapper);
+    applyFullscreenStyles();
+  }
+
+  function restoreStyles() {
+    wrapper.style.cssText = ''; 
+    // Le CSS via les Media Queries reprendra le dessus automatiquement ici
+    wrapper.classList.remove('fake-fullscreen');
+    fsBtn.textContent = '⇱';
+    isFullscreen = false;
+
+    if (savedParent) {
+      savedParent.insertBefore(wrapper, savedNextSibling);
+      savedParent = null;
+      savedNextSibling = null;
+    }
+  }
+
+  // ─── 9. Gestionnaires d'événements ───────────────────────────────────────────
+  function enterFullscreen() {
+    if (isIOS) {
+      applyFakeFullscreenStyles();
+      document.body.style.overflow = 'hidden';
+    } 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';
+      }
+    }
+  }
+
+  function exitFullscreen() {
+    if (document.fullscreenElement || document.webkitFullscreenElement) {
+      (document.exitFullscreen || document.webkitExitFullscreen || function(){}).call(document);
+    }
+    restoreStyles();
+    document.body.style.overflow = '';
+  }
+
+  fsBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    isFullscreen ? exitFullscreen() : enterFullscreen();
+  });
+
+  document.addEventListener('fullscreenchange', () => {
+    const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+    if (!fsEl && isFullscreen) exitFullscreen();
+    else if (fsEl === wrapper && !isFullscreen) applyFullscreenStyles();
+  });
+
+  window.addEventListener('resize', () => {
+    if (isFullscreen) {
+      const h = isIOS ? getHeightUnit() : '100vh';
+      wrapper.style.height = h;
+      wrapper.style.maxHeight = h;
+    }
+  });
+})();