Hugging Face's logo

Spaces:
MikaFil
/
viewer_sgos
Running

App Files Community
MikaFil commited on
Commit
4a72230
·
verified ·
1 Parent(s): c9965c1

Update fullscreen_playcanvas.js

Browse files
Files changed (1) hide show
  1. fullscreen_playcanvas.js +28 -17
fullscreen_playcanvas.js CHANGED
@@ -135,12 +135,12 @@
135
  // ─── 7. État fullscreen ──────────────────────────────────────────────────────
136
  let isFullscreen = false;
137
  let savedPadding = aspectPadding;
138
- let savedParent = null; // mémorisé uniquement lors d'un fake-fullscreen
139
- let savedNextSibling = null; // mémorisé uniquement lors d'un fake-fullscreen
140
 
141
  // ─── 8. Styles communs fullscreen (sans déplacement DOM) ─────────────────────
142
- // Utilisé par le fullscreen natif (desktop/Android via requestFullscreen)
143
- // et appelé aussi par applyFakeFullscreenStyles après téléportation.
144
  function applyFullscreenStyles() {
145
  wrapper.style.position = 'fixed';
146
  wrapper.style.top = '0';
@@ -157,15 +157,31 @@
157
  isFullscreen = true;
158
  }
159
 
160
- // ─── 9. Fake-fullscreen avec téléportation DOM ───────────────────────────────
161
- // Utilisé pour iOS et en fallback quand requestFullscreen est refusé.
162
- // Déplace le wrapper dans <body> pour échapper à tout stacking context
163
- // parent (header, transforms, z-index, etc.).
 
164
  function applyFakeFullscreenStyles() {
165
  savedParent = wrapper.parentNode;
166
  savedNextSibling = wrapper.nextSibling;
167
  document.body.appendChild(wrapper);
 
 
168
  applyFullscreenStyles();
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  }
170
 
171
  // ─── 10. Restaurer les styles normaux ────────────────────────────────────────
@@ -198,7 +214,7 @@
198
  wrapper.getAttribute('data-original-padding') || aspectPadding;
199
 
200
  if (isIOS) {
201
- // iOS ne supporte pas l'API Fullscreen → fake-fullscreen avec téléportation DOM
202
  applyFakeFullscreenStyles();
203
  document.body.style.overflow = 'hidden';
204
  return;
@@ -214,12 +230,11 @@
214
 
215
  if (req) {
216
  req.call(el).catch(() => {
217
- // API refusée (ex : iframe cross-origin) → fallback fake avec téléportation
218
  applyFakeFullscreenStyles();
219
  document.body.style.overflow = 'hidden';
220
  });
221
  // Sur succès, applyFullscreenStyles est appelé par onFullscreenChange
222
- // pour éviter tout double appel.
223
  } else {
224
  applyFakeFullscreenStyles();
225
  document.body.style.overflow = 'hidden';
@@ -254,19 +269,16 @@
254
  });
255
 
256
  // ─── 14. Écouter les changements natifs fullscreen ───────────────────────────
257
- // Déclenché par le navigateur sur requestFullscreen réussi ou sortie via Échap.
258
- // NB : on n'appelle PAS applyFakeFullscreenStyles ici car le fullscreen natif
259
- // n'a pas besoin de téléportation DOM.
260
  function onFullscreenChange() {
261
  const fsEl =
262
  document.fullscreenElement || document.webkitFullscreenElement;
263
 
264
  if (!fsEl && isFullscreen) {
265
- // Le navigateur a quitté le plein écran tout seul (ex : touche Échap)
266
  restoreStyles();
267
  document.body.style.overflow = '';
268
  } else if (fsEl === wrapper && !isFullscreen) {
269
- // requestFullscreen accordé → appliquer les styles sans téléportation
270
  applyFullscreenStyles();
271
  }
272
  }
@@ -291,7 +303,6 @@
291
 
292
  window.addEventListener('orientationchange', function () {
293
  if (isFullscreen) {
294
- // Délai pour laisser le navigateur recalculer les dimensions après rotation
295
  setTimeout(function () {
296
  wrapper.style.width = '100vw';
297
  wrapper.style.height = '100vh';
 
135
  // ─── 7. État fullscreen ──────────────────────────────────────────────────────
136
  let isFullscreen = false;
137
  let savedPadding = aspectPadding;
138
+ let savedParent = null;
139
+ let savedNextSibling = null;
140
 
141
  // ─── 8. Styles communs fullscreen (sans déplacement DOM) ─────────────────────
142
+ // Utilisé par le fullscreen natif (desktop/Android).
143
+ // NE PAS modifier cette fonction pour iOS — voir applyFakeFullscreenStyles.
144
  function applyFullscreenStyles() {
145
  wrapper.style.position = 'fixed';
146
  wrapper.style.top = '0';
 
157
  isFullscreen = true;
158
  }
159
 
160
+ // ─── 9. Fake-fullscreen iOS avec téléportation DOM + correction hauteur ───────
161
+ // Sur iOS Safari, 100vh inclut la barre de navigation → le bas est masqué.
162
+ // On utilise 100dvh (dynamic viewport height) si supporté, sinon on compense
163
+ // avec env(safe-area-inset-bottom).
164
+ // La téléportation dans <body> permet d'échapper aux stacking contexts parents.
165
  function applyFakeFullscreenStyles() {
166
  savedParent = wrapper.parentNode;
167
  savedNextSibling = wrapper.nextSibling;
168
  document.body.appendChild(wrapper);
169
+
170
+ // Styles communs
171
  applyFullscreenStyles();
172
+
173
+ // Correction hauteur iOS uniquement
174
+ if (isIOS) {
175
+ if (CSS.supports('height', '1dvh')) {
176
+ // iOS 16+ : dvh exclut exactement la barre Safari
177
+ wrapper.style.height = '100dvh';
178
+ wrapper.style.maxHeight = '100dvh';
179
+ } else {
180
+ // iOS 15 et moins : compensation via safe-area-inset-bottom
181
+ wrapper.style.height = 'calc(100vh - env(safe-area-inset-bottom, 0px))';
182
+ wrapper.style.maxHeight = 'calc(100vh - env(safe-area-inset-bottom, 0px))';
183
+ }
184
+ }
185
  }
186
 
187
  // ─── 10. Restaurer les styles normaux ────────────────────────────────────────
 
214
  wrapper.getAttribute('data-original-padding') || aspectPadding;
215
 
216
  if (isIOS) {
217
+ // iOS : fake-fullscreen avec téléportation DOM et correction hauteur
218
  applyFakeFullscreenStyles();
219
  document.body.style.overflow = 'hidden';
220
  return;
 
230
 
231
  if (req) {
232
  req.call(el).catch(() => {
233
+ // API refusée → fallback fake avec téléportation (sans correction iOS)
234
  applyFakeFullscreenStyles();
235
  document.body.style.overflow = 'hidden';
236
  });
237
  // Sur succès, applyFullscreenStyles est appelé par onFullscreenChange
 
238
  } else {
239
  applyFakeFullscreenStyles();
240
  document.body.style.overflow = 'hidden';
 
269
  });
270
 
271
  // ─── 14. Écouter les changements natifs fullscreen ───────────────────────────
272
+ // NB : on appelle applyFullscreenStyles (sans dvh) car le fullscreen natif
273
+ // gère lui-même la hauteur — pas besoin de correction iOS ici.
 
274
  function onFullscreenChange() {
275
  const fsEl =
276
  document.fullscreenElement || document.webkitFullscreenElement;
277
 
278
  if (!fsEl && isFullscreen) {
 
279
  restoreStyles();
280
  document.body.style.overflow = '';
281
  } else if (fsEl === wrapper && !isFullscreen) {
 
282
  applyFullscreenStyles();
283
  }
284
  }
 
303
 
304
  window.addEventListener('orientationchange', function () {
305
  if (isFullscreen) {
 
306
  setTimeout(function () {
307
  wrapper.style.width = '100vw';
308
  wrapper.style.height = '100vh';