Fix OEmbed

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

@@ -0,0 +1,93 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { config } from '@etherealengine/common/src/config'
+import { OembedType, oembedPath } from '@etherealengine/engine/src/schemas/media/oembed.schema'
+import { useHookstate } from '@hookstate/core'
+import React, { useEffect } from 'react'
+import MetaTags from '../common/components/MetaTags'
+
+const oembedLink = () =>
+  `${config.client.serverUrl}/${oembedPath}?url=${encodeURIComponent(
+    `${config.client.clientUrl}${location.pathname}`
+  )}&format=json`
+
+export const OEmbed = () => {
+  const oembedState = useHookstate({
+    data: undefined as OembedType | undefined
+  })
+  const oEmbed = oembedState.data.value
+
+  useEffect(() => {
+    /** Fetch with quivalent to feathersjs find */
+    fetch(oembedLink(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data)
+        oembedState.merge({ data })
+      })
+      .catch((error) => {
+        console.error('Error fetching oembed', error)
+      })
+  }, [])
+
+  return (
+    <MetaTags>
+      <link href={oembedLink()} type="application/json+oembed" rel="alternate" title="oEmbed Profile" />
+      {oEmbed && (
+        <>
+          <title>{oEmbed.title}</title>
+          <meta name="description" content={oEmbed.description} />
+
+          <meta property="og:type" content="website" />
+          <meta property="og:url" content={oEmbed.query_url} />
+          <meta property="og:title" content={oEmbed.title} />
+          <meta property="og:description" content={oEmbed.description} />
+          <meta
+            property="og:image"
+            content={oEmbed.url ? oEmbed.url : `${oEmbed.provider_url}/static/etherealengine.png`}
+          />
+
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:domain" content={oEmbed.provider_url?.replace('https://', '')} />
+          <meta name="twitter:title" content={oEmbed.title} />
+          <meta name="twitter:description" content={oEmbed.description} />
+          <meta
+            property="twitter:image"
+            content={oEmbed.url ? oEmbed.url : `${oEmbed.provider_url}/static/etherealengine.png`}
+          />
+          <meta name="twitter:url" content={oEmbed.query_url} />
+        </>
+      )}
+    </MetaTags>
+  )
+}
+
+export default OEmbed

packages/client-core/src/systems/LoadingUISystem.tsx

@@ -28,7 +28,6 @@ import React, { useEffect } from 'react'
 import { BackSide, Color, CompressedTexture, Mesh, MeshBasicMaterial, SphereGeometry, Texture, Vector2 } from 'three'
 
 import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoader'
-import createReadableTexture from '@etherealengine/engine/src/assets/functions/createReadableTexture'
 import { AppLoadingState, AppLoadingStates } from '@etherealengine/engine/src/common/AppLoadingService'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
@@ -156,11 +155,12 @@ function LoadingReactor() {
     const currentSceneID = getState(SceneState).activeScene!
     const sceneData = SceneState.getSceneMetadata(currentSceneID)
     if (!sceneData) return
-    const envmapURL = sceneData.thumbnailUrl.replace('thumbnail.ktx2', 'loadingscreen.ktx2')
+    const envmapURL = sceneData.thumbnailUrl
+      .replace('thumbnail.ktx2', 'loadingscreen.ktx2')
+      .replace('thumbnail.jpg', 'loadingscreen.ktx2')
     const mesh = getComponent(meshEntity, GroupComponent)[0] as any as Mesh<SphereGeometry, MeshBasicMaterial>
     if (envmapURL && mesh.userData.url !== envmapURL) {
       mesh.userData.url = envmapURL
-      setDefaultPalette()
 
       /** Load envmap and parse colours */
       AssetLoader.load(
@@ -170,22 +170,22 @@ function LoadingReactor() {
           mesh.material.map = texture
           mesh.material.needsUpdate = true
           mesh.material.map.needsUpdate = true
-          const compressedTexture = texture as CompressedTexture
-          if (compressedTexture.isCompressedTexture) {
-            try {
-              createReadableTexture(compressedTexture).then((texture: Texture) => {
-                const image = texture.image
-                setColors(image)
-                texture.dispose()
-              })
-            } catch (e) {
-              console.error(e)
-              setDefaultPalette()
-            }
-          } else {
-            const image = texture.image
-            setColors(image)
-          }
+        },
+        undefined,
+        (error: ErrorEvent) => {
+          console.error(error)
+        }
+      )
+
+      setDefaultPalette()
+      /** Load envmap and parse colours */
+      AssetLoader.load(
+        sceneData.thumbnailUrl,
+        {},
+        (texture: Texture) => {
+          const image = texture.image
+          setColors(image)
+          texture.dispose()
         },
         undefined,
         (error: ErrorEvent) => {

packages/client-core/src/world/utils.ts

@@ -36,12 +36,11 @@ export const loadSceneJsonOffline = async (projectName, sceneName) => {
   const sceneData = (await (
     await fetch(`${fileServer}/projects/${projectName}/${sceneName}.scene.json`)
   ).json()) as SceneJsonType
-  const hasKTX2 = await fetch(`${fileServer}/projects/${projectName}/${sceneName}.thumbnail.ktx2`).then((res) => res.ok)
   SceneState.loadScene(sceneID, {
     scene: parseStorageProviderURLs(sceneData),
     name: sceneName,
     scenePath: sceneID,
-    thumbnailUrl: `${fileServer}/projects/${projectName}/${sceneName}.thumbnail.${hasKTX2 ? 'ktx2' : 'jpeg'}`,
+    thumbnailUrl: `${fileServer}/projects/${projectName}/${sceneName}.thumbnail.jpg`,
     project: projectName
   })
   getMutableState(SceneState).activeScene.set(sceneID)

packages/client/index.html

@@ -27,8 +27,9 @@
     <link rel="apple-touch-icon" sizes="180x180" href="<%- appleTouchIcon %>" />
     <link rel="icon" type="image/png" sizes="32x32" href="<%- favicon32px %>" />
     <link rel="icon" type="image/png" sizes="16x16" href="<%- favicon16px %>" />
+    <link href="https://api-qat.etherealengine.com/services/oembed?url=https://qat.etherealengine.com/location/apartment&format=json" type="application/json+oembed" rel="alternate" title="oEmbed Profile" />
 
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
       var global = globalThis
       var exports = { __esModule: true }
 
@@ -47,11 +48,11 @@
             })
         })
       }
-    </script>
+    </script> -->
 </head>
   <body>
     <div id="root"  style='z-index: 1; margin: 0; width: 100%; height: 100%; position: absolute; pointer-events: none;'></div>
     <script type="module" src="/src/main.tsx"></script>
     <canvas id='engine-renderer-canvas' style='z-index: 0; width: 100%; height: 100%; position: fixed; -webkit-user-select: none; pointer-events: auto; user-select: none'></canvas>
   </body>
-</html>
+</html>