From 9c4afb8fd5ec7552eb67aa3c01e0cd1aabe612bc Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 8 Oct 2021 16:37:09 +0200
Subject: fixing race condition

---
 src/views/Intro.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

(limited to 'src/views/Intro.js')

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"
-- 
cgit v1.2.3-70-g09d2