basic version working

src/ui/src/assets/css/_variables.scss

@@ -2,7 +2,8 @@ $colors : (
 	//background : #272822,
 	background        : #1a1a1a,
 	foreground        : #ddd,
-	lighterBackground : #333,
+	sidebarBackground : #333,
+	mainBackground    : #222,
 	scrollbar         : rgba(255,255,255,0.2)
 );
 

src/ui/src/assets/css/_window.scss

@@ -1,7 +1,25 @@
 .window {
 	display: grid;
-	grid-template-columns: 200px auto;
+	grid-template-columns: 20% auto;
 	height: 100%;
 	width: 100%;
 	position: absolute;
+
+	main {
+		background: color(mainBackground);
+		overflow-y: auto;
+		transition: all 0.3s ease-in-out;
+	}
+
+	&.fullscreen {
+		main {
+			& > .slide:first-child {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100vw;
+				height: 100vh;
+			}
+		}
+	}
 }

src/ui/src/components/Ation.js

@@ -3,37 +3,14 @@ import React, {useEffect, useState} from "react";
 import SlidesList      from "./SlidesList";
 import Modes           from "../models/Modes";
 import Slide           from "./Slide";
+import KeyboardControl from "./KeyboardControl";
+
+import SlideContext from "../shared/SlideContext";
 
 const Ation = () => {
 	const [mode, setMode]   = useState(Modes.NORMAL);
 	const [deck, setDeck]   = useState([]);
-
-	useEffect(() => {
-		const keyHandler = event => {
-			switch (event.key) {
-				case "F5":
-					document.documentElement.requestFullscreen();
-					setMode(Modes.PRESENT);
-					break;
-				default:
-					return;
-			}
-		};
-
-		const fullscreenHandler = () => {
-			if (!document.fullscreenElement)
-				setMode(Modes.NORMAL);
-		};
-
-		window.addEventListener("keydown", keyHandler);
-		window.addEventListener("fullscreenchange", fullscreenHandler);
-
-		return () => {
-			window.removeEventListener("keydown", keyHandler);
-			window.removeEventListener("fullscreenchange", fullscreenHandler);
-		}
-
-	}, []);
+	const [slide, setSlide] = useState(0);
 
 	const openFile = async () => {
 		const slideDeck = await window.api.openFile();
@@ -44,13 +21,16 @@ const Ation = () => {
 	}
 
 	return (
+		<SlideContext.Provider value={{slide, setSlide}}>
 			<section className={`window${mode === Modes.PRESENT ? " fullscreen" : ""}`}>
 				<SlidesList deck={deck} />
 				<main className="main">
-				<Slide data={deck[3] || null} />
+					<Slide data={deck[slide] || null} />
 					<button onClick={openFile}>open</button>	
 				</main>
 			</section>
+			<KeyboardControl mode={mode} setMode={setMode} deck={deck} />
+		</SlideContext.Provider>
 	);
 };
 

src/ui/src/components/KeyboardControl.js

@@ -0,0 +1,48 @@
+import {useContext, useEffect} from "react";
+
+import SlideContext from "../shared/SlideContext";
+import Modes        from "../models/Modes";
+
+const KeyboardControl = ({mode, setMode, deck}) => {
+	const {slide, setSlide} = useContext(SlideContext);
+
+	useEffect(() => {
+		const keyHandler = event => {
+			console.log(event.key);
+			switch (event.key) {
+				case "F5":
+					document.documentElement.requestFullscreen();
+					setMode(Modes.PRESENT);
+					break;
+				case "ArrowLeft":
+					if (slide <= 0)
+						return;
+					setSlide(slide - 1);
+					break;
+				case "ArrowRight":
+					if (slide >= deck.length -1)
+						return;
+					setSlide(slide + 1);
+					break;
+				default:
+					return;
+			}
+		};
+
+		const fullscreenHandler = () => {
+			if (!document.fullscreenElement)
+				setMode(Modes.NORMAL);
+		};
+
+		window.addEventListener("keydown", keyHandler);
+		window.addEventListener("fullscreenchange", fullscreenHandler);
+
+		return () => {
+			window.removeEventListener("keydown", keyHandler);
+			window.removeEventListener("fullscreenchange", fullscreenHandler);
+		}
+
+	}, [slide, setSlide, mode, setMode, deck]);
+};
+
+export default KeyboardControl;

src/ui/src/components/Slide.js

@@ -2,9 +2,9 @@ import React from "react";
 
 import SlideItem from "./SlideItem";
 
-const Slide = ({data}) => {
+const Slide = ({data, ...props}) => {
 	return (
-		<article className="slide">
+		<article className="slide" {...props}>
 			{data?.content.map((item, index) =>
 				<SlideItem item={item} key={index} />
 			)}

src/ui/src/components/SlidesList.js

@@ -1,13 +1,44 @@
-import React from "react";
+import React, {useEffect, useState, useCallback, useRef, useContext} from "react";
 
 import Slide        from "./Slide";
+import SlideContext from "../shared/SlideContext";
 
 const SlidesList = ({deck}) => {
+	const {slide, setSlide} = useContext(SlideContext);
+	const container         = useRef();
+	const [scale, setScale] = useState(1);
+
+	const sizeChange = useCallback(() => {
+		if (!container.current)
+			return;
+		const firstSlide = document.querySelector(".slides-list .slide");
+		if (!firstSlide)
+			return;
+
+		const slideWidth  = firstSlide.clientWidth;
+		const parentWidth = container.current.clientWidth;
+		const targetWidth = parentWidth * 0.9;
+
+		setScale(targetWidth / slideWidth);
+	}, [container]);
+
+	useEffect(() => {
+		const resizeListener = () => {
+			sizeChange();
+		};
+
+		window.addEventListener("resize", resizeListener);
+
+		sizeChange();
+
+		return () => window.removeEventListener("resize", resizeListener);
+	}, [sizeChange, deck]);
+
 	return (
-		<aside className="slides-list">
+		<aside className="slides-list" ref={container}>
 			{deck.map((slide, index) => (
-				<div key={index}>
-					<Slide data={slide} />
+				<div className="slide-wrap" key={index}>
+					<Slide data={slide} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} />
 				</div>
 			))}
 		</aside>

src/ui/src/shared/SlideContext.js

@@ -0,0 +1,8 @@
+import {createContext} from "react";
+
+const SlideContext = createContext({
+	slide    : 0,
+	setSlide : () => {}
+});
+
+export default SlideContext;