From 1d64d7a3e90bf02cd26354b891bcde6f3f754966 Mon Sep 17 00:00:00 2001
From: Christiam Mena <christiam.mena@gmail.com>
Date: Tue, 30 Apr 2024 18:37:47 -0500
Subject: [PATCH] WIP: show hymnal book ref

---
 himnario-bautista.txt                 |   2 +-
 src/components/alert/Alert.js         |   4 +-
 src/components/presenter/Presenter.js |   5 +-
 src/components/presenter/helper.js    |   6 +-
 src/components/presenter/styled.js    |  15 ++
 src/components/slider/Slider.js       |   3 +-
 src/hooks/useHymnals.js               |  12 +-
 src/pages/cast/Cast.js                |   3 +-
 src/pages/hymnals/Hymnals.js          | 230 +++++++++++++-------------
 src/pages/hymnals/renders.js          |   7 +-
 src/providers/HymnalsProvider.js      |   7 +-
 src/utils/bookmarkedItems.js          |   2 +-
 12 files changed, 162 insertions(+), 134 deletions(-)

diff --git a/himnario-bautista.txt b/himnario-bautista.txt
index d910dbd..e647bb0 100644
--- 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
index 3409582..c153f66 100644
--- 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
index c96adc3..30c1b69 100644
--- 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
index d5f7d2a..199aeeb 100644
--- 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
index 6e984f6..5a29b40 100644
--- 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
index c44bda6..4206a3c 100644
--- 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
index b2e3bc8..ce7875f 100644
--- 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
index 25715d2..880c387 100644
--- 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}
           />
         ) : (
diff --git a/src/pages/hymnals/Hymnals.js b/src/pages/hymnals/Hymnals.js
index ab4cdcb..b52d53d 100644
--- a/src/pages/hymnals/Hymnals.js
+++ b/src/pages/hymnals/Hymnals.js
@@ -60,7 +60,7 @@ export default function HymnalsPage() {
   const [search, setSearch] = useState([current]);
   const [bookmarkSort, setBookmarkSort] = useState('asc');
   const [bookmarks, setBookmarks] = useState(
-    getBookmarkedItems('anthemn', bookmarkSort)
+    getBookmarkedItems('hymnal', bookmarkSort)
   );
   const [url, setUrl] = useState(folder.getPath(current.reference));
   const [isMP3Loaded, setIsMP3Loaded] = useState(false);
@@ -118,8 +118,8 @@ export default function HymnalsPage() {
     setSearch(event);
 
     if (event.length) {
-      const [anthemn] = event;
-      setCurrent(anthemn);
+      const [hymnal] = event;
+      setCurrent(hymnal);
       typeaheadRef.current.blur();
     }
   }
@@ -130,15 +130,15 @@ export default function HymnalsPage() {
 
   const handlePrevHymnal = () => {
     if (!isPlaying) {
-      const anthemn = moveHymnal(MOVEMENT.PREV);
-      setSearch([anthemn]);
+      const hymnal = moveHymnal(MOVEMENT.PREV);
+      setSearch([hymnal]);
     }
   };
 
   const handleNextHymnal = () => {
     if (!isPlaying) {
-      const anthemn = moveHymnal(MOVEMENT.NEXT);
-      setSearch([anthemn]);
+      const hymnal = moveHymnal(MOVEMENT.NEXT);
+      setSearch([hymnal]);
     }
   };
 
@@ -164,7 +164,7 @@ export default function HymnalsPage() {
   const handleSort = () => {
     const sort = bookmarkSort === 'desc' ? 'asc' : 'desc';
     setBookmarkSort(sort);
-    setBookmarks(getBookmarkedItems('anthemn', sort));
+    setBookmarks(getBookmarkedItems('hymnal', sort));
   };
 
   useKeyUp('ArrowUp', handleNextHymnal);
@@ -224,7 +224,7 @@ export default function HymnalsPage() {
         <RecentBirthdays onClick={handleSearch} />
 
         <BookmarkList
-          type="anthemn"
+          type="hymnal"
           items={bookmarks}
           onChange={setBookmarks}
           onClick={(item) => handleSearch([item])}
@@ -237,7 +237,11 @@ export default function HymnalsPage() {
       </Sidebar>
 
       {presenting ? (
-        <Alert presenting={!showLogo} label={current?.title} />
+        <Alert
+          presenting={!showLogo}
+          label={current?.title}
+          sublabel={current?.book}
+        />
       ) : null}
 
       <Wrapper direction="column" {...settings}>
@@ -286,36 +290,11 @@ export default function HymnalsPage() {
           </div>
         )}
 
-        <Controls>
-          {isMP3Loaded ? (
-            <div className="d-flex">
-              <VolumeMute fontSize="small" />
-              <Form.Control
-                custom
-                type="range"
-                name="volume"
-                value={volume}
-                min="0"
-                max="1"
-                step="0.05"
-                className="mx-2 volume-control"
-                onChange={({ target }) => {
-                  setVolume(() => {
-                    handleSave(target);
-                    return +target.value;
-                  });
-                }}
-              />
-              <VolumeUp fontSize="small" />
-            </div>
-          ) : null}
-
-          {isMP3Loaded ? null : (
+        {!isMP3Loaded && (
+          <div className="py-2 px-3 text-white bg-gray d-flex align-items-center">
             <small>
-              <span className="text-light">
-                Este himno <strong>NO</strong> tiene pista.
-              </span>{' '}
-              Agrega su pista en formato <i>.mp3</i> en la carpeta{' '}
+              <strong>Este himno NO tiene pista.</strong> Agrega su pista en
+              formato <i>.mp3</i> en la carpeta{' '}
               <strong
                 className="pointer text-underline"
                 onClick={handleOpenPath}
@@ -324,41 +303,85 @@ export default function HymnalsPage() {
               </strong>{' '}
               con el nombre <strong>{current.reference}.mp3</strong>
             </small>
-          )}
+          </div>
+        )}
+
+        <Controls>
+          <div className="d-flex align-items-center">
+            <OverlayTrigger
+              placement="top"
+              overlay={<Tooltip>Abrir directorio de pistas</Tooltip>}
+            >
+              <Button
+                className="mr-2"
+                variant="secondary"
+                onClick={handleOpenPath}
+              >
+                <FolderCopy />
+              </Button>
+            </OverlayTrigger>
+
+            {isMP3Loaded && (
+              <div className="d-flex align-items-center">
+                <Form.Control
+                  custom
+                  type="range"
+                  name="playbackRate"
+                  value={playbackRate}
+                  min="0.5"
+                  max="2"
+                  step="0.05"
+                  style={{ width: '80px' }}
+                  className="mx-2 volume-control"
+                  onChange={({ target }) => {
+                    setPlaybackRate(() => {
+                      handleSave(target);
+                      return +target.value;
+                    });
+                    if (isPlaying) {
+                      play();
+                      setTrackProgress(0);
+                    }
+                  }}
+                />
+                <small className="text-light">
+                  x{Number.parseFloat(playbackRate).toFixed(2)}
+                </small>
+              </div>
+            )}
+          </div>
 
           <div className="d-flex">
-            {isMP3Loaded ? (
-              <>
-                <ButtonGroup className="mx-2">
-                  {isPlaying ? (
-                    <OverlayTrigger
-                      placement="top"
-                      overlay={<Tooltip>Detener</Tooltip>}
+            {isMP3Loaded && (
+              <div className="mr-2">
+                {isPlaying ? (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={<Tooltip>Detener</Tooltip>}
+                  >
+                    <Button onClick={() => stop()} variant="light">
+                      <Stop />
+                    </Button>
+                  </OverlayTrigger>
+                ) : (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={<Tooltip>Reproducir</Tooltip>}
+                  >
+                    <Button
+                      onClick={() => {
+                        play();
+                        startTimer();
+                        sound?.seek(trackProgress);
+                      }}
+                      variant="secondary"
                     >
-                      <Button onClick={() => stop()} variant="light">
-                        <Stop />
-                      </Button>
-                    </OverlayTrigger>
-                  ) : (
-                    <OverlayTrigger
-                      placement="top"
-                      overlay={<Tooltip>Reproducir</Tooltip>}
-                    >
-                      <Button
-                        onClick={() => {
-                          play();
-                          startTimer();
-                          sound?.seek(trackProgress);
-                        }}
-                        variant="secondary"
-                      >
-                        <PlayArrow />
-                      </Button>
-                    </OverlayTrigger>
-                  )}
-                </ButtonGroup>
-              </>
-            ) : null}
+                      <PlayArrow />
+                    </Button>
+                  </OverlayTrigger>
+                )}
+              </div>
+            )}
 
             <OverlayTrigger
               placement="top"
@@ -397,51 +420,32 @@ export default function HymnalsPage() {
                 <LastPage />
               </Button>
             </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="top"
-              overlay={<Tooltip>Abrir directorio de pistas</Tooltip>}
-            >
-              <Button
-                className="ml-2"
-                variant="secondary"
-                onClick={handleOpenPath}
-              >
-                <FolderCopy />
-              </Button>
-            </OverlayTrigger>
           </div>
 
           {isMP3Loaded ? (
-            <>
-              <div className="d-flex align-items-center">
-                <Form.Control
-                  custom
-                  type="range"
-                  name="playbackRate"
-                  value={playbackRate}
-                  min="0.5"
-                  max="2"
-                  step="0.05"
-                  style={{ width: '80px' }}
-                  className="mx-2 volume-control"
-                  onChange={({ target }) => {
-                    setPlaybackRate(() => {
-                      handleSave(target);
-                      return +target.value;
-                    });
-                    if (isPlaying) {
-                      play();
-                      setTrackProgress(0);
-                    }
-                  }}
-                />
-                <small className="text-light">
-                  x{Number.parseFloat(playbackRate).toFixed(2)}
-                </small>
-              </div>
-            </>
-          ) : null}
+            <div className="d-flex">
+              <VolumeMute fontSize="small" />
+              <Form.Control
+                custom
+                type="range"
+                name="volume"
+                value={volume}
+                min="0"
+                max="1"
+                step="0.05"
+                className="mx-2 volume-control"
+                onChange={({ target }) => {
+                  setVolume(() => {
+                    handleSave(target);
+                    return +target.value;
+                  });
+                }}
+              />
+              <VolumeUp fontSize="small" />
+            </div>
+          ) : (
+            <div />
+          )}
         </Controls>
       </Wrapper>
 
diff --git a/src/pages/hymnals/renders.js b/src/pages/hymnals/renders.js
index c4fe1f7..8e16c5c 100644
--- a/src/pages/hymnals/renders.js
+++ b/src/pages/hymnals/renders.js
@@ -2,13 +2,14 @@ import { Highlighter } from 'react-bootstrap-typeahead';
 
 export const finderRender = (option, { text }) => (
   <div className="my-2">
-    <div className="d-flex">
+    <div className="d-flex align-items-center mb-1">
       <strong className="fs-lg">{option.title}</strong>
-      {option?.tags?.split(',').map((tag) => (
+      {option?.book && <small className="tag mb-0 ml-2">{option?.book}</small>}
+      {/* {option?.tags?.split(',').map((tag) => (
         <small key={tag} className="tag mb-0 ml-2">
           {tag}
         </small>
-      ))}
+      ))} */}
     </div>
 
     <Highlighter search={text}>
diff --git a/src/providers/HymnalsProvider.js b/src/providers/HymnalsProvider.js
index 114f272..47be320 100644
--- a/src/providers/HymnalsProvider.js
+++ b/src/providers/HymnalsProvider.js
@@ -120,6 +120,7 @@ function HymnalsProvider({ children }) {
           stanzas,
           tags,
           authors,
+          book,
         },
         index
       ) => {
@@ -142,7 +143,8 @@ function HymnalsProvider({ children }) {
             id: `${id}_${slideIndex}`,
             title: `${isNotHymnal ? `Coro #${number}` : `Himno #${number}`}`,
             text: title,
-            subtext: authors,
+            // subtext: authors,
+            book: book,
             index: slideIndex++,
           })
         );
@@ -184,7 +186,7 @@ function HymnalsProvider({ children }) {
           number,
           title: `#${number} ${title}`,
           name: title,
-          type: 'anthemn',
+          type: 'hymnal',
           slides,
           text,
           tags: tags?.toLowerCase(),
@@ -192,6 +194,7 @@ function HymnalsProvider({ children }) {
           length: slides.length,
           firstSlide: slides[0],
           lastSlide: slides[slides.length - 1],
+          book,
         };
       }
     );
diff --git a/src/utils/bookmarkedItems.js b/src/utils/bookmarkedItems.js
index a94a31a..4284949 100644
--- a/src/utils/bookmarkedItems.js
+++ b/src/utils/bookmarkedItems.js
@@ -1,6 +1,6 @@
 import { Storage } from './storage';
 
-export const getBookmarkedItems = (view = 'anthemn', order = 'desc') => {
+export const getBookmarkedItems = (view = 'hymnal', order = 'desc') => {
   return Storage.getAll(order)
     .filter(({ key }) => key.includes(view) && key.includes('bookmarked'))
     .sort(