From 053b99e75d3a85f335c12585b359b07c66d6fb8b Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 16 Oct 2018 22:17:09 +0000
Subject: [PATCH] Add youtube player
---
package-lock.json | 30 +++++++++++++++++++
package.json | 1 +
src/assets/stylesheets/index.scss | 6 ----
src/assets/stylesheets/spoke.scss | 50 ++++++++++++++++++++++++++++++-
src/assets/translations.data.json | 1 +
src/react-components/home-root.js | 1 -
src/spoke.js | 40 ++++++++++++++++++++-----
7 files changed, 113 insertions(+), 16 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 077261637..6cf1d3631 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8153,6 +8153,11 @@
}
}
},
+ "load-script": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+ "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+ },
"loader-runner": {
"version": "2.3.0",
"resolved": "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz",
@@ -10577,6 +10582,16 @@
"react-input-autosize": "^2.1.2"
}
},
+ "react-youtube": {
+ "version": "7.8.0",
+ "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-7.8.0.tgz",
+ "integrity": "sha512-kQFR0XTpgGRtzJ54HKDaCtAGr34mgB/BVFeCAL0WUjpIKZBcWtFrKJhYkoKfvWK7aTzJuQ57xojTjG7V6JzILA==",
+ "requires": {
+ "fast-deep-equal": "^2.0.1",
+ "prop-types": "^15.5.3",
+ "youtube-player": "^5.5.1"
+ }
+ },
"read-chunk": {
"version": "2.1.0",
"resolved": "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz",
@@ -11542,6 +11557,11 @@
"simple-concat": "^1.0.0"
}
},
+ "sister": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.1.tgz",
+ "integrity": "sha512-aG41gNRHRRxPq52MpX4vtm9tapnr6ENmHUx8LMAJWCOplEMwXzh/dp5WIo52Wl8Zlc/VUyHLJ2snX0ck+Nma9g=="
+ },
"slash": {
"version": "1.0.0",
"resolved": "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz",
@@ -14281,6 +14301,16 @@
"dev": true
}
}
+ },
+ "youtube-player": {
+ "version": "5.5.1",
+ "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.1.tgz",
+ "integrity": "sha512-1d62W9She0B1uKNyY6K7jtWFbOW3dYsm6hyKzrh11BLOuYFzkt8K6AcQ3QdPF3aU47dzhZ82clzOJVVWus4HTw==",
+ "requires": {
+ "debug": "^2.6.6",
+ "load-script": "^1.0.0",
+ "sister": "^3.0.0"
+ }
}
}
}
diff --git a/package.json b/package.json
index c6c9a6353..02708782f 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-intl": "^2.4.0",
+ "react-youtube": "^7.8.0",
"screenfull": "^3.3.2",
"super-hands": "github:mozillareality/aframe-super-hands-component#feature/drawing",
"three": "github:mozillareality/three.js#8b1886c384371c3e6305b757d1db7577c5201a9b",
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index eb49756ff..c1581f1be 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -112,12 +112,6 @@ body {
}
}
}
-
- :local(.ident) {
- text-align: right;
- flex: 1 1 $header-section-width;
- width: $header-section-width;
- }
}
:local(.hero-content) {
diff --git a/src/assets/stylesheets/spoke.scss b/src/assets/stylesheets/spoke.scss
index fa33d1ac2..4e79a6b2a 100644
--- a/src/assets/stylesheets/spoke.scss
+++ b/src/assets/stylesheets/spoke.scss
@@ -24,6 +24,7 @@ body {
:local(.ui) {
display: flex;
+ position: relative;
flex-direction: column;
}
@@ -172,7 +173,7 @@ body {
}
}
-:local(.play-button) {
+:local(.play-button), :local(.close-video) {
@extend %action-button;
background-color: $darker-grey;
margin: auto;
@@ -180,6 +181,10 @@ body {
padding: 0px 82px;
}
+:local(.close-video) {
+ margin-top: 12px;
+}
+
:local(.browse-versions) {
color: $grey-text;
margin-top: 12px;
@@ -195,3 +200,46 @@ body {
color: $grey-text;
}
}
+
+:local(.player-overlay) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ :local(.player-overlay-visible) {
+ display: flex;
+ }
+}
+
+:local(.player-content) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+:local(.player-video) {
+ width: 960px;
+ height: 540px;
+
+ @media (max-width: 980px), (max-height: 760px) {
+ width: 640px;
+ height: 360px;
+ }
+
+ @media (max-width: 650px), (max-height: 580px) {
+ width: 480px;
+ height: 270px;
+ }
+
+ @media (max-width: 490px), (max-height: 480px) {
+ width: 320px;
+ height: 180px;
+ }
+}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index e8df0b090..aa883c793 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -98,6 +98,7 @@
"spoke.download_linux": "Download for Linux",
"spoke.download_unsupported": "View Releases",
"spoke.browse_all_versions": "Browse All Versions",
+ "spoke.close": "Close",
"spoke.play_button": "Learn Spoke in 5 Minutes"
}
}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 8814baa58..f05799f6c 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -192,7 +192,6 @@ class HomeRoot extends Component {
</a>
</div>
</div>
- <div className={styles.ident} />
</div>
<div className={styles.heroContent}>
<div className={styles.attribution}>
diff --git a/src/spoke.js b/src/spoke.js
index f33213744..298ffd4ae 100644
--- a/src/spoke.js
+++ b/src/spoke.js
@@ -6,6 +6,7 @@ import { playVideoWithStopOnBlur } from "./utils/video-utils.js";
import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import styles from "./assets/stylesheets/spoke.scss";
import spokeLogo from "./assets/images/spoke_logo.png";
+import YouTube from "react-youtube";
//const qs = new URLSearchParams(location.search);
@@ -35,11 +36,14 @@ function getPlatform() {
class SpokeLanding extends Component {
static propTypes = {};
- state = { downloadLinkForCurrentPlatform: {} };
-
constructor(props) {
super(props);
- this.state = { platform: getPlatform(), downloadClicked: false };
+ this.state = {
+ platform: getPlatform(),
+ downloadClicked: false,
+ downloadLinkForCurrentPlatform: {},
+ showPlayer: false
+ };
}
componentDidMount() {
@@ -117,7 +121,7 @@ class SpokeLanding extends Component {
render() {
const platform = this.state.platform;
- const releasesLink = "https://github.com/MozillaReality/Spoke/releases";
+ const releasesLink = "https://github.com/MozillaReality/Spoke/releases/latest";
const downloadLink = platform === "unsupported" ? releasesLink : this.state.downloadLinkForCurrentPlatform;
return (
@@ -131,9 +135,6 @@ class SpokeLanding extends Component {
<a href="https://github.com/mozillareality/spoke" rel="noopener noreferrer">
<FormattedMessage id="home.source_link" />
</a>
- <a href="https://hubs.mozilla.com" rel="noopener noreferrer">
- Hubs
- </a>
<a href="https://discord.gg/XzrGUY8" rel="noreferrer noopener">
<FormattedMessage id="home.community_link" />
</a>
@@ -186,7 +187,7 @@ class SpokeLanding extends Component {
<FormattedMessage id="spoke.browse_all_versions" />
</a>
)}
- <button className={styles.playButton} onClick={() => this.setState({ playVideo: true })}>
+ <button className={styles.playButton} onClick={() => this.setState({ showPlayer: true })}>
<FormattedMessage id="spoke.play_button" />
</button>
</div>
@@ -206,6 +207,29 @@ class SpokeLanding extends Component {
</div>
</div>
<div className={styles.bg} />
+ {this.state.showPlayer && (
+ <div className={styles.playerOverlay}>
+ <div className={styles.playerContent}>
+ <YouTube
+ className={styles.playerVideo}
+ opts={{ rel: 0 }}
+ videoId="cw-XvgdyGNo"
+ onReady={e => e.target.playVideo()}
+ />
+ {platform !== "unsupported" && (
+ <a href={downloadLink} className={styles.downloadButton}>
+ <div>
+ <FormattedMessage id={"spoke.download_" + this.state.platform} />
+ </div>
+ <div className={styles.version}>{this.state.spokeVersion} Beta</div>
+ </a>
+ )}
+ <a onClick={() => this.setState({ showPlayer: false })} className={styles.closeVideo}>
+ <FormattedMessage id="spoke.close" />
+ </a>
+ </div>
+ </div>
+ )}
</div>
</IntlProvider>
);
--
GitLab