PageDown(1)} />
+
![main content]()
+
PageUp(1)} />
+
+ );
+}
+
+export default function ComicPage({
+ params
+}: ComicPageProps) {
+ const { data, error, isLoading } = useGalleryDoc(params.id);
+
+ if (isLoading) {
+ // TODO: Add a loading spinner
+ return
+ Loading...
+
+ }
+ if (error) {
+ return
Error: {String(error)}
+ }
+ if (!data) {
+ return
Not found
+ }
+
+ if (data.content_type !== "comic") {
+ return
Not a comic
+ }
+ if (!("page" in data.additional)) {
+ console.error(`invalid content : page read fail : ${JSON.stringify(data.additional)}`);
+ return
Error. DB error. page restriction
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/packages/client/src/page/reader/reader.tsx b/packages/client/src/page/reader/reader.tsx
deleted file mode 100644
index 4f67af6..0000000
--- a/packages/client/src/page/reader/reader.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { styled, Typography } from "@mui/material";
-import React from "react";
-import { Document, makeThumbnailUrl } from "../../accessor/document";
-import { ComicReader } from "./comic";
-import { VideoReader } from "./video";
-
-export interface PagePresenterProp {
- doc: Document;
- className?: string;
- fullScreenTarget?: React.RefObject
;
-}
-interface PagePresenter {
- (prop: PagePresenterProp): JSX.Element;
-}
-
-export const getPresenter = (content: Document): PagePresenter => {
- switch (content.content_type) {
- case "comic":
- return ComicReader;
- case "video":
- return VideoReader;
- }
- return () => Not implemented reader;
-};
-const BackgroundDiv = styled("div")({
- height: "400px",
- width: "300px",
- backgroundColor: "#272733",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
-});
-
-import { useEffect, useRef, useState } from "react";
-import "./thumbnail.css";
-
-export function useIsElementInViewport(options?: IntersectionObserverInit) {
- const elementRef = useRef(null);
- const [isVisible, setIsVisible] = useState(false);
-
- const callback = (entries: IntersectionObserverEntry[]) => {
- const [entry] = entries;
- setIsVisible(entry.isIntersecting);
- };
-
- useEffect(() => {
- const observer = new IntersectionObserver(callback, options);
- elementRef.current && observer.observe(elementRef.current);
- return () => observer.disconnect();
- }, [elementRef, options]);
-
- return { elementRef, isVisible };
-}
-
-export function ThumbnailContainer(props: {
- content: Document;
- className?: string;
-}) {
- const { elementRef, isVisible } = useIsElementInViewport({});
- const [loaded, setLoaded] = useState(false);
- useEffect(() => {
- if (isVisible) {
- setLoaded(true);
- }
- }, [isVisible]);
- const style = {
- maxHeight: "400px",
- maxWidth: "min(400px, 100vw)",
- };
- const thumbnailurl = makeThumbnailUrl(props.content);
- if (props.content.content_type === "video") {
- return ;
- } else {
- return (
-
- {loaded && 
}
-
- );
- }
-}
diff --git a/packages/client/src/page/reader/video.tsx b/packages/client/src/page/reader/video.tsx
deleted file mode 100644
index d7610aa..0000000
--- a/packages/client/src/page/reader/video.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { Document } from "../../accessor/document";
-
-export const VideoReader = (props: { doc: Document }) => {
- const id = props.doc.id;
- return (
-
- );
-};
diff --git a/packages/client/src/page/tags.tsx b/packages/client/src/page/tags.tsx
deleted file mode 100644
index 637117e..0000000
--- a/packages/client/src/page/tags.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Box, Paper, Typography } from "@mui/material";
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import React, { useEffect, useState } from "react";
-import { LoadingCircle } from "../component/loading";
-import { CommonMenuList, Headline } from "../component/mod";
-import { PagePad } from "../component/pagepad";
-
-type TagCount = {
- tag_name: string;
- occurs: number;
-};
-
-const tagTableColumn: GridColDef[] = [
- {
- field: "tag_name",
- headerName: "Tag Name",
- width: 200,
- },
- {
- field: "occurs",
- headerName: "Occurs",
- width: 100,
- type: "number",
- },
-];
-
-function TagTable() {
- const [data, setData] = useState();
- const [error, setErrorMsg] = useState(undefined);
- const isLoading = data === undefined;
-
- useEffect(() => {
- loadData();
- }, []);
-
- if (isLoading) {
- return ;
- }
- if (error !== undefined) {
- return {error};
- }
- return (
-
-
- t.tag_name}>
-
-
- );
-
- async function loadData() {
- try {
- const res = await fetch("/api/tags?withCount=true");
- const data = await res.json();
- setData(data);
- } catch (e) {
- setData([]);
- if (e instanceof Error) {
- setErrorMsg(e.message);
- } else {
- console.log(e);
- setErrorMsg("");
- }
- }
- }
-}
-
-export const TagsPage = () => {
- const menu = CommonMenuList();
- return (
-
-
-
-
-
- );
-};
-