From 4e36e58a215908053c9645b253571c36e113cc71 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 20 Apr 2021 23:50:49 +0200
Subject: [PATCH] feat: lower third
---
client/src/App.css | 4 +-
client/src/App.jsx | 9 +-
client/src/features/editors/Editor.module.css | 3 +-
client/src/features/viewers/lower/Lower.jsx | 144 ++++++++++++++++++
.../features/viewers/lower/Lower.module.css | 89 +++++++++++
.../presenter/PresenterView.module.css | 4 +-
package.json | 5 +
yarn.lock | 63 ++++++++
8 files changed, 313 insertions(+), 8 deletions(-)
create mode 100644 client/src/features/viewers/lower/Lower.jsx
create mode 100644 client/src/features/viewers/lower/Lower.module.css
create mode 100644 package.json
create mode 100644 yarn.lock
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}
+
+ )}
+
+