colors and font now controllable on a per slideshow basis

src/ui/src/components/Ation.js

@@ -16,6 +16,7 @@ const Ation = () => {
 	const {font, highlightColor, backgroundColor, color} = useContext(SettingsContext);
 	const [mode, setMode]                                = useState(Mode.NORMAL);
 	const [deck, setDeck]                                = useState([]);
+	const [meta, setMeta]                                = useState(null);
 	const [slide, setSlide]                              = useState(0);
 	const [basePath, setBasePath]                        = useState("");
 	const [showTips, setShowTips]                        = useState(false);
@@ -29,8 +30,9 @@ const Ation = () => {
 				return;
 			if (slide >= slideDeck.length)
 				setSlide(0);
+			setMeta(slideDeck.metaData);
 			setBasePath(newBasePath);
-			setDeck(slideDeck);
+			setDeck(slideDeck.slides);
 		});
 		window.api.onFileClose(() => {
 			setBasePath("");
@@ -54,13 +56,13 @@ const Ation = () => {
 				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath, slideCount : deck.length}}>
 					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
 						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
-						<SlidesList deck={deck} />
+						<SlidesList deck={deck} meta={meta} font={font} />
 						<main className="main" style={{
-							"--color-hightlight" : highlightColor,
-							"--color-slideBackground" : backgroundColor,
-							"--color-slideForeground" : color
+							"--color-hightlight" : meta.color_highlight || highlightColor,
+							"--color-slideBackground" : meta.color_background || backgroundColor,
+							"--color-slideForeground" : meta.color_text || color
 						}}>
-							<Slide data={deck[slide] || null} style={{fontFamily : font}}/>
+							<Slide data={deck[slide] || null} style={{fontFamily : meta.font || font}}/>
 						</main>
 						<Tips show={showTips} />
 					</section>

src/ui/src/components/SlidesList.js

@@ -4,7 +4,7 @@ import Slide           from "./Slide";
 import SlideContext    from "../shared/SlideContext";
 import SettingsContext from "../shared/SettingsContext";
 
-const SlidesList = ({deck, style}) => {
+const SlidesList = ({deck, meta, font, style}) => {
 	const {highlightColor, backgroundColor, color} = useContext(SettingsContext);
 	const {slide, setSlide}                        = useContext(SlideContext);
 	const container                                = useRef();
@@ -34,7 +34,7 @@ const SlidesList = ({deck, style}) => {
 		if (!current.current)
 			return;
 		current.current.scrollIntoView({inline : "nearest"});
-	}, [current, slide]);
+	}, [current, slide, first]);
 
 	useEffect(() => {
 		const resizeListener = () => {
@@ -50,13 +50,13 @@ const SlidesList = ({deck, style}) => {
 
 	return (
 		<aside className="slides-list" ref={container} style={{
-			"--color-hightlight" : highlightColor,
-			"--color-slideBackground" : backgroundColor,
-			"--color-slideForeground" : color
+			"--color-hightlight" : meta.color_highlight       || highlightColor,
+			"--color-slideBackground" : meta.color_background || backgroundColor,
+			"--color-slideForeground" : meta.color_text       || color
 		}}>
 			{deck.map((currentSlide, index) => (
 				<div className="slide-wrap" key={index}>
-					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
+					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`, fontFamily: meta.font || font}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
 				</div>
 			))}
 		</aside>