Merge pull request #6136 from mozilla/scene-url-form-fix

Scene url form fix
Hubs-Foundation · Jun 21, 2023 · 77780e4 · 77780e4
2 parents b5a6869 + af29349
commit 77780e4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/src/react-components/room/RoomSidebar.js b/src/react-components/room/RoomSidebar.js
@@ -148,15 +148,15 @@ SceneInfo.propTypes = {
   showAttributions: PropTypes.bool,
   canChangeScene: PropTypes.bool,
   onChangeScene: PropTypes.func,
-  scene: {
-    attributions: {
-      content: PropTypes.string,
+  scene: PropTypes.shape({
+    attributions: PropTypes.shape({
+      content: PropTypes.array,
       creator: PropTypes.string
-    },
+    }),
     url: PropTypes.string,
     screenshot_url: PropTypes.string,
     name: PropTypes.string
-  }
+  })
 };
 
 export function RoomSidebar({ room, accountId, onClose, canEdit, onEdit, onChangeScene }) {

diff --git a/src/react-components/room/SceneUrlModal.js b/src/react-components/room/SceneUrlModal.js
@@ -56,12 +56,10 @@ export function SceneUrlModal({ enableSpoke, editorName, onValidateUrl, onSubmit
           )}
         </p>
         <TextInputField
-          name="url"
           label={<FormattedMessage id="scene-url-modal.url-input" defaultMessage="Scene URL" />}
           placeholder="https://example.com/scene.glb"
           type="url"
-          required
-          ref={register({ validate: onValidateUrl })}
+          {...register("url", { validate: onValidateUrl, required: true })}
           error={errors?.url?.message}
         />
         <Button type="submit" preset="accept" disabled={isSubmitting}>
@@ -95,5 +93,5 @@ SceneUrlModal.propTypes = {
   editorName: PropTypes.string,
   onSubmit: PropTypes.func,
   onClose: PropTypes.func,
-  onValidateUrl: PropTypes.isRequired
+  onValidateUrl: PropTypes.func.isRequired
 };
diff --git a/src/react-components/room/SceneUrlModalContainer.js b/src/react-components/room/SceneUrlModalContainer.js
@@ -11,7 +11,13 @@ export function SceneUrlModalContainer({ hubChannel, onClose }) {
   const onValidateUrl = useCallback(
     async url => {
       const valid = await isValidSceneUrl(url.trim());
-      return valid || intl.formatMessage("scene-url-modal.invalid-scene-url");
+      return (
+        valid ||
+        intl.formatMessage({
+          id: "scene-url-modal.invalid-scene-url",
+          defaultMessage: "This URL does not point to a scene or valid GLB."
+        })
+      );
     },
     [intl]
   );

diff --git a/src/utils/scene-url-utils.js b/src/utils/scene-url-utils.js
@@ -1,20 +1,22 @@
 import { isLocalHubsSceneUrl, proxiedUrlFor } from "../utils/media-url-utils";
 
 export async function isValidGLB(url) {
-  return fetch(url).then(async r => {
-    const reader = r.body.getReader();
-    let header = "";
-    function readChunk({ done, value }) {
-      header += String.fromCharCode.apply(null, value.slice(0, 4));
-      if (!done && header.length < 4) {
-        return reader.read().then(readChunk);
-      } else {
-        reader.cancel();
+  return fetch(url)
+    .then(async r => {
+      const reader = r.body.getReader();
+      let header = "";
+      function readChunk({ done, value }) {
+        header += String.fromCharCode.apply(null, value.slice(0, 4));
+        if (!done && header.length < 4) {
+          return reader.read().then(readChunk);
+        } else {
+          reader.cancel();
+        }
       }
-    }
-    await reader.read().then(readChunk);
-    return header.startsWith("glTF");
-  });
+      await reader.read().then(readChunk);
+      return header.startsWith("glTF");
+    })
+    .catch(e => console.error(e));
 }
 
 export async function isValidSceneUrl(url) {