frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

📏 Fixes for responsiveness

Browse Source
This commit is contained in:
Rishi Ghan
2026-02-17 20:29:03 -05:00
parent b47b38cc8d
commit 37a2d0c75b
6 changed files with 87 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
View File

@@ -14,34 +14,41 @@ import { useStore } from "../../../store";
import { useShallow } from "zustand/react/shallow";
import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
export const ArchiveOperations = (props): ReactElement => {
export const ArchiveOperations = (props: { data: any }): ReactElement => {
const { data } = props;
const { socketIOInstance } = useStore(
useShallow((state) => ({
socketIOInstance: state.socketIOInstance,
})),
);
const getSocket = useStore((state) => state.getSocket);
const queryClient = useQueryClient();
// sliding panel config
const [visible, setVisible] = useState(false);
const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
// current image
const [currentImage, setCurrentImage] = useState([]);
const [uncompressedArchive, setUncompressedArchive] = useState([]);
const [imageAnalysisResult, setImageAnalysisResult] = useState({});
const [currentImage, setCurrentImage] = useState<string>("");
const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
useState(false);
const constructImagePaths = (data): Array<string> => {
const constructImagePaths = (data: string[]): Array<string> => {
return data?.map((path: string) =>
escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
);
};
// Listen to the uncompression complete event and orchestrate the final payload
socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
});
useEffect(() => {
const socket = getSocket("/");
if (!socket) return;
const handleUncompressionComplete = (data: any) => {
setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
};
socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
return () => {
socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
};
}, [getSocket]);
useEffect(() => {
let isMounted = true;
@@ -58,7 +65,7 @@ export const ArchiveOperations = (props): ReactElement => {
},
transformResponse: async (responseData) => {
const parsedData = JSON.parse(responseData);
const paths = parsedData.map((pathObject) => {
const paths = parsedData.map((pathObject: any) => {
return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
});
const uncompressedArchive = constructImagePaths(paths);
@@ -131,7 +138,7 @@ export const ArchiveOperations = (props): ReactElement => {
}
// sliding panel init
const contentForSlidingPanel = {
const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
imageAnalysis: {
content: () => {
return (
@@ -143,7 +150,7 @@ export const ArchiveOperations = (props): ReactElement => {
</pre>
) : null}
<pre className="font-hasklig mt-3 text-sm">
{JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
{JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
</pre>
</div>
);
@@ -152,7 +159,7 @@ export const ArchiveOperations = (props): ReactElement => {
};
// sliding panel handlers
const openImageAnalysisPanel = useCallback((imageFilePath) => {
const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
setSlidingPanelContentId("imageAnalysis");
analyzeImage(imageFilePath);
setCurrentImage(imageFilePath);

42
src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
View File

@@ -1,18 +1,18 @@
import { isUndefined } from "lodash";
import React, { ReactElement } from "react";
export const ComicInfoXML = (data): ReactElement => {
export const ComicInfoXML = (data: { json: any }): ReactElement => {
const { json } = data;
return (
<div className="flex md:w-4/5 lg:w-78">
<dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
<dt>
<p className="text-lg">{json.series[0]}</p>
<p className="text-lg">{json.series?.[0]}</p>
</dt>
<dd className="text-sm">
published by{" "}
<span className="underline">
{json.publisher[0]}
{json.publisher?.[0]}
<i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
</span>
</dd>
@@ -30,18 +30,20 @@ export const ComicInfoXML = (data): ReactElement => {
</span>
</dd>
)}
<dd className="my-2">
{/* Genre */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
</span>
{/* Genre */}
{!isUndefined(json.genre) && (
<dd className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-slate-500 dark:text-slate-900">
{json.genre[0]}
<span className="text-slate-500 dark:text-slate-900">
{json.genre[0]}
</span>
</span>
</span>
</dd>
</dd>
)}
</span>
<dd className="my-1">
@@ -52,12 +54,14 @@ export const ComicInfoXML = (data): ReactElement => {
</span>
)}
</dd>
<dd>
{/* Notes */}
<span className="text-sm text-slate-500 dark:text-slate-900">
{json.notes[0]}
</span>
</dd>
{!isUndefined(json.notes) && (
<dd>
{/* Notes */}
<span className="text-sm text-slate-500 dark:text-slate-900">
{json.notes[0]}
</span>
</dd>
)}
</dl>
</div>
);