Slideshow

packages/webapp/src/App.css

@@ -2,4 +2,20 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.toFadeOut {
+	opacity: 1;
+}
+.fadeOut {
+	opacity: 0;
+	transition: opacity 1s ease-in-out;
+}
+
+.toFadeIn {
+	opacity: 0;
+}
+.fadeIn {
+	opacity: 1;
+	transition: opacity 1s ease-in-out;
+}

packages/webapp/src/list/List.tsx

@@ -12,6 +12,7 @@ import useBodyDimensions from '../utils/useBodyDimensions';
 import { useDeviceType, DeviceType } from "../utils/useDeviceType";
 import { fluent } from "./fluent";
 import { MultiTagDialogProvider } from "../dialog/tag-dialog-provider";
+import { Fab } from "../overlay/Overlay";
 
 const NAV_HEIGHT = 44
 const BOTTOM_MARGIN = 4
@@ -76,6 +77,7 @@ export const List = () => {
               topDateItems={topDateItems} />
             <FluentList rows={rows} padding={padding} />
           </div>
+          <Fab />
         </>
       </MultiTagDialogProvider>
     </>

packages/webapp/src/overlay/DoubleVLayout.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export const DoubleVLayout = ((props) => {
+
+	if (!props.entries) {
+		return <></>;
+	}
+
+	return (
+		<>
+		<div className="w-screen h-screen flex">
+			<div className="flex-1">
+			<img className="relative object-contain h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" src={props.entries[0]} />
+			</div>
+			<div className="flex-1">
+			<img className="relative object-contain h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" src={props.entries[1]} />
+			</div>
+		</div>
+		</>
+	)
+})

packages/webapp/src/overlay/Overlay.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as icons from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect, useRef } from "react";
+import { useEntryStore } from "../store/entry-store";
+import { usePreviewSize } from "../single/usePreviewSize";
+import { getHigherPreviewUrl } from '../utils/preview';
+import { SingleLayout } from "./SingleLayout";
+import { DoubleVLayout } from "./DoubleVLayout";
+
+const SlideShow = ({closeCb}) => {
+	const divRef = useRef<HTMLDivElement>(null);
+	const entries = useEntryStore(state => state.entries);
+	const slideTimeout = 60 * 1000; // TODO: move to a configuration
+	const getRandomIdx = () => Math.floor(Math.random() * entries.length);
+	const previewSize = usePreviewSize();
+	const layoutHistory = useRef<any[]>([]);
+	const [currentLayout, setCurrentLayout] = useState<any>(null);
+	const [nextLayout, setNextLayout] = useState<any>(null);
+	const [isFading, setIsFading] = useState(false);
+	const [nextIdx, setNextIdx] = useState(0);
+
+	const selectNewEntry = () => {
+		const entry = entries[getRandomIdx()];
+		return getHigherPreviewUrl(entry.previews, previewSize);
+	}
+
+	const getLayoutComponent = (name: string, entries: any[]) => {
+		switch (name) {
+			case 'SingleLayout':
+				return <SingleLayout entries={entries} />;
+			case 'DoubleVLayout':
+				return <DoubleVLayout entries={entries} />;
+
+			default:
+				break;
+		}
+	}
+
+	const selectNewLayout = (idx: number) => {
+		// TODO: Move to the each *Layout.tsx file to have the data in one place
+		const layouts = [
+			{name: 'SingleLayout', entriesCount: 1},
+			{name: 'DoubleVLayout', entriesCount: 2},
+		];
+
+		const history = layoutHistory.current;
+		if (idx >= 0 && idx < history.length) {
+			const layoutFromHistory = history[idx];
+			const newLayoutComponent = getLayoutComponent(layoutFromHistory.component, layoutFromHistory.entries);
+			setNextLayout(newLayoutComponent);
+			return Math.min(idx + 1, layoutHistory.current.length);
+		}
+
+		const {name: newLayoutName, entriesCount} = layouts[Math.floor(Math.random() * layouts.length)];
+		const newLayoutData: any = {
+			component: newLayoutName,
+			entries: []
+		};
+
+		for (let index = 0; index < entriesCount; index++) {
+			newLayoutData.entries.push(selectNewEntry());
+		}
+		const newLayoutComponent = getLayoutComponent(newLayoutName, newLayoutData.entries);
+
+		layoutHistory.current.push(newLayoutData);
+		setNextLayout(newLayoutComponent);
+		return layoutHistory.current.length;
+	}
+
+	const transitionEnd = () => {
+		setCurrentLayout(nextLayout);
+		setIsFading(false);
+		setNextIdx(selectNewLayout(nextIdx));
+	}
+
+	const createTimeout = () => {
+		return setTimeout(() => {
+			setIsFading(true);
+		}, slideTimeout)
+	}
+
+	const onDivClick = (event) => {
+		event.preventDefault();
+		setIsFading(true);
+	}
+
+	const divDoubleClick = (event) => {
+		if (!document.fullscreenElement) {
+			document.documentElement.requestFullscreen();
+		} else if (document.exitFullscreen) {
+			document.exitFullscreen();
+		}
+	}
+
+	useEffect(() => {
+		if (divRef.current === null) {
+			return;
+		}
+		divRef.current.focus();
+	}, [divRef.current]);
+
+	useEffect(() => {
+		setNextIdx(selectNewLayout(nextIdx));
+		setIsFading(true);
+	}, []);
+
+	useEffect(() => {
+		if (isFading) return;
+
+		const timer = createTimeout();
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [isFading]);
+
+	const divKeyUp = (event) => {
+		switch (event.key) {
+			case 'Escape':
+				closeCb();
+				break;
+			case 'ArrowLeft':
+				setNextIdx(selectNewLayout(Math.max(nextIdx - 3, 0)));
+				setIsFading(true);
+				break;
+			case ' ':
+			case 'ArrowRight':
+				setNextIdx(selectNewLayout(Math.min(nextIdx - 1, layoutHistory.current.length)));
+				setIsFading(true);
+				break;
+
+			default:
+				break;
+		}
+
+	}
+
+	return (
+		<div ref={divRef} className={`fixed top-0 z-50 bg-black h-full w-full`} tabIndex={0} onKeyUp={divKeyUp} onClick={onDivClick} onDoubleClick={divDoubleClick}>
+			<div className={`absolute top-0 h-full w-full z-50 ${isFading ? 'toFadeOut fadeOut' : 'opacity-1'}`} onTransitionEnd={transitionEnd}>
+				{currentLayout}
+			</div>
+			<div className={`absolute top-0 h-full w-full z-40 ${isFading ? 'toFadeIn fadeIn' : 'opacity-0'}`}>
+				{nextLayout}
+			</div>
+			<div className={`absolute top-0 h-full w-full z-40 ${isFading ? 'hidden' : ''}`}>
+				{currentLayout}
+			</div>
+		</div>
+	)
+}
+
+export const Fab = () => {
+	const [slideShowActive, setslideShowActive] = useState(false)
+
+	const toogleSlideShow = () => {
+		setslideShowActive(!slideShowActive)
+	}
+	return (
+		<>
+		{slideShowActive ? <SlideShow closeCb={toogleSlideShow}/> : null}
+		<div className="bg-black h-16 w-16 rounded-full p-0.5 fixed bottom-5 right-5 flex items-center justify-center cursor-pointer">
+			<div
+				onClick={toogleSlideShow}
+				className={`rounded-full w-full h-full flex items-center justify-center`}
+			>
+				<FontAwesomeIcon icon={icons.faTv} className="text-gray-300"/>
+			</div>
+		</div>
+		</>
+	)
+}

packages/webapp/src/overlay/SingleLayout.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export const SingleLayout = ((props) => {
+
+	if (!props.entries) {
+		return <></>;
+	}
+
+	return (
+		<>
+		<img className="absolute object-contain w-full h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" src={props.entries[0]} />
+		</>
+	)
+})

packages/webapp/src/store/entry.ts

@@ -14,4 +14,5 @@ export interface Entry {
   textCache?: string | false
   similarityHash: string
   faces?: any[],
+  previews: any[],
 }