Merge branch 'main' of github.com:SijmenHuizenga/web-diggers

SijmenHuizenga · Oct 29, 2023 · a0cdcc5 · a0cdcc5
2 parents ce6b666 + a8aa0fe
commit a0cdcc5
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/webapp/src/components/ArtObject.tsx b/webapp/src/components/ArtObject.tsx
@@ -1,9 +1,11 @@
+import { useState } from "react";
 import { Piece } from "../apiclient/model";
 
 const DEFAULT_IMG =
   "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Optical_Toy%2C_Phenakistiscope_Disc_with_Cats_and_Donkey%2C_ca._1830.gif/640px-Optical_Toy%2C_Phenakistiscope_Disc_with_Cats_and_Donkey%2C_ca._1830.gif";
 
 const ArtObject = ({ piece }: { piece: Piece }) => {
+  const [playing, setPlaying] = useState(false);
   // Get a screenshot or image link
   let imageurl = null;
   if (piece["type of embed"] == "IMAGE") {
@@ -36,28 +38,23 @@ const ArtObject = ({ piece }: { piece: Piece }) => {
             src="/playback.png"
             title="Click to open"
             onClick={() => {
-              piece.playing = !piece.playing;
+              setPlaying(true);
             }}
-            style={{ visibility: piece.playing ? "visible" : "hidden" }}
+            style={{ visibility: playing ? "hidden" : "visible" }}
           />
         )}
         {imageurl && (
           <img
             className="width-full z-50"
-            style={{ visibility: piece.playing ? "visible" : "hidden" }}
             src={imageurl}
             alt="Image"
+            style={{ visibility: playing ? "hidden" : "visible" }}
           />
         )}
-        {embedurl && !piece.playing && (
-          <iframe
-            className="artIframe"
-            src={embedurl}
-            allowFullScreen
-            scrolling="no"
-          ></iframe>
+        {embedurl && playing && (
+          <iframe className="artIframe" src={embedurl} allowFullScreen></iframe>
         )}
-        {youtubeurl && !piece.playing && (
+        {youtubeurl && playing && (
           <iframe
             className="artIframe"
             src={youtubeurl}