fixing race condition

4 files changed, 65 insertions, 24 deletions

diff --git a/db.json b/db.json
index b0cff09..37a0d4f 100644
--- a/db.json
+++ b/db.json
@@ -883,7 +883,15 @@
       "tag_6": 0,
       "tag_7": 0,
       "tag_8": 0,
-      "images": [],
+      "images": [
+        {
+          "uri": "assets/data_store/23-Moore1941/23-Moore1941.png",
+          "caption": "",
+          "height": 1037,
+          "width": 1500,
+          "type": "png"
+        }
+      ],
       "citation": "1941 38.2 × 55.4 cm <br>\ngraphite, pen and ink, brush and ink, wax crayon, chalks and scraping out on paper <br>\nCollection of the Art Gallery of Ontario, Toronto. <br>\nGift of the Contemporary Art Society, 1951 (50/64)<br>\n",
       "description": "<p>\nThere are conflicting stories how Anthony Blunt was introduced into the Canadian Museum system. A year before he was on retainer for the National Gallery of Canada (NGC) in 1948, he was secured by the Art Gallery of Ontario (AGO). One theory is that Charles Vincent Massey–then-Governor General and driving force behind the founding of the Canada Council for the Arts and the National Library of Canada—introduced Blunt to the AGO’s first Director Martin Baldwin. Another source says it was University of Toronto professor Peter Brieger, who was originally at the Courtauld in the 1930s, who instigated the relationship. Blunt acquired several works of art for the gallery including the Courbet painting <i>Woman Painted at Palavas</i>, but is most famous for fostering the AGO’s significant relationship with Henry Moore. After curating the 50th anniversary exhibition for the AGO in 1950, Blunt brokered the acquisition of Moore’s sketch <i>Group of Shelterers During an Air Raid</i>, made while he was an official war artist in 1941 and Blunt was at MI5. This relationship blossomed into an entire wing of Henry Moore sculptures and Blunt even found the first Moore curator, Alan Wilkinson, a former student of his at the Courtauld. The first director of Conservation at the NGC also studied under Blunt at the Courtauld during this period and more directly under technical director Stephen Rees-Jones. The current Director of Conservation and Technical Research at the NGC, Stephen Gritt, was also educated at the Courtauld Institute for Art. \n</p>\n\n",
       "author": "HENRY MOORE ",
@@ -910,7 +918,15 @@
       "tag_6": 0,
       "tag_7": 0,
       "tag_8": 0,
-      "images": [],
+      "images": [
+        {
+          "uri": "assets/data_store/24-Moore1940/24-Moore1940.png",
+          "caption": "",
+          "height": 1230,
+          "width": 1485,
+          "type": "png"
+        }
+      ],
       "citation": "1940 <br>\n34.4 x 42.7 cm <br>\ngraphite, pen and ink, brush and ink, wax crayon, and scraping out on paper <br>\nArt Gallery of Ontario<br>\nToronto Purchase 1974 (74/337)<br>\n",
       "description": "<p>\nThere are conflicting stories how Anthony Blunt was introduced into the Canadian Museum system. A year before he was on retainer for the National Gallery of Canada (NGC) in 1948, he was secured by the Art Gallery of Ontario (AGO). One theory is that Charles Vincent Massey–then-Governor General and driving force behind the founding of the Canada Council for the Arts and the National Library of Canada—introduced Blunt to the AGO’s first Director Martin Baldwin. Another source says it was University of Toronto professor Peter Brieger, who was originally at the Courtauld in the 1930s, who instigated the relationship. Blunt acquired several works of art for the gallery including the Courbet painting <i>Woman Painted at Palavas</i>, but is most famous for fostering the AGO’s significant relationship with Henry Moore. After curating the 50th anniversary exhibition for the AGO in 1950, Blunt brokered the acquisition of Moore’s sketch <i>Group of Shelterers During an Air Raid</i>, made while he was an official war artist in 1941 and Blunt was at MI5. This relationship blossomed into an entire wing of Henry Moore sculptures and Blunt even found the first Moore curator, Alan Wilkinson, a former student of his at the Courtauld. The first director of Conservation at the NGC also studied under Blunt at the Courtauld during this period and more directly under technical director Stephen Rees-Jones. The current Director of Conservation and Technical Research at the NGC, Stephen Gritt, was also educated at the Courtauld Institute for Art. \n</p>\n\n",
       "author": "HENRY MOORE ",
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 8436bcc..7317399 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -232,6 +232,9 @@ a {
 .gallery .buttons {
   margin-top: 1rem;
 }
+.gallery .buttons.arrows div {
+  display: inline-block;
+}
 
 /** Videos */
 
@@ -362,6 +365,9 @@ a {
   width: 25%;
   padding: 1rem 2rem;
 }
+.credits {
+  font-size: 1rem;
+}
 .credits h2 {
   width: 100%;
   text-align: center;
@@ -397,9 +403,6 @@ a {
   font-weight: bold;
 }
 .credits-rows a {
-  text-decoration: none;
-}
-.credits-rows a:hover {
   text-decoration: underline;
 }
 .credits-rows > div > div:first-child {
@@ -507,9 +510,16 @@ a {
   .gallery .buttons.arrows {
     position: absolute;
     bottom: 0;
-    right: 0;
+    right: 1rem;
     width: auto;
   }
+  .gallery .buttons.arrows div {
+    margin: 0 0.25rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0.25rem;
+    text-align: center;
+  }
   .buttons.close {
     width: auto;
     position: fixed;
@@ -553,6 +563,9 @@ a {
   .credits .row .column:first-child {
     padding-top: 2rem;
   }
+  .credits h2 {
+    margin-top: 0.5rem;
+  }
   .credits .inner {
     padding: 1rem;
   }
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"