Ios fixes

packages/client-core/src/components/FullscreenContainer.tsx

@@ -28,8 +28,11 @@ export const FullscreenContainer = React.forwardRef((props: Props, ref: any) =>
   }, [])
 
   useEffect(() => {
-    if (fullScreenActive.value) handle.enter()
-    else handle.exit()
+    if (fullScreenActive.value) {
+      handle.enter().catch((err) => console.log(err))
+    } else {
+      handle.exit().catch((err) => console.log(err))
+    }
   }, [fullScreenActive.value])
 
   return iOS ? (

packages/client/index.html

@@ -33,7 +33,8 @@
             // Register the service worker
             navigator.serviceWorker
               .register(`${window.location.href.split('/')[0]}/<%- swScriptLink %>`, {
-                scope: './'
+                scope: `./`,
+
               })
               .then(function (reg) {
                 console.log("[PWA] SW registered at " + reg.scope);

packages/client/pwa.config.ts

@@ -25,7 +25,7 @@ const PWA = (clientSetting) =>
       short_name: clientSetting?.shortName || 'EE',
       theme_color: clientSetting?.themeColor || '#ffffff',
       background_color: clientSetting?.backgroundColor || '#000000',
-      start_url: `/`,
+      start_url: process.env.APP_URL || '/',
       scope: `./`,
       id: `ETHEREAL_ENGINE`
     },
@@ -38,32 +38,35 @@ const PWA = (clientSetting) =>
     devOptions: {
       disableRuntimeConfig: false,
       // Enable dev options only during development
-      enabled: true, // process.env.APP_ENV === 'development',
+      enabled: process.env.APP_ENV === 'development',
       // Navigate to index.html for all 404 errors during development
       navigateFallback: '/index.html',
       // Allowlist all paths for navigateFallback during development
       navigateFallbackAllowlist: [
         // allow all files for local vite dev server
-        /^\/.*/
+        /^\/.*/,
+        // allow node_modules/.vite cache
+        /^\/node_modules\/\.vite\/.*/,
+        // @vite/client
+        /^\/@vite\/client\/.*/,
+        // src/main.tsx
+        /^\/src\/main\.tsx/,
+        // @vite-plugin-pwa
+        /^\/@vite-plugin-pwa\/.*/
       ]
     },
     workbox: {
-      clientsClaim: true,
-      skipWaiting: true,
+      sourcemap: true,
       // Set the path for the service worker file
       swDest: process.env.GEN_SW === 'true' ? 'public/service-worker.js' : 'src/service-worker.js',
       // Navigate to index.html for all 404 errors during production
       navigateFallback: '/index.html',
       // Allowlist all paths for navigateFallback during production
       navigateFallbackAllowlist: [
-        // allow node_modules/.vite cache
-        /^\/node_modules\/\.vite\/.*/,
-        // @vite/client
-        /^\/@vite\/client\/.*/,
-        // src/main.tsx
-        /^\/src\/main\.tsx/,
-        // @vite-plugin-pwa
-        /^\/@vite-plugin-pwa\/.*/,
+        // allow access to loder_decoder directory
+        /^\/loader_decoder\/.*/,
+        // allow jsdelivr cdn
+        /^https:\/\/cdn.jsdelivr.net\/.*/,
         // allow all files for production build
         /^\/.*/,
         // location route
@@ -117,74 +120,51 @@ const PWA = (clientSetting) =>
       // Set maximum cache size to 100 MB
       maximumFileSizeToCacheInBytes: 1000 * 1000 * 100,
       runtimeCaching: [
-        // Cache all requests on the resources- subdomain for this domain
+        // cache all static images
         {
-          urlPattern: /^https?:\/\/resources-*\/.*/i,
+          urlPattern: /\.(?:png|jpg|jpeg|svg|gif|ico)$/i,
           handler: 'CacheFirst',
           options: {
-            cacheName: 'resources',
+            cacheName: 'images',
             expiration: {
               maxEntries: 1000,
-              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
             }
           }
         },
+        // cache all static fonts
         {
-          urlPattern: /^https?.*/i,
+          urlPattern: /\.(?:woff2|woff|ttf|eot)$/i,
           handler: 'CacheFirst',
           options: {
-            cacheName: 'all-content-cache',
+            cacheName: 'fonts',
             expiration: {
               maxEntries: 1000,
-              maxAgeSeconds: 7 * 24 * 60 * 60 // <== 7 days
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
-            }
-          }
-        },
-        {
-          urlPattern: /^\/fonts?.*/i,
-          handler: 'CacheFirst',
-          options: {
-            cacheName: 'fonts-assets-cache',
-            expiration: {
-              maxEntries: 100,
-              maxAgeSeconds: 24 * 60 * 60 // <== 24 hours
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
             }
           }
         },
+        // cache all static media
         {
-          urlPattern: /^\/icons?.*/,
+          urlPattern: /\.(?:mp3|mp4|webm)$/i,
           handler: 'CacheFirst',
           options: {
-            cacheName: 'icons-assets-cache',
+            cacheName: 'media',
             expiration: {
-              maxEntries: 100,
-              maxAgeSeconds: 24 * 60 * 60 // <== 24 hours
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
+              maxEntries: 1000,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
             }
           }
         },
+        // cache all static code
         {
-          urlPattern: /^\/static?.*/i,
+          urlPattern: /\.(?:js|css|html)$/i,
           handler: 'CacheFirst',
           options: {
-            cacheName: 'static-assets-cache',
+            cacheName: 'code',
             expiration: {
-              maxEntries: 100,
-              maxAgeSeconds: 24 * 60 * 60 // <== 24 hours
-            },
-            cacheableResponse: {
-              statuses: [0, 200]
+              maxEntries: 1000,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 Days
             }
           }
         }

packages/client/src/pages/_app_tw.tsx

@@ -55,6 +55,7 @@ const AppPage = () => {
 
   useEffect(() => {
     const receptor = (action): any => {
+      // @ts-ignore
       matches(action).when(NotificationAction.notify.matches, (action) => {
         AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.alert, 0.5)
         notistackRef.current?.enqueueSnackbar(action.message, {

packages/client/tailwind.config.js

@@ -2,7 +2,10 @@
 
 module.exports = {
   mode: 'jit',
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './public/index.html'
+  ],
   darkMode: "class",
   important: true, // important in prod is must be
   theme: ["dark"],

packages/client/vite.config.ts

@@ -177,7 +177,7 @@ export default defineConfig(async () => {
             icon192px: clientSetting.icon192px || '/android-chrome-192x192.png',
             icon512px: clientSetting.icon512px || '/android-chrome-512x512.png',
             webmanifestLink: clientSetting.webmanifestLink || '/manifest.webmanifest',
-            swScriptLink: clientSetting.webmanifestLink || 'service-worker.js',
+            swScriptLink: clientSetting.swScriptLink || 'service-worker.js',
             paymentPointer: clientSetting.paymentPointer || ''
           }
         }

packages/engine/src/scene/components/MediaComponent.ts

@@ -255,7 +255,12 @@ export function MediaReactor() {
       if (media.paused.value) {
         mediaElement.element.value.pause()
       } else {
-        mediaElement.element.value.play()
+        const promise = mediaElement.element.value.play()
+        if (promise) {
+          promise.catch((error) => {
+            console.error(error)
+          })
+        }
       }
     },
     [media.paused, mediaElement]

packages/ui/src/components/tailwind/Capture/index.tsx

@@ -78,7 +78,7 @@ const CaptureDashboard = () => {
   const mediaStreamState = useHookstate(getMutableState(MediaStreamState))
   const [videoStatus, setVideoStatus] = useState('')
 
-  const poseDetectorRef = useRef<Pose>()
+  const poseDetectorRef = useRef<Pose | any>(null)
   const isDetecting = useHookstate(false)
 
   const staticImageMode = useHookstate(true)
@@ -103,7 +103,7 @@ const CaptureDashboard = () => {
 
   // Restart dectector when option states is updated
   useEffect(() => {
-    if (poseDetectorRef.current) {
+    if (poseDetectorRef.current !== null) {
       stopDetecting()
       const detector = createPoseDetector()
       startDetecting(detector)
@@ -167,11 +167,13 @@ const CaptureDashboard = () => {
     }
   }
 
-  const stopDetecting = async () => {
+  const stopDetecting = useCallback(async () => {
     isDetecting.set(false)
-    // await poseDetectorRef.current?.close()
-    // poseDetectorRef.current = null
-  }
+    if (poseDetectorRef?.current !== null) {
+      await poseDetectorRef?.current?.close()
+      poseDetectorRef.current = null
+    }
+  }, [isDetecting])
 
   const onResults: ResultsListener = useCallback(
     (results) => {
@@ -214,7 +216,6 @@ const CaptureDashboard = () => {
         videoActive.set(true)
         let processingData = false
         const onAnimationFrame = () => {
-          if (!isDetecting.value === false) return
           if (!videoActive.value) {
             processingData = false
             return
@@ -229,12 +230,14 @@ const CaptureDashboard = () => {
           } else {
             processingData = true
             // we have to wait for the current frame to be processed before we can send the next one
+            if (poseDetectorRef?.current === null) return
             mediapipe.value?.send({ image: videoElement }).then(() => {
               processingData = false
               videoElement.requestVideoFrameCallback(onAnimationFrame)
             })
           }
         }
+        if (poseDetectorRef?.current === null) return
         videoElement.requestVideoFrameCallback(onAnimationFrame)
       }
       videoElement.onpause = () => {
@@ -257,7 +260,7 @@ const CaptureDashboard = () => {
   }, [mediaConnection?.connected])
 
   const createPoseDetector = () => {
-    if (poseDetectorRef.current) return poseDetectorRef.current
+    if (poseDetectorRef.current !== null) return poseDetectorRef.current
 
     const poseDetector = new Pose({
       locateFile: (file) => {
@@ -269,38 +272,37 @@ const CaptureDashboard = () => {
     return poseDetector
   }
 
-  useEffect(() => {
-    if (videoRef.current && canvasRef.current) {
-      if (isDetecting?.value) {
-        // start detecting on mount
-        const detector = createPoseDetector()
-        startDetecting(detector)
-      }
-    }
-    RecordingFunctions.getRecordings()
-  }, [videoRef, canvasRef, isDetecting])
+  // useEffect(() => {
+  //   if (videoRef.current && canvasRef.current) {
+  //     if (isDetecting?.value) {
+  //       // start detecting on mount
+  //       const detector = createPoseDetector()
+  //       startDetecting(detector)
+  //     }
+  //   }
+  //   // RecordingFunctions.getRecordings()
+  // }, [videoRef, canvasRef, isDetecting])
 
   useEffect(() => {
-    const isCamVideoEnabled = mediaStreamState.camVideoProducer.value != null && !mediaStreamState.videoPaused.value
-
+    const isCamVideoEnabled =
+      mediaStreamState?.camVideoProducer?.value !== null && mediaStreamState.videoPaused.value !== null
     setVideoStatus(
       mediaConnection?.connected?.value === false && videoActive?.value === false
         ? 'loading'
         : isCamVideoEnabled !== true
         ? 'ready'
         : 'active'
     )
-  }, [mediaStreamState, mediaConnection?.connected, videoActive])
+  }, [mediaStreamState, mediaConnection, videoActive])
 
   return (
     <div className="w-full">
       {/* <ul className="">
-        <li>{`videoStatus: ${videoStatus}`}</li>
-        <li>{`mediaConnection: ${mediaConnection?.connected?.value}`}</li>
-        <li>{`videoActive: ${videoActive?.value}`}</li>
-        <li>{`camVideoProducer: ${mediaStreamState.camVideoProducer.value}`}</li>
-        <li>{`videoPaused: ${mediaStreamState.videoPaused.value}`}</li>
-        <li>{`isDetecting: ${isDetecting?.value}`}</li>
+        <li>{`videoStatus: ${videoStatus}`} {`mediaConnection: ${mediaConnection?.connected?.value}`}
+        {`videoActive: ${videoActive?.value}`}
+        {`camVideoProducer: ${mediaStreamState.camVideoProducer.value}`}
+        {`videoPaused: ${mediaStreamState.videoPaused.value}`}
+        {`isDetecting: ${isDetecting?.value}`}</li>
       </ul> */}
       <Drawer
         settings={
@@ -432,12 +434,14 @@ const CaptureDashboard = () => {
                 <LoadingCircle message="Loading..." />
               ) : videoStatus !== 'active' ? (
                 <button
-                  onClick={toggleWebcamPaused}
+                  onClick={() => {
+                    if (mediaConnection?.connected?.value) toggleWebcamPaused()
+                  }}
                   className="absolute btn btn-ghost w-full h-full bg-none"
                   style={{ objectFit: 'contain', top: '0px' }}
                 >
                   <div className="grid w-screen h-screen place-items-center">
-                    <h1>Enable Camera</h1>
+                    <h1>{mediaConnection?.connected?.value ? 'Enable Camera' : 'Loading...'}</h1>
                   </div>
                 </button>
               ) : null}

packages/ui/tailwind.config.js

@@ -1,9 +1,8 @@
-    /** @type {import('tailwindcss').Config} */
+/** @type {import('tailwindcss').Config} */
 
 module.exports = {
   mode: 'jit',
   content: [
-    './public/**/*.html',
     './src/**/*.{js,jsx,ts,tsx}',
   ],
   darkMode: "class",