@prose-reader/react-reader 1.117.0

package/src/components/ui/slider.tsx

@@ -0,0 +1,82 @@
+import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface SliderProps extends ChakraSlider.RootProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+  label?: React.ReactNode
+  showValue?: boolean
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(props, ref) {
+    const { marks: marksProp, label, showValue, ...rest } = props
+    const value = props.defaultValue ?? props.value
+
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: undefined }
+      return mark
+    })
+
+    const hasMarkLabel = !!marks?.some((mark) => mark.label)
+
+    return (
+      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
+        {label && !showValue && (
+          <ChakraSlider.Label>{label}</ChakraSlider.Label>
+        )}
+        {label && showValue && (
+          <HStack justify="space-between">
+            <ChakraSlider.Label>{label}</ChakraSlider.Label>
+            <ChakraSlider.ValueText />
+          </HStack>
+        )}
+        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
+          <ChakraSlider.Track>
+            <ChakraSlider.Range />
+          </ChakraSlider.Track>
+          <SliderThumbs value={value} />
+          <SliderMarks marks={marks} />
+        </ChakraSlider.Control>
+      </ChakraSlider.Root>
+    )
+  },
+)
+
+function SliderThumbs(props: { value?: number[] }) {
+  const { value } = props
+  return (
+    <For each={value}>
+      {(_, index) => (
+        <ChakraSlider.Thumb key={index} index={index}>
+          <ChakraSlider.HiddenInput />
+        </ChakraSlider.Thumb>
+      )}
+    </For>
+  )
+}
+
+interface SliderMarksProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+}
+
+const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
+  function SliderMarks(props, ref) {
+    const { marks } = props
+    if (!marks?.length) return null
+
+    return (
+      <ChakraSlider.MarkerGroup ref={ref}>
+        {marks.map((mark, index) => {
+          const value = typeof mark === "number" ? mark : mark.value
+          const label = typeof mark === "number" ? undefined : mark.label
+          return (
+            <ChakraSlider.Marker key={index} value={value}>
+              <ChakraSlider.MarkerIndicator />
+              {label}
+            </ChakraSlider.Marker>
+          )
+        })}
+      </ChakraSlider.MarkerGroup>
+    )
+  },
+)

package/src/components/ui/toggle-tip.tsx

@@ -0,0 +1,70 @@
+import { Popover as ChakraPopover, IconButton, Portal } from "@chakra-ui/react"
+import * as React from "react"
+import { HiOutlineInformationCircle } from "react-icons/hi"
+
+export interface ToggleTipProps extends ChakraPopover.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content?: React.ReactNode
+}
+
+export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(
+  function ToggleTip(props, ref) {
+    const {
+      showArrow,
+      children,
+      portalled = true,
+      content,
+      portalRef,
+      ...rest
+    } = props
+
+    return (
+      <ChakraPopover.Root
+        {...rest}
+        positioning={{ ...rest.positioning, gutter: 4 }}
+      >
+        <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraPopover.Positioner>
+            <ChakraPopover.Content
+              width="auto"
+              px="2"
+              py="1"
+              textStyle="xs"
+              rounded="sm"
+              ref={ref}
+            >
+              {showArrow && (
+                <ChakraPopover.Arrow>
+                  <ChakraPopover.ArrowTip />
+                </ChakraPopover.Arrow>
+              )}
+              {content}
+            </ChakraPopover.Content>
+          </ChakraPopover.Positioner>
+        </Portal>
+      </ChakraPopover.Root>
+    )
+  },
+)
+
+export const InfoTip = React.forwardRef<
+  HTMLDivElement,
+  Partial<ToggleTipProps>
+>(function InfoTip(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ToggleTip content={children} {...rest} ref={ref}>
+      <IconButton
+        variant="ghost"
+        aria-label="info"
+        size="2xs"
+        colorPalette="gray"
+      >
+        <HiOutlineInformationCircle />
+      </IconButton>
+    </ToggleTip>
+  )
+})

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)

package/src/context/ReactReaderProvider.tsx

@@ -0,0 +1,14 @@
+import type { Reader } from "@prose-reader/core"
+import { memo } from "react"
+import { ReaderContext } from "./context"
+
+export const ReactReaderProvider = memo(
+  ({
+    children,
+    reader,
+  }: { children?: React.ReactNode; reader: Reader | undefined }) => {
+    return (
+      <ReaderContext.Provider value={reader}>{children}</ReaderContext.Provider>
+    )
+  },
+)

package/src/context/context.ts

@@ -0,0 +1,6 @@
+import type { Reader } from "@prose-reader/core"
+import { type Context, createContext } from "react"
+
+export const ReaderContext: Context<Reader | undefined> = createContext<
+  Reader | undefined
+>(undefined)

package/src/context/useReader.ts

@@ -0,0 +1,9 @@
+import type { Reader } from "@prose-reader/core"
+import { useContext } from "react"
+import { ReaderContext } from "./context"
+
+export const useReader = (): Reader | undefined => {
+  const context = useContext(ReaderContext)
+
+  return context
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./navigation/QuickMenu/QuickMenu"
+export * from "./context/ReactReaderProvider"

package/src/navigation/QuickMenu/BottomBar.tsx

@@ -0,0 +1,65 @@
+import { Box, IconButton, Stack } from "@chakra-ui/react"
+import {
+  RxDoubleArrowDown,
+  RxDoubleArrowLeft,
+  RxDoubleArrowRight,
+  RxDoubleArrowUp,
+} from "react-icons/rx"
+import { useObserve } from "reactjrx"
+import { useReader } from "../../context/useReader"
+import { PaginationInfoSection } from "./PaginationInfoSection"
+import { QuickBar } from "./QuickBar"
+import { Scrubber } from "./Scrubber"
+import { TimeIndicator } from "./TimeIndicator"
+
+export const BottomBar = ({ open }: { open: boolean }) => {
+  const reader = useReader()
+  const navigation = useObserve(() => reader?.navigation.state$, [reader])
+  const settings = useObserve(() => reader?.settings.values$, [reader])
+  const isVerticalDirection = settings?.computedPageTurnDirection === "vertical"
+
+  return (
+    <QuickBar present={open} position="bottom" height={130}>
+      <IconButton
+        aria-label="left"
+        size="lg"
+        variant="ghost"
+        flexShrink={0}
+        onClick={() => reader?.navigation.goToLeftOrTopSpineItem()}
+        disabled={
+          !navigation?.canGoLeftSpineItem && !navigation?.canGoTopSpineItem
+        }
+      >
+        {isVerticalDirection ? <RxDoubleArrowUp /> : <RxDoubleArrowLeft />}
+      </IconButton>
+      <Stack
+        flex={1}
+        maxW={400}
+        gap={2}
+        alignItems="center"
+        overflow="auto"
+        px={4}
+      >
+        <PaginationInfoSection />
+        <Box height={5} maxW={300} width="100%" overflow="visible">
+          <Scrubber />
+        </Box>
+      </Stack>
+      <IconButton
+        aria-label="right"
+        size="lg"
+        flexShrink={0}
+        variant="ghost"
+        disabled={
+          !navigation?.canGoRightSpineItem && !navigation?.canGoBottomSpineItem
+        }
+        onClick={() => {
+          reader?.navigation.goToRightOrBottomSpineItem()
+        }}
+      >
+        {isVerticalDirection ? <RxDoubleArrowDown /> : <RxDoubleArrowRight />}
+      </IconButton>
+      <TimeIndicator position="absolute" bottom={0} left={0} p={2} />
+    </QuickBar>
+  )
+}

package/src/navigation/QuickMenu/PaginationInfoSection.tsx

@@ -0,0 +1,62 @@
+import { HStack, Stack, Text } from "@chakra-ui/react"
+import {
+  ProgressBar,
+  ProgressRoot,
+  ProgressValueText,
+} from "../../components/ui/progress"
+import { usePagination } from "../../pagination/usePagination"
+import { useNavigationContext } from "../useNavigationContext"
+
+export const PaginationInfoSection = () => {
+  const pagination = usePagination()
+  const {
+    hasOnlyOnePage,
+    leftPageIndex,
+    rightPageIndex,
+    totalApproximatePages,
+    beginAndEndAreDifferent,
+  } = useNavigationContext()
+  const progress = Math.round((pagination?.percentageEstimateOfBook ?? 0) * 100)
+
+  const buildTitleChain = (
+    chapterInfo: NonNullable<typeof pagination>["beginChapterInfo"],
+  ): string => {
+    if (chapterInfo?.subChapter) {
+      return `${chapterInfo.title} / ${buildTitleChain(chapterInfo.subChapter)}`
+    }
+    return chapterInfo?.title || ""
+  }
+
+  const chapterTitle = buildTitleChain(pagination?.beginChapterInfo)
+
+  return (
+    <Stack alignItems="center" gap={1} maxW="100%" overflow="auto">
+      <ProgressRoot value={progress} size="xs" width={150}>
+        <HStack justifyContent="space-between">
+          <ProgressBar width={110} />
+          <ProgressValueText>{`${progress}%`}</ProgressValueText>
+        </HStack>
+      </ProgressRoot>
+      <Text truncate maxWidth="100%" fontSize="sm" mt={1}>
+        {chapterTitle ? `Chapter: ${chapterTitle}` : `\u00A0`}
+      </Text>
+      {!hasOnlyOnePage && (
+        <HStack>
+          <Text fontSize="xs">
+            {beginAndEndAreDifferent
+              ? `${leftPageIndex + 1} - ${rightPageIndex + 1} of ${totalApproximatePages}`
+              : `${leftPageIndex + 1} of ${totalApproximatePages}`}
+          </Text>
+          {!!pagination?.hasChapters && (
+            <>
+              <Text>-</Text>
+              <Text fontSize="xs">
+                ({(pagination?.beginAbsolutePageIndex ?? 0) + 1})
+              </Text>
+            </>
+          )}
+        </HStack>
+      )}
+    </Stack>
+  )
+}

package/src/navigation/QuickMenu/QuickBar.tsx

@@ -0,0 +1,40 @@
+import { Presence, type PresenceProps } from "@chakra-ui/react"
+import { memo } from "react"
+
+export const QuickBar = memo(
+  ({
+    children,
+    position,
+    ...rest
+  }: { position: "top" | "bottom" } & PresenceProps) => {
+    return (
+      <Presence
+        display="flex"
+        flexDirection="row"
+        width="100%"
+        position="absolute"
+        {...(position === "bottom" ? { bottom: 0 } : { top: 0 })}
+        animationName={
+          position === "bottom"
+            ? {
+                _open: "slide-from-bottom, fade-in",
+                _closed: "slide-to-bottom, fade-out",
+              }
+            : {
+                _open: "slide-from-top, fade-in",
+                _closed: "slide-to-top, fade-out",
+              }
+        }
+        animationDuration="moderate"
+        bgColor="bg.panel"
+        alignItems="center"
+        justifyContent="center"
+        shadow="md"
+        px={4}
+        {...rest}
+      >
+        {children}
+      </Presence>
+    )
+  },
+)

package/src/navigation/QuickMenu/QuickMenu.tsx

@@ -0,0 +1,22 @@
+import { memo } from "react"
+import { BottomBar } from "./BottomBar"
+import { TopBar } from "./TopBar"
+
+export const QuickMenu = memo(
+  ({
+    open,
+    onBackClick,
+    onMoreClick,
+  }: { open: boolean; onBackClick: () => void; onMoreClick: () => void }) => {
+    return (
+      <>
+        <TopBar
+          open={open}
+          onBackClick={onBackClick}
+          onMoreClick={onMoreClick}
+        />
+        <BottomBar open={open} />
+      </>
+    )
+  },
+)

package/src/navigation/QuickMenu/Scrubber.tsx

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,72 @@
+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>
+  )
+}