intro image

2 files changed, 34 insertions, 11 deletions

diff --git a/src/views/App.js b/src/views/App.js
index bee8f1f..1a3ca42 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -11,7 +11,7 @@ import Intro from "./Intro.js";
 
 export default function App() {
   const [db, setDb] = useState(null);
-  const [intro, setIntro] = useState(false);
+  const [intro, setIntro] = useState(true);
 
   useEffect(async () => {
     const newDb = await loadDB();
diff --git a/src/views/Intro.js b/src/views/Intro.js
index 9c00ce4..d87213e 100644
--- a/src/views/Intro.js
+++ b/src/views/Intro.js
@@ -2,34 +2,57 @@
  * Intro
  */
 
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import Vimeo from "@u-wave/react-vimeo";
 
 export default function Intro({ onComplete }) {
   const [done, setDone] = useState(false);
-  const handleClose = () => {
+  const [playing, setPlaying] = useState(false);
+  const [player, setPlayer] = useState(false);
+  const [videoSize] = useState(coverWindow());
+
+  const handleClose = useCallback(() => {
     setDone(true);
     setTimeout(() => {
       onComplete();
     }, 200);
-  };
+  }, []);
+
   return (
     <div className={done ? "intro done" : "intro"}>
-      <img
-        className="close"
-        src="/assets/img/close.svg"
-        onClick={handleClose}
-      />
       <Vimeo
         video="https://vimeo.com/612279630"
         className="intro-video"
-        muted
-        autoplay
         showByline={false}
         showPortrait={false}
         showTitle={false}
+        style={videoSize}
+        onReady={setPlayer}
         onEnd={handleClose}
       />
+      <div
+        style={{ backgroundImage: "url(assets/img/no6092start.jpg)" }}
+        className={playing ? "intro-image playing" : "intro-image"}
+        onClick={() => {
+          setPlaying(true);
+          player.play();
+        }}
+      />
+      <img
+        className="close"
+        src="/assets/img/close.svg"
+        onClick={handleClose}
+      />
     </div>
   );
 }
+
+const coverWindow = () => {
+  const videoRatio = 1.777;
+  const screenRatio = window.innerWidth / window.innerHeight;
+  if (screenRatio > videoRatio) {
+    return { width: "100vw", height: 100 * 1.777 + "vh" };
+  } else {
+    return { width: "177vh", height: "100vh" };
+  }
+};