forced webgl on mobile

Author: k9p5

examples/scripting/index.html

@@ -14,11 +14,11 @@
     <div id="title-container">
       <h1>Diffusion Studio Examples</h1>
       <select name="scripts">
+        <option value="font">Custom Font</option>
         <option value="filters">Filters</option>
         <option value="captions">Captions</option>
         <option value="drag-and-drop">Drag and Drop</option>
         <option value="custom-captions">Custiom Captions</option>
-        <option value="font">Custom Font</option>
         <option value="split-video">Split Video</option>
         <option value="video-trimming">Video Trimming</option>
         <option value="reddit-stories">Reddit Stories</option>

examples/scripting/src/borwser-support.ts

@@ -12,3 +12,5 @@ if (!isSupported) {
   const el = document.querySelector('[id="browser-not-supported"]') as HTMLParagraphElement;
   el.style.display = 'block';
 }
+
+export const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

examples/scripting/src/main.ts

@@ -1,6 +1,6 @@
 import * as core from '@diffusionstudio/core';
 import { MainFn, Settings } from './types';
-import './borwser-support';
+import { isMobile } from './borwser-support';
 
 const select = document.querySelector('select') as HTMLSelectElement;
 const container = document.querySelector('[id="player-container"]') as HTMLDivElement;
@@ -19,7 +19,10 @@ async function loadScript(name: string) {
   const module = await import(`./${name}.ts`);
   const main: MainFn = module.main;
   const settings: Settings = module.settings;
-  const composition = new core.Composition(settings);
+  const composition = new core.Composition({
+    ...settings, // force webgl on mobile
+    backend: isMobile ? 'webgl' : undefined
+  });
   await main(composition);
 
   const handlePlay = () => composition.play();
@@ -66,7 +69,7 @@ async function loadScript(name: string) {
 
   return () => {
     composition.pause();
-    
+
     playButton.removeEventListener('click', handlePlay);
     pauseButton.removeEventListener('click', handlePause);
     backButton.removeEventListener('click', handleBack);