diff --git a/client/src/App.css b/client/src/App.css
index 7ae3a11b8..27b6f4c02 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -4,6 +4,8 @@
}
.App {
- background: linear-gradient(90deg, #202020 0%, #121212 100%);
+ margin: 0px auto;
+ overflow: hidden;
+ background-color: rgba(0, 0, 0, 0);
height: 100vh;
}
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 20d7f2d82..af3cd20d5 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -8,6 +8,7 @@ import SocketProvider from './app/context/socketContext';
import PresenterSimple from './features/viewers/presenter/PresenterSimple';
import StageManager from './features/viewers/backstage/StageManager';
import withSocket from './features/viewers/ViewWrapper';
+import Lower from './features/viewers/lower/Lower';
const queryClient = new QueryClient();
@@ -15,20 +16,20 @@ const SDefault = withSocket(DefaultPresenter);
const SSpeaker = withSocket(PresenterView);
const SSpeakerSimple = withSocket(PresenterSimple);
const SStageManager = withSocket(StageManager);
+const SLowerThird = withSocket(Lower);
function App() {
return (
-
);
diff --git a/client/src/features/editors/Editor.module.css b/client/src/features/editors/Editor.module.css
index 38c0d01dd..0462d6261 100644
--- a/client/src/features/editors/Editor.module.css
+++ b/client/src/features/editors/Editor.module.css
@@ -1,5 +1,6 @@
.mainContainer {
- width: 95%;
+ background: linear-gradient(90deg, #202020 0%, #121212 100%);
+ width: 100%;
margin: auto;
height: 95vh;
color: #fffd;
diff --git a/client/src/features/viewers/lower/Lower.jsx b/client/src/features/viewers/lower/Lower.jsx
new file mode 100644
index 000000000..2cdd68135
--- /dev/null
+++ b/client/src/features/viewers/lower/Lower.jsx
@@ -0,0 +1,144 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import style from './Lower.module.css';
+
+export default function Lower(props) {
+ const { pres, publ, lower, title, time, events, selectedId, general } = props;
+
+ // getting config from URL
+ // like http://localhost:3000/lower?bg=ff2&text=f00&size=0.6&transition=5
+ let params = new URLSearchParams(props.location.search);
+
+ const preset = params.get('preset') ? params.get('preset') : 1;
+ const size = params.get('size') ? params.get('size') : 1;
+ const transitionIn = params.get('transition') ? params.get('transition') : 3;
+ const textColour = params.get('bg') ? `#${params.get('text')}` : '#fffffa';
+ const bgColour = params.get('bg') ? `#${params.get('bg')}` : '#00000033';
+ const key = params.get('key') ? `#${params.get('key')}` : 'null';
+
+ // Format messages
+ const showLower = lower.text !== '' && lower.visible;
+
+ // transition segments
+ const eight = transitionIn / 8;
+ const quarter = transitionIn / 4;
+ const third = transitionIn / 3;
+ const half = transitionIn / 2;
+
+ // motion
+ const lowerThirdVariants = {
+ hidden: {
+ opacity: 0,
+ },
+ visible: {
+ opacity: 1,
+ transition: {
+ duration: third,
+ },
+ },
+ };
+
+ const titleContainerVariants = {
+ hidden: {
+ left: -1000,
+ },
+ visible: {
+ left: 0,
+ transition: {
+ duration: third,
+ },
+ },
+ };
+
+ const titleVariants = {
+ hidden: {
+ opacity: 0,
+ },
+ visible: {
+ opacity: 1,
+ transition: {
+ delay: quarter,
+ duration: half,
+ },
+ },
+ };
+
+ const subtitleContainerVariants = {
+ hidden: {
+ left: -1000,
+ },
+ visible: {
+ left: 0,
+ transition: {
+ delay: eight,
+ duration: third,
+ },
+ },
+ };
+
+ const subtitleVariants = {
+ hidden: {
+ opacity: 0,
+ },
+ visible: {
+ opacity: 1,
+ transition: {
+ delay: third,
+ duration: third * 2,
+ },
+ },
+ };
+
+ return (
+
+
+
+
+ {title.titleNow}
+
+
+
+
+
+
+ {title.presenterNow}
+
+
+
+
+
+ {showLower && (
+
+ {lower.text}
+
+ )}
+
+