From 3e979c4005340571320da4d4a095a973b900f7a4 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Tue, 16 May 2023 12:50:53 +0200 Subject: [PATCH] Small fixes --- .env.example | 5 ++--- src/components/Chip.tsx | 2 +- src/components/ColoredSvg.tsx | 2 +- src/components/Img.tsx | 2 +- src/components/Inputs/ButtonGroup.tsx | 12 ++++++++++-- src/helpers/formatters.ts | 2 +- src/helpers/libraryItem.ts | 2 +- src/helpers/videos.ts | 4 ++-- src/hooks/useFullscreen.ts | 2 +- src/hooks/useOnResize.ts | 2 +- src/hooks/useOnScroll.ts | 2 +- src/hooks/useScrollTopOnChange.ts | 2 +- src/pages/contents/[slug].tsx | 3 ++- src/pages/library/[slug]/reader.tsx | 2 ++ src/styles/rc-slider.css | 2 +- 15 files changed, 28 insertions(+), 18 deletions(-) diff --git a/.env.example b/.env.example index 2ca96f3..e0a9e51 100755 --- a/.env.example +++ b/.env.example @@ -26,9 +26,8 @@ SMTP_PASSWORD=mypassword123 NEXT_PUBLIC_URL_CMS=https://url-to.strapi-accords-library.com NEXT_PUBLIC_URL_IMG=https://url-to.img-accords-library.com -NEXT_PUBLIC_URL_SELF=https://url-to-front-accords-library.com -NEXT_PUBLIC_URL_SCANS=https://url-to.scans-accords-library.com/ -NEXT_PUBLIC_URL_VIDEOS=https://url-to.videos-accords-library.com/ +NEXT_PUBLIC_URL_SELF=https://url-to.front-accords-library.com +NEXT_PUBLIC_URL_ASSETS=https://url-to.assets-accords-library.com ## MEILISEARCH diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index e7d2299..940e9cd 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -16,7 +16,7 @@ export const Chip = ({ className, text }: Props): JSX.Element => (
{text} diff --git a/src/components/ColoredSvg.tsx b/src/components/ColoredSvg.tsx index 354f964..bc4512f 100644 --- a/src/components/ColoredSvg.tsx +++ b/src/components/ColoredSvg.tsx @@ -2,7 +2,7 @@ import { cJoin } from "helpers/className"; /* * ╭─────────────╮ - * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + * ────────────────────────────────────────╯ COMPONENT ╰────────────────────────────────────────── */ interface Props { diff --git a/src/components/Img.tsx b/src/components/Img.tsx index 27c6df6..405c345 100644 --- a/src/components/Img.tsx +++ b/src/components/Img.tsx @@ -4,7 +4,7 @@ import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img"; /* * ╭─────────────╮ - * ────────────────────────────────────────╯ CONSTANTS ╰────────────────────────────────────────── + * ────────────────────────────────────────╯ COMPONENT ╰────────────────────────────────────────── */ interface Props diff --git a/src/components/Inputs/ButtonGroup.tsx b/src/components/Inputs/ButtonGroup.tsx index 71febad..d6c691b 100644 --- a/src/components/Inputs/ButtonGroup.tsx +++ b/src/components/Inputs/ButtonGroup.tsx @@ -10,9 +10,10 @@ import { isDefined } from "helpers/asserts"; * ───────────────────────────────────────╯ COMPONENT ╰─────────────────────────────────────────── */ -interface Props { +export interface ButtonGroupProps { className?: string; buttonsProps: (Parameters[0] & { + visible?: boolean; tooltip?: React.ReactNode | null | undefined; tooltipPlacement?: Placement; })[]; @@ -20,7 +21,14 @@ interface Props { // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ -export const ButtonGroup = ({ buttonsProps, className }: Props): JSX.Element => ( +export const ButtonGroup = ({ buttonsProps, className }: ButtonGroupProps): JSX.Element => ( + button.visible !== false)} + className={className} + /> +); + +const FilteredButtonGroup = ({ buttonsProps, className }: ButtonGroupProps) => (
{buttonsProps.map((buttonProps, index) => ( { let result = ""; if (hours) result += `${hours.toString().padStart(2, "0")}:`; result += `${minutes.toString().padStart(2, "0")}:`; - result += remainingSeconds.toString().padStart(2, "0"); + result += Math.floor(remainingSeconds).toString().padStart(2, "0"); return result; }; diff --git a/src/helpers/libraryItem.ts b/src/helpers/libraryItem.ts index 9415855..323eb42 100644 --- a/src/helpers/libraryItem.ts +++ b/src/helpers/libraryItem.ts @@ -15,4 +15,4 @@ export const isUntangibleGroupItem = ( metadata.subtype?.data?.attributes?.slug === "relation-set"); export const getScanArchiveURL = (slug: string): string => - `${process.env.NEXT_PUBLIC_URL_SCANS}/${slug}.zip`; + `${process.env.NEXT_PUBLIC_URL_ASSETS}/library/scans/${slug}.zip`; diff --git a/src/helpers/videos.ts b/src/helpers/videos.ts index 68292f2..ea3eb97 100644 --- a/src/helpers/videos.ts +++ b/src/helpers/videos.ts @@ -1,5 +1,5 @@ export const getVideoThumbnailURL = (uid: string): string => - `${process.env.NEXT_PUBLIC_URL_VIDEOS}/${uid}.webp`; + `${process.env.NEXT_PUBLIC_URL_ASSETS}/videos/${uid}.webp`; export const getVideoFile = (uid: string): string => - `${process.env.NEXT_PUBLIC_URL_VIDEOS}/${uid}.mp4`; + `${process.env.NEXT_PUBLIC_URL_ASSETS}/videos/${uid}.mp4`; diff --git a/src/hooks/useFullscreen.ts b/src/hooks/useFullscreen.ts index ebed399..de34381 100644 --- a/src/hooks/useFullscreen.ts +++ b/src/hooks/useFullscreen.ts @@ -13,7 +13,7 @@ export const useFullscreen = ( const [isFullscreen, setIsFullscreen] = useState(false); const isClient = useIsClient(); - const elem = isClient ? document.querySelector(`#${id}`) : null; + const elem = isClient ? document.querySelector(`#${CSS.escape(id)}`) : null; const requestFullscreen = useCallback(async () => elem?.requestFullscreen(), [elem]); const exitFullscreen = useCallback( diff --git a/src/hooks/useOnResize.ts b/src/hooks/useOnResize.ts index e295890..3be54da 100644 --- a/src/hooks/useOnResize.ts +++ b/src/hooks/useOnResize.ts @@ -13,7 +13,7 @@ export const useOnResize = ( useEffect(() => { logger.log(`Creating observer for ${id}`); - const elem = isClient ? document.querySelector(`#${id}`) : null; + const elem = isClient ? document.querySelector(`#${CSS.escape(id)}`) : null; const ro = new ResizeObserver((resizeObserverEntry) => { const entry = resizeObserverEntry[0]; if (isDefined(entry)) { diff --git a/src/hooks/useOnScroll.ts b/src/hooks/useOnScroll.ts index 7d9d480..867c452 100644 --- a/src/hooks/useOnScroll.ts +++ b/src/hooks/useOnScroll.ts @@ -4,7 +4,7 @@ import { Ids } from "types/ids"; export const useOnScroll = (id: Ids, onScroll: (scroll: number) => void): void => { const isClient = useIsClient(); - const elem = isClient ? document.querySelector(`#${id}`) : null; + const elem = isClient ? document.querySelector(`#${CSS.escape(id)}`) : null; const listener = useCallback(() => { if (elem?.scrollTop) { onScroll(elem.scrollTop); diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts index f77610c..bc35052 100644 --- a/src/hooks/useScrollTopOnChange.ts +++ b/src/hooks/useScrollTopOnChange.ts @@ -9,7 +9,7 @@ export const useScrollTopOnChange = (id: Ids, deps: DependencyList, enabled = tr useEffect(() => { if (enabled) { logger.log("Change detected. Scrolling to top"); - document.querySelector(`#${id}`)?.scrollTo({ top: 0, behavior: "smooth" }); + document.querySelector(`#${CSS.escape(id)}`)?.scrollTo({ top: 0, behavior: "smooth" }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [id, ...deps, enabled]); diff --git a/src/pages/contents/[slug].tsx b/src/pages/contents/[slug].tsx index f4c4222..94390ce 100644 --- a/src/pages/contents/[slug].tsx +++ b/src/pages/contents/[slug].tsx @@ -409,6 +409,7 @@ const RelatedContentsSection = ({ open={isOpened} onClosing={() => setOpened(false)} onOpening={() => setOpened(true)} + overflowWhenOpen="visible" trigger={

{title}

@@ -416,7 +417,7 @@ const RelatedContentsSection = ({
} contentInnerClassName={cJoin( - cIf(contents.length > 1, "px-4 py-10", "px-4 py-6"), + cIf(contents.length > 1, "py-10", "py-6"), "flex w-full flex-wrap place-content-center items-start gap-x-6 gap-y-8" )} easing="ease-in-out" diff --git a/src/pages/library/[slug]/reader.tsx b/src/pages/library/[slug]/reader.tsx index e788466..eeec3dc 100644 --- a/src/pages/library/[slug]/reader.tsx +++ b/src/pages/library/[slug]/reader.tsx @@ -520,11 +520,13 @@ const LibrarySlug = ({