Compare commits
1 Commits
main
...
feat/exper
Author | SHA1 | Date | |
---|---|---|---|
|
ec3811add8 |
@ -6,11 +6,20 @@ import useOnScreen from '../../utils/useOnScreen';
|
||||
interface ScrollImageProps {
|
||||
image: NostrImage;
|
||||
index: number;
|
||||
currentImage: number | undefined;
|
||||
currentImage: 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 containerRef = useRef<HTMLDivElement>(null);
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
@ -39,7 +48,8 @@ const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImag
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
if (!transitionOngoing && isVisible) {
|
||||
setTransitionOngoing(true);
|
||||
setCurrentImage(index);
|
||||
|
||||
if (mediaIsVideo) {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { NostrImage, urlFix } from '../nostrImageDownload';
|
||||
import { Settings } from '../../utils/useNav';
|
||||
import AuthorProfile from '../AuthorProfile';
|
||||
@ -7,6 +7,8 @@ import useProfile from '../../utils/useProfile';
|
||||
import ScrollImage from './ScrollImage';
|
||||
import { ViewMode } from '../SlideShow';
|
||||
|
||||
type NostrImageWithIndex = NostrImage & { index: number };
|
||||
|
||||
type ScrollViewProps = {
|
||||
settings: Settings;
|
||||
images: NostrImage[];
|
||||
@ -16,11 +18,33 @@ type 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(
|
||||
() => 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
|
||||
);
|
||||
|
||||
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(() => {
|
||||
if (currentImage) {
|
||||
console.log('setting hash to #sc' + currentImage);
|
||||
@ -40,14 +64,16 @@ const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMo
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
|
||||
{sortedImages.map((image, idx) => (
|
||||
{transitionOngoing && <div style={{position: 'fixed', left: '1em', top: '1em', zIndex: 1000}}>TO</div>}
|
||||
{nearImages.map(image => (
|
||||
<ScrollImage
|
||||
key={image.url}
|
||||
image={image}
|
||||
index={idx}
|
||||
index={image.index}
|
||||
currentImage={currentImage}
|
||||
setCurrentImage={setCurrentImage}
|
||||
transitionOngoing={transitionOngoing}
|
||||
setTransitionOngoing={setTransitionOngoing}
|
||||
></ScrollImage>
|
||||
))}
|
||||
|
||||
|
@ -79,7 +79,7 @@ const SlideShow = () => {
|
||||
const [state, setState] = useGlobalState();
|
||||
const { autoLogin, setAutoLogin } = useAutoLogin();
|
||||
const currentSubId = useRef('1');
|
||||
const [currentImage, setCurrentImage] = useState<number | undefined>();
|
||||
const [currentImage, setCurrentImage] = useState<number | undefined>(0);
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = () => {
|
||||
|
Loading…
Reference in New Issue
Block a user