displaying videos

3 files changed, 19 insertions, 7 deletions

diff --git a/src/views/App.js b/src/views/App.js
index 561523d..b435047 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -12,9 +12,10 @@ export default function App() {
   const [db, setDb] = useState(null);
   const [node, setNode] = useState(null);
   const [graph, setGraph] = useState(null);
-  const [selected, setSelected] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
   const [detailVisible, setDetailVisible] = useState(null);
 
+  /** Load the database */
   useEffect(async () => {
     const newDb = await loadDB();
     setDb(newDb);
@@ -25,21 +26,24 @@ export default function App() {
     );
   }, []);
 
+  /** Click to open a node */
   const handleClick = useCallback((node) => {
     setNode(node);
     setDetailVisible(true);
   });
 
+  /** Click to close the media modal */
   const handleClose = useCallback((node) => {
     setDetailVisible(false);
   });
 
+  /** Select or clear the category */
   const handleSelect = useCallback((category) => {
-    if (category === selected) {
-      setSelected(null);
+    if (category === selectedCategory) {
+      setSelectedCategory(null);
       graph.onSelect(null);
     } else {
-      setSelected(category);
+      setSelectedCategory(category);
       graph.onSelect(category);
     }
   });
@@ -49,7 +53,7 @@ export default function App() {
       <Detail node={node} visible={detailVisible} onClose={handleClose} />
       <Legend
         visible={!detailVisible}
-        selected={selected}
+        selected={selectedCategory}
         onSelect={handleSelect}
       />
     </div>
diff --git a/src/views/Detail.js b/src/views/Detail.js
index ec0f37c..9ac3e57 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -5,6 +5,7 @@
 import React from "react";
 
 import Gallery from "./Gallery.js";
+import Vimeo from "@u-wave/react-vimeo";
 
 export default function Detail({ node, visible, onClose }) {
   if (!node) {
@@ -39,7 +40,14 @@ export default function Detail({ node, visible, onClose }) {
           <img src="/assets/img/close.svg" onClick={onClose} />
         </div>
         {data.type === "video" ? (
-          "Video TBD"
+          visible && (
+            <div className="video">
+              <Vimeo
+                video={data.images[0].uri.replace("player.", "")}
+                autoplay
+              />
+            </div>
+          )
         ) : (
           <Gallery images={data.images} visible={visible} />
         )}
diff --git a/src/views/Gallery.js b/src/views/Gallery.js
index 7bdf18b..c2bd62d 100644
--- a/src/views/Gallery.js
+++ b/src/views/Gallery.js
@@ -1,5 +1,5 @@
 /**
- * Detail view, displaying text plus media
+ * Image gallery
  */
 
 import React, { useState, useEffect } from "react";