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 ( {presenting ? label : 'Logo'} + {presenting && sublabel && {sublabel}} ); } 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('///', '///') .replaceAll('//', '//') @@ -17,7 +17,9 @@ export function process(text, subtext) { .replace('9)', '(9)
') .replace('10)', '(10)
'); - return `${res}${subtext ? `${subtext}` : ''}`; + return `${res}${subtext ? `${subtext}` : ''}${ + book ? `${book}` : '' + }`; } 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() { handleSearch([item])} @@ -237,7 +237,11 @@ export default function HymnalsPage() { {presenting ? ( - + ) : null} @@ -286,36 +290,11 @@ export default function HymnalsPage() { )} - - {isMP3Loaded ? ( -
- - { - setVolume(() => { - handleSave(target); - return +target.value; - }); - }} - /> - -
- ) : null} - - {isMP3Loaded ? null : ( + {!isMP3Loaded && ( +
- - Este himno NO tiene pista. - {' '} - Agrega su pista en formato .mp3 en la carpeta{' '} + Este himno NO tiene pista. Agrega su pista en + formato .mp3 en la carpeta{' '} {' '} con el nombre {current.reference}.mp3 - )} +
+ )} + + +
+ Abrir directorio de pistas} + > + + + + {isMP3Loaded && ( +
+ { + setPlaybackRate(() => { + handleSave(target); + return +target.value; + }); + if (isPlaying) { + play(); + setTrackProgress(0); + } + }} + /> + + x{Number.parseFloat(playbackRate).toFixed(2)} + +
+ )} +
- {isMP3Loaded ? ( - <> - - {isPlaying ? ( - Detener} + {isMP3Loaded && ( +
+ {isPlaying ? ( + Detener} + > + + + ) : ( + Reproducir} + > + - - ) : ( - Reproducir} - > - - - )} - - - ) : null} + + + + )} +
+ )} - - Abrir directorio de pistas} - > - -
{isMP3Loaded ? ( - <> -
- { - setPlaybackRate(() => { - handleSave(target); - return +target.value; - }); - if (isPlaying) { - play(); - setTrackProgress(0); - } - }} - /> - - x{Number.parseFloat(playbackRate).toFixed(2)} - -
- - ) : null} +
+ + { + setVolume(() => { + handleSave(target); + return +target.value; + }); + }} + /> + +
+ ) : ( +
+ )} 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 }) => (
-
+
{option.title} - {option?.tags?.split(',').map((tag) => ( + {option?.book && {option?.book}} + {/* {option?.tags?.split(',').map((tag) => ( {tag} - ))} + ))} */}
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(