1 files changed, 38 insertions, 7 deletions
diff --git a/src/views/Detail.js b/src/views/Detail.js
index 772abb1..fb17c06 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -2,7 +2,7 @@
  * Detail view, displaying text plus media
  */
 
-import React from "react";
+import React, { useRef, useEffect, useState, useCallback } from "react";
 
 import Gallery from "./Gallery.js";
 import Clocks from "./Clocks.js";
@@ -10,15 +10,45 @@ import Vimeo from "@u-wave/react-vimeo";
 import { pad } from "../utils/index.js";
 
 export default function Detail({ node, visible, onClose }) {
+  const ref = useRef();
+  const contentRef = useRef();
+  const [videoReady, setVideoReady] = useState(false);
+
+  useEffect(() => {
+    if (!node) {
+      setVideoReady(false);
+    }
+    setTimeout(() => {
+      ref.current.scrollTo(0, -ref.current.scrollHeight);
+      if (contentRef.current) {
+        contentRef.current.scrollTo(0, -ref.current.scrollHeight);
+      }
+    }, 10);
+  }, [node]);
+
+  const handleVideoReady = useCallback(() => {
+    if (node.data.object) {
+      setTimeout(() => {
+        setVideoReady(true);
+      }, 500);
+    } else {
+      setVideoReady(true);
+    }
+  }, [node]);
+
+  const handleLoad = useCallback(() => {
+    ref.current.scrollTo(0, -ref.current.scrollHeight);
+  });
+
   if (!node) {
-    return <div className="detail" />;
+    return <div className="detail" ref={ref} />;
   }
 
   const { id, data } = node;
   const index = id + 1;
   return (
-    <div className={visible ? "detail visible" : "detail"}>
-      <div className="content">
+    <div className={visible ? "detail visible" : "detail"} ref={ref}>
+      <div className="content" ref={contentRef}>
         <div>
           <div className="title">
             <div className="index">{pad(index)}</div>
@@ -42,10 +72,10 @@ export default function Detail({ node, visible, onClose }) {
           <img src="/assets/img/close.svg" onClick={onClose} />
         </div>
         {index === 33 ? (
-          <Clocks />
+          <Clocks onLoad={handleLoad} />
         ) : data.type === "video" ? (
           visible && (
-            <div className="video">
+            <div className={videoReady ? "video ready" : "video"}>
               <Vimeo
                 video={data.images[0].uri.replace("player.", "")}
                 autoplay
@@ -53,11 +83,12 @@ export default function Detail({ node, visible, onClose }) {
                 showByline={false}
                 showPortrait={false}
                 showTitle={false}
+                onReady={handleVideoReady}
               />
             </div>
           )
         ) : (
-          <Gallery images={data.images} visible={visible} />
+          <Gallery images={data.images} visible={visible} onLoad={handleLoad} />
         )}
       </div>
     </div>