Merge pull request #531 from filecoin-project/@akuokojnr/pdf-changes

revert pdf preview changes

components/core/SlateMediaObject.js

@@ -3,7 +3,6 @@ import * as Constants from "~/common/constants";
 import * as Validations from "~/common/validations";
 
 import UnityFrame from "~/components/core/UnityFrame";
-import PDFViewer from "~/components/system/components/PDFViewer";
 
 import { css } from "@emotion/react";
 
@@ -56,23 +55,44 @@ const typeMap = {
 };
 
 export default class SlateMediaObject extends React.Component {
+  openLink = (url) => {
+    let { isMobile } = this.props;
+
+    if (isMobile) {
+      window.open(url, "_blank");
+    }
+  };
+
+  componentDidMount() {
+    const url = this.props.data.url;
+    this.openLink(url);
+  }
+
   render() {
     const url = this.props.data.url;
     const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
     const playType = typeMap[type] ? typeMap[type] : type;
 
+    let { isMobile } = this.props;
+
     let element = <div css={STYLES_FAILURE}>No Preview</div>;
 
     if (type.startsWith("application/pdf")) {
       return (
-        <PDFViewer
+        <>
-          file={url}
+          {!isMobile && (
-          key={url}
+            <object
-          style={{ width: "calc(100% - 64px)" }}
+              css={STYLES_OBJECT}
-          onClick={(e) => {
+              style={{ width: "calc(100% - 64px)" }}
-            e.stopPropagation();
+              data={url}
-          }}
+              type={type}
-        />
+              key={url}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            />
+          )}
+        </>
       );
     }
 

components/system/SystemPage.js

@@ -190,7 +190,6 @@ export default class SystemPage extends React.Component {
           <SidebarLink url={url} href="/_/system/toggles" title="Toggles" />
           <SidebarLink url={url} href="/_/system/tooltips" title="Tooltips" />
           <SidebarLink url={url} href="/_/system/typography" title="Typography" />
-          <SidebarLink url={url} href="/_/system/pdf-viewer" title="Pdf Viewer" />
 
           <div
             css={STYLES_SMALL_LINK}

components/system/components/GlobalCarousel.js

@@ -260,7 +260,10 @@ export class GlobalCarousel extends React.Component {
     } else if (this.props.carouselType === "DATA") {
       data.url = Strings.getCIDGatewayURL(data.cid);
     }
-    let slide = <SlateMediaObject data={data} />;
+
+    let { mobile } = this.props;
+    let slide = <SlateMediaObject data={data} isMobile={mobile} />;
+
     return (
       <div css={STYLES_ROOT}>
         <Alert

components/system/components/PDFViewer.js

@@ -1,57 +0,0 @@
-import * as React from "react";
-import { Document, Page, pdfjs } from "react-pdf";
-
-import { css } from "@emotion/react";
-
-pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
-
-const STYLES_DOCUMENT = css`
-  display: grid;
-  place-items: center;
-  margin: 0;
-  padding: 20px 0 0;
-  width: 100%;
-  min-height: 10%;
-  height: 100%;
-  user-select: none;
-  overflow-y: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
-const STYLES_PAGE = css`
-  margin-bottom: 20px;
-`;
-
-export default class PDFViewer extends React.Component {
-  state = {
-    numPages: 0,
-  };
-
-  onDocumentLoadSuccess({ numPages }) {
-    this.setState({
-      numPages,
-    });
-  }
-
-  render() {
-    const { numPages } = this.state;
-
-    return (
-      <Document
-        file={this.props.file}
-        onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
-        {...this.props}
-        css={STYLES_DOCUMENT}
-      >
-        {Array.from(new Array(numPages), (el, index) => (
-          <Page key={`page_${index + 1}`} pageNumber={index + 1} css={STYLES_PAGE} />
-        ))}
-      </Document>
-    );
-  }
-}

components/system/index.js

@@ -62,7 +62,6 @@ import { Table } from "~/components/system/components/Table";
 import { Textarea } from "~/components/system/components/Textarea";
 import { Toggle } from "~/components/system/components/Toggle";
 import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography";
-import PDFViewer from "~/components/system/components/PDFViewer";
 
 // NOTE(jim): Fragments
 import { Boundary } from "~/components/system/components/fragments/Boundary";
@@ -141,7 +140,6 @@ export {
   UL,
   OL,
   LI,
-  PDFViewer,
   // NOTE(jim): Fragments, not meant to be used.
   Boundary,
   DescriptionGroup,

package.json

@@ -53,7 +53,6 @@
     "react-blurhash": "github:zeroxme/react-blurhash#master",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
-    "react-pdf": "^5.1.0",
     "remark-emoji": "^2.1.0",
     "remark-gfm": "^1.0.0",
     "remark-linkify-regex": "^1.0.0",

pages/_/system/pdf-viewer.js

@@ -1,55 +0,0 @@
-import * as React from "react";
-import * as System from "~/components/system";
-
-import SystemPage from "~/components/system/SystemPage";
-import CodeBlock from "~/components/system/CodeBlock";
-
-export default class SystemPDFViewer extends React.Component {
-  render() {
-    return (
-      <SystemPage
-        title="SDS: Pdf Viewer"
-        description="..."
-        url="https://slate.host/_/system/pdf-viewer"
-      >
-        <System.H1>PDF Viewer</System.H1>
-        <br />
-        <br />
-        <System.P>
-          The PDFViewer component is a way to render PDF files consistently across browsers.
-        </System.P>
-        <br />
-        <br />
-        <br />
-        <System.H2>Imports</System.H2>
-        <hr />
-        <br />
-        <System.P>Import React and the PDFViewer Component.</System.P>
-        <br />
-        <br />
-        <CodeBlock>
-          {`import * as React from "react"; 
-import PDFViewer from "~/components/system/components/PDFViewer";`}
-        </CodeBlock>
-        <br />
-        <br />
-        <System.H2>Usage</System.H2>
-        <hr />
-        <br />
-        <System.P>
-          Declare the PDFViewer component and pass the url of the PDF file to the PDFViewer
-          component as file prop.
-        </System.P>
-        <br />
-        <CodeBlock>{`<PDFViewer file={url} />`}</CodeBlock>
-
-        <br />
-        <br />
-        <System.H2>Output</System.H2>
-        <hr />
-        <br />
-        <System.PDFViewer file="https://slate.textile.io/ipfs/bafybeibyeaznm4iaungi6cfxpy75mnkpn64c3zw2kgq7qkpvecvqlrpw6u" />
-      </SystemPage>
-    );
-  }
-}