diff --git a/src/assets/stylesheets/spoke.scss b/src/assets/stylesheets/spoke.scss index 0219502e7a00014e7cbb07530ca3a78e06353b73..c253c221c30fd0878be3e31750f5feaacc2c6607 100644 --- a/src/assets/stylesheets/spoke.scss +++ b/src/assets/stylesheets/spoke.scss @@ -166,10 +166,17 @@ body { @extend %action-button; background-color: $darker-grey; margin: auto; - margin-top: 64px; padding: 0px 82px; } +:local(.tutorial-buttons) { + margin-top: 64px; + + button { + margin: 32px auto; + } +} + :local(.close-video) { margin-top: 12px; } diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 61851b825eecc3710f30f7ba0524c3ca6584839e..643897d544fcb7e992c4263356d00fca979d0151 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -112,6 +112,8 @@ "spoke.download_unsupported": "View Releases", "spoke.browse_all_versions": "Browse All Versions", "spoke.close": "Close", + "spoke.beginner_tutorial_button": "Learn Spoke in 5 Minutes", + "spoke.advanced_tutorial_button": "Advanced Spoke in 10 minutes", "spoke.play_button": "Learn Spoke in 5 Minutes", "commands.fly": "Toggle fly mode.", "commands.bigger": "Increase your avatar's size.", diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js index d4236ebc668720568713a33f7ed0fde780abd220..55fe0ab34400e4025ae531b96b7aab5b7abf1c7b 100644 --- a/src/gltf-component-mappings.js +++ b/src/gltf-component-mappings.js @@ -34,11 +34,10 @@ AFRAME.GLTFModelPlus.registerComponent( "shape", (() => { const euler = new THREE.Euler(); - const orientation = new THREE.Quaternion(); return (el, componentName, componentData) => { const { scale, rotation } = componentData; euler.set(rotation.x, rotation.y, rotation.z); - orientation.setFromEuler(euler); + const orientation = new THREE.Quaternion().setFromEuler(euler); el.setAttribute(componentName, { shape: "box", offset: componentData.position, diff --git a/src/hub.js b/src/hub.js index 41e651f5ea0389dcaffaccbaef4844ad6aaa3f06..9bb097fdd44c7585f2b9a05add813dd068fa487e 100644 --- a/src/hub.js +++ b/src/hub.js @@ -389,6 +389,14 @@ document.addEventListener("DOMContentLoaded", async () => { if (availableVREntryTypes.isInHMD) { remountUI({ availableVREntryTypes, forcedVREntryType: "vr" }); + + if (/Oculus/.test(navigator.userAgent)) { + // HACK - The polyfill reports Cardboard as the primary VR display on startup out ahead of Oculus Go on Oculus Browser 5.5.0 beta. This display is cached by A-Frame, + // so we need to resolve that and get the real VRDisplay before entering as well. + const displays = await navigator.getVRDisplays(); + const vrDisplay = displays.length && displays[0]; + AFRAME.utils.device.getVRDisplay = () => vrDisplay; + } } else { remountUI({ availableVREntryTypes }); } diff --git a/src/spoke.js b/src/spoke.js index d1f4fb3aa7322667d62faa8edf2b57adc296f48a..1764ba2eea6d2fc0088ed0e97bd14e7cf645e89d 100644 --- a/src/spoke.js +++ b/src/spoke.js @@ -44,7 +44,8 @@ class SpokeLanding extends Component { platform: getPlatform(), downloadClicked: false, downloadLinkForCurrentPlatform: {}, - showPlayer: false + showPlayer: false, + playerVideoId: "WmQKZJPhV7s" }; } @@ -189,9 +190,20 @@ class SpokeLanding extends Component { <FormattedMessage id="spoke.browse_all_versions" /> </a> )} - <button className={styles.playButton} onClick={() => this.setState({ showPlayer: true })}> - <FormattedMessage id="spoke.play_button" /> - </button> + <div className={styles.tutorialButtons}> + <button + className={styles.playButton} + onClick={() => this.setState({ showPlayer: true, playerVideoId: "WmQKZJPhV7s" })} + > + <FormattedMessage id="spoke.beginner_tutorial_button" /> + </button> + <button + className={styles.playButton} + onClick={() => this.setState({ showPlayer: true, playerVideoId: "1Yg5x4Plz_4" })} + > + <FormattedMessage id="spoke.advanced_tutorial_button" /> + </button> + </div> </div> </div> <div className={styles.heroVideo}> @@ -210,7 +222,7 @@ class SpokeLanding extends Component { <YouTube className={styles.playerVideo} opts={{ rel: 0 }} - videoId="WmQKZJPhV7s" + videoId={this.state.playerVideoId} onReady={e => e.target.playVideo()} /> {platform !== "unsupported" && (