Merge pull request #69 from spacesvr/dev

Dev

Author: spacesvr

README.md

@@ -10,7 +10,7 @@
      Sleek, powerful front-end framework for quickly creating cross-platform VR Websites.
 </h5>
 <p align="center">
-    <a href="https://muse.place?utm_source=npmjs">muse.place</a> · <a href="https://discord.gg/nFHrmUbaz5">discord</a>
+    <a href="https://muse.place?utm_source=npmjs">muse.place</a> · <a href="https://discord.gg/nFHrmUbaz5">discord</a> · <b><a href="https://jobs.ashbyhq.com/muse/1e73e735-3c63-4131-a04d-ff3c73f3567e">we are hiring!</a></b>
 <p>
 <br/>
 <br/>

examples/src/scenes/Starter.jsx

@@ -14,7 +14,7 @@ import {
 
 const handleClick = () => window.open("https://www.apple.com", "_blank");
 export default () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const [url, setUrl] = useState(
     "https://dwvo2npct47gg.cloudfront.net/gallery/bladi/IMG_8334.jpg"
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "1.8.5",
+  "version": "1.8.9",
   "private": true,
   "description": "An Environment for WebXR Spaces",
   "keywords": [

src/ideas/components/Video.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import { useThree } from "@react-three/fiber";
 import Frame from "../misc/Frame";
-import { DoubleSide, LinearEncoding, Material, Vector2 } from "three";
+import { DoubleSide, Material, sRGBEncoding, Vector2 } from "three";
 
 type Props = JSX.IntrinsicElements["group"] & {
   src: string;
@@ -112,7 +112,7 @@ export const Video = (props: Props) => {
       <mesh>
         <planeBufferGeometry attach="geometry" args={[width, height]} />
         <meshBasicMaterial side={DoubleSide}>
-          <videoTexture attach="map" args={[video]} encoding={LinearEncoding} />
+          <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />
         </meshBasicMaterial>
       </mesh>
       {speaker && <primitive object={speaker} />}

src/layers/reality/ui/LoadingScreen.tsx

@@ -10,7 +10,7 @@ const Container = styled.div<{ finished: boolean }>`
   z-index: 200;
   background: white;
   transition: opacity 0.75s ease-in;
-  transition-delay: 1.25s;
+  transition-delay: 0.5s;
   opacity: ${(props) => (props.finished ? "0" : "1")};
   pointer-events: ${(props) => (props.finished ? "none" : "all")};
   display: flex;

src/layers/reality/ui/PauseMenu.tsx

@@ -78,6 +78,24 @@ const Continue = styled.div<{ color: string }>`
     -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
 `;
 
+const Footer = styled.div`
+  margin-top: 15px;
+  width: 100%;
+  text-align: center;
+  font-size: 0.75rem;
+  font-family: "Quicksand", sans-serif;
+
+  & > a {
+    color: #333;
+    line-height: 1em;
+    transition: opacity 0.15s linear;
+
+    :hover {
+      opacity: 0.5;
+    }
+  }
+`;
+
 const Logo = styled.img`
   height: 0.8em;
   vertical-align: middle;
@@ -186,7 +204,7 @@ export default function PauseMenu(props: PauseMenuProps) {
       )}`,
     },
     {
-      text: "v1.8.5",
+      text: "v1.8.9",
       action: () => {
         console.log("");
       },
@@ -221,6 +239,23 @@ export default function PauseMenu(props: PauseMenuProps) {
             )
           )}
         </Actions>
+        <Footer>
+          <a
+            href="https://spaces-gallery-assets.s3.us-west-1.amazonaws.com/legal/musetermsofservice.pdf"
+            target="_blank"
+            rel="noreferrer"
+          >
+            terms and conditions
+          </a>
+          &nbsp;&nbsp;•&nbsp;&nbsp;
+          <a
+            href="https://spaces-gallery-assets.s3.us-west-1.amazonaws.com/legal/museprivacypolicy.pdf"
+            target="_blank"
+            rel="noreferrer"
+          >
+            privacy policy
+          </a>
+        </Footer>
       </Window>
       <Continue onClick={closeOverlay} color={continueIdea.getHex()}>
         continue

src/layers/reality/utils/loading.ts

@@ -8,9 +8,8 @@ import { useProgress } from "@react-three/drei";
  * - a timeout when it reaches > 50%, marked as stuck
  */
 export const useControlledProgress = () => {
-  const TIMEOUT = 2000; // minimum time to wait before moving to 100
-  const AFTER_TIME = 100; // extra time to prevent bouncing at reaching 100
-  const STUCK_TIMEOUT = 5500; // for safari, when stuck at a value above 50
+  const MIN_TIME = 2000; // minimum time to wait before moving to 100
+  const AFTER_TIME = 300; // extra time to prevent bouncing at reaching 100
 
   const { progress, total } = useProgress();
 
@@ -24,7 +23,7 @@ export const useControlledProgress = () => {
     const timeElapsed = newTime.getTime() - startTime.current.getTime();
     const diff = Math.min(
       progress - controlledProgress.current,
-      timeElapsed < TIMEOUT ? 99 : 100
+      timeElapsed < MIN_TIME ? 99 : 100
     );
     if (diff > 0) {
       if (progress === 100) {
@@ -41,17 +40,11 @@ export const useControlledProgress = () => {
       } else {
         finished.current = false;
         controlledProgress.current = progress;
-
-        // once above 50, skip progress is stuck then skip loading
-        if (progress > 50) {
-          setTimeout(() => {
-            if (controlledProgress.current === progress) {
-              setSkip(true);
-            }
-          }, STUCK_TIMEOUT);
-        }
       }
     }
+    if (progress !== 100) {
+      finished.current = false;
+    }
   }, [progress]);
 
   // wait TIMEOUT (ms) to check if any objects are waiting to be loaded
@@ -63,7 +56,7 @@ export const useControlledProgress = () => {
     } else if (counter > 0) {
       setSkip(true);
     } else {
-      setTimeout(() => setCounter(counter + 1), TIMEOUT);
+      setTimeout(() => setCounter(counter + 1), MIN_TIME);
     }
   }, [counter]);