Compare commits

..

No commits in common. "55d499e1180932eb9ec3f6ce0a6f9f16beb49da1" and "31fb8521b893bc35f167e16289bf753c3a5a5177" have entirely different histories.

10 changed files with 17 additions and 105 deletions

View File

@ -51,12 +51,11 @@
"icons/icon.icns",
"icons/icon.ico"
],
"identifier": "xyz.archgrid.comic-viewer",
"identifier": "xyz.archgrid.comic_viewer",
"targets": "all"
},
"security": {
"devCsp": "default-src 'self'; img-src 'self' asset: https://asset.localhost",
"csp": null
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
},
"updater": {
"active": false

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import { Stack, useMantineTheme } from '@mantine/core';
import { ifElse, path, propEq } from 'ramda';
import { FC, useMemo } from 'react';

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import { Box } from '@mantine/core';
import { equals } from 'ramda';
import { FC, useLayoutEffect } from 'react';

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import EventEmitter from 'events';
import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
import { FC, useCallback, useContext, useMemo, useRef } from 'react';

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import { Box, Center, Text } from '@mantine/core';
import EventEmitter from 'events';
import { includes, isEmpty, map, not, pipe, sort } from 'ramda';

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import { Button, Group, Tooltip } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { IconFolder } from '@tabler/icons-react';

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import {
ActionIcon,
Group,

View File

@ -1,70 +1,5 @@
//@ts-nocheck
import EventEmitter from 'events';
import { find, gt, head, indexOf, isNil, lt, max, pluck, propEq } from 'ramda';
import { BaseSyntheticEvent, FC, useCallback, useContext, useMemo } from 'react';
import { useLifecycles, useMeasure } from 'react-use';
import { EventBusContext } from '../EventBus';
import { useFileListStore } from '../states/files';
import { useZoomState } from '../states/zoom';
import { FC } from 'react';
export const SingleView: FC = () => {
const files = useFileListStore.use.files();
const actives = useFileListStore.use.actives();
const zoom = useZoomState.use.currentZoom();
const viewHeight = useZoomState.use.viewHeight();
const updateActives = useFileListStore.use.updateActiveFiles();
const ebus = useContext<EventEmitter>(EventBusContext);
const [pageConRef, { width: pageConWidth }] = useMeasure();
const activeFile = useMemo(() => {
let firstFile = head(actives);
return find(propEq('filename', firstFile), files);
}, [files, actives]);
const largerThanView = useMemo(() => {
if (isNil(activeFile)) return false;
let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
return gt(imageHeightAfterZoom, viewHeight);
}, [activeFile, viewHeight, zoom]);
const handlePaginationAction = useCallback(
(event: BaseSyntheticEvent) => {
let middle = pageConWidth / 2;
let pagingDirection = lt(event.nativeEvent.offsetX, middle) ? -1 : 1;
let targetIndex = indexOf(activeFile?.filename, pluck('filename', files)) + pagingDirection;
updateActives([files[max(0, targetIndex)].filename]);
},
[files, activeFile, pageConWidth]
);
useLifecycles(
() => {
ebus?.addListener('navigate_offset', ({ filename }) => {
updateActives([filename]);
});
},
() => {
ebus?.removeAllListeners('navigate_offset');
}
);
return (
<div
style={{ position: 'relative', overflow: 'auto', contain: 'strict', height: '100%' }}
onClick={handlePaginationAction}
ref={pageConRef}
>
{!isNil(activeFile) && (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: largerThanView ? 'flex-start' : 'center',
alignItems: 'center',
width: '100%',
height: largerThanView ? '100%' : viewHeight
}}
>
<img src={activeFile.path} style={{ width: `${zoom}%` }} />
</div>
)}
</div>
);
return <div></div>;
};

View File

@ -1,4 +1,3 @@
//@ts-nocheck
import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { Notifications } from '@mantine/notifications';

View File

@ -1,20 +1,17 @@
//@ts-nocheck
import { MantineTheme } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { ifElse, path, propEq } from 'ramda';
const bgColorSelectFn = (lightIndex: number, darkIndex: number) =>
ifElse(
propEq('colorScheme', 'light'),
path(['colors', 'cbg', lightIndex]),
path(['colors', 'cbg', darkIndex])
);
const fgColorSelectFn = (lightIndex: number, darkIndex: number) =>
ifElse(
propEq('colorScheme', 'light'),
path(['colors', 'cfg', lightIndex]),
path(['colors', 'cfg', darkIndex])
);
const bgColorSelectFn = ifElse(
propEq('colorScheme', 'light'),
path(['colors', 'cbg', 8]),
path(['colors', 'cbg', 0])
);
const fgColorSelectFn = ifElse(
propEq('colorScheme', 'light'),
path(['colors', 'cfg', 0]),
path(['colors', 'cfg', 8])
);
export function useAppTheme(): Partial<MantineTheme> {
const colorScheme = useColorScheme();
@ -53,23 +50,11 @@ export function useAppTheme(): Partial<MantineTheme> {
globalStyles: theme => ({
'html, body': {
height: '100vh',
color: fgColorSelectFn(0, 8)(theme),
backgroundColor: bgColorSelectFn(8, 0)(theme)
color: fgColorSelectFn(theme),
backgroundColor: bgColorSelectFn(theme)
},
'#root': {
height: '100%'
},
'::-webkit-scrollbar': {
width: 4,
backgroundColor: bgColorSelectFn(6, 2)(theme)
},
'::-webkit-scrollbar-track': {
borderRadius: 2,
backgroundColor: 'transparent'
},
'::-webkit-scrollbar-thumb': {
borderRadius: 2,
backgroundColor: bgColorSelectFn(4, 4)(theme)
}
})
};