Introduced videomode to separate loading and watching experiences

plazma-prizma · Dec 20, 2017 · 9296409 · 9296409
1 parent 6a7a06d
commit 9296409
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Most ridiculous website of 2019</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.js b/src/App.js
@@ -24,13 +24,19 @@ class App extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {data: [], index: 0, wtfCount: 0};
+        this.state = {
+            data: [],
+            index: 0,
+            wtfCount: 0,
+            videoMode: false
+        };
         this.onNextButtonClick = this.onNextButtonClick.bind(this);
         this.onWtfButtonClick = this.onWtfButtonClick.bind(this);
         this._onEnd = this._onEnd.bind(this);
         this._onPause = this._onPause.bind(this);
         this.incrementIndex = this.incrementIndex.bind(this);
         this._onYoutubePlayerClicked = this._onYoutubePlayerClicked.bind(this);
+        this._onReady = this._onReady.bind(this);
     }
 
     onNextButtonClick() {
@@ -41,7 +47,7 @@ class App extends Component {
         this.incrementIndex();
     }
 
-    _onPause(event){
+    _onPause(event) {
         this.incrementIndex();
     }
 
@@ -68,28 +74,34 @@ class App extends Component {
         });
     }
 
-    _onYoutubePlayerClicked(){
+    _onYoutubePlayerClicked() {
         let index = this.state.index;
         if ((index + 1) === this.state.data.length) index = -1;
         this.setState({index: index + 1, wtfCount: this.state.data[index + 1].wtfCount});
     }
 
+    _onReady() {
+        console.log("_onReady");
+        this.setState({videoMode: true})
+    }
+
+    openingContent = () => {
+        return (
+            <h1 className="App-title">WHAT THE FUCK DID I JUST WATCH</h1>
+        )
+    }
+
+
     render() {
         let data = this.state.data[this.state.index] ? this.state.data[this.state.index] : undefined;
         return (
             <div>
                 <div className="App">
                     <header className="App-header">
-                        <img src={logo} className="App-logo" alt="logo"/>
-                        <h1 className="App-title">WHAT THE FUCK DID I JUST WATCH</h1>
-                        <p className="App-intro">
-                            Most ridiculous website of 2019
-                        </p>
-                        <button onClick={this.onNextButtonClick}>Next</button>
-                        {data && <button onClick={this.onWtfButtonClick}>What The Fuck Did I Just See</button>}
-                        {data && <span>{this.state.wtfCount}</span>}
-                        {data && <YoutubePlayer videoId={data.url} onEnd={this._onEnd}
-                                onPause={this._onPause}/>}
+                        {!this.state.videoMode && this.openingContent()}
+                        {data &&
+                        <YoutubePlayer videoId={data.url} onEnd={this._onEnd}
+                                       onPause={this._onPause} onReady={this._onReady}/>}
                     </header>
                 </div>
             </div>

diff --git a/src/components/App.css b/src/components/App.css
@@ -1,4 +1,6 @@
 .App {
+    margin: 0;
+    padding: 0;
     text-align: center;
     height: 100%;
 }
@@ -18,17 +20,24 @@
 }
 
 .App-header {
+    position:absolute;
+    top:0;
+    left:0;
     background-color: #222;
-    height: 150px;
-    padding: 20px;
+    height: 100%;
+    width: 100%;
+    padding: 0px;
     color: white;
 }
 
 .App-title {
-    font-size: 1.5em;
+    align:center;
+    font-size: 5em;
 }
 
 .App-intro {
+    top:0;
+    left:0;
     font-size: large;
     height: 100%;
 }

diff --git a/src/components/youtube-player.js b/src/components/youtube-player.js
@@ -10,16 +10,25 @@ class YoutubePlayer extends React.Component {
     constructor(props){
         super(props);
         this._onPause = this._onPause.bind(this);
+        this._onReady = this._onReady.bind(this);
     }
 
     render() {
         const opts = {
             height: '100%',
             width: '100%',
             playerVars: { // https://developers.google.com/youtube/player_parameters
-                autoplay: 1
+                autoplay: 1,
+                controls:0,
+                showCaptions:0,
+                disableKeyboard:0,
+                allowFullscreen:1,
+                annotations:0,
+                modestBranding:1,
+                showInfo:0,
+                volume:0.8
             },
-            frameborder:0
+            frameborder:0,
         };
 
         return (
@@ -47,6 +56,7 @@ class YoutubePlayer extends React.Component {
         else{
             event.target.playVideo();
         }
+        this.props.onReady();
     }
 
     _onEnd(event) {