From 9bd046c52ca7db452ae6ab298b82828ccace0598 Mon Sep 17 00:00:00 2001
From: Daniel McKnight <daniel@neon.ai>
Date: Fri, 6 Oct 2023 14:59:28 -0700
Subject: [PATCH] Update jsx resources

---
 .../gui/react/SYSTEM_AnimatedImageFrame.jsx   | 37 +++++++++++++++++++
 ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx  |  6 ++-
 ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx   | 14 ++++---
 3 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx

diff --git a/ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx
new file mode 100644
index 0000000..aeff226
--- /dev/null
+++ b/ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { ContentElement } from "CORE/utils";
+
+function RenderPage(props) {
+	const skill_props = props.skillState;
+	console.log(skill_props)
+	return (
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
+			<ContentElement
+				elementType="TextFrame"
+				id="title"
+				className="col-12 h2"
+				text={skill_props["title"] || null}
+				duration={2000}
+			/>
+			<ContentElement
+				elementType="ImageFrame"
+				id={"image"}
+				className="col-12"
+				src={skill_props["image"] || null}
+				duration={2000}
+			/>
+			<ContentElement
+				elementType="TextFrame"
+				className="col-12 h4"
+				text={skill_props["caption"] || null}
+				duration={2000}
+			/>
+		</div>
+	);
+}
+
+export default RenderPage
\ No newline at end of file
diff --git a/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx
index 62970f4..aeff226 100644
--- a/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx
+++ b/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx
@@ -5,7 +5,11 @@ function RenderPage(props) {
 	const skill_props = props.skillState;
 	console.log(skill_props)
 	return (
-		<div className="v-aligned-container row text-center">
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
 			<ContentElement
 				elementType="TextFrame"
 				id="title"
diff --git a/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx
index 657f864..c5b6802 100644
--- a/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx
+++ b/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx
@@ -5,8 +5,11 @@ function RenderPage(props) {
 	const skill_props = props.skillState;
 	console.log(skill_props)
 	return (
-		<div className="v-aligned-container text-center">
-			<div className="v-aligned-container text-center">
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
             <ContentElement
 				elementType={"TextFrame"}
 				id={"title"}
@@ -14,18 +17,17 @@ function RenderPage(props) {
 				text={skill_props.title}
 				display={skill_props.display}
 				duration={15000}
+				// TODO: duration from config
 			/>
-			</div>
-			<div className="v-aligned-container text-center">
 			<ContentElement
 				elementType={"TextFrame"}
 				id={"text"}
 				className={"col-12 h3"}
 				text={skill_props.text}
 				display={skill_props.display}
-				duration={15000}
+				duration={150000}
+				// TODO: duration from config
 			/>
-			</div>
 		</div>
 	);
 }