Platform detection

src/assets/stylesheets/spoke.scss

@@ -95,6 +95,7 @@ body {
   height: 100%;
 
   @media(max-width: $breakpoint) {
+    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
     order: 2;
     width: 100%;
     margin: 32px 0;
@@ -131,6 +132,7 @@ body {
 
   // TODO match to real video
   @media(max-width: 1280px) {
+    opacity: 0.3;
     border-radius: 12px;
   }
 

src/assets/translations.data.json

@@ -93,7 +93,7 @@
     "spoke.download_win": "Download for Windows",
     "spoke.download_macos": "Download for Mac",
     "spoke.download_linux": "Download for Linux",
-    "spoke.download_unavailable": "View Releases",
+    "spoke.download_unsupported": "View Releases",
     "spoke.browse_all_versions": "Browse All Versions",
     "spoke.play_button": "Watch the Video"
   }

src/spoke.js

@@ -18,6 +18,20 @@ import { lang, messages } from "./utils/i18n";
 
 addLocaleData([...en]);
 
+function getPlatform() {
+  const platform = window.navigator.platform;
+
+  if (["Macintosh", "MacIntel", "MacPPC", "Mac68K"].indexOf(platform) >= 0) {
+    return "macos";
+  } else if (["Win32", "Win64", "Windows"].indexOf(platform) >= 0) {
+    return "win";
+  } else if (/Linux/.test(platform)) {
+    return "linux";
+  }
+
+  return "unsupported";
+}
+
 class SpokeLanding extends Component {
   static propTypes = {};
 
@@ -25,7 +39,7 @@ class SpokeLanding extends Component {
 
   constructor(props) {
     super(props);
-    this.state = { platform: "win" };
+    this.state = { platform: getPlatform() };
   }
 
   componentDidMount() {
@@ -78,7 +92,7 @@ class SpokeLanding extends Component {
     }).then(this.tryGetJson);
 
     if (!result || !result.data) {
-      this.setState({ platform: "unavailable" });
+      this.setState({ platform: "unsupported" });
       return;
     }
 
@@ -86,7 +100,7 @@ class SpokeLanding extends Component {
     const release = releases.nodes.find(release => /*!release.isPrerelease && */ !release.isDraft);
 
     if (!release) {
-      this.setState({ platform: "unavailable" });
+      this.setState({ platform: "unsupported" });
       return;
     }
 
@@ -103,7 +117,7 @@ class SpokeLanding extends Component {
   render() {
     const platform = this.state.platform;
     const releasesLink = "https://github.com/MozillaReality/Spoke/releases";
-    const downloadLink = platform === "unavailable" ? releasesLink : this.state.downloadLinkForCurrentPlatform;
+    const downloadLink = platform === "unsupported" ? releasesLink : this.state.downloadLinkForCurrentPlatform;
 
     return (
       <IntlProvider locale={lang} messages={messages}>
@@ -138,7 +152,7 @@ class SpokeLanding extends Component {
                   <a href={downloadLink} className={styles.downloadButton}>
                     <FormattedMessage id={"spoke.download_" + this.state.platform} />
                   </a>
-                  {platform !== "unavailable" && (
+                  {platform !== "unsupported" && (
                     <a href={releasesLink} className={styles.browseVersions}>
                       <FormattedMessage id="spoke.browse_all_versions" />
                     </a>