chore(dev): backmerge from master (#1212)

Author: happylolonly

package.json

@@ -238,6 +238,7 @@
     "react-localization": "^1.0.15",
     "react-markdown": "^7.1.1",
     "react-number-format": "^5.1.2",
+    "react-reader": "^2.0.10",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "react-textarea-autosize": "^8.2.0",

src/components/ContentItem/contentItem.tsx

@@ -1,11 +1,10 @@
 // TODO: refactor needed
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { $TsFixMe } from 'src/types/tsfix';
-import type { IpfsContentType } from 'src/services/ipfs/types';
-import useParticle from 'src/hooks/useParticle';
-
 import { LinksType } from 'src/containers/Search/types';
+import useParticle from 'src/hooks/useParticle';
+import type { IpfsContentType } from 'src/services/ipfs/types';
+import { $TsFixMe } from 'src/types/tsfix';
 
 import SearchItem from '../SearchItem/searchItem';
 

src/components/EPubView/EPubView.tsx

@@ -0,0 +1,49 @@
+import React, {
+  CSSProperties,
+  ComponentProps,
+  useCallback,
+  useMemo,
+} from 'react';
+import { ReactReader } from 'react-reader';
+import useEPubLocation from 'src/hooks/useEPubLocation';
+
+interface IProps {
+  url: string;
+  search?: boolean;
+  style?: CSSProperties;
+}
+
+type EpubInitOptions = ComponentProps<typeof ReactReader>['epubInitOptions'];
+const epubInitOptions: EpubInitOptions = { openAs: 'epub' };
+
+function EPubView({ url, search, style }: IProps) {
+  const [location, setLocation] = useEPubLocation(url);
+  const currentLocation = location && !search ? location : 0;
+
+  const currentStyle = useMemo(
+    () => ({ height: search ? '300px' : '60vh', ...style }),
+    [style, search]
+  );
+
+  const onLocationChange = useCallback(
+    (loc: string) => {
+      if (!search) {
+        setLocation(loc);
+      }
+    },
+    [search, setLocation]
+  );
+
+  return (
+    <div style={currentStyle}>
+      <ReactReader
+        url={url}
+        location={currentLocation}
+        locationChanged={onLocationChange}
+        epubInitOptions={epubInitOptions}
+      />
+    </div>
+  );
+}
+
+export default React.memo(EPubView);

src/components/contentIpfs/contentIpfs.tsx

@@ -1,13 +1,15 @@
-import { IPFSContent, IPFSContentDetails } from 'src/services/ipfs/types';
 import { CYBER_GATEWAY } from 'src/constants/config';
+import { CYBER_GATEWAY_URL } from 'src/services/ipfs/config';
+import { IPFSContent, IPFSContentDetails } from 'src/services/ipfs/types';
+import { Option } from 'src/types';
+import EPubView from '../EPubView/EPubView';
+import Pdf from '../PDF';
+import TextMarkdown from '../TextMarkdown';
 import VideoPlayerGatewayOnly from '../VideoPlayer/VideoPlayerGatewayOnly';
+import Audio from './component/Audio/Audio';
 import GatewayContent from './component/gateway';
-import TextMarkdown from '../TextMarkdown';
-import LinkHttp from './component/link';
-import Pdf from '../PDF';
 import Img from './component/img';
-import Audio from './component/Audio/Audio';
-import { Option } from 'src/types';
+import LinkHttp from './component/link';
 
 function OtherItem({
   content,
@@ -83,6 +85,12 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) {
             <LinkHttp url={details.content!} preview={search} />
           )}
           {contentType === 'html' && <HtmlItem cid={content?.cid} />}
+          {contentType === 'epub' && (
+            <EPubView
+              url={`${CYBER_GATEWAY_URL}/ipfs/${cid}`}
+              search={search}
+            />
+          )}
           {['other', 'cid'].some((i) => i === contentType) && (
             <OtherItem search={search} cid={cid} content={details.content} />
           )}
@@ -91,4 +99,5 @@ function ContentIpfs({ details, content, cid, search }: ContentTabProps) {
     </div>
   );
 }
+
 export default ContentIpfs;

src/hooks/useEPubLocation.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable import/prefer-default-export */
+import { useCallback } from 'react';
+import type { EpubView } from 'react-reader';
+
+const epubKey = 'cyb:epub';
+
+const getEPubMap = (): Record<string, EpubView['location']> => {
+  try {
+    const epubMapString = localStorage.getItem(epubKey) || '';
+    const epubMap = JSON.parse(epubMapString);
+
+    return epubMap;
+  } catch (error) {
+    console.error('Failed to parse epub locations map:', error);
+
+    return {};
+  }
+};
+
+const getLocation = (url: string) => {
+  const epubMap = getEPubMap();
+
+  return epubMap[url] ?? null;
+};
+
+const getSetEPubLocation =
+  (url: string) => (location: EpubView['location']) => {
+    const epubMap = getEPubMap();
+
+    try {
+      epubMap[url] = location;
+      localStorage.setItem(epubKey, JSON.stringify(epubMap));
+    } catch (error) {
+      console.error('Failed to save EPub location:', error);
+    }
+  };
+
+const useEPubLocation = (
+  url: string
+): [EpubView['location'], (url: string) => void] => {
+  const currentLocation = getLocation(url);
+  const setEPubLocation = useCallback(getSetEPubLocation(url), [url]);
+
+  return [currentLocation, setEPubLocation];
+};
+
+export default useEPubLocation;

src/index.html

@@ -69,4 +69,10 @@
       src="https://metrics.cyb.ai/js/script.js"
     ></script>
   </body>
+
+  <script
+    defer
+    data-domain="ready.cyb.ai"
+    src="https://metrics.cyb.ai/js/script.js"
+  ></script>
 </html>

src/services/ipfs/types.ts

@@ -66,7 +66,7 @@ export type Uint8ArrayLike = Uint8Array | AsyncIterator<Uint8Array>; // | Readab
 
 export type IpfsContentSource = 'db' | 'node' | 'gateway';
 
-export type IpfsGatewayContentType = 'video' | 'audio';
+export type IpfsGatewayContentType = 'video' | 'audio' | 'epub';
 export type MimeBasedContentType = 'image' | 'pdf' | 'text' | 'other';
 export type IpfsBaseContentType =
   | IpfsGatewayContentType

src/services/ipfs/utils/content.ts

@@ -3,14 +3,14 @@ import isSvg from 'is-svg';
 import { PATTERN_HTTP, PATTERN_IPFS_HASH } from 'src/constants/patterns';
 import { Option } from 'src/types';
 
+import { shortenString } from 'src/utils/string';
 import {
   IPFSContentDetails,
   IPFSContent,
   IpfsContentType,
   IpfsGatewayContentType,
 } from '../types';
 import { getResponseResult, onProgressCallback } from './stream';
-import { shortenString } from 'src/utils/string';
 
 function createObjectURL(rawData: Uint8Array, type: string) {
   const blob = new Blob([rawData], { type });
@@ -35,6 +35,10 @@ export const detectGatewayContentType = (
     if (mime.includes('audio')) {
       return 'audio';
     }
+
+    if (mime.includes('epub')) {
+      return 'epub';
+    }
   }
   return undefined;
 };