diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss index cce585590e5336b707967601aa81c0e50b8a8c23..2d86cf428b6a9c2210fcd119acba58925a3f9fa4 100644 --- a/src/assets/stylesheets/entry.scss +++ b/src/assets/stylesheets/entry.scss @@ -16,10 +16,26 @@ .entry-panel { overflow-y: auto; display: flex; + flex-direction: column; flex: 1; &__button-container { margin: auto; + text-align: center; + flex: 10; + display: flex; + flex-direction: column; + min-height: max-content; + justify-content: center; + } + &__webvr-link-container { + text-align: center; + margin-bottom: 24px; + } + &__webvr-link { + color: white; + flex: 1; + min-height: max-content; } &__screen-sharing { @@ -48,6 +64,7 @@ .entry-button { display: flex; margin: 20px 0; + margin-bottom: 0; cursor: pointer; background: none; color: white; diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss index 7e67c1f4c0d5897734020bceca6da9017afeff81..ae46af24e2d332f746c67b498e85bc7633af51a0 100644 --- a/src/assets/stylesheets/info-dialog.scss +++ b/src/assets/stylesheets/info-dialog.scss @@ -140,7 +140,8 @@ &__submit { @extend %bottom-button; border: 0; - margin-top: 16px; + margin-top: 0; + margin-bottom: 0; } &__privacy { diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 9ae0b27c44672c2e3b2e7519c1ab4dd503a653b9..7dcd32f8f81d394ed06aa11ee117823a721b0f1f 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -12,6 +12,8 @@ "entry.daydream-medium": "Daydream", "entry.daydream-via-chrome": "Using Google Chrome", "entry.enable-screen-sharing": "Share my desktop", + "entry.webvr-link-preamble": "New to WebVR?", + "entry.webvr-link": "Learn more", "profile.save": "SAVE", "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32", "profile.header": "Your display name:", diff --git a/src/avatar-selector.js b/src/avatar-selector.js index 4879a47f6a3787ee132e90b4cb724fcde59637f5..45b0a7eed21aebe238e86237a540d97dbbdc63fe 100644 --- a/src/avatar-selector.js +++ b/src/avatar-selector.js @@ -4,6 +4,8 @@ import queryString from "query-string"; import { IntlProvider, addLocaleData } from "react-intl"; import en from "react-intl/locale-data/en"; +import { lang, messages } from "./utils/i18n"; + import { patchWebGLRenderingContext } from "./utils/webgl"; patchWebGLRenderingContext(); @@ -19,7 +21,8 @@ import { avatars } from "./assets/avatars/avatars"; import registerTelemetry from "./telemetry"; import { App } from "./App"; import AvatarSelector from "./react-components/avatar-selector"; -import localeData from "./assets/translations.data.json"; + +addLocaleData([...en]); registerTelemetry(); @@ -32,12 +35,6 @@ if (hash.quality) { window.APP.quality = isMobile ? "low" : "high"; } -const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage) - .toLowerCase() - .split(/[_-]+/)[0]; -addLocaleData([...en]); -const messages = localeData[lang] || localeData.en; - function postAvatarIdToParent(newAvatarId) { window.parent.postMessage({ avatarId: newAvatarId }, location.origin); } diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index 99b3706abbd94b6454858be90cfed24612f4632b..63353a4118b5c60b046c0b6c40fe202ff20ff05c 100644 --- a/src/react-components/home-root.js +++ b/src/react-components/home-root.js @@ -2,6 +2,8 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl"; import en from "react-intl/locale-data/en"; + +import { lang, messages } from "../utils/i18n"; import homeVideoWebM from "../assets/video/home.webm"; import homeVideoMp4 from "../assets/video/home.mp4"; import classNames from "classnames"; @@ -10,15 +12,8 @@ import { ENVIRONMENT_URLS } from "../assets/environments/environments"; import HubCreatePanel from "./hub-create-panel.js"; import InfoDialog from "./info-dialog.js"; -const navigatorLang = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage; - -const lang = navigatorLang.toLowerCase().split(/[_-]+/)[0]; - -import localeData from "../assets/translations.data.json"; addLocaleData([...en]); -const messages = localeData[lang] || localeData.en; - class HomeRoot extends Component { static propTypes = { intl: PropTypes.object, diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index b9eccdcf1cd7227e29f7b28325f1d58029e935dd..82c1c911231ed42bd8853895c6f17a147179351f 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -9,6 +9,7 @@ import en from "react-intl/locale-data/en"; import MovingAverage from "moving-average"; import screenfull from "screenfull"; +import { lang, messages } from "../utils/i18n"; import AutoExitWarning from "./auto-exit-warning"; import { TwoDEntryButton, GenericEntryButton, GearVREntryButton, DaydreamEntryButton } from "./entry-buttons.js"; import { ProfileInfoHeader } from "./profile-info-header.js"; @@ -22,15 +23,8 @@ import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion"; const mobiledetect = new MobileDetect(navigator.userAgent); -const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage) - .toLowerCase() - .split(/[_-]+/)[0]; - -import localeData from "../assets/translations.data.json"; addLocaleData([...en]); -const messages = localeData[lang] || localeData.en; - const ENTRY_STEPS = { start: "start", mic_grant: "mic_grant", @@ -638,6 +632,19 @@ class UIRoot extends Component { )} {screenSharingCheckbox} </div> + {!mobiledetect.mobile() && ( + <div className="entry-panel__webvr-link-container"> + <FormattedMessage id="entry.webvr-link-preamble" />{" "} + <a + className="entry-panel__webvr-link" + target="_blank" + rel="noopener noreferrer" + href="https://webvr.rocks/" + > + <FormattedMessage id="entry.webvr-link" /> + </a> + </div> + )} </div> ) : null; diff --git a/src/utils/i18n.js b/src/utils/i18n.js new file mode 100644 index 0000000000000000000000000000000000000000..e112bbf33a712253e042576e584ff2c73b906d68 --- /dev/null +++ b/src/utils/i18n.js @@ -0,0 +1,6 @@ +import localeData from "../assets/translations.data.json"; +const navigatorLang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage) + .toLowerCase() + .split(/[_-]+/)[0]; +export const lang = (localeData[navigatorLang] && navigatorLang) || "en"; +export const messages = localeData[lang] || localeData.en;