-
+
+
+ {selectedTranslation && (
+
+
{langui.status}:
+
+
+
+
)}
- {displayTitle && (
-
{title}
+
+ {post.authors && post.authors.data.length > 0 && (
+
+
{"Authors"}:
+
+ {filterHasAttributes(post.authors.data, ["id", "attributes"] as const).map(
+ (author) => (
+
+
+
+ )
+ )}
+
+
)}
)}
- {prependBody}
- {body && (
- <>
- {displayThumbnailHeader &&
}
-
-
- )}
+ {displayToc &&
}
+
+ ) : undefined;
- {appendBody}
-
- ),
- [
- LanguageSwitcher,
- appendBody,
- body,
- displayLanguageSwitcher,
- displayThumbnailHeader,
- displayTitle,
- excerpt,
- languageSwitcherProps,
- post.categories,
- prependBody,
- returnHref,
- returnTitle,
- thumbnail,
- title,
- ]
+ const contentPanel = (
+
+ {returnHref && returnTitle && (
+
+ )}
+
+ {displayThumbnailHeader ? (
+ <>
+ 1 ? (
+
+ ) : undefined
+ }
+ />
+
+ ) : (
+ <>
+ {displayLanguageSwitcher && (
+
+
+
+ )}
+ {displayTitle && (
+ {title}
+ )}
+
+ )}
+
+ {prependBody}
+ {body && (
+ <>
+ {displayThumbnailHeader && }
+
+
+ )}
+
+ {appendBody}
+
);
return
;
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 367bcc8..bdb91bc 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
import { useRouter } from "next/router";
import { Chip } from "./Chip";
import { Ico, Icon } from "./Ico";
@@ -75,40 +75,37 @@ export const PreviewCard = ({
const isHoverable = useDeviceSupportsHover();
const router = useRouter();
- const metadataJSX = useMemo(
- () => (
- <>
- {metadata && (metadata.releaseDate || metadata.price) && (
-
- {metadata.releaseDate && (
-
-
- {prettyDate(metadata.releaseDate, router.locale)}
-
- )}
- {metadata.price && (
-
-
- {prettyPrice(metadata.price, currencies, currency)}
-
- )}
- {metadata.views && (
-
-
- {prettyShortenNumber(metadata.views)}
-
- )}
- {metadata.author && (
-
-
- {metadata.author}
-
- )}
-
- )}
-
- ),
- [currencies, currency, metadata, router.locale]
+ const metadataJSX = (
+ <>
+ {metadata && (metadata.releaseDate || metadata.price) && (
+
+ {metadata.releaseDate && (
+
+
+ {prettyDate(metadata.releaseDate, router.locale)}
+
+ )}
+ {metadata.price && (
+
+
+ {prettyPrice(metadata.price, currencies, currency)}
+
+ )}
+ {metadata.views && (
+
+
+ {prettyShortenNumber(metadata.views)}
+
+ )}
+ {metadata.author && (
+
+
+ {metadata.author}
+
+ )}
+
+ )}
+
);
return (
diff --git a/src/components/SmartList.tsx b/src/components/SmartList.tsx
index e081d45..b994936 100644
--- a/src/components/SmartList.tsx
+++ b/src/components/SmartList.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import naturalCompare from "string-natural-compare";
import { Chip } from "./Chip";
@@ -87,17 +87,11 @@ export const SmartList =
({
return items;
}, [items, searchingBy, searchingCaseInsensitive, searchingTerm]);
- const filteredItems = useMemo(() => {
- const filteredBySearch = searchFilter();
- return filteredBySearch.filter(filteringFunction);
- }, [filteringFunction, searchFilter]);
+ const filteredItems = searchFilter().filter(filteringFunction);
- const sortedItem = useMemo(
- () => filteredItems.sort(sortingFunction),
- [filteredItems, sortingFunction]
- );
+ const sortedItem = filteredItems.sort(sortingFunction);
- const groups = useMemo(() => {
+ const groups = (() => {
const memo: Group[] = [];
sortedItem.forEach((item) => {
@@ -116,9 +110,9 @@ export const SmartList = ({
});
});
return memo.sort(groupSortingFunction);
- }, [groupCountingFunction, groupSortingFunction, groupingFunction, sortedItem]);
+ })();
- const pages = useMemo(() => {
+ const pages = (() => {
const memo: Group[][] = [];
let currentPage: Group[] = [];
let remainingSlots = paginationItemPerPage;
@@ -162,7 +156,7 @@ export const SmartList = ({
}
return memo;
- }, [groups, paginationItemPerPage]);
+ })();
useHotkeys("left", () => setPage((current) => current - 1), { enabled: page > 0 });
useHotkeys("right", () => setPage((current) => current + 1), {
diff --git a/src/contexts/settings.ts b/src/contexts/settings.ts
index fe98769..d505a29 100644
--- a/src/contexts/settings.ts
+++ b/src/contexts/settings.ts
@@ -84,6 +84,7 @@ export const useSettings = (): void => {
useEffect(() => {
if (preferredLanguages.length === 0) {
if (isDefinedAndNotEmpty(router.locale) && router.locales) {
+ console.log(router.locale, getDefaultPreferredLanguages(router.locale, router.locales));
setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
}
} else if (router.locale !== preferredLanguages[0]) {
diff --git a/src/contexts/webkitFixes.ts b/src/contexts/webkitFixes.ts
new file mode 100644
index 0000000..fdaae91
--- /dev/null
+++ b/src/contexts/webkitFixes.ts
@@ -0,0 +1,18 @@
+import { useLayoutEffect } from "react";
+import { isDefined } from "helpers/others";
+import { useIsWebkit } from "hooks/useIsWebkit";
+
+export const useWebkitFixes = (): void => {
+ const isWebkit = useIsWebkit();
+
+ useLayoutEffect(() => {
+ const next = document.getElementById("__next");
+ if (isDefined(next)) {
+ if (isWebkit) {
+ next.classList.add("webkit-fixes");
+ } else {
+ next.classList.remove("webkit-fixes");
+ }
+ }
+ }, [isWebkit]);
+};
diff --git a/src/hooks/useFullscreen.ts b/src/hooks/useFullscreen.ts
index 1e2f740..a9fd4a0 100644
--- a/src/hooks/useFullscreen.ts
+++ b/src/hooks/useFullscreen.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useIsClient } from "usehooks-ts";
import { isDefined } from "helpers/others";
@@ -13,7 +13,7 @@ export const useFullscreen = (
const [isFullscreen, setIsFullscreen] = useState(false);
const isClient = useIsClient();
- const elem = useMemo(() => (isClient ? document.querySelector(`#${id}`) : null), [id, isClient]);
+ const elem = isClient ? document.querySelector(`#${id}`) : null;
const requestFullscreen = useCallback(() => elem?.requestFullscreen(), [elem]);
const exitFullscreen = useCallback(
diff --git a/src/hooks/useIntersectionList.ts b/src/hooks/useIntersectionList.ts
index 65ac24c..04e44a4 100644
--- a/src/hooks/useIntersectionList.ts
+++ b/src/hooks/useIntersectionList.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { throttle } from "throttle-debounce";
import { useIsClient } from "usehooks-ts";
import { useOnScroll } from "./useOnScroll";
@@ -10,10 +10,7 @@ export const useIntersectionList = (ids: string[]): number => {
const isClient = useIsClient();
- const contentPanel = useMemo(
- () => (isClient ? document.getElementById(Ids.ContentPanel) : null),
- [isClient]
- );
+ const contentPanel = isClient ? document.getElementById(Ids.ContentPanel) : null;
const refreshCurrentIntersection = useCallback(
(scroll: number) => {
diff --git a/src/hooks/useIsWebkit.ts b/src/hooks/useIsWebkit.ts
new file mode 100644
index 0000000..5d69454
--- /dev/null
+++ b/src/hooks/useIsWebkit.ts
@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import UAParser from "ua-parser-js";
+import { useIsClient } from "usehooks-ts";
+
+export const useIsWebkit = (): boolean => {
+ const isClient = useIsClient();
+ return useMemo(() => {
+ if (isClient) {
+ const parser = new UAParser();
+ return parser.getBrowser().name === "Safari" || parser.getOS().name === "iOS";
+ }
+ return false;
+ }, [isClient]);
+};
diff --git a/src/hooks/useOnScroll.ts b/src/hooks/useOnScroll.ts
index ec5f90e..7d9d480 100644
--- a/src/hooks/useOnScroll.ts
+++ b/src/hooks/useOnScroll.ts
@@ -1,10 +1,10 @@
-import { useMemo, useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
import { useIsClient } from "usehooks-ts";
import { Ids } from "types/ids";
export const useOnScroll = (id: Ids, onScroll: (scroll: number) => void): void => {
const isClient = useIsClient();
- const elem = useMemo(() => (isClient ? document.querySelector(`#${id}`) : null), [id, isClient]);
+ const elem = isClient ? document.querySelector(`#${id}`) : null;
const listener = useCallback(() => {
if (elem?.scrollTop) {
onScroll(elem.scrollTop);
diff --git a/src/hooks/useReaderSettings.ts b/src/hooks/useReaderSettings.ts
index 672e06b..ac58a21 100644
--- a/src/hooks/useReaderSettings.ts
+++ b/src/hooks/useReaderSettings.ts
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback } from "react";
import { useLocalStorage } from "usehooks-ts";
import { ImageQuality } from "helpers/img";
@@ -94,13 +94,8 @@ export const useReaderSettings = (): {
setTeint,
]);
- const filterSettings = useMemo(
- () => ({ bookFold, lighting, paperTexture, teint, dropShadow }),
- [bookFold, dropShadow, lighting, paperTexture, teint]
- );
-
return {
- filterSettings,
+ filterSettings: { bookFold, lighting, paperTexture, teint, dropShadow },
isSidePagesEnabled,
pageQuality,
toggleBookFold,
diff --git a/src/hooks/useScrollIntoView.ts b/src/hooks/useScrollIntoView.ts
index 4f5a504..5b44dc3 100644
--- a/src/hooks/useScrollIntoView.ts
+++ b/src/hooks/useScrollIntoView.ts
@@ -3,30 +3,34 @@ import { useEffect, useState } from "react";
import { useCounter } from "usehooks-ts";
import { isDefined } from "helpers/others";
+const NUM_RETRIES = 10;
+
export const useScrollIntoView = (): void => {
const router = useRouter();
const { count, increment } = useCounter(0);
const [hasReachedElem, setHasReachedElem] = useState(false);
useEffect(() => {
- if (!hasReachedElem) {
- const indexHash = router.asPath.indexOf("#");
- if (indexHash > 0) {
- const hash = router.asPath.slice(indexHash + 1);
- const element = document.getElementById(hash);
- console.log(element);
- if (isDefined(element)) {
- console.log(`[useScrollIntoView] ${hash} found`);
- element.scrollIntoView();
- setHasReachedElem(true);
- } else {
- console.log(`[useScrollIntoView] ${hash} not found`);
- setTimeout(() => {
- increment();
- }, 100);
+ if (count < NUM_RETRIES)
+ if (!hasReachedElem) {
+ const indexHash = router.asPath.indexOf("#");
+ if (indexHash > 0) {
+ const hash = router.asPath.slice(indexHash + 1);
+ if (hash !== "") {
+ const element = document.getElementById(hash);
+ if (isDefined(element)) {
+ console.log(`[useScrollIntoView] ${hash} found`);
+ element.scrollIntoView();
+ setHasReachedElem(true);
+ } else {
+ console.log(`[useScrollIntoView] ${hash} not found`);
+ setTimeout(() => {
+ increment();
+ }, 200);
+ }
+ }
}
}
- }
- }, [increment, router.asPath, count, hasReachedElem, setHasReachedElem]);
+ }, [router.asPath, hasReachedElem, setHasReachedElem, increment, count]);
useEffect(() => setHasReachedElem(false), [router.asPath]);
};
diff --git a/src/hooks/useSmartLanguage.ts b/src/hooks/useSmartLanguage.ts
index 3f290af..2e65aa5 100644
--- a/src/hooks/useSmartLanguage.ts
+++ b/src/hooks/useSmartLanguage.ts
@@ -36,7 +36,7 @@ export const useSmartLanguage = ({
setSelectedTranslationIndex(getPreferredLanguage(preferredLanguages, availableLocales));
}, [preferredLanguages, availableLocales, router.locale]);
- const selectedTranslation = useMemo(() => {
+ const selectedTranslation = (() => {
if (isDefined(selectedTranslationIndex)) {
const item = items[selectedTranslationIndex];
if (isDefined(item)) {
@@ -44,7 +44,7 @@ export const useSmartLanguage = ({
}
}
return undefined;
- }, [items, selectedTranslationIndex, transform]);
+ })();
const languageSwitcherProps = {
languages: languages,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0121a98..c5c93d8 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -22,12 +22,14 @@ import { LightBoxProvider } from "contexts/LightBoxProvider";
import { SettingsPopup } from "components/Panels/SettingsPopup";
import { useSettings } from "contexts/settings";
import { useContainerQueries } from "contexts/containerQueries";
+import { useWebkitFixes } from "contexts/webkitFixes";
const AccordsLibraryApp = (props: AppProps): JSX.Element => {
useLocalData();
useAppLayout();
useSettings();
useContainerQueries();
+ useWebkitFixes();
return (
<>
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index e6cd447..23c3b1e 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -1,5 +1,4 @@
import { GetStaticProps } from "next";
-import { useMemo } from "react";
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { NavOption } from "components/PanelComponents/NavOption";
import { PanelHeader } from "components/PanelComponents/PanelHeader";
@@ -20,20 +19,18 @@ interface Props extends AppLayoutRequired {}
const Archives = (props: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
- const subPanel = useMemo(
- () => (
-
-
-
-
-
- ),
- [langui]
+ const subPanel = (
+
+
+
+
+
);
+
return ;
};
export default Archives;
diff --git a/src/pages/archives/videos/c/[uid].tsx b/src/pages/archives/videos/c/[uid].tsx
index 41e0709..4fe2507 100644
--- a/src/pages/archives/videos/c/[uid].tsx
+++ b/src/pages/archives/videos/c/[uid].tsx
@@ -1,5 +1,5 @@
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useMemo, useState } from "react";
+import { useState } from "react";
import { useBoolean } from "usehooks-ts";
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { Switch } from "components/Inputs/Switch";
@@ -51,80 +51,74 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
- const subPanel = useMemo(
- () => (
-
-
+ const subPanel = (
+
+
-
+
-
+
-
+
- {hoverable && (
-
-
-
- )}
-
- ),
- [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
+ {hoverable && (
+
+
+
+ )}
+
);
- const contentPanel = useMemo(
- () => (
-
- item.id}
- renderItem={({ item }) => (
-
- )}
- className={cIf(
- isContentPanelAtLeast4xl,
- "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
- "grid-cols-2 gap-x-3 gap-y-5"
- )}
- groupingFunction={() => [channel?.title ?? ""]}
- paginationItemPerPage={25}
- searchingTerm={searchName}
- searchingBy={(item) => item.attributes.title}
- />
-
- ),
- [channel?.title, channel?.videos?.data, isContentPanelAtLeast4xl, keepInfoVisible, searchName]
+ const contentPanel = (
+
+ item.id}
+ renderItem={({ item }) => (
+
+ )}
+ className={cIf(
+ isContentPanelAtLeast4xl,
+ "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
+ "grid-cols-2 gap-x-3 gap-y-5"
+ )}
+ groupingFunction={() => [channel?.title ?? ""]}
+ paginationItemPerPage={25}
+ searchingTerm={searchName}
+ searchingBy={(item) => item.attributes.title}
+ />
+
);
return ;
diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx
index 1dd29e3..1f5fee0 100644
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@@ -1,5 +1,5 @@
import { GetStaticProps } from "next";
-import { useMemo, useState } from "react";
+import { useState } from "react";
import { useBoolean } from "usehooks-ts";
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { SmartList } from "components/SmartList";
@@ -52,75 +52,69 @@ const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
- const subPanel = useMemo(
- () => (
-
-
+ const subPanel = (
+
+
-
+
-
+
-
+
- {hoverable && (
-
-
-
- )}
-
- ),
- [hoverable, keepInfoVisible, langui, searchName, toggleKeepInfoVisible]
+ {hoverable && (
+
+
+
+ )}
+
);
- const contentPanel = useMemo(
- () => (
-
- item.id}
- renderItem={({ item }) => (
-
- )}
- className={cIf(
- isContentPanelAtLeast4xl,
- "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
- "grid-cols-2 gap-x-3 gap-y-5"
- )}
- paginationItemPerPage={25}
- searchingTerm={searchName}
- searchingBy={(item) => item.attributes.title}
- />
-
- ),
- [isContentPanelAtLeast4xl, keepInfoVisible, searchName, videos]
+ const contentPanel = (
+
+ item.id}
+ renderItem={({ item }) => (
+
+ )}
+ className={cIf(
+ isContentPanelAtLeast4xl,
+ "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
+ "grid-cols-2 gap-x-3 gap-y-5"
+ )}
+ paginationItemPerPage={25}
+ searchingTerm={searchName}
+ searchingBy={(item) => item.attributes.title}
+ />
+
);
return ;
};
diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx
index e0115a8..a7eca34 100644
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@@ -1,5 +1,4 @@
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useMemo } from "react";
import { useRouter } from "next/router";
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
import { HorizontalLine } from "components/HorizontalLine";
@@ -34,120 +33,101 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const router = useRouter();
- const subPanel = useMemo(
- () => (
-
-
+ const subPanel = (
+
+
-
+
-
-
-
-
- ),
- [langui]
+
+
+
+
);
- const contentPanel = useMemo(
- () => (
-
-
+ const contentPanel = (
+
+
-
-
- {video.gone ? (
-
- ) : (
-