@prose-reader/react-reader 1.174.0 → 1.175.0

package/src/navigation/QuickMenu/Scrubber.tsx

@@ -1,138 +0,0 @@
-import RcSlider from "rc-slider"
-import { type ComponentProps, useCallback, useEffect } from "react"
-import { useObserve, useSignal, useSubscribe } from "reactjrx"
-import { useReader } from "../../context/useReader"
-import { usePagination } from "../../pagination/usePagination"
-import "rc-slider/assets/index.css"
-import { useNavigationContext } from "../useNavigationContext"
-
-const useSliderValues = () => {
-  const pagination = usePagination()
-  const isUsingSpread = pagination?.isUsingSpread
-  const { beginPageIndex: currentRealPage, totalApproximatePages = 0 } =
-    useNavigationContext()
-  const currentPage = isUsingSpread
-    ? Math.floor((currentRealPage || 0) / 2)
-    : currentRealPage
-  const [value, valueSignal] = useSignal({
-    default: currentPage || 0,
-  })
-  const min = 0
-  const max = Math.max(
-    0,
-    isUsingSpread
-      ? Math.floor((totalApproximatePages - 1) / 2)
-      : totalApproximatePages - 1,
-  )
-
-  useEffect(() => {
-    valueSignal.setValue(currentPage || 0)
-  }, [currentPage, valueSignal])
-
-  return {
-    value,
-    valueSignal,
-    min,
-    max,
-  }
-}
-
-export const Scrubber = () => {
-  const reader = useReader()
-  const pagination = usePagination()
-  const { manifest } = useObserve(() => reader?.context.state$, []) ?? {}
-  const reverse = manifest?.readingDirection === "rtl"
-  const isUsingSpread = pagination?.isUsingSpread
-  const { totalApproximatePages = 0, isBeginWithinChapter } =
-    useNavigationContext()
-  const step = 1
-  const isScrubberWithinChapter = isBeginWithinChapter
-  const { value, valueSignal, min, max } = useSliderValues()
-
-  const onChange: NonNullable<ComponentProps<typeof RcSlider>["onChange"]> =
-    useCallback(
-      (values) => {
-        const [value = 0] = Array.isArray(values) ? values : [values]
-
-        valueSignal.setValue(value)
-
-        const pageIndex = isUsingSpread
-          ? Math.floor(value) * 2
-          : Math.floor(value)
-
-        if (!isScrubberWithinChapter) {
-          reader?.navigation.goToAbsolutePageIndex({
-            absolutePageIndex: pageIndex,
-            animation: false,
-          })
-        } else {
-          reader?.navigation.goToPageOfSpineItem({
-            pageIndex,
-            spineItemId: reader.pagination.getState().beginSpineItemIndex ?? 0,
-            animation: false,
-          })
-        }
-      },
-      [reader, isUsingSpread, valueSignal, isScrubberWithinChapter],
-    )
-
-  /**
-   * @note
-   * Scrubber can navigate fast and without lock we may end up with
-   * slowness due to the reader
-   * paginating and loading items in between.
-   * This is good practice (but not required) to throttle it.
-   */
-  useSubscribe(
-    () =>
-      reader?.navigation.throttleLock({
-        duration: 100,
-        trigger: valueSignal.subject,
-      }),
-    [reader, valueSignal],
-  )
-
-  // const marks =
-  //   max > 1
-  //     ? Array.from({ length: max + 1 }, (_, i) => i).reduce(
-  //         (acc: number[], val) => [...acc, val],
-  //         [],
-  //       )
-  //     : []
-
-  if (
-    totalApproximatePages === 1 ||
-    (isUsingSpread && totalApproximatePages === 2)
-  ) {
-    return null
-  }
-
-  // @tmp not available yet in chakra
-  // if (reverse) return null
-
-  return (
-    <RcSlider
-      value={[value]}
-      max={max}
-      min={min}
-      reverse={reverse}
-      step={step}
-      onChange={onChange}
-    />
-  )
-  // return (
-  //   <Slider
-  //     value={[value]}
-  //     max={max}
-  //     min={min}
-  //     marks={marks}
-  //     onChange={e => {
-  //       debugger
-  //     }}
-  //     onValueChange={onChange}
-  //     // reverse={reverse}
-  //     orientation="horizontal"
-  //     step={step}
-  //   />
-  // )
-}

package/src/navigation/QuickMenu/TimeIndicator.tsx

@@ -1,29 +0,0 @@
-import { Text, type TextProps } from "@chakra-ui/react"
-import { useEffect, useState } from "react"
-
-export const useTime = () => {
-  const [time, setTime] = useState(new Date())
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(new Date())
-    }, 1000 * 60)
-
-    return () => clearInterval(interval)
-  }, [])
-
-  return time
-}
-
-export const TimeIndicator = (props: TextProps) => {
-  const time = useTime()
-
-  return (
-    <Text fontSize="xs" {...props}>
-      {time.toLocaleTimeString(navigator.language, {
-        hour: "2-digit",
-        minute: "2-digit",
-      })}
-    </Text>
-  )
-}

package/src/navigation/QuickMenu/TopBar.tsx

@@ -1,72 +0,0 @@
-import { HStack, IconButton, Stack, Text } from "@chakra-ui/react"
-import { IoIosArrowBack, IoMdMore } from "react-icons/io"
-import { MdFullscreen, MdFullscreenExit } from "react-icons/md"
-import { useObserve } from "reactjrx"
-import { useFullscreen } from "../../common/useFullscreen"
-import { useReader } from "../../context/useReader"
-import { QuickBar } from "./QuickBar"
-
-export const TopBar = ({
-  open,
-  onBackClick,
-  onMoreClick,
-}: {
-  open: boolean
-  onBackClick: () => void
-  onMoreClick: () => void
-}) => {
-  const reader = useReader()
-  const manifest = useObserve(() => reader?.context.manifest$, [reader])
-  const { isFullscreen, onToggleFullscreenClick } = useFullscreen()
-
-  return (
-    <QuickBar
-      present={open}
-      position="top"
-      height="80px"
-      justifyContent="space-between"
-    >
-      <IconButton
-        aria-label="left"
-        size="lg"
-        variant="ghost"
-        flexShrink={0}
-        onClick={onBackClick}
-      >
-        <IoIosArrowBack />
-      </IconButton>
-      <Stack
-        flex={1}
-        maxW={600}
-        gap={1}
-        alignItems="center"
-        overflow="auto"
-        px={4}
-      >
-        <Text truncate maxWidth="100%">
-          {manifest?.title}
-        </Text>
-      </Stack>
-      <HStack>
-        <IconButton
-          aria-label="right"
-          size="lg"
-          flexShrink={0}
-          variant="ghost"
-          onClick={onMoreClick}
-        >
-          <IoMdMore />
-        </IconButton>
-        <IconButton
-          aria-label="right"
-          size="lg"
-          flexShrink={0}
-          variant="ghost"
-          onClick={onToggleFullscreenClick}
-        >
-          {isFullscreen ? <MdFullscreenExit /> : <MdFullscreen />}
-        </IconButton>
-      </HStack>
-    </QuickBar>
-  )
-}

package/src/navigation/useNavigationContext.ts

@@ -1,46 +0,0 @@
-import { usePagination } from "../pagination/usePagination"
-
-export const useNavigationContext = () => {
-  const pagination = usePagination()
-  const hasOnlyOnePage = pagination?.numberOfTotalPages === 1
-
-  const isBeginWithinChapter =
-    (pagination?.beginNumberOfPagesInSpineItem ?? 0) > 1
-
-  const isEndWithinChapter = (pagination?.endNumberOfPagesInSpineItem ?? 0) > 1
-
-  const beginPageIndex =
-    (pagination?.hasChapters
-      ? pagination?.beginPageIndexInSpineItem
-      : pagination?.beginAbsolutePageIndex) ?? 0
-  const endPageIndex =
-    (pagination?.hasChapters
-      ? pagination?.endPageIndexInSpineItem
-      : pagination?.endAbsolutePageIndex) ?? 0
-
-  const [leftPageIndex = 0, rightPageIndex = 0] = [
-    beginPageIndex,
-    endPageIndex,
-  ].sort((a, b) => a - b)
-
-  const beginAndEndAreDifferent =
-    pagination?.beginPageIndexInSpineItem !==
-      pagination?.endPageIndexInSpineItem ||
-    pagination?.beginSpineItemIndex !== pagination?.endSpineItemIndex
-
-  const totalApproximatePages = pagination?.hasChapters
-    ? pagination?.beginNumberOfPagesInSpineItem
-    : pagination?.numberOfTotalPages
-
-  return {
-    hasOnlyOnePage,
-    beginPageIndex,
-    endPageIndex,
-    isBeginWithinChapter,
-    isEndWithinChapter,
-    beginAndEndAreDifferent,
-    totalApproximatePages,
-    leftPageIndex,
-    rightPageIndex,
-  }
-}

package/src/pagination/usePagination.ts

@@ -1,29 +0,0 @@
-import type { Reader } from "@prose-reader/core"
-import { useObserve } from "reactjrx"
-import { NEVER, combineLatest, map } from "rxjs"
-import { useReader } from "../context/useReader"
-
-export const usePagination = ():
-  | (Reader["pagination"]["state"] & { hasChapters: boolean })
-  | undefined => {
-  const reader = useReader()
-
-  return useObserve(
-    () =>
-      !reader
-        ? NEVER
-        : combineLatest([reader.pagination.state$, reader.context.state$]).pipe(
-            map(([state, context]) => {
-              const isOnlyImages = context.manifest?.spineItems.every((item) =>
-                item.mediaType?.startsWith("image/"),
-              )
-
-              return {
-                ...state,
-                hasChapters: !context.isFullyPrePaginated && !isOnlyImages,
-              }
-            }),
-          ),
-    [reader],
-  )
-}

package/src/settings/useSettings.ts

@@ -1,9 +0,0 @@
-import type { Reader } from "@prose-reader/core"
-import { useObserve } from "reactjrx"
-import { useReader } from "../context/useReader"
-
-export const useSettings = (): Reader["settings"]["values"] | undefined => {
-  const reader = useReader()
-
-  return useObserve(() => reader?.settings.values$, [reader])
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "declaration": false,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "outDir": "dist",
-    "noUncheckedIndexedAccess": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,32 +0,0 @@
-import { resolve } from "node:path"
-import react from "@vitejs/plugin-react"
-import externals from "rollup-plugin-node-externals"
-import { defineConfig } from "vite"
-import dts from "vite-plugin-dts"
-
-// https://vite.dev/config/
-export default defineConfig(({ mode }) => ({
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "prose-react-reader",
-      fileName: `index`,
-    },
-    emptyOutDir: mode !== "development",
-    sourcemap: true,
-  },
-  plugins: [
-    {
-      enforce: `pre`,
-      ...externals({
-        peerDeps: true,
-        deps: true,
-        devDeps: true,
-      }),
-    },
-    react(),
-    dts({
-      tsconfigPath: "./tsconfig.app.json",
-    }),
-  ],
-}))