2 files changed, 30 insertions, 18 deletions
diff --git a/src/views/Gallery.js b/src/views/Gallery.js
index 7681e3b..b69a7d7 100644
--- a/src/views/Gallery.js
+++ b/src/views/Gallery.js
@@ -60,18 +60,22 @@ export default function Gallery({ images, visible, onLoad }) {
       </div>
       <div className="buttons arrows">
         {!oneItem && (
-          <img
-            src="/assets/img/arrow-back.svg"
-            onClick={previous}
-            style={{ opacity: index > 0 ? 1 : 0 }}
-          />
+          <div>
+            <img
+              src="/assets/img/arrow-back.svg"
+              onClick={previous}
+              style={{ opacity: index > 0 ? 1 : 0 }}
+            />
+          </div>
         )}
         {!oneItem && (
-          <img
-            src="/assets/img/arrow-forward.svg"
-            onClick={next}
-            style={{ opacity: index < images.length - 1 ? 1 : 0 }}
-          />
+          <div>
+            <img
+              src="/assets/img/arrow-forward.svg"
+              onClick={next}
+              style={{ opacity: index < images.length - 1 ? 1 : 0 }}
+            />
+          </div>
         )}
       </div>
     </div>
diff --git a/src/views/Intro.js b/src/views/Intro.js
index d27d34b..1bb0380 100644
--- a/src/views/Intro.js
+++ b/src/views/Intro.js
@@ -5,9 +5,11 @@
 import React, { useState, useCallback } from "react";
 import Vimeo from "@u-wave/react-vimeo";
 
+let playing = false;
+
 export default function Intro({ onComplete }) {
   const [done, setDone] = useState(false);
-  const [playing, setPlaying] = useState(false);
+  const [started, setStarted] = useState(false);
   const [player, setPlayer] = useState(false);
   const [videoSize] = useState(coverWindow());
 
@@ -18,12 +20,21 @@ export default function Intro({ onComplete }) {
     }, 200);
   }, []);
 
+  const handleStart = useCallback(() => {
+    playing = true;
+    setStarted(true);
+    if (player) {
+      player.play();
+    }
+  }, [player]);
+
   const handleReady = useCallback((player) => {
     setPlayer(player);
     if (playing) {
       player.play();
+      setStarted(true);
     }
-  }, []);
+  });
 
   return (
     <div className={done ? "intro done" : "intro"}>
@@ -39,13 +50,10 @@ export default function Intro({ onComplete }) {
       />
       <div
         style={{ backgroundImage: "url(assets/img/no6092start.jpg)" }}
-        className={playing ? "intro-image playing" : "intro-image"}
-        onClick={() => {
-          setPlaying(true);
-          player && player.play();
-        }}
+        className={started ? "intro-image playing" : "intro-image"}
+        onClick={handleStart}
       />
-      {playing && (
+      {started && (
         <img
           className="close"
           src="/assets/img/close.svg"