WIP: show hymnal book ref

xtiam57 · Apr 30, 2024 · 1d64d7a · 1d64d7a
1 parent 939604c
commit 1d64d7a
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 134 deletions.
diff --git a/himnario-bautista.txt b/himnario-bautista.txt
@@ -14205,7 +14205,7 @@ Hmrio. Bautista
 
 ---
 
-## 509. FELIZ CUMPLEAÑOS
+## 509. FELIZ, FELIZ CUMPLEAÑOS
 ***
 1) Feliz, feliz cumpleaños
 deseamos para ti,

diff --git a/src/components/alert/Alert.js b/src/components/alert/Alert.js
@@ -1,10 +1,10 @@
-import React from 'react';
 import { AlertStyled } from './styled';
 
-export function Alert({ presenting = false, label = '' }) {
+export function Alert({ presenting = false, label = '', sublabel = '' }) {
   return (
     <AlertStyled presenting={presenting}>
       <strong>{presenting ? label : 'Logo'}</strong>
+      {presenting && sublabel && <span className="d-block">{sublabel}</span>}
     </AlertStyled>
   );
 }
diff --git a/src/components/presenter/Presenter.js b/src/components/presenter/Presenter.js
@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { generateGUID } from 'utils';
 import { process, resizeText } from './helper';
 import { PresenterStyled } from './styled';
@@ -14,6 +14,7 @@ export function Presenter({
   id = generateGUID(),
   text = '',
   subtext = null,
+  book = '',
   ...rest
 }) {
   const handleFontScale = () => {
@@ -39,7 +40,7 @@ export function Presenter({
           key={id}
           id="presenter-text"
           dangerouslySetInnerHTML={{
-            __html: process(text, subtext),
+            __html: process(text, subtext, book),
           }}
           {...textMotion}
         />

diff --git a/src/components/presenter/helper.js b/src/components/presenter/helper.js
@@ -1,4 +1,4 @@
-export function process(text, subtext) {
+export function process(text, subtext, book) {
   const res = text
     .replaceAll('///', '<b>///</b>')
     .replaceAll('//', '<b>//</b>')
@@ -17,7 +17,9 @@ export function process(text, subtext) {
     .replace('9)', '<strong class="fs-title">(9)</strong><br/> ')
     .replace('10)', '<strong class="fs-title">(10)</strong><br/> ');
 
-  return `${res}${subtext ? `<small>${subtext}</small>` : ''}`;
+  return `${res}${subtext ? `<small>${subtext}</small>` : ''}${
+    book ? `<small class="book">${book}</small>` : ''
+  }`;
 }
 
 const isOverflown = ({ clientHeight, scrollHeight }) => {

diff --git a/src/components/presenter/styled.js b/src/components/presenter/styled.js
@@ -69,6 +69,21 @@ export const PresenterStyled = styled.section`
       margin-top: 1rem;
     }
 
+    small.book {
+      display: block;
+      color: ${({ subtextcolor }) => subtextcolor || '#007bff'};
+      border: solid 2px ${({ subtextcolor }) => subtextcolor || '#007bff'};
+      font-size: 0.42em;
+      margin-top: 1rem;
+      margin-left: auto;
+      margin-right: auto;
+      line-height: 1;
+      padding: 0.5em;
+      width: fit-content;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
     div.opts {
       font-size: 1.1em;
       color: ${({ optionscolor }) => optionscolor || '#ffff00'};

diff --git a/src/components/slider/Slider.js b/src/components/slider/Slider.js
@@ -26,7 +26,7 @@ export const Slider = forwardRef(
     },
     ref
   ) => {
-    const type = wrapper?.type;
+    const { type } = wrapper;
     const [, setMessage] = useBroadcast(BROADCAST.INITIAL_CHANNEL);
     const [settings] = useSettings(BROADCAST.INITIAL_SETTINGS);
 
@@ -92,6 +92,7 @@ export const Slider = forwardRef(
           id={slide?.id || slide?.index}
           text={slide?.text}
           subtext={slide?.subtext}
+          book={slide?.book}
           bg={slide?.bg}
           grayscale={grayscale}
           leftshadow={loop ? true : slide?.index !== 0}

diff --git a/src/hooks/useHymnals.js b/src/hooks/useHymnals.js
@@ -8,15 +8,15 @@ export function useHymnals() {
   const [move] = useIterate(current, hymnals);
 
   const moveToNextHymnal = () => {
-    const anthemnToGo = move(MOVEMENT.NEXT);
-    setCurrent(anthemnToGo);
-    return anthemnToGo;
+    const hymnalToGo = move(MOVEMENT.NEXT);
+    setCurrent(hymnalToGo);
+    return hymnalToGo;
   };
 
   const moveToPrevHymnal = () => {
-    const anthemnToGo = move(MOVEMENT.PREV);
-    setCurrent(anthemnToGo);
-    return anthemnToGo;
+    const hymnalToGo = move(MOVEMENT.PREV);
+    setCurrent(hymnalToGo);
+    return hymnalToGo;
   };
 
   const moveHymnal = (action = MOVEMENT.NEXT) => {

diff --git a/src/pages/cast/Cast.js b/src/pages/cast/Cast.js
@@ -27,7 +27,8 @@ export default function CastPage() {
             id={message.id}
             text={message.text}
             subtext={message.subtext}
-            bg={message?.bg}
+            book={message.book}
+            bg={message.bg}
             {...settings}
           />
         ) : (