Merge branch 'room-ui-redesign' into redesign/remaining-l10-tasks

Author: robertlong

src/components/set-max-resolution.js

@@ -78,7 +78,6 @@
         personal-space-bubble="debug: false;"
         rotate-selected-object
         environment-map
-        set-max-resolution
         light="defaultLightsEnabled: false"
     >
         <a-assets>

src/hub.html

@@ -115,7 +115,6 @@ import "./components/inspect-button";
 import "./components/inspect-pivot-child-selector";
 import "./components/inspect-pivot-offset-from-camera";
 import "./components/optional-alternative-to-not-hide";
-import "./components/set-max-resolution";
 import "./components/avatar-audio-source";
 import "./components/avatar-inspect-collider";
 

src/hub.js

@@ -1,9 +1,7 @@
-import React, { useRef, useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./RoomLayout.scss";
-// ResizeObserver not currently supported in Firefox Android
-import ResizeObserver from "resize-observer-polyfill";
 import { Toolbar } from "./Toolbar";
 
 export function RoomLayout({
@@ -19,31 +17,9 @@ export function RoomLayout({
   viewport,
   objectFocused,
   streaming,
-  onResizeViewport,
+  viewportRef,
   ...rest
 }) {
-  const viewportRef = useRef();
-
-  useEffect(
-    () => {
-      let observer = null;
-
-      if (onResizeViewport) {
-        observer = new ResizeObserver(entries => {
-          onResizeViewport(entries[0].contentRect);
-        });
-        observer.observe(viewportRef.current);
-      }
-
-      return () => {
-        if (observer) {
-          observer.disconnect();
-        }
-      };
-    },
-    [onResizeViewport]
-  );
-
   return (
     <div className={classNames(styles.roomLayout, { [styles.objectFocused]: objectFocused }, className)} {...rest}>
       {sidebar && <div className={classNames(styles.sidebar, sidebarClassName)}>{sidebar}</div>}
@@ -79,5 +55,5 @@ RoomLayout.propTypes = {
   viewport: PropTypes.node,
   objectFocused: PropTypes.bool,
   streaming: PropTypes.bool,
-  onResizeViewport: PropTypes.func
+  viewportRef: PropTypes.any
 };

src/react-components/layout/RoomLayout.js

@@ -93,5 +93,5 @@
 }
 
 :local(.streaming) {
-  border: 3px solid theme.$red;
+  box-shadow: inset 0 0 0 3px theme.$red;
 }

src/react-components/layout/RoomLayout.scss

@@ -0,0 +1,17 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { RoomLayout } from "../layout/RoomLayout";
+import { useResizeViewport } from "./useResizeViewport";
+
+export function RoomLayoutContainer({ store, scene, ...rest }) {
+  const viewportRef = useRef();
+
+  useResizeViewport(viewportRef, store, scene);
+
+  return <RoomLayout viewportRef={viewportRef} {...rest} />;
+}
+
+RoomLayoutContainer.propTypes = {
+  store: PropTypes.object.isRequired,
+  scene: PropTypes.object.isRequired
+};

src/react-components/room/RoomLayoutContainer.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from "react";
+// ResizeObserver not currently supported in Firefox Android
+import ResizeObserver from "resize-observer-polyfill";
+
+const DEFAULT_MAX_RESOLUTION = 1920;
+
+// Modified from AFrame
+function getRenderResolution(canvasRect, maxResolution, isVR) {
+  const pixelRatio = window.devicePixelRatio;
+
+  if (!maxResolution || isVR || (maxResolution.width === -1 && maxResolution.height === -1)) {
+    return canvasRect;
+  }
+
+  if (canvasRect.width * pixelRatio < maxResolution.width && canvasRect.height * pixelRatio < maxResolution.height) {
+    return canvasRect;
+  }
+
+  const aspectRatio = canvasRect.width / canvasRect.height;
+
+  if (canvasRect.width * pixelRatio > maxResolution.width && maxResolution.width !== -1) {
+    return {
+      width: Math.round(maxResolution.width / pixelRatio),
+      height: Math.round(maxResolution.width / aspectRatio / pixelRatio)
+    };
+  }
+
+  if (canvasRect.height * pixelRatio > maxResolution.height && maxResolution.height !== -1) {
+    return {
+      width: Math.round(maxResolution.height / pixelRatio),
+      height: Math.round((maxResolution.height * aspectRatio) / pixelRatio)
+    };
+  }
+
+  return canvasRect;
+}
+
+export function useResizeViewport(viewportRef, store, scene) {
+  const [maxResolution, setMaxResolution] = useState({
+    width: DEFAULT_MAX_RESOLUTION,
+    height: DEFAULT_MAX_RESOLUTION
+  });
+
+  useEffect(
+    () => {
+      const oldResizeFunc = scene.resize;
+
+      // HACK: Override native AFRAME resize handler for our own.
+      scene.resize = () => {};
+
+      return () => {
+        scene.resize = oldResizeFunc;
+      };
+    },
+    [scene]
+  );
+
+  useEffect(
+    () => {
+      function onStoreChanged() {
+        const { maxResolutionWidth, maxResolutionHeight } = store.state.preferences;
+
+        setMaxResolution({
+          width: maxResolutionWidth === undefined ? DEFAULT_MAX_RESOLUTION : maxResolutionWidth,
+          height: maxResolutionHeight === undefined ? DEFAULT_MAX_RESOLUTION : maxResolutionHeight
+        });
+      }
+
+      onStoreChanged();
+
+      store.addEventListener("statechanged", onStoreChanged);
+
+      return () => {
+        store.removeEventListener("statechanged", onStoreChanged);
+      };
+    },
+    [store]
+  );
+
+  useEffect(
+    () => {
+      const observer = new ResizeObserver(entries => {
+        const isPresenting = scene.renderer.vr.isPresenting();
+        const isVRPresenting = scene.renderer.vr.enabled && isPresenting;
+
+        // Do not update renderer, if a camera or a canvas have not been injected.
+        // In VR mode, three handles canvas resize based on the dimensions returned by
+        // the getEyeParameters function of the WebVR API. These dimensions are independent of
+        // the window size, therefore should not be overwritten with the window's width and
+        // height, // except when in fullscreen mode.
+        if (!scene.camera || !scene.canvas || (scene.is("vr-mode") && (scene.isMobile || isVRPresenting))) {
+          return;
+        }
+
+        const canvasRect = entries[0].contentRect;
+
+        const resolution = getRenderResolution(canvasRect, maxResolution, isVRPresenting);
+
+        const canvas = scene.canvas;
+        canvas.style.width = canvasRect.width + "px";
+        canvas.style.height = canvasRect.height + "px";
+
+        scene.renderer.setSize(resolution.width, resolution.height, false);
+
+        scene.camera.aspect = resolution.width / resolution.height;
+        scene.camera.updateProjectionMatrix();
+
+        // Resizing the canvas clears it, so render immediately after resize to prevent flicker.
+        scene.renderer.render(scene.object3D, scene.camera);
+      });
+
+      observer.observe(viewportRef.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    },
+    [viewportRef, scene, maxResolution]
+  );
+}

src/react-components/room/useResizeViewport.js

@@ -39,7 +39,7 @@ import qsTruthy from "../utils/qs_truthy";
 import { LoadingScreenContainer } from "./room/LoadingScreenContainer";
 
 import "./styles/global.scss";
-import { RoomLayout } from "./layout/RoomLayout";
+import { RoomLayoutContainer } from "./room/RoomLayoutContainer";
 import roomLayoutStyles from "./layout/RoomLayout.scss";
 import { useAccessibleOutlineStyle } from "./input/useAccessibleOutlineStyle";
 import { ToolbarButton } from "./input/ToolbarButton";
@@ -273,19 +273,6 @@ class UIRoot extends Component {
     }
   }
 
-  onResizeViewport = ({ width, height }) => {
-    const sceneEl = this.props.scene;
-
-    sceneEl.renderer.setSize(width, height);
-
-    if (sceneEl.camera) {
-      sceneEl.camera.aspect = width / height;
-      sceneEl.camera.updateProjectionMatrix();
-      // Resizing the canvas clears it, so render immediately after resize to prevent flicker.
-      sceneEl.renderer.render(sceneEl.object3D, sceneEl.camera);
-    }
-  };
-
   onConcurrentLoad = () => {
     if (qsTruthy("allow_multi") || this.props.store.state.preferences["allowMultipleHubsInstances"]) return;
     this.startAutoExitTimer(AutoExitReason.concurrentSession);
@@ -1107,8 +1094,9 @@ class UIRoot extends Component {
     if (this.props.hide || this.state.hide) {
       return (
         <div className={classNames(rootStyles)}>
-          <RoomLayout
-            onResizeViewport={this.onResizeViewport}
+          <RoomLayoutContainer
+            scene={this.props.scene}
+            store={this.props.store}
             viewport={!this.state.hideUITip && <FullscreenTip onDismiss={() => this.setState({ hideUITip: true })} />}
           />
         </div>
@@ -1483,10 +1471,11 @@ class UIRoot extends Component {
                   scene={this.props.scene}
                 />
               )}
-            <RoomLayout
+            <RoomLayoutContainer
+              scene={this.props.scene}
+              store={this.props.store}
               objectFocused={!!this.props.selectedObject}
               streaming={streaming}
-              onResizeViewport={this.onResizeViewport}
               viewport={
                 <>
                   {!this.state.dialog && renderEntryFlow ? entryDialog : undefined}