SCHOL-305: Implement new web reader designs #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

jackiequach wants to merge 16 commits into main from SCHOL-305/implement-designs

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -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} />;
     };
     ```
@@ Expand Down @@

example/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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/use-html-reader.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 = {
@@ Expand Down Expand Up / @@ -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>
       );
     };
@@ Expand Down @@

example/use-pdf-reader.tsx

-Original file line number
+Diff line change
@@ -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 = {
@@ Expand Down Expand Up / @@ -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>
       );
     };
@@ Expand Down @@

playwright.config.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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',

playwright/pageobjects/web-reader.page.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,11 +3,8 @@ import { Locator, Page, expect } from '@playwright/test';
  
    class WebReaderPage {

      readonly page: Page;

      readonly webReaderHomepage: Locator;

      readonly backButton: Locator;

      readonly tocButton: Locator;

      readonly settingsButton: Locator;

      readonly paginatedMode: Locator;

      readonly scrollingMode: Locator;

      readonly fullScreenButton: Locator;

      readonly exitFullScreenButton: Locator;

      readonly nextPageButton: Locator;

    @@ -24,7 +21,6 @@ class WebReaderPage {
  
        });

        // header

        this.backButton = page.getByLabel('Return to Homepage');

        this.tocButton = page.getByLabel('Table of Contents');

        this.firstChapter = page.getByRole('menuitem').first();

        this.lastChapter = page.getByRole('menuitem').last();

    @@ -33,25 +29,19 @@ class WebReaderPage {
  
          exact: true,

        });

        this.fullScreenButton = page.getByRole('button', {

          name: 'Toggle full screen',

          name: 'Enter full screen mode',

        });

        this.exitFullScreenButton = page.getByText('Full screen exit', {

          exact: true,

        this.exitFullScreenButton = page.getByRole('button', {

          name: 'Exit full screen mode',

        });

        // settings

        this.paginatedMode = page.getByText('Paginated', { exact: true });

        this.scrollingMode = page.getByText('Scrolling', { exact: true });

        // footer

        this.nextPageButton = this.page

          .getByRole('contentinfo')

          .getByRole('button', {

            name: 'Next Page',

          });

        this.previousPageButton = page

          .getByRole('contentinfo')

          .getByRole('button', { name: 'Previous Page' });

        this.nextPageButton = this.page.getByRole('button', {

          name: 'Next page',

        });

        this.previousPageButton = page.getByRole('button', {

          name: 'Previous page',

        });

      }

      async changeScreenSize(): Promise<void> {

    @@ -63,16 +53,16 @@ class HtmlReaderPage extends WebReaderPage {
  
      // settings

      readonly defaultFont = this.page.getByText('Default', { exact: true });

      readonly serifFont = this.page.getByText('Serif', { exact: true });

      readonly sansSerifFont = this.page.getByText('Sans-Serif', { exact: true });

      readonly sansSerifFont = this.page.getByText('Sans-serif', { exact: true });

      readonly dyslexiaFont = this.page.getByText('Dyslexia', { exact: true });

      readonly whiteBackground = this.page.getByText('Day', { exact: true });

      readonly sepiaBackground = this.page.getByText('Sepia', { exact: true });

      readonly blackBackground = this.page.getByText('Night', { exact: true });

      readonly resetTextSize = this.page.getByLabel('Reset settings');

      readonly decreaseTextSize = this.page.getByLabel('Decrease font size');

      readonly increaseTextSize = this.page.getByLabel('Increase font size');

      readonly resetTextSize = this.page.getByLabel('Reset all');

      readonly decreaseTextSize = this.page.getByLabel('Decrease text');

      readonly increaseTextSize = this.page.getByLabel('Increase text');

      // content

      readonly chapterName = this.page.getByText(

    @@ -138,8 +128,6 @@ class HtmlReaderPage extends WebReaderPage {
  
        await this.sepiaBackground.click();

        await expect(this.increaseTextSize).toBeVisible();

        await this.increaseTextSize.click();

        await expect(this.scrollingMode).toBeVisible();

        await this.scrollingMode.click();

      }

      async scrollDown(): Promise<void> {

    @@ -172,8 +160,6 @@ class HtmlReaderPage extends WebReaderPage {
  
        await expect(this.previousPageButton).toBeDisabled();

        await expect(this.settingsButton).toBeVisible();

        await this.settingsButton.click();

        await expect(this.scrollingMode).toBeVisible();

        await this.scrollingMode.click();

        await expect(this.tocButton).toBeVisible();

        await this.tocButton.click();

        await expect(this.chapterName).toBeVisible();

    @@ -221,8 +207,6 @@ class PdfReaderPage extends WebReaderPage {
  
        await this.settingsButton.click();

        await expect(this.zoomInButton).toBeVisible();

        await this.zoomInButton.click();

        await expect(this.scrollingMode).toBeVisible();

        await this.scrollingMode.click();

      }

      async getZoomValue(): Promise<number> {

    @@ -283,8 +267,6 @@ class PdfReaderPage extends WebReaderPage {
  
        await expect(this.previousPageButton).toBeDisabled();

        await expect(this.settingsButton).toBeVisible();

        await this.settingsButton.click();

        await expect(this.scrollingMode).toBeVisible();

        await this.scrollingMode.click();

        await expect(this.tocButton).toBeVisible();

        await this.tocButton.click();

        await expect(this.lastChapter).toBeVisible();

    @@ -294,4 +276,4 @@ class PdfReaderPage extends WebReaderPage {
  
      }

    }

    export { WebReaderPage, HtmlReaderPage, PdfReaderPage };

    export { HtmlReaderPage, PdfReaderPage, WebReaderPage };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SCHOL-305: Implement new web reader designs #190

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

SCHOL-305: Implement new web reader designs #190

Are you sure you want to change the base?

Uh oh!

SCHOL-305: Implement new web reader designs #190

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!