added support for logitech R400 presenter

src/ui/src/assets/css/ation.scss

@@ -6,6 +6,7 @@
 @import "window";
 @import "slidesList";
 @import "slide";
+@import "blackout";
 
 * {
 	box-sizing: border-box;

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}}>
+		<SlideContext.Provider value={{slide, setSlide, mode}}>
-			<section className={`window${mode === Modes.PRESENT ? " fullscreen" : ""}`}>
+			<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>
 	);

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;

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);

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 : () => {}
 });