From 652ccabbb48dc8d57b80e1d6da421e0898f76801 Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Fri, 30 Sep 2022 18:07:33 +0200
Subject: [PATCH] added support for logitech R400 presenter

---
 src/ui/src/assets/css/ation.scss         |  1 +
 src/ui/src/components/Ation.js           | 10 ++++++----
 src/ui/src/components/Blackout.js        | 11 +++++++++++
 src/ui/src/components/KeyboardControl.js | 15 ++++++++++++---
 src/ui/src/shared/SlideContext.js        |  3 +++
 5 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/ui/src/components/Blackout.js

diff --git a/src/ui/src/assets/css/ation.scss b/src/ui/src/assets/css/ation.scss
index 65fdfcb..48ee027 100644
--- a/src/ui/src/assets/css/ation.scss
+++ b/src/ui/src/assets/css/ation.scss
@@ -6,6 +6,7 @@
 @import "window";
 @import "slidesList";
 @import "slide";
+@import "blackout";
 
 * {
 	box-sizing: border-box;
diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js
index 7f3d962..b4dae99 100644
--- a/src/ui/src/components/Ation.js
+++ b/src/ui/src/components/Ation.js
@@ -1,14 +1,15 @@
 import React, {useEffect, useState} from "react";
 
 import SlidesList      from "./SlidesList";
-import Modes           from "../models/Modes";
+import Mode            from "../models/Mode";
 import Slide           from "./Slide";
 import KeyboardControl from "./KeyboardControl";
+import Blackout        from "./Blackout";
 
 import SlideContext from "../shared/SlideContext";
 
 const Ation = () => {
-	const [mode, setMode]   = useState(Modes.NORMAL);
+	const [mode, setMode]   = useState(Mode.NORMAL);
 	const [deck, setDeck]   = useState([]);
 	const [slide, setSlide] = useState(0);
 
@@ -21,14 +22,15 @@ const Ation = () => {
 	}
 
 	return (
-		<SlideContext.Provider value={{slide, setSlide}}>
-			<section className={`window${mode === Modes.PRESENT ? " fullscreen" : ""}`}>
+		<SlideContext.Provider value={{slide, setSlide, mode}}>
+			<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
 				<SlidesList deck={deck} />
 				<main className="main">
 					<Slide data={deck[slide] || null} />
 					<button onClick={openFile}>open</button>	
 				</main>
 			</section>
+			<Blackout show={mode === Mode.BLACKOUT} />
 			<KeyboardControl mode={mode} setMode={setMode} deck={deck} />
 		</SlideContext.Provider>
 	);
diff --git a/src/ui/src/components/Blackout.js b/src/ui/src/components/Blackout.js
new file mode 100644
index 0000000..241385d
--- /dev/null
+++ b/src/ui/src/components/Blackout.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Blackout = ({show}) => {
+	return (
+		show ?
+			<div className="blackout"></div>
+		: null
+	);
+};
+
+export default Blackout;
\ No newline at end of file
diff --git a/src/ui/src/components/KeyboardControl.js b/src/ui/src/components/KeyboardControl.js
index 0d100f3..1701b78 100644
--- a/src/ui/src/components/KeyboardControl.js
+++ b/src/ui/src/components/KeyboardControl.js
@@ -1,7 +1,7 @@
 import {useContext, useEffect} from "react";
 
 import SlideContext from "../shared/SlideContext";
-import Modes        from "../models/Modes";
+import Mode         from "../models/Mode";
 
 const KeyboardControl = ({mode, setMode, deck}) => {
 	const {slide, setSlide} = useContext(SlideContext);
@@ -11,19 +11,28 @@ const KeyboardControl = ({mode, setMode, deck}) => {
 			console.log(event.key);
 			switch (event.key) {
 				case "F5":
+					if (deck.length <= 0)
+						return;
 					document.documentElement.requestFullscreen();
-					setMode(Modes.PRESENT);
+					setMode(Mode.PRESENT);
 					break;
 				case "ArrowLeft":
+				case "PageUp": // PRESENTER
 					if (slide <= 0)
 						return;
 					setSlide(slide - 1);
 					break;
 				case "ArrowRight":
+				case "PageDown": // PRESENTER
 					if (slide >= deck.length -1)
 						return;
 					setSlide(slide + 1);
 					break;
+				case "b": // PRESENTER
+					if (mode === Mode.NORMAL)
+						return;
+				 	setMode(mode === Mode.BLACKOUT ? Mode.PRESENT : Mode.BLACKOUT);
+					break;
 				default:
 					return;
 			}
@@ -31,7 +40,7 @@ const KeyboardControl = ({mode, setMode, deck}) => {
 
 		const fullscreenHandler = () => {
 			if (!document.fullscreenElement)
-				setMode(Modes.NORMAL);
+				setMode(Mode.NORMAL);
 		};
 
 		window.addEventListener("keydown", keyHandler);
diff --git a/src/ui/src/shared/SlideContext.js b/src/ui/src/shared/SlideContext.js
index 09ecf4e..05a0529 100644
--- a/src/ui/src/shared/SlideContext.js
+++ b/src/ui/src/shared/SlideContext.js
@@ -1,7 +1,10 @@
 import {createContext} from "react";
 
+import Mode from "../models/Mode";
+
 const SlideContext = createContext({
 	slide    : 0,
+	mode     : Mode.NORMAL,
 	setSlide : () => {}
 });