Lazy Image Load

This commit is contained in:
monoid 2024-04-06 02:33:33 +09:00
parent 23922ed100
commit 88e81853e6
21 changed files with 253 additions and 573 deletions

View File

@ -12,6 +12,7 @@
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.7",
"class-variance-authority": "^0.7.0",

View File

@ -19,19 +19,20 @@ import { TooltipProvider } from "./components/ui/tooltip";
import Gallery from "./page/galleryPage";
import Layout from "./components/layout/layout";
import NotFoundPage from "./page/404";
import LoginPage from "./page/loginPage";
import ProfilePage from "./page/profilesPage";
const App = () => {
return (
<TooltipProvider>
<Layout>
<Switch>
<Route path="/" component={() => <Redirect replace to="/search?" />} />
<Route path="/search" component={Gallery} />
<Route path="/login" component={LoginPage} />
<Route path="/profile" component={ProfilePage}/>
{/* <Route path="/doc/:id" component={<DocumentAbout />}></Route>
<Route path="/doc/:id/reader" component={<ReaderPage />}></Route>
<Route path="/login" component={<LoginPage></LoginPage>} />
<Route path="/profile" component={<ProfilePage />}></Route>
<Route path="/difference" component={<DifferencePage />}></Route>
<Route path="/setting" component={<SettingPage />}></Route>
<Route path="/tags" component={<TagsPage />}></Route>*/}

View File

@ -1,273 +0,0 @@
import { AccountCircle, ChevronLeft, ChevronRight, Menu as MenuIcon, Search as SearchIcon } from "@mui/icons-material";
import {
AppBar,
Button,
CssBaseline,
Divider,
Drawer,
Hidden,
IconButton,
InputBase,
Link,
List,
ListItem,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
styled,
Toolbar,
Tooltip,
Typography,
} from "@mui/material";
import { alpha, Theme, useTheme } from "@mui/material/styles";
import React, { useContext, useState } from "react";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import { doLogout, UserContext } from "../state";
const drawerWidth = 270;
const DrawerHeader = styled("div")(({ theme }) => ({
...theme.mixins.toolbar,
}));
const StyledDrawer = styled(Drawer)(({ theme }) => ({
flexShrink: 0,
whiteSpace: "nowrap",
[theme.breakpoints.up("sm")]: {
width: drawerWidth,
},
}));
const StyledSearchBar = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "inherit",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
const StyledNav = styled("nav")(({ theme }) => ({
[theme.breakpoints.up("sm")]: {
width: theme.spacing(7),
},
}));
const closedMixin = (theme: Theme) => ({
overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`,
});
export const Headline = (prop: {
children?: React.ReactNode;
classes?: {
content?: string;
toolbar?: string;
};
rightAppbar?: React.ReactNode;
menu: React.ReactNode;
}) => {
const [v, setv] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const theme = useTheme();
const toggleV = () => setv(!v);
const handleProfileMenuOpen = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);
const handleProfileMenuClose = () => setAnchorEl(null);
const isProfileMenuOpened = Boolean(anchorEl);
const menuId = "primary-search-account-menu";
const user_ctx = useContext(UserContext);
const isLogin = user_ctx.username !== "";
const navigate = useNavigate();
const [search, setSearch] = useState("");
const renderProfileMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ horizontal: "right", vertical: "top" }}
id={menuId}
open={isProfileMenuOpened}
keepMounted
transformOrigin={{ horizontal: "right", vertical: "top" }}
onClose={handleProfileMenuClose}
>
<MenuItem component={RouterLink} to="/profile">
Profile
</MenuItem>
<MenuItem
onClick={async () => {
handleProfileMenuClose();
await doLogout();
user_ctx.setUsername("");
}}
>
Logout
</MenuItem>
</Menu>
);
const drawer_contents = (
<>
<DrawerHeader>
<IconButton onClick={toggleV}>{theme.direction === "ltr" ? <ChevronLeft /> : <ChevronRight />}</IconButton>
</DrawerHeader>
<Divider />
{prop.menu}
</>
);
return (
<div style={{ display: "flex" }}>
<CssBaseline />
<AppBar
position="fixed"
sx={{
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={toggleV}
edge="start"
style={{ marginRight: 36 }}
>
<MenuIcon></MenuIcon>
</IconButton>
<Link
variant="h5"
noWrap
sx={{
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
}}
color="inherit"
component={RouterLink}
to="/"
>
Ionian
</Link>
<div style={{ flexGrow: 1 }}></div>
{prop.rightAppbar}
<StyledSearchBar>
<div
style={{
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<SearchIcon onClick={() => navSearch(search)} />
</div>
<StyledInputBase
placeholder="search"
onChange={(e) => setSearch(e.target.value)}
onKeyUp={(e) => {
if (e.key === "Enter") {
navSearch(search);
}
}}
value={search}
/>
</StyledSearchBar>
{isLogin ? (
<IconButton
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
) : (
<Button color="inherit" component={RouterLink} to="/login">
Login
</Button>
)}
</Toolbar>
</AppBar>
{renderProfileMenu}
<StyledNav>
<Hidden smUp implementation="css">
<StyledDrawer
variant="temporary"
anchor="left"
open={v}
onClose={toggleV}
sx={{
width: drawerWidth,
}}
>
{drawer_contents}
</StyledDrawer>
</Hidden>
<Hidden smDown implementation="css">
<StyledDrawer
variant="permanent"
anchor="left"
sx={{
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}}
>
{drawer_contents}
</StyledDrawer>
</Hidden>
</StyledNav>
<main
style={{
display: "flex",
flexFlow: "column",
flexGrow: 1,
padding: "0px",
marginTop: "64px",
}}
>
{prop.children}
</main>
</div>
);
function navSearch(search: string) {
let words = search.includes("&") ? search.split("&") : [search];
words = words
.map((w) => w.trim())
.map((w) => (w.includes(":") ? `allow_tag=${w}` : `word=${encodeURIComponent(w)}`));
navigate(`/search?${words.join("&")}`);
}
};
export default Headline;

View File

@ -1,10 +0,0 @@
import { Box, CircularProgress } from "@mui/material";
import React from "react";
export const LoadingCircle = () => {
return (
<Box style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
<CircularProgress title="loading" />
</Box>
);
};

View File

@ -1,54 +0,0 @@
import {
ArrowBack as ArrowBackIcon,
Collections as CollectionIcon,
Folder as FolderIcon,
Home as HomeIcon,
List as ListIcon,
Settings as SettingIcon,
VideoLibrary as VideoIcon,
} from "@mui/icons-material";
import { Divider, List, ListItem, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
export const NavItem = (props: { name: string; to: string; icon: React.ReactElement<any, any> }) => {
return (
<ListItem button key={props.name} component={RouterLink} to={props.to}>
<ListItemIcon>
<Tooltip title={props.name.toLocaleLowerCase()} placement="bottom">
{props.icon}
</Tooltip>
</ListItemIcon>
<ListItemText primary={props.name}></ListItemText>
</ListItem>
);
};
export const NavList = (props: { children?: React.ReactNode }) => {
return <List>{props.children}</List>;
};
export const BackItem = (props: { to?: string }) => {
return <NavItem name="Back" to={props.to ?? "/"} icon={<ArrowBackIcon></ArrowBackIcon>} />;
};
export function CommonMenuList(props?: { url?: string }) {
let url = props?.url ?? "";
return (
<NavList>
{url !== "" && (
<>
<BackItem to={url} /> <Divider />
</>
)}
<NavItem name="All" to="/" icon={<HomeIcon />} />
<NavItem name="Comic" to="/search?content_type=comic" icon={<CollectionIcon />}></NavItem>
<NavItem name="Video" to="/search?content_type=video" icon={<VideoIcon />} />
<Divider />
<NavItem name="Tags" to="/tags" icon={<ListIcon />} />
<Divider />
<NavItem name="Difference" to="/difference" icon={<FolderIcon />}></NavItem>
<NavItem name="Settings" to="/setting" icon={<SettingIcon />} />
</NavList>
);
}

View File

@ -1,5 +0,0 @@
import { styled } from "@mui/material";
export const PagePad = styled("div")(({ theme }) => ({
padding: theme.spacing(3),
}));

View File

@ -1,80 +0,0 @@
import * as colors from "@mui/material/colors";
import Chip, { ChipTypeMap } from "@mui/material/Chip";
import { emphasize, styled, Theme, useTheme } from "@mui/material/styles";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
type TagChipStyleProp = {
color: `rgba(${number},${number},${number},${number})` | `#${string}` | "default";
};
const { blue, pink } = colors;
const getTagColorName = (tagname: string): TagChipStyleProp["color"] => {
if (tagname.startsWith("female")) {
return pink[600];
} else if (tagname.startsWith("male")) {
return blue[600];
} else return "default";
};
type ColorChipProp = Omit<ChipTypeMap["props"], "color"> &
TagChipStyleProp & {
component?: React.ElementType;
to?: string;
};
export const ColorChip = (props: ColorChipProp) => {
const { color, ...rest } = props;
const theme = useTheme();
let newcolor = color;
if (color === "default") {
newcolor = "#ebebeb";
}
return (
<Chip
sx={{
color: theme.palette.getContrastText(newcolor),
backgroundColor: newcolor,
["&:hover, &:focus"]: {
backgroundColor: emphasize(newcolor, 0.08),
},
}}
{...rest}
></Chip>
);
};
type TagChipProp = Omit<ChipTypeMap["props"], "color"> & {
tagname: string;
};
export const TagChip = (props: TagChipProp) => {
const { tagname, label, clickable, ...rest } = props;
const colorName = getTagColorName(tagname);
let newlabel: React.ReactNode = label;
if (typeof label === "string") {
const female = "female:";
const male = "male:";
if (label.startsWith(female)) {
newlabel = "♀ " + label.slice(female.length);
} else if (label.startsWith(male)) {
newlabel = "♂ " + label.slice(male.length);
}
}
const inner = clickable ? (
<ColorChip
color={colorName}
clickable={clickable}
label={newlabel ?? label}
{...rest}
component={RouterLink}
to={`/search?allow_tag=${tagname}`}
/>
) : (
<ColorChip color={colorName} clickable={clickable} label={newlabel ?? label} {...rest} />
);
return inner;
};

View File

@ -15,6 +15,43 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
return tags;
}
function LazyImage({ src, alt, className }: { src: string; alt: string; className?: string; }) {
const ref = useRef<HTMLImageElement>(null);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
if (ref.current) {
let toggle = false;
const observer = new IntersectionObserver((entries) => {
if (entries.some(x => x.isIntersecting)) {
setLoaded(true);
toggle = !toggle;
ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" });
observer.disconnect();
}
else {
if (toggle) {
console.log("fade out");
ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
}
}
});
observer.observe(ref.current);
return () => {
observer.disconnect();
};
}
}, []);
return <img
ref={ref}
src={loaded ? src : undefined}
alt={alt}
className={className}
loading="lazy"
/>;
}
export function GalleryCard({
doc: x
}: { doc: Document; }) {
@ -42,11 +79,12 @@ export function GalleryCard({
};
}, []);
return <Card key={x.id} className="flex h-[200px]">
return <Card className="flex h-[200px]">
<div className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none bg-[#272733] flex items-center justify-center">
<img src={`/api/doc/${x.id}/comic/thumbnail`}
<LazyImage src={`/api/doc/${x.id}/comic/thumbnail`}
alt={x.title}
className="max-h-full max-w-full object-cover object-center" />
className="max-h-full max-w-full object-cover object-center"
/>
</div>
<div className="flex-1 flex flex-col">
<CardHeader className="flex-none">
@ -56,10 +94,10 @@ export function GalleryCard({
</CardDescription>
</CardHeader>
<CardContent className="flex-1" ref={ref}>
<li className="flex flex-wrap gap-2 items-baseline content-start">
<ul className="flex flex-wrap gap-2 items-baseline content-start">
{clippedTags.map(tag => <TagBadge key={tag} tagname={tag} className="" />)}
{clippedTags.length < originalTags.length && <TagBadge tagname="..." className="" />}
</li>
{clippedTags.length < originalTags.length && <TagBadge tagname="..." className="" disabled />}
</ul>
</CardContent>
</div>
</Card>;

View File

@ -1,4 +1,5 @@
import { Badge, badgeVariants } from "@/components/ui/badge";
import { badgeVariants } from "@/components/ui/badge";
import { Link } from "wouter";
import { cn } from "@/lib/utils";
const femaleTagPrefix = "female:";
@ -26,7 +27,7 @@ function toPrettyTagname(tagname: string): string {
}
}
export default function TagBadge(props: { tagname: string, className?: string}) {
export default function TagBadge(props: { tagname: string, className?: string; disabled?: boolean;}) {
const { tagname } = props;
const kind = getTagKind(tagname);
return <li className={
@ -35,7 +36,8 @@ export default function TagBadge(props: { tagname: string, className?: string})
kind === "male" && "bg-[#2a7bbf] hover:bg-[#3091e7]",
kind === "female" && "bg-[#c21f58] hover:bg-[#db2d67]",
kind === "default" && "bg-[#4a5568] hover:bg-[#718096]",
props.disabled && "opacity-50",
props.className,
)
}>{toPrettyTagname(tagname)}</li>;
}><Link to={props.disabled ? '': `/search?allow_tag=${tagname}`}>{toPrettyTagname(tagname)}</Link></li>;
}

View File

@ -2,6 +2,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
import { Link } from "wouter"
import { MagnifyingGlassIcon, GearIcon, ActivityLogIcon, ArchiveIcon, PersonIcon } from "@radix-ui/react-icons"
import { buttonVariants } from "../ui/button"
import { useLogin } from "@/state/user";
interface NavItemProps {
icon: React.ReactNode;
@ -29,6 +30,8 @@ export function NavItem({
}
export function NavList() {
const loginInfo = useLogin();
return <aside className="h-screen flex flex-col">
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
<NavItem icon={<MagnifyingGlassIcon className="h-5 w-5" />} to="/search" name="Search" />
@ -36,7 +39,7 @@ export function NavList() {
<NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
</nav>
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
<NavItem icon={<PersonIcon className="h-5 w-5" />} to="/profile" name="Profiles" />
<NavItem icon={<PersonIcon className="h-5 w-5" />} to={ loginInfo ? "/profile" : "/login"} name={ loginInfo ? "Profiles" : "Login"} />
<NavItem icon={<GearIcon className="h-5 w-5" />} to="/setting" name="Settings" />
</nav>
</aside>

View File

@ -0,0 +1,24 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

View File

@ -54,7 +54,7 @@ export default function Gallery() {
return <div className="p-4">Error: {String(error)}</div>
}
return (<div className="p-4 grid gap-2 overflow-auto h-screen">
return (<div className="p-4 grid gap-2 overflow-auto h-screen items-start content-start">
<div className="flex space-x-2">
<Input className="flex-1"/>
<Button className="flex-none">Search</Button>
@ -66,12 +66,12 @@ export default function Gallery() {
</div>
}
{
data?.length === 0 && <div className="p-4">No results</div>
data?.length === 0 && <div className="p-4 text-3xl">No results</div>
}
{
data?.map((x) => {
return (
<GalleryCard doc={x} />
<GalleryCard doc={x} key={x.id} />
);
})
}

View File

@ -0,0 +1,58 @@
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { doLogin } from "@/state/user";
import { useState } from "react";
import { useLocation } from "wouter";
export function LoginForm() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [, setLocation] = useLocation();
return (
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle className="text-2xl">Login</CardTitle>
<CardDescription>
Enter your email below to login to your account.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Input id="username" type="text" placeholder="username" required value={username} onChange={e=> setUsername(e.target.value)}/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required value={password} onChange={e=> setPassword(e.target.value)}/>
</div>
</CardContent>
<CardFooter>
<Button className="w-full" onClick={()=>{
doLogin({
username,
password,
}).then((r)=>{
if (typeof r === "string") {
alert(r);
} else {
setLocation("/");
}
})
}}>Sign in</Button>
</CardFooter>
</Card>
)
}
export function LoginPage() {
return (
<div className="flex items-center justify-center h-screen">
<LoginForm />
</div>
)
}
export default LoginPage;

View File

@ -1,8 +0,0 @@
export * from "./404";
export * from "./contentinfo";
export * from "./difference";
export * from "./gallery";
export * from "./login";
export * from "./profile";
export * from "./setting";
export * from "./tags";

View File

@ -0,0 +1,32 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useLogin } from "@/state/user";
import { Redirect } from "wouter";
export function ProfilePage() {
const userInfo = useLogin();
if (!userInfo) {
console.error("User session expired. Redirecting to login page.");
return <Redirect to="/login" />;
}
return (
<div className="m-4">
<Card>
<CardHeader>
<CardTitle className="text-2xl">Profile</CardTitle>
</CardHeader>
<CardContent>
<div className="grid">
<span className="text-muted-foreground text-sm">Username</span>
<span className="text-primary text-lg">{userInfo.username}</span>
</div>
<div className="grid">
<span className="text-muted-foreground text-sm">Permission</span>
<span className="text-primary text-lg">{userInfo.permission.length > 1 ? userInfo.permission.join(",") : "N/A"}</span>
</div>
</CardContent>
</Card>
</div>
)
}
export default ProfilePage;

View File

@ -1,94 +0,0 @@
import React, { createContext, useRef, useState } from "react";
export const UserContext = createContext({
username: "",
permission: [] as string[],
setUsername: (s: string) => {},
setPermission: (permission: string[]) => {},
});
type LoginLocalStorage = {
username: string;
permission: string[];
accessExpired: number;
};
let localObj: LoginLocalStorage | null = null;
export const getInitialValue = async () => {
if (localObj === null) {
const storagestr = window.localStorage.getItem("UserLoginContext") as string | null;
const storage = storagestr !== null ? (JSON.parse(storagestr) as LoginLocalStorage | null) : null;
localObj = storage;
}
if (localObj !== null && localObj.accessExpired > Math.floor(Date.now() / 1000)) {
return {
username: localObj.username,
permission: localObj.permission,
};
}
const res = await fetch("/user/refresh", {
method: "POST",
});
if (res.status !== 200) throw new Error("Maybe Network Error");
const r = (await res.json()) as LoginLocalStorage & { refresh: boolean };
if (r.refresh) {
localObj = {
username: r.username,
permission: r.permission,
accessExpired: r.accessExpired,
};
} else {
localObj = {
accessExpired: 0,
username: "",
permission: r.permission,
};
}
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
return {
username: r.username,
permission: r.permission,
};
};
export const doLogout = async () => {
const req = await fetch("/user/logout", {
method: "POST",
});
try {
const res = await req.json();
localObj = {
accessExpired: 0,
username: "",
permission: res["permission"],
};
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
return {
username: localObj.username,
permission: localObj.permission,
};
} catch (error) {
console.error(`Server Error ${error}`);
return {
username: "",
permission: [],
};
}
};
export const doLogin = async (userLoginInfo: {
username: string;
password: string;
}): Promise<string | LoginLocalStorage> => {
const res = await fetch("/user/login", {
method: "POST",
body: JSON.stringify(userLoginInfo),
headers: { "content-type": "application/json" },
});
const b = await res.json();
if (res.status !== 200) {
return b.detail as string;
}
localObj = b;
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
return b;
};

View File

@ -47,7 +47,7 @@ async function refresh() {
}
export const doLogout = async () => {
const req = await fetch("/user/logout", {
const req = await fetch("/api/user/logout", {
method: "POST",
});
const setVal = setAtomValue(userLoginStateAtom);
@ -76,7 +76,7 @@ export const doLogin = async (userLoginInfo: {
username: string;
password: string;
}): Promise<string | LoginLocalStorage> => {
const res = await fetch("/user/login", {
const res = await fetch("/api/user/login", {
method: "POST",
body: JSON.stringify(userLoginInfo),
headers: { "content-type": "application/json" },

View File

@ -10,46 +10,67 @@ import { Readable, Writable } from "node:stream";
/**
* zip stream cache.
*/
const ZipStreamCache: {
[path: string]: [{
const ZipStreamCache = new Map<string, {
reader: ZipReader<FileHandle>,
handle: FileHandle
}, number]
} = {};
handle: FileHandle,
refCount: number,
}>();
async function acquireZip(path: string) {
if (!(path in ZipStreamCache)) {
function markUseZip(path: string) {
const ret = ZipStreamCache.get(path);
if (ret) {
ret.refCount++;
}
return ret !== undefined;
}
async function acquireZip(path: string, marked = false) {
const ret = ZipStreamCache.get(path);
if (!ret) {
const obj = await readZip(path);
ZipStreamCache[path] = [obj, 1];
// console.log(`acquire ${path} 1`);
const check = ZipStreamCache.get(path);
if (check) {
check.refCount++;
// if the cache is updated, release the previous one.
releaseZip(path);
return check.reader;
}
// if the cache is not updated, set the new one.
ZipStreamCache.set(path, {
reader: obj.reader,
handle: obj.handle,
refCount: 1,
});
return obj.reader;
}
const [ret, refCount] = ZipStreamCache[path];
ZipStreamCache[path] = [ret, refCount + 1];
// console.log(`acquire ${path} ${refCount + 1}`);
if (!marked) {
ret.refCount++;
}
return ret.reader;
}
function releaseZip(path: string) {
const obj = ZipStreamCache[path];
if (obj === undefined) throw new Error("error! key invalid");
const [ref, refCount] = obj;
// console.log(`release ${path} : ${refCount}`);
if (refCount === 1) {
const { reader, handle } = ref;
const obj = ZipStreamCache.get(path);
if (obj === undefined) {
console.warn(`warning! duplicate release at ${path}`);
return;
}
if (obj.refCount === 1) {
const { reader, handle } = obj;
reader.close().then(() => {
handle.close();
});
delete ZipStreamCache[path];
ZipStreamCache.delete(path);
} else {
ZipStreamCache[path] = [ref, refCount - 1];
obj.refCount--;
}
}
async function renderZipImage(ctx: Context, path: string, page: number) {
const image_ext = ["gif", "png", "jpeg", "bmp", "webp", "jpg"];
// console.log(`opened ${page}`);
const zip = await acquireZip(path);
const marked = markUseZip(path);
const zip = await acquireZip(path, marked);
const entries = (await entriesByNaturalOrder(zip)).filter((x) => {
const ext = x.filename.split(".").pop();
return ext !== undefined && image_ext.includes(ext);
@ -70,9 +91,9 @@ async function renderZipImage(ctx: Context, path: string, page: number) {
},
close() {
nodeReadableStream.push(null);
setTimeout(() => {
releaseZip(path);
}, 100);
// setTimeout(() => {
// }, 500);
},
}));

View File

@ -92,8 +92,8 @@ class ServerApplication {
this.serve_static_file(router);
const login_router = createLoginRouter(this.userController);
router.use("/user", login_router.routes());
router.use("/user", login_router.allowedMethods());
router.use("/api/user", login_router.routes());
router.use("/api/user", login_router.allowedMethods());
if (setting.mode === "development") {
let mm_count = 0;

View File

@ -34,10 +34,10 @@ export async function readZip(path: string): Promise<{
reader: ZipReader<FileHandle>
handle: FileHandle
}> {
const fd = await open(path);
const fd = await open(path, "r");
const reader = new ZipReader(new FileReader(fd), {
useCompressionStream: true,
preventClose: false,
preventClose: true,
});
return { reader, handle: fd };
}

View File

@ -17,6 +17,9 @@ importers:
'@radix-ui/react-icons':
specifier: ^1.3.0
version: 1.3.0(react@18.2.0)
'@radix-ui/react-label':
specifier: ^2.0.2
version: 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot':
specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.71)(react@18.2.0)
@ -30,7 +33,7 @@ importers:
specifier: ^2.1.0
version: 2.1.0
dbtype:
specifier: link:..\dbtype
specifier: workspace:*
version: link:../dbtype
react:
specifier: ^18.2.0
@ -1060,6 +1063,27 @@ packages:
react: 18.2.0
dev: false
/@radix-ui/react-label@2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.24.1
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0)
'@types/react': 18.2.71
'@types/react-dom': 18.2.22
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.22)(@types/react@18.2.71)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
peerDependencies: