diff --git a/src/ui/src/assets/css/_variables.scss b/src/ui/src/assets/css/_variables.scss index be95c0f..1a83e37 100644 --- a/src/ui/src/assets/css/_variables.scss +++ b/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) ); diff --git a/src/ui/src/assets/css/_window.scss b/src/ui/src/assets/css/_window.scss index e98644c..2a20ecb 100644 --- a/src/ui/src/assets/css/_window.scss +++ b/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; + } + } + } } \ No newline at end of file diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js index 18b4b59..7f3d962 100644 --- a/src/ui/src/components/Ation.js +++ b/src/ui/src/components/Ation.js @@ -1,39 +1,16 @@ import React, {useEffect, useState} from "react"; -import SlidesList from "./SlidesList"; -import Modes from "../models/Modes"; -import Slide from "./Slide"; +import SlidesList from "./SlidesList"; +import Modes from "../models/Modes"; +import Slide from "./Slide"; +import KeyboardControl from "./KeyboardControl"; -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); - }; +import SlideContext from "../shared/SlideContext"; - window.addEventListener("keydown", keyHandler); - window.addEventListener("fullscreenchange", fullscreenHandler); - - return () => { - window.removeEventListener("keydown", keyHandler); - window.removeEventListener("fullscreenchange", fullscreenHandler); - } - - }, []); +const Ation = () => { + const [mode, setMode] = useState(Modes.NORMAL); + const [deck, setDeck] = useState([]); + const [slide, setSlide] = useState(0); const openFile = async () => { const slideDeck = await window.api.openFile(); @@ -44,13 +21,16 @@ const Ation = () => { } return ( -
- -
- - -
-
+ +
+ +
+ + +
+
+ + ); }; diff --git a/src/ui/src/components/KeyboardControl.js b/src/ui/src/components/KeyboardControl.js new file mode 100644 index 0000000..0d100f3 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/ui/src/components/Slide.js b/src/ui/src/components/Slide.js index 6534d9d..a38dd32 100644 --- a/src/ui/src/components/Slide.js +++ b/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 ( -
+
{data?.content.map((item, index) => )} diff --git a/src/ui/src/components/SlidesList.js b/src/ui/src/components/SlidesList.js index 092102d..24f5e2c 100644 --- a/src/ui/src/components/SlidesList.js +++ b/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 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 ( -