Small fixes

.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_SELF=https://url-to.front-accords-library.com
-NEXT_PUBLIC_URL_SCANS=https://url-to.scans-accords-library.com/
+NEXT_PUBLIC_URL_ASSETS=https://url-to.assets-accords-library.com
-NEXT_PUBLIC_URL_VIDEOS=https://url-to.videos-accords-library.com/
 
 ## MEILISEARCH
 

src/components/Chip.tsx

@@ -16,7 +16,7 @@ export const Chip = ({ className, text }: Props): JSX.Element => (
   <div
     className={cJoin(
       `grid place-content-center place-items-center whitespace-nowrap rounded-full border
-      border-black/70 text-black/70 px-1.5 pb-[0.14rem] text-xs`,
+      border-black/70 px-1.5 pb-[0.14rem] text-xs text-black/70`,
       className
     )}>
     {text}

src/components/ColoredSvg.tsx

@@ -2,7 +2,7 @@ import { cJoin } from "helpers/className";
 
 /*
  *                                         ╭─────────────╮
- * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
+ * ────────────────────────────────────────╯  COMPONENT  ╰──────────────────────────────────────────
  */
 
 interface Props {

src/components/Img.tsx

@@ -4,7 +4,7 @@ import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
 
 /*
  *                                         ╭─────────────╮
- * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
+ * ────────────────────────────────────────╯  COMPONENT  ╰──────────────────────────────────────────
  */
 
 interface Props

src/components/Inputs/ButtonGroup.tsx

@@ -10,9 +10,10 @@ import { isDefined } from "helpers/asserts";
  * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
  */
 
-interface Props {
+export interface ButtonGroupProps {
   className?: string;
   buttonsProps: (Parameters<typeof Button>[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 => (
+  <FilteredButtonGroup
+    buttonsProps={buttonsProps.filter((button) => button.visible !== false)}
+    className={className}
+  />
+);
+
+const FilteredButtonGroup = ({ buttonsProps, className }: ButtonGroupProps) => (
   <div className={cJoin("grid grid-flow-col", className)}>
     {buttonsProps.map((buttonProps, index) => (
       <ConditionalWrapper

src/helpers/formatters.ts

@@ -215,7 +215,7 @@ export const prettyDuration = (seconds: number): string => {
   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;
 };
 

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`;

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`;

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(

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)) {

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);

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]);

src/pages/contents/[slug].tsx

@@ -409,6 +409,7 @@ const RelatedContentsSection = ({
       open={isOpened}
       onClosing={() => setOpened(false)}
       onOpening={() => setOpened(true)}
+      overflowWhenOpen="visible"
       trigger={
         <div className="flex place-content-center place-items-center gap-4">
           <h2 className="text-center text-2xl">{title}</h2>
@@ -416,7 +417,7 @@ const RelatedContentsSection = ({
         </div>
       }
       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"

src/pages/library/[slug]/reader.tsx

@@ -520,11 +520,13 @@ const LibrarySlug = ({
           <div className="flex gap-2">
             <Button
               icon={isGalleryMode ? "expand_more" : "expand_less"}
+              active={isGalleryMode}
               onClick={() => setIsGalleryMode((current) => !current)}
               size="small"
             />
             <Button
               icon={isFullscreen ? "fullscreen_exit" : "fullscreen"}
+              active={isFullscreen}
               onClick={toggleFullscreen}
               size="small"
             />

src/styles/rc-slider.css

@@ -16,7 +16,7 @@
   width: 100%;
 }
 .rc-slider-track {
-  @apply h-2 rounded-full bg-dark/20 bg-mid shadow-inner-sm shadow-shade;
+  @apply h-2 rounded-full bg-dark/50 shadow-inner-sm shadow-shade;
   position: absolute;
 }
 .rc-slider-handle {