SCHOL-305: Implement new web reader designs (#190)

* initial design changes

* update html settings

* implement reset settings and current page for PDFs

* add fit to height and width functionality for pdf

* implement fit to height/width for HTMLReader

* fix flickering on pdf reader

* add tooltips

* fix scrolling fit to height zoom issue

* add rotate left functionality

* address comment, update epub settings menu and icon sizes

* fix chapter nav

* implement full screen

* update and remove tests

* update unit tests

* fix scaling issue

* update playwright test to run against localhost

* remove console log and fix flickering issue

* SCHOL-314: Re-enable and update pdf tests (#191)

* re-enable pdf tests and add test for page input

* fix flaky locator

* address comments

Author: jackiequach

README.md

@@ -41,12 +41,7 @@ Basic usage within a React app, using the default UI:
 import WebReader from '@nypl/web-reader';
 
 const ReaderPage = ({ manifestUrl }) => {
-  return (
-    <WebReader
-      webpubManifest={manifestUrl}
-      headerLeft={<button>Back to app</button>}
-    />
-  );
+  return <WebReader webpubManifest={manifestUrl} />;
 };
 ```
 

example/index.tsx

@@ -1,36 +1,36 @@
-import 'react-app-polyfill/ie11';
+import {
+  Box,
+  Button,
+  ChakraProvider,
+  Heading,
+  Input,
+  ListItem,
+  Stack,
+  Text,
+  UnorderedList,
+} from '@chakra-ui/react';
 import * as React from 'react';
+import 'react-app-polyfill/ie11';
 import { createRoot } from 'react-dom/client';
 import {
   BrowserRouter,
-  Switch,
-  Route,
   Link,
+  Route,
+  Switch,
   useParams,
 } from 'react-router-dom';
-import WebReader, { addTocToManifest } from '../src';
-import {
-  ChakraProvider,
-  Heading,
-  UnorderedList,
-  ListItem,
-  Box,
-  Text,
-  Input,
-  Button,
-  Stack,
-} from '@chakra-ui/react';
-import { getTheme } from '../src/ui/theme';
+import useSWR, { Fetcher } from 'swr';
+import readiumAfter from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-after.css';
 import readiumBefore from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-before.css';
 import readiumDefault from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-default.css';
-import readiumAfter from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-after.css';
-import Tests from './Tests';
+import WebReader, { addTocToManifest } from '../src';
 import { Injectable } from '../src/Readium/Injectable';
-import useSWR, { Fetcher } from 'swr';
-import UseHtmlReader from './use-html-reader';
+import { WebpubManifest } from '../src/types';
+import { getTheme } from '../src/ui/theme';
 import mobyEpub2Manifest from './static/samples/moby-epub2-exploded/manifest.json';
 import pdfSingleResourceManifest from './static/samples/pdf/single-resource-short.json';
-import { WebpubManifest } from '../src/types';
+import Tests from './Tests';
+import UseHtmlReader from './use-html-reader';
 import UsePdfReader from './use-pdf-reader';
 
 const origin = window.location.origin;
@@ -101,6 +101,10 @@ const App = () => {
 };
 
 const PdfReaders = () => {
+  const [isFullViewport, setIsFullViewport] = React.useState(false);
+
+  const toggleFullScreen = () => setIsFullViewport((v) => !v);
+
   return (
     <>
       <Route path={`/pdf/single-resource-short`}>
@@ -136,12 +140,23 @@ const PdfReaders = () => {
             instead of taking over the full page. It is fixed height, which
             means it will not grow to fit content in scrolling mode.
           </Text>
-          <WebReader
-            webpubManifestUrl={`${origin}/samples/pdf/multi-resource.json`}
-            proxyUrl={pdfProxyUrl}
-            pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.mjs`}
-            growWhenScrolling={false}
-          />
+          <Box
+            margin="0 auto"
+            width={isFullViewport ? '100vw' : '50%'}
+            height={isFullViewport ? '100vh' : 'auto'}
+            position={isFullViewport ? 'fixed' : 'relative'}
+            top={isFullViewport ? 0 : undefined}
+            left={isFullViewport ? 0 : undefined}
+            zIndex={isFullViewport ? 9999 : undefined}
+          >
+            <WebReader
+              webpubManifestUrl={`${origin}/samples/pdf/single-resource-short.json`}
+              proxyUrl={pdfProxyUrl}
+              pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.mjs`}
+              growWhenScrolling={false}
+              toggleFullScreen={toggleFullScreen}
+            />
+          </Box>
           <Heading>The page continues...</Heading>
           <Text as="p">Here is some more content below the reader</Text>
         </Box>

example/static/samples/pdf/single-resource-short.json

@@ -2,39 +2,34 @@
   "context": "https://drb-files-qa-s3.amazonaws.com/manifests/context.jsonld",
   "metadata": {
     "@type": "https://schema.org/Book",
-    "title": "EIB Working Paper 2021/03 - Assessing climate change risks at the country level",
+    "title": "Annual exhibition",
     "author": "Ferrazzi, Matteo",
     "conformsTo": "http://librarysimplified.org/terms/profiles/pdf"
   },
   "links": [
     {
-      "href": "https://library.oapen.org/bitstream/20.500.12657/50076/1/9789286150340.pdf",
+      "href": "https://drb-files-qa.s3.us-east-1.amazonaws.com/tagged_pdfs/33433131779294.pdf",
       "type": "application/pdf",
       "rel": "alternate"
-    },
-    {
-      "rel": "self",
-      "href": "https://drb-files-qa.s3.amazonaws.com/manifests/doab/20.500.12854/71362.json",
-      "type": "application/webpub+json"
     }
   ],
   "readingOrder": [
     {
-      "href": "https://library.oapen.org/bitstream/20.500.12657/50076/1/9789286150340.pdf",
-      "title": "EIB Working Paper 2021/03 - Assessing climate change risks at the country level",
+      "href": "https://drb-files-qa.s3.us-east-1.amazonaws.com/tagged_pdfs/33433131779294.pdf",
+      "title": "Annual exhibition",
       "type": "application/pdf"
     }
   ],
   "resources": [
     {
-      "href": "https://library.oapen.org/bitstream/20.500.12657/50076/1/9789286150340.pdf",
+      "href": "https://drb-files-qa.s3.us-east-1.amazonaws.com/tagged_pdfs/33433131779294.pdf",
       "type": "application/pdf"
     }
   ],
   "toc": [
     {
-      "href": "https://library.oapen.org/bitstream/20.500.12657/50076/1/9789286150340.pdf",
-      "title": "EIB Working Paper 2021/03 - Assessing climate change risks at the country level"
+      "href": "https://drb-files-qa.s3.us-east-1.amazonaws.com/tagged_pdfs/33433131779294.pdf",
+      "title": "Annual exhibition"
     }
   ]
-}
+}

example/use-html-reader.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useHtmlReader } from '../src';
 import { Injectable } from '../src/Readium/Injectable';
 import { WebpubManifest } from '../src/types';
-import Footer from '../src/ui/Footer';
 import Header from '../src/ui/Header';
 
 type HTMLReaderProps = {
@@ -34,13 +33,8 @@ const UseHtmlReader: React.FC<HTMLReaderProps> = ({
 
   return (
     <div>
-      <Header
-        {...reader}
-        headerLeft={<a href="/">Back</a>}
-        containerRef={containerRef}
-      />
+      <Header {...reader} containerRef={containerRef} />
       {reader.content}
-      <Footer {...reader} />
     </div>
   );
 };

example/use-pdf-reader.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { usePdfReader } from '../src';
 import { WebpubManifest } from '../src/types';
-import Footer from '../src/ui/Footer';
 import Header from '../src/ui/Header';
 
 type PDFReaderProps = {
@@ -34,16 +33,11 @@ const UsePdfReader: React.FC<PDFReaderProps> = ({
     return null;
   }
 
-  const { content, ...readerProps } = reader;
+  const { content } = reader;
   return (
     <div>
-      <Header
-        {...reader}
-        headerLeft={<a href="/">Back</a>}
-        containerRef={containerRef}
-      />
+      <Header {...reader} containerRef={containerRef} />
       {content}
-      <Footer {...readerProps} />
     </div>
   );
 };

playwright.config.ts

@@ -11,6 +11,7 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+
 export default defineConfig({
   testDir: './playwright',
   /* Run tests in files in parallel */
@@ -26,7 +27,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'https://nypl-web-reader.vercel.app/',
+    baseURL: 'http://localhost:1234/',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',