PWA Updates + Bugfixes (#8310)

* How you like me now? * fix mui localization error * bump * Fix mui and mediasystem bugs. * Clean up * update to new props * testing... * Remove broken things.
EtherealEngine · Jul 20, 2023 · b9f8a42 · b9f8a42
1 parent eae59ed
commit b9f8a42
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 40 deletions.
diff --git a/.github/workflows/travis-deploy.yml b/.github/workflows/travis-deploy.yml
@@ -0,0 +1,93 @@
+name: travis-deploy
+
+on:
+  push:
+    branches:
+      [pwa-hotfix]
+jobs:
+  secrets-gate-run:
+    runs-on: ubuntu-latest
+    outputs:
+      ok: ${{ steps.check-secrets-run.outputs.ok }}
+    steps:
+      - name: check for secrets needed to run workflows
+        id: check-secrets-run
+        run: |
+          if [ ${{ secrets.DEPLOYMENTS_ENABLED }} == 'true' ]; then
+            echo "ok=enabled" >> $GITHUB_OUTPUT
+          fi
+  secrets-gate-webhook:
+    runs-on: ubuntu-latest
+    outputs:
+      ok: ${{ steps.check-secrets-webhook.outputs.ok }}
+    steps:
+      - name: check for secrets needed to run workflows
+        id: check-secrets-webhook
+        run: |
+          if [ ${{ secrets.SEND_FINISHED_WEBHOOK }} == 'true' ]; then
+            echo "ok=enabled" >> $GITHUB_OUTPUT
+          fi
+  travis-deploy:
+    needs:
+      - secrets-gate-run
+    if: ${{ needs.secrets-gate-run.outputs.ok == 'enabled' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: Setup Helm
+        run: scripts/setup_helm_builder.sh
+      - name: Setup AWS
+        run: scripts/setup_aws_builder.sh $EKS_AWS_ACCESS_KEY $EKS_AWS_SECRET $AWS_REGION $CLUSTER_NAME
+        env:
+          EKS_AWS_ACCESS_KEY: ${{ secrets.EKS_AWS_ACCESS_KEY }}
+          EKS_AWS_SECRET: ${{ secrets.EKS_AWS_SECRET }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          CLUSTER_NAME: ${{ secrets.CLUSTER_NAME }}
+      - name: Space debug
+        run: |
+          sudo rm -rf /usr/share/dotnet
+          sudo rm -rf /opt/ghc
+          sudo rm -rf "/usr/local/share/boost"
+          sudo rm -rf "$AGENT_TOOLSDIRECTORY"
+      - name: move package.json
+        run: mv package.json package.jsonmoved
+      - name: npm-install 'cli', @aws-sdk/client-ecr(-public), and @kubernetes/client-node
+        run: npm install cli @aws-sdk/client-ecr @aws-sdk/client-ecr-public @kubernetes/client-node
+      - name: restore package.json
+        run: mv package.jsonmoved package.json
+      - name: Expose GitHub Runtime
+        uses: crazy-max/ghaction-github-runtime@v2
+      - name: Build and Push Docker Image
+        run: bash scripts/build_docker_builder.sh dev $GITHUB_SHA $DOCKER_LABEL $AWS_REGION $PRIVATE_ECR
+        env:
+          STORAGE_AWS_ACCESS_KEY_ID: ${{ secrets.STORAGE_AWS_ACCESS_KEY_ID }}
+          STORAGE_AWS_ACCESS_KEY_SECRET: ${{ secrets.STORAGE_AWS_ACCESS_KEY_SECRET }}
+          DOCKER_LABEL: ${{ secrets.DOCKER_LABEL }}
+          REPO_NAME: ${{ secrets.DEV_REPO_NAME }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          ECR_URL: ${{ secrets.ECR_URL }}
+          PRIVATE_ECR: ${{ secrets.PRIVATE_ECR }}
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_HUB_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
+          PUBLISH_DOCKERHUB: ${{ secrets.PUBLISH_DOCKERHUB }}
+      - name: Deploy to EKS
+        run: bash scripts/deploy_builder.sh dev $GITHUB_SHA
+      - name: Job succeeded
+        if: ${{ needs.secrets-gate-webhook.outputs.ok == 'enabled' }}
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6 # Not needed with a .ruby-version file
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+        env:
+          JOB_STATUS: ${{ job.status }}
+          WEBHOOK_URL: ${{ secrets.WEBHOOK_URL }}
+          HOOK_OS_NAME: ${{ runner.os }}
+          WORKFLOW_NAME: ${{ github.workflow }}
+          run: |
+            git clone https://github.com/DiscordHooks/github-actions-discord-webhook.git webhook
+            bash webhook/send.sh $JOB_STATUS $WEBHOOK_URL
+          shell: bash
diff --git a/packages/client-core/src/admin/components/Analytics/index.tsx b/packages/client-core/src/admin/components/Analytics/index.tsx
@@ -33,9 +33,9 @@ import TextField from '@etherealengine/ui/src/primitives/mui/TextField'
 import ToggleButton from '@etherealengine/ui/src/primitives/mui/ToggleButton'
 import ToggleButtonGroup from '@etherealengine/ui/src/primitives/mui/ToggleButtonGroup'
 
-import DateAdapter from '@mui/lab/AdapterMoment'
-import LocalizationProvider from '@mui/lab/LocalizationProvider'
-import MobileDateTimePicker from '@mui/lab/MobileDateTimePicker'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'
 
 import { AuthState } from '../../../user/services/AuthService'
 import { AdminAnalyticsService, AdminAnalyticsState } from '../../services/AnalyticsService'
@@ -161,28 +161,30 @@ const Analytics = () => {
           </ToggleButtonGroup>
           <div className={styles.datePickerContainer}>
             {/* @ts-ignore */}
-            <LocalizationProvider dateAdapter={DateAdapter}>
+            <LocalizationProvider dateAdapter={AdapterMoment}>
               <MobileDateTimePicker
                 value={startDate.value}
-                DialogProps={{
-                  PaperProps: {
-                    className: styles.dateTimePickerDialog
+                slotProps={{
+                  dialog: {
+                    PaperProps: {
+                      className: styles.dateTimePickerDialog
+                    }
                   }
                 }}
                 onChange={(value) => onDateRangeStartChange(value)}
-                renderInput={(params) => <TextField {...params} />}
               />
               <Box sx={{ mx: 2 }}> to </Box>
               <MobileDateTimePicker
                 value={endDate.value}
-                DialogProps={{
-                  PaperProps: {
-                    className: styles.dateTimePickerDialog
+                slotProps={{
+                  dialog: {
+                    PaperProps: {
+                      className: styles.dateTimePickerDialog
+                    }
                   }
                 }}
                 minDateTime={minEndDate}
                 onChange={(value) => onDateRangeEndChange(value)}
-                renderInput={(params) => <TextField {...params} />}
               />
             </LocalizationProvider>
           </div>

diff --git a/packages/client-core/src/admin/components/Invite/CreateInviteModal.tsx b/packages/client-core/src/admin/components/Invite/CreateInviteModal.tsx
@@ -45,9 +45,8 @@ import Tab from '@etherealengine/ui/src/primitives/mui/Tab'
 import Tabs from '@etherealengine/ui/src/primitives/mui/Tabs'
 import TextField from '@etherealengine/ui/src/primitives/mui/TextField'
 
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 
 import { NotificationService } from '../../../common/services/NotificationService'
 import { InviteService } from '../../../social/services/InviteService'

diff --git a/packages/client-core/src/admin/components/Invite/UpdateInviteModal.tsx b/packages/client-core/src/admin/components/Invite/UpdateInviteModal.tsx
@@ -45,9 +45,8 @@ import Tab from '@etherealengine/ui/src/primitives/mui/Tab'
 import Tabs from '@etherealengine/ui/src/primitives/mui/Tabs'
 import TextField from '@etherealengine/ui/src/primitives/mui/TextField'
 
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 
 import { NotificationService } from '../../../common/services/NotificationService'
 import DrawerView from '../../common/DrawerView'
@@ -354,7 +353,7 @@ const UpdateInviteModal = ({ open, onClose, invite }: Props) => {
           />
           {timed.value && (
             <div className={styles.datePickerContainer}>
-              <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
                 <div className={styles.pickerControls}>
                   <DateTimePicker
                     label="Start Time"

diff --git a/packages/client/pwa.config.ts b/packages/client/pwa.config.ts
@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { VitePWA } from 'vite-plugin-pwa'
 
 import manifest from './manifest.default.json'
+import packageJson from './package.json'
 
 /**
  * Creates a new instance of the VitePWA plugin for Vite.js.
@@ -86,7 +87,7 @@ const PWA = (clientSetting) =>
       // claim clients immediately
       clientsClaim: true,
       // show source maps
-      sourcemap: true,
+      sourcemap: process.env.APP_ENV === 'development' ? false : true,
       // Set the path for the service worker file
       swDest: process.env.APP_ENV === 'development' ? 'public/service-worker.js' : 'dist/service-worker.js',
       // Navigate to index.html for all 404 errors during production
@@ -118,17 +119,62 @@ const PWA = (clientSetting) =>
         // ktx2
         '**/*.{ktx2}'
       ],
-      // Set additional manifest entries for the cache
-      additionalManifestEntries: [
-        // { url: '/service-worker.js', revision: null },
-        // { url: '/dev-sw', revision: null },
-        // { url: '/src/main', revision: null }
-      ],
       // Enable cleanup of outdated caches
       cleanupOutdatedCaches: true,
       // Set maximum cache size to 10 MB
       maximumFileSizeToCacheInBytes: 1000 * 1000 * 10,
       runtimeCaching: [
+        // Cache static
+        {
+          urlPattern: ({ url }) => {
+            return /\/static?.*/i.test(url.href)
+          },
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'static-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 24 * 60 * 60 * 30 // <== 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Cache static resources
+        {
+          urlPattern: ({ url }) => {
+            return /\/static-resources?.*/i.test(url.href)
+          },
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'static-assets-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 24 * 60 * 60 * 30 // <== 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        // Cache sfx assets
+        {
+          urlPattern: ({ url }) => {
+            return /\/sfx?.*/i.test(url.href)
+          },
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'sfx-assets-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 24 * 60 * 60 * 30 // <== 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
         // Cache local assets
         {
           urlPattern: ({ url }) => {
@@ -241,6 +287,21 @@ const PWA = (clientSetting) =>
             },
             networkTimeoutSeconds: 10
           }
+        },
+        // Cache everything else
+        {
+          urlPattern: /^\/*/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'all-local-cache',
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 24 * 60 * 60 * 30 // <== 30 days
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
         }
       ]
     }

diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
@@ -85,8 +85,8 @@ const parseModuleName = (moduleName: string) => {
     if (moduleName.includes('quarks/dist')) {
       return `vendor_three_quarks_${moduleName.toString().split('dist/')[1].split('/')[0].toString()}`
     }
-    if (moduleName.includes('three/build')) {
-      return `vendor_three_build_${moduleName.toString().split('build/')[1].split('/')[0].toString()}`
+    if (moduleName.includes('three')) {
+      return `vendor_three_build_${moduleName.toString().split('/')[1].split('/')[0].toString()}`
     }
   }
   // chunk mui
@@ -215,14 +215,6 @@ const resetSWFiles = () => {
   deleteDirFilesUsingPattern(/service-/, './public/')
   // Delete old workbox files
   deleteDirFilesUsingPattern(/workbox-/, './public/')
-
-  if (process.env.APP_ENV !== 'development') {
-    // Write empty service worker file
-    const swPath = path.resolve(packageRoot.path, 'packages/client/public/service-worker.js')
-    if (!fs.existsSync(swPath)) {
-      fs.writeFileSync(swPath, 'if(!self.define){}')
-    }
-  }
 }
 
 export default defineConfig(async () => {

diff --git a/packages/engine/src/audio/systems/MediaSystem.ts b/packages/engine/src/audio/systems/MediaSystem.ts
@@ -65,7 +65,7 @@ export class AudioEffectPlayer {
 
   loadBuffer = async (path: string) => {
     const buffer = await AssetLoader.loadAsync(path)
-    this.bufferMap[path] = buffer
+    return buffer
   }
 
   // pool of elements
@@ -75,6 +75,7 @@ export class AudioEffectPlayer {
     if (this.#els.length) return
     for (let i = 0; i < 20; i++) {
       const audioElement = document.createElement('audio')
+      audioElement.crossOrigin = 'anonymous'
       audioElement.loop = false
       this.#els.push(audioElement)
     }
@@ -86,8 +87,8 @@ export class AudioEffectPlayer {
     if (!this.#els.length) return
 
     if (!this.bufferMap[sound]) {
-      logger.error('[AudioEffectPlayer]: Buffer not found for source: ', sound)
-      return
+      // create buffer if doesn't exist
+      this.bufferMap[sound] = await AudioEffectPlayer?.instance?.loadBuffer(sound)
     }
 
     const source = getState(AudioState).audioContext.createBufferSource()
@@ -211,8 +212,6 @@ const reactor = () => {
       0.01
     )
 
-    Object.values(AudioEffectPlayer.SOUNDS).map((sound) => AudioEffectPlayer.instance.loadBuffer(sound))
-
     addActionReceptor(AudioSettingReceptor)
 
     return () => {