Interactive

SijmenHuizenga · Oct 28, 2023 · 9afc141 · 9afc141
1 parent 26f434e
commit 9afc141
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 9 deletions.
diff --git a/webapp/postcss.config.js b/webapp/postcss.config.js
@@ -1,7 +1,8 @@
 export default {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
-    '@tailwindcss/nesting': {},
   },
 }
diff --git a/webapp/public/art-hall-1.png b/webapp/public/art-hall-1.png
diff --git a/webapp/public/art-hall-2.png b/webapp/public/art-hall-2.png
diff --git a/webapp/src/components/ArtObject.tsx b/webapp/src/components/ArtObject.tsx
@@ -3,19 +3,62 @@ 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 }) => {
-  let imageurl = piece.screenshot ? 
-    piece.screenshot.split(' (')[1].replace(')', '') : DEFAULT_IMG;
+
+  // Get a screenshot or image link
+  let imageurl = 
+    piece["type of embed"] == 'IMAGE' ?
+      piece.embed
+    : piece.screenshot ? 
+      piece.screenshot.split(' (')[1].replace(')', '')
+        : DEFAULT_IMG;
+
+  let embedurl = 
+    piece["type of embed"] == 'IFRAME' ? 
+      piece.embed : null;
+
+  let youtubeurl =
+    piece["type of embed"] == 'VIDEO'
+    && piece.embed.indexOf('?v=')>1 ? 
+      'https://www.youtube.com/embed/' + piece.embed.split('?v=')[1] : null;
+
+  // TODO: MUSIC embedder for soundcloud / spotify / ...
+
+  // Click away screenshot when embedding
+  let imagehide = (embedurl || youtubeurl) ? '' : 'width-full z-50';
+  let embedhide = imagehide ? 'hide' : '';
+
+const [showResults, setShowResults] = React.useState(false)
+  const showEmbed = () => {
+    this.className = 'hide'
+  }
+
   return (
     <div className="grid h-screen place-items-center">
       <h2 className="title text-6xl font-bold p-4">
         {piece.name}
       </h2>
       <div className="image-container">
-        <img
-          className="width-full z-50"
-          src={imageurl}
-          alt="placeholder"
-        />
+        {embedhide &&
+          <img 
+            className="startmeup" 
+            src="/playback.png" 
+            title="Click to open interactively" 
+            onClick={showEmbed}
+          />
+        }
+        {imageurl &&
+          <img
+            className={imagehide}
+            src={imageurl}
+            alt="Image"
+          />
+        }
+        {embedurl &&
+          <iframe src={embedurl} className={embedhide} allowFullScreen></iframe>
+        }
+        {youtubeurl &&
+          <iframe src={embedurl} className={embedhide} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        }
       </div>
       <div className="description">
         <p>{piece.context}</p>

diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -35,6 +35,9 @@ html, body, #root {
     font-family: OldNewspaper;
 }
 
+.hide {
+    display: none;
+}
 
 
 h2.title {
@@ -49,6 +52,14 @@ h2.title {
     max-width: 400px;
     margin-top: -3em;
 }
+
+img.startmeup {
+    position: absolute;
+    border: none;
+    box-shadow: none;
+    margin-left: -25px;
+    margin-top: -25px;
+}
 
 .description {
     margin: 0 20%;

diff --git a/webapp/src/templates/Room.tsx b/webapp/src/templates/Room.tsx
@@ -24,7 +24,7 @@ const Room = ({ piece }: { piece: Piece }) => {
   return (
     <RoomWrapper
       style={{
-        backgroundImage: "url(/art-hall-1.png)",
+        backgroundImage: "url(/art-hall-1.jpg)",
         position: "relative",
       }}
     >