Static Resource Variants

packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx

@@ -108,20 +108,20 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
     }
 
     initSelected()
-  }, [selectedAvatar, thumbnail?.LOD0_url])
+  }, [selectedAvatar, thumbnail?.url])
 
   useEffect(() => {
     updateAvatar()
-  }, [state.source.value, state.avatarFile.value, state.avatarUrl.value])
+  }, [state.source, state.avatarFile, state.avatarUrl])
 
   const loadSelectedAvatar = () => {
     if (selectedAvatar) {
       state.set({
         ...defaultState,
         name: selectedAvatar.name || '',
         source: 'url',
-        avatarUrl: selectedAvatar.modelResource?.LOD0_url || selectedAvatar.modelResource?.url || '',
-        thumbnailUrl: selectedAvatar.thumbnailResource?.LOD0_url || selectedAvatar.thumbnailResource?.url || '',
+        avatarUrl: selectedAvatar.modelResource?.url || '',
+        thumbnailUrl: selectedAvatar.thumbnailResource?.url || '',
         avatarFile: undefined,
         thumbnailFile: undefined
       })
@@ -247,8 +247,8 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
   }
 
   const handleSubmit = async () => {
-    let avatarBlob: Blob | undefined = undefined
-    let thumbnailBlob: Blob | undefined = undefined
+    let avatarFile: File | undefined = undefined
+    let thumbnailFile: File | undefined = undefined
 
     let tempErrors = {
       name: state.name.value ? '' : t('admin:components.avatar.nameCantEmpty'),
@@ -278,20 +278,20 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
       NotificationService.dispatchNotify(t('admin:components.common.fillRequiredFields'), { variant: 'error' })
       return
     } else if (state.source.value === 'file' && state.avatarFile.value && state.thumbnailFile.value) {
-      avatarBlob = state.avatarFile.value
-      thumbnailBlob = state.thumbnailFile.value
+      avatarFile = state.avatarFile.value
+      thumbnailFile = state.thumbnailFile.value
     } else if (state.source.value === 'url' && state.avatarUrl.value && state.thumbnailUrl.value) {
       const avatarData = await fetch(state.avatarUrl.value)
-      avatarBlob = await avatarData.blob()
+      avatarFile = new File([await avatarData.blob()], state.name.value)
 
       const thumbnailData = await fetch(state.thumbnailUrl.value)
-      thumbnailBlob = await thumbnailData.blob()
+      thumbnailFile = new File([await thumbnailData.blob()], state.name.value)
     }
 
-    if (avatarBlob && thumbnailBlob) {
+    if (avatarFile && thumbnailFile) {
       if (selectedAvatar?.id) {
-        await AvatarService.patchAvatar(selectedAvatar, state.name.value, true, avatarBlob, thumbnailBlob)
-      } else await AvatarService.createAvatar(avatarBlob, thumbnailBlob, state.name.value, true)
+        await AvatarService.patchAvatar(selectedAvatar, state.name.value, true, avatarFile, thumbnailFile)
+      } else await AvatarService.createAvatar(avatarFile, thumbnailFile, state.name.value, true)
       dispatchAction(AdminAvatarActions.avatarUpdated({}))
 
       onClose()

packages/client-core/src/admin/components/Avatars/AvatarTable.tsx

@@ -90,7 +90,7 @@ const AvatarTable = ({ className, search, selectedAvatarIds, setSelectedAvatarId
       name: el.name as string,
       owner: el.userId,
       thumbnail: (
-        <img style={{ maxHeight: '50px' }} src={el.thumbnailResource?.LOD0_url + '?' + new Date().getTime()} alt="" />
+        <img style={{ maxHeight: '50px' }} src={el.thumbnailResource?.url + '?' + new Date().getTime()} alt="" />
       ),
       action: (
         <>

packages/client-core/src/admin/components/Resources/ResourceDrawer.tsx

@@ -91,7 +91,7 @@ const ResourceDrawerContent = ({ mode, selectedResource, onClose }: Props) => {
         mimeType: selectedResource.mimeType || '',
         staticResourceType: selectedResource.staticResourceType || '',
         source: 'url',
-        resourceUrl: selectedResource.LOD0_url || '',
+        resourceUrl: selectedResource.url || '',
         resourceFile: undefined
       })
     }
@@ -201,7 +201,7 @@ const ResourceDrawerContent = ({ mode, selectedResource, onClose }: Props) => {
   }
 
   const handleSubmit = async () => {
-    let resourceBlob: Blob | undefined = undefined
+    let resourceFile: File | undefined = undefined
 
     state.formErrors.merge({
       name:
@@ -231,14 +231,12 @@ const ResourceDrawerContent = ({ mode, selectedResource, onClose }: Props) => {
       NotificationService.dispatchNotify(t('admin:components.common.fillRequiredFields'), { variant: 'error' })
       return
     } else if (state.source.value === 'file' && state.resourceFile.value) {
-      resourceBlob = state.resourceFile.value
+      resourceFile = state.resourceFile.value
     } else if (state.source.value === 'url' && state.resourceUrl.value) {
       const resourceData = await fetch(state.resourceUrl.value)
-      resourceBlob = await resourceData.blob()
-
-      if (selectedResource && selectedResource.LOD0_url === state.resourceUrl.value) {
-        resourceBlob = new Blob([resourceBlob], { type: selectedResource.mimeType })
-      }
+      resourceFile = new File([await resourceData.blob()], state.resourceUrl.value.split('/').pop()!, {
+        type: selectedResource ? selectedResource.mimeType : resourceData.headers.get('content-type') || ''
+      })
     }
 
     const data = {
@@ -247,8 +245,8 @@ const ResourceDrawerContent = ({ mode, selectedResource, onClose }: Props) => {
       staticResourceType: state.staticResourceType.value
     }
 
-    if (resourceBlob) {
-      ResourceService.createOrUpdateResource(data, resourceBlob)
+    if (resourceFile) {
+      ResourceService.createOrUpdateResource(data, resourceFile)
 
       if (mode === ResourceDrawerMode.ViewEdit) {
         editMode.set(false)

packages/client-core/src/admin/services/ResourceService.ts

@@ -100,7 +100,7 @@ export const AdminResourceReceptors = {
 }
 
 export const ResourceService = {
-  createOrUpdateResource: async (resource: any, resourceBlob: Blob) => {
+  createOrUpdateResource: async (resource: any, resourceBlob: File) => {
     try {
       await uploadToFeathersService('upload-asset', [resourceBlob], {
         type: 'admin-file-upload',

packages/client-core/src/components/World/EngineHooks.tsx

@@ -60,12 +60,12 @@ export const useLoadEngine = () => {
 
 const fetchMissingAvatar = async (user, avatarSpawnPose) => {
   const avatar = await AvatarService.getAvatar(user.avatar.id.value)
-  if (avatar && (avatar.modelResource?.LOD0_url || (avatar.modelResource as any)?.src))
+  if (avatar && avatar.modelResource?.url)
     spawnLocalAvatarInWorld({
       avatarSpawnPose,
       avatarDetail: {
-        avatarURL: avatar.modelResource?.LOD0_url || (avatar.modelResource as any)?.src,
-        thumbnailURL: avatar.thumbnailResource?.LOD0_url || (avatar.thumbnailResource as any)?.src
+        avatarURL: avatar.modelResource?.url || '',
+        thumbnailURL: avatar.thumbnailResource?.url || ''
       },
       name: user.name.value
     })
@@ -108,12 +108,12 @@ export const useLocationSpawnAvatar = (spectate = false) => {
       ? getSpawnPoint(spawnPoint, Engine.instance.userId)
       : getRandomSpawnPoint(Engine.instance.userId)
 
-    if (avatarDetails.modelResource?.LOD0_url || (avatarDetails.modelResource as any)?.src)
+    if (avatarDetails.modelResource?.url)
       spawnLocalAvatarInWorld({
         avatarSpawnPose,
         avatarDetail: {
-          avatarURL: avatarDetails.modelResource?.LOD0_url || (avatarDetails.modelResource as any)?.src,
-          thumbnailURL: avatarDetails.thumbnailResource?.LOD0_url || (avatarDetails.thumbnailResource as any)?.src
+          avatarURL: avatarDetails.modelResource?.url || '',
+          thumbnailURL: avatarDetails.thumbnailResource?.url || ''
         },
         name: user.name.value
       })

packages/client-core/src/systems/ui/ProfileDetailView/ReadyPlayerMenu.tsx

@@ -36,7 +36,7 @@ function createReadyPlayerMenuState() {
 
 const ReadyPlayerMenu = () => {
   const { t } = useTranslation()
-  const [selectedFile, setSelectedFile] = useState<Blob>()
+  const [selectedBlob, setSelectedBlob] = useState<Blob>()
   const [avatarName, setAvatarName] = useState('')
   const [avatarUrl, setAvatarUrl] = useState('')
   const [hover, setHover] = useState(false)
@@ -81,7 +81,7 @@ const ReadyPlayerMenu = () => {
           })
           fetch(url)
             .then((res) => res.blob())
-            .then((data) => setSelectedFile(data))
+            .then((data) => setSelectedBlob(data))
             .catch((err) => {
               setError(err.message)
               logger.error(err)
@@ -107,7 +107,7 @@ const ReadyPlayerMenu = () => {
   }
 
   const uploadAvatar = () => {
-    if (error || selectedFile === undefined) {
+    if (error || selectedBlob === undefined) {
       return
     }
 
@@ -118,9 +118,15 @@ const ReadyPlayerMenu = () => {
     newContext?.drawImage(renderer.value.domElement, 0, 0)
 
     const thumbnailName = avatarUrl.substring(0, avatarUrl.lastIndexOf('.')) + '.png'
+    const modelName = avatarUrl.substring(0, avatarUrl.lastIndexOf('.')) + '.glb'
 
     canvas.toBlob(async (blob) => {
-      await AvatarService.createAvatar(selectedFile, new File([blob!], thumbnailName), avatarName, false)
+      await AvatarService.createAvatar(
+        new File([selectedBlob!], modelName),
+        new File([blob!], thumbnailName),
+        avatarName,
+        false
+      )
       WidgetAppService.setWidgetVisibility(WidgetName.PROFILE, true)
     })
   }
@@ -130,9 +136,9 @@ const ReadyPlayerMenu = () => {
       <style>{styleString}</style>
       <div
         className="ReadyPlayerPanel"
-        style={{ width: selectedFile ? '400px' : '600px', padding: selectedFile ? '15px' : '0' }}
+        style={{ width: selectedBlob ? '400px' : '600px', padding: selectedBlob ? '15px' : '0' }}
       >
-        {selectedFile && (
+        {selectedBlob && (
           <section className="controlContainer">
             <div className="actionBlock">
               <button
@@ -166,7 +172,7 @@ const ReadyPlayerMenu = () => {
             borderRadius: '8px'
           }}
         ></div>
-        {selectedFile && (
+        {selectedBlob && (
           <button
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}

packages/client-core/src/systems/ui/ProfileDetailView/SelectAvatarMenu.tsx

@@ -72,8 +72,8 @@ const SelectAvatarMenu = () => {
     if (selectedAvatar && avatarId != selectedAvatar?.avatar?.name) {
       setAvatar(
         selectedAvatar?.id || '',
-        selectedAvatar?.modelResource?.LOD0_url || '',
-        selectedAvatar?.thumbnailResource?.LOD0_url || ''
+        selectedAvatar?.modelResource?.url || '',
+        selectedAvatar?.thumbnailResource?.url || ''
       )
       WidgetAppService.setWidgetVisibility(WidgetName.PROFILE, false)
     }
@@ -115,12 +115,7 @@ const SelectAvatarMenu = () => {
             backgroundColor: 'var(--mainBackground)'
           }}
         >
-          <img
-            className="avatar"
-            crossOrigin="anonymous"
-            src={avatar.thumbnailResource?.LOD0_url || ''}
-            alt={avatar.name}
-          />
+          <img className="avatar" crossOrigin="anonymous" src={avatar.thumbnailResource?.url || ''} alt={avatar.name} />
         </div>
       )
     }

packages/client-core/src/systems/ui/ProfileDetailView/UploadAvatarMenu.tsx

@@ -41,23 +41,22 @@ function createUploadAvatarMenuState() {
   return createState({})
 }
 
-let camera: PerspectiveCamera
-let scene: Scene
-let renderer: WebGLRenderer = null!
-let entity: Entity = null!
+type FileEvent = React.ChangeEvent<HTMLInputElement> & {
+  target: EventTarget & { files: FileList }
+}
 
 export const UploadAvatarMenu = () => {
-  const [selectedFile, setSelectedFile] = useState<any>(null)
-  const [selectedThumbnail, setSelectedThumbnail] = useState<any>(null)
+  const [selectedFile, setSelectedFile] = useState<Blob | null>(null)
+  const [selectedThumbnail, setSelectedThumbnail] = useState<File | null>(null)
   const [avatarName, setAvatarName] = useState('')
   const [error, setError] = useState('')
   const [avatarModel, setAvatarModel] = useState<any>(null)
   const [activeSourceType, setActiveSourceType] = useState(1)
   const [avatarUrl, setAvatarUrl] = useState('')
   const [thumbnailUrl, setThumbnailUrl] = useState('')
   const [validAvatarUrl, setValidAvatarUrl] = useState(false)
-  const [selectedThumbnailUrl, setSelectedThumbNailUrl] = useState<any>(null)
-  const [selectedAvatarlUrl, setSelectedAvatarUrl] = useState<any>(null)
+  const [selectedThumbnailUrl, setSelectedThumbNailUrl] = useState<Blob | null>(null)
+  const [selectedAvatarlUrl, setSelectedAvatarUrl] = useState<Blob | null>(null)
   const panelRef = useRef() as React.MutableRefObject<HTMLDivElement>
   const renderPanel = useRender3DPanelSystem(panelRef)
   const { entity, camera, scene, renderer } = renderPanel.state
@@ -163,31 +162,35 @@ export const UploadAvatarMenu = () => {
 
   const uploadAvatar = async () => {
     if (avatarModel == null) return
-    const thumbnailBlob = activeSourceType ? selectedThumbnail : selectedThumbnailUrl
+    const thumbnailFile = activeSourceType ? selectedThumbnail : new File([selectedThumbnailUrl!], `${avatarName}.png`)
     const avatarBlob = activeSourceType ? selectedFile : selectedAvatarlUrl
+    const avatarFile = new File([avatarBlob!], `${avatarName}.glb`) // todo - use correct extension
 
-    if (thumbnailBlob == null) {
+    if (thumbnailFile == null) {
       await new Promise((resolve) => {
         const canvas = document.createElement('canvas')
         canvas.width = THUMBNAIL_WIDTH
         canvas.height = THUMBNAIL_HEIGHT
         const newContext = canvas.getContext('2d')
         newContext?.drawImage(renderer.value.domElement, 0, 0)
         canvas.toBlob(async (blob) => {
-          const uploadResponse = await AvatarService.uploadAvatarModel(avatarBlob, blob!, avatarName, false).then(
-            resolve
-          )
+          const uploadResponse = await AvatarService.uploadAvatarModel(
+            avatarFile,
+            new File([blob!], `${avatarName}.png`),
+            avatarName,
+            false
+          ).then(resolve)
           await AvatarService.createAvatar(uploadResponse[0], uploadResponse[1], avatarName, false)
         })
       })
     } else {
-      await AvatarService.createAvatar(avatarBlob, thumbnailBlob, avatarName, false)
+      await AvatarService.createAvatar(avatarFile, thumbnailFile, avatarName, false)
     }
 
     WidgetAppService.setWidgetVisibility(WidgetName.PROFILE, true)
   }
 
-  const handleThumbnailChange = (e) => {
+  const handleThumbnailChange = (e: FileEvent) => {
     if (e.target.files[0].size < MIN_AVATAR_FILE_SIZE || e.target.files[0].size > MAX_AVATAR_FILE_SIZE) {
       setError(
         t('user:avatar.fileOversized', {

packages/client-core/src/user/components/UserMenu/menus/AvatarModifyMenu.tsx

@@ -73,8 +73,8 @@ const AvatarModifyMenu = ({ selectedAvatar }: Props) => {
       selectedAvatar.name !== state.name ||
       state.avatarFile ||
       state.thumbnailFile ||
-      selectedAvatar.modelResource?.LOD0_url !== state.avatarUrl ||
-      selectedAvatar.thumbnailResource?.LOD0_url !== state.thumbnailUrl
+      selectedAvatar.modelResource?.url !== state.avatarUrl ||
+      selectedAvatar.thumbnailResource?.url !== state.thumbnailUrl
     )
   }
 
@@ -93,8 +93,8 @@ const AvatarModifyMenu = ({ selectedAvatar }: Props) => {
       setState({
         ...defaultState,
         name: selectedAvatar.name || '',
-        avatarUrl: selectedAvatar.modelResource?.LOD0_url || selectedAvatar.modelResource?.url || '',
-        thumbnailUrl: selectedAvatar.thumbnailResource?.LOD0_url || selectedAvatar.thumbnailResource?.url || '',
+        avatarUrl: selectedAvatar.modelResource?.url || '',
+        thumbnailUrl: selectedAvatar.thumbnailResource?.url || '',
         avatarFile: undefined,
         thumbnailFile: undefined
       })
@@ -239,35 +239,35 @@ const AvatarModifyMenu = ({ selectedAvatar }: Props) => {
     setIsSaving(true)
 
     try {
-      let avatarBlob: Blob | undefined = undefined
-      let thumbnailBlob: Blob | undefined = undefined
+      let avatarFile: File | undefined = undefined
+      let thumbnailFile: File | undefined = undefined
 
       if (state.avatarFile) {
-        avatarBlob = state.avatarFile
+        avatarFile = state.avatarFile
       } else if (state.avatarUrl) {
         const avatarData = await fetch(state.avatarUrl)
-        avatarBlob = await avatarData.blob()
+        avatarFile = new File([await avatarData.blob()], state.avatarUrl)
       }
 
       if (state.thumbnailFile) {
-        thumbnailBlob = state.thumbnailFile
+        thumbnailFile = state.thumbnailFile
       } else if (state.thumbnailUrl) {
         const thumbnailData = await fetch(state.thumbnailUrl)
-        thumbnailBlob = await thumbnailData.blob()
+        thumbnailFile = new File([await thumbnailData.blob()], state.thumbnailUrl)
       }
 
       if (selectedAvatar) {
         await AvatarService.patchAvatar(
           selectedAvatar,
           state.name,
-          selectedAvatar.modelResource?.LOD0_url !== state.avatarUrl ||
-            selectedAvatar.thumbnailResource?.LOD0_url !== state.thumbnailUrl,
-          avatarBlob,
-          thumbnailBlob
+          selectedAvatar.modelResource?.url !== state.avatarUrl ||
+            selectedAvatar.thumbnailResource?.url !== state.thumbnailUrl,
+          avatarFile,
+          thumbnailFile
         )
         PopupMenuServices.showPopupMenu(UserMenus.AvatarSelect)
-      } else if (avatarBlob && thumbnailBlob) {
-        await AvatarService.createAvatar(avatarBlob, thumbnailBlob, state.name, false)
+      } else if (avatarFile && thumbnailFile) {
+        await AvatarService.createAvatar(avatarFile, thumbnailFile, state.name, false)
 
         PopupMenuServices.showPopupMenu()
       }