Rearrange
This commit is contained in:
parent
0f64a506e5
commit
6175c2617c
|
@ -1,27 +1,17 @@
|
||||||
import { useEffect } from "react";
|
interface SlideViewProps {
|
||||||
|
/** The URL of the image to show. */
|
||||||
interface PhotoAuditoriumProps {
|
|
||||||
url: string;
|
url: string;
|
||||||
nextSlideUrl: string;
|
/** The URL of the next image that we will transition to. */
|
||||||
showNextSlide: () => void;
|
nextURL: string;
|
||||||
}
|
}
|
||||||
export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
|
|
||||||
url,
|
|
||||||
nextSlideUrl,
|
|
||||||
showNextSlide,
|
|
||||||
}) => {
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("showing slide");
|
|
||||||
const timeoutId = window.setTimeout(() => {
|
|
||||||
console.log("showing next slide timer");
|
|
||||||
showNextSlide();
|
|
||||||
}, 10000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (timeoutId) clearTimeout(timeoutId);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the image at {@link url} in a full screen view.
|
||||||
|
*
|
||||||
|
* Also show {@link nextURL} in an hidden image view to prepare the browser for
|
||||||
|
* an imminent transition to it.
|
||||||
|
*/
|
||||||
|
export const SlideView: React.FC<SlideViewProps> = ({ url, nextURL }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
@ -46,7 +36,7 @@ export const PhotoAuditorium: React.FC<PhotoAuditoriumProps> = ({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={nextSlideUrl}
|
src={nextURL}
|
||||||
style={{
|
style={{
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
maxHeight: "100%",
|
maxHeight: "100%",
|
|
@ -3,7 +3,7 @@ import { isNonWebImageFileExtension } from "@/media/formats";
|
||||||
import { nameAndExtension } from "@/next/file";
|
import { nameAndExtension } from "@/next/file";
|
||||||
import log from "@/next/log";
|
import log from "@/next/log";
|
||||||
import PairedSuccessfullyOverlay from "components/PairedSuccessfullyOverlay";
|
import PairedSuccessfullyOverlay from "components/PairedSuccessfullyOverlay";
|
||||||
import { PhotoAuditorium } from "components/PhotoAuditorium";
|
import { SlideView } from "components/Slide";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import {
|
import {
|
||||||
|
@ -181,13 +181,21 @@ export default function Slideshow() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (loading) return;
|
||||||
|
|
||||||
|
console.log("showing slide");
|
||||||
|
const timeoutId = window.setTimeout(() => {
|
||||||
|
console.log("showing next slide timer");
|
||||||
|
showNextSlide();
|
||||||
|
}, 10000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (timeoutId) clearTimeout(timeoutId);
|
||||||
|
};
|
||||||
|
}, [loading]);
|
||||||
|
|
||||||
if (loading) return <PairedSuccessfullyOverlay />;
|
if (loading) return <PairedSuccessfullyOverlay />;
|
||||||
|
|
||||||
return (
|
return <SlideView url={currentFileURL} nextURL={nextFileURL} />;
|
||||||
<PhotoAuditorium
|
|
||||||
url={currentFileURL}
|
|
||||||
nextSlideUrl={nextFileURL}
|
|
||||||
showNextSlide={showNextSlide}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue