3 files changed, 58 insertions, 14 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index a7cd0aa..0427766 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -38,7 +38,6 @@ a {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 3rem 3rem;
   transition: opacity 0.2s;
   background: #333;
   opacity: 1;
@@ -46,11 +45,33 @@ a {
 .intro.done {
   opacity: 0;
 }
-.intro-video,
-.intro-video iframe {
+.intro-image {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  background-size: cover;
+  background-position: center center;
+  transition: opacity 0.5s;
+  pointer-events: auto;
   cursor: pointer;
+  opacity: 1;
+}
+.intro-image.playing {
+  pointer-events: none;
+  opacity: 0;
+}
+.intro-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  pointer-events: none;
+}
+.intro-video iframe {
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
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" };
+  }
+};