Compare commits
1 Commits
main
...
feat/exper
Author | SHA1 | Date | |
---|---|---|---|
|
ec3811add8 |
@ -6,11 +6,20 @@ import useOnScreen from '../../utils/useOnScreen';
|
|||||||
interface ScrollImageProps {
|
interface ScrollImageProps {
|
||||||
image: NostrImage;
|
image: NostrImage;
|
||||||
index: number;
|
index: number;
|
||||||
currentImage: number | undefined;
|
currentImage: number | undefined;
|
||||||
setCurrentImage: React.Dispatch<React.SetStateAction<number | undefined>>;
|
setCurrentImage: React.Dispatch<React.SetStateAction<number | undefined>>;
|
||||||
|
transitionOngoing: boolean;
|
||||||
|
setTransitionOngoing: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImageProps) => {
|
const ScrollImage = ({
|
||||||
|
image,
|
||||||
|
currentImage,
|
||||||
|
setCurrentImage,
|
||||||
|
index,
|
||||||
|
setTransitionOngoing,
|
||||||
|
transitionOngoing,
|
||||||
|
}: ScrollImageProps) => {
|
||||||
const isMobile = typeof screen.orientation !== 'undefined';
|
const isMobile = typeof screen.orientation !== 'undefined';
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
@ -39,7 +48,8 @@ const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImag
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isVisible) {
|
if (!transitionOngoing && isVisible) {
|
||||||
|
setTransitionOngoing(true);
|
||||||
setCurrentImage(index);
|
setCurrentImage(index);
|
||||||
|
|
||||||
if (mediaIsVideo) {
|
if (mediaIsVideo) {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useMemo } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { NostrImage, urlFix } from '../nostrImageDownload';
|
import { NostrImage, urlFix } from '../nostrImageDownload';
|
||||||
import { Settings } from '../../utils/useNav';
|
import { Settings } from '../../utils/useNav';
|
||||||
import AuthorProfile from '../AuthorProfile';
|
import AuthorProfile from '../AuthorProfile';
|
||||||
@ -7,6 +7,8 @@ import useProfile from '../../utils/useProfile';
|
|||||||
import ScrollImage from './ScrollImage';
|
import ScrollImage from './ScrollImage';
|
||||||
import { ViewMode } from '../SlideShow';
|
import { ViewMode } from '../SlideShow';
|
||||||
|
|
||||||
|
type NostrImageWithIndex = NostrImage & { index: number };
|
||||||
|
|
||||||
type ScrollViewProps = {
|
type ScrollViewProps = {
|
||||||
settings: Settings;
|
settings: Settings;
|
||||||
images: NostrImage[];
|
images: NostrImage[];
|
||||||
@ -16,11 +18,33 @@ type ScrollViewProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMode }: ScrollViewProps) => {
|
const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMode }: ScrollViewProps) => {
|
||||||
|
const [transitionOngoing, setTransitionOngoing] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (setTransitionOngoing) {
|
||||||
|
setTimeout(() => {
|
||||||
|
setTransitionOngoing(false);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}, [transitionOngoing]);
|
||||||
|
|
||||||
const sortedImages = useMemo(
|
const sortedImages = useMemo(
|
||||||
() => images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
|
() => images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
|
||||||
[images] // settings is not used here, but we need to include it to trigger a re-render when it changes
|
[images] // settings is not used here, but we need to include it to trigger a re-render when it changes
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const nearImages = useMemo(() => {
|
||||||
|
const result: NostrImageWithIndex[] = [];
|
||||||
|
const pos = Math.max(0, (currentImage || 0) - 2);
|
||||||
|
console.log(currentImage, pos);
|
||||||
|
|
||||||
|
for (let i = pos; i < sortedImages.length && i < pos + 5; i++) {
|
||||||
|
result.push({ ...sortedImages[i], index: i });
|
||||||
|
}
|
||||||
|
console.log(result);
|
||||||
|
return result;
|
||||||
|
}, [sortedImages, currentImage]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentImage) {
|
if (currentImage) {
|
||||||
console.log('setting hash to #sc' + currentImage);
|
console.log('setting hash to #sc' + currentImage);
|
||||||
@ -40,14 +64,16 @@ const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMo
|
|||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
{transitionOngoing && <div style={{position: 'fixed', left: '1em', top: '1em', zIndex: 1000}}>TO</div>}
|
||||||
{sortedImages.map((image, idx) => (
|
{nearImages.map(image => (
|
||||||
<ScrollImage
|
<ScrollImage
|
||||||
key={image.url}
|
key={image.url}
|
||||||
image={image}
|
image={image}
|
||||||
index={idx}
|
index={image.index}
|
||||||
currentImage={currentImage}
|
currentImage={currentImage}
|
||||||
setCurrentImage={setCurrentImage}
|
setCurrentImage={setCurrentImage}
|
||||||
|
transitionOngoing={transitionOngoing}
|
||||||
|
setTransitionOngoing={setTransitionOngoing}
|
||||||
></ScrollImage>
|
></ScrollImage>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
@ -79,7 +79,7 @@ const SlideShow = () => {
|
|||||||
const [state, setState] = useGlobalState();
|
const [state, setState] = useGlobalState();
|
||||||
const { autoLogin, setAutoLogin } = useAutoLogin();
|
const { autoLogin, setAutoLogin } = useAutoLogin();
|
||||||
const currentSubId = useRef('1');
|
const currentSubId = useRef('1');
|
||||||
const [currentImage, setCurrentImage] = useState<number | undefined>();
|
const [currentImage, setCurrentImage] = useState<number | undefined>(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetch = () => {
|
const fetch = () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user