Merge pull request #749 from streamich/pdf

feat: 🎸 add simple PDF viewer

Author: streamich

src/ReactEmbed.tsx

@@ -27,18 +27,19 @@ export interface Blocks {
 
 const defaultBlocks: Blocks = {
   figma: React.lazy(() => import('./blocks/figma')),
+  gfycat: React.lazy(() => import('./blocks/gfycat')),
   gist: React.lazy(() => import('./blocks/gist')),
   gmaps: React.lazy(() => import('./blocks/gmaps')),
   imgur: React.lazy(() => import('./blocks/imgur')),
   instagram: React.lazy(() => import('./blocks/instagram')),
   jsfiddle: React.lazy(() => import('./blocks/jsfiddle')),
-  simplePlayer: React.lazy(() => import('./blocks/react-simple-player')),
+  pdf: React.lazy(() => import('./blocks/pdf')),
   reactPlayer: React.lazy(() => import('./blocks/react-player')),
   replit: React.lazy(() => import('./blocks/replit')),
+  simplePlayer: React.lazy(() => import('./blocks/react-simple-player')),
   soundcloud: React.lazy(() => import('./blocks/soundcloud')),
   tweet: React.lazy(() => import('./blocks/tweet')),
   youtube: React.lazy(() => import('./blocks/youtube')),
-  gfycat: React.lazy(() => import('./blocks/gfycat')),
 };
 
 export type ReactEmbedRouterResult = undefined | [undefined | React.ComponentType<BlockProps>, EmbedBlockId];

src/__story__/pdf.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import Embed from '..';
+import {Box} from './Box';
+
+const pdf = 'http://www.africau.edu/images/default/sample.pdf';
+
+storiesOf('PDF', module)
+  .add('A pdf file', () => {
+    return <Embed url={pdf} />;
+  })
+  .add('Fitted', () => {
+    return (
+      <Box>
+        <Embed url={pdf} />
+      </Box>
+    );
+  });

src/blocks/pdf/canPlay.ts

@@ -0,0 +1,4 @@
+const MATCH_PDF_FILE = /\.(pdf)($|\?)/i;
+const canPlay = (url: string): boolean => MATCH_PDF_FILE.test(url);
+
+export default canPlay;

src/blocks/pdf/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import {BlockProps} from '../..';
+
+const Pdf: React.FC<BlockProps> = ({url, isDark, width, renderWrap}) => {
+  return renderWrap(
+    <embed src={url} type="application/pdf" style={{width: '100%', minHeight: 600}} className="react-embed--pdf" />
+  );
+};
+
+export default Pdf;

src/routeToBlock.ts

@@ -1,6 +1,7 @@
 import {Blocks, ReactEmbedRouter, ParsedUrl} from '.';
 import canPlaySimplePlayer from './blocks/react-simple-player/canPlay';
 import canPlay from './blocks/react-player/canPlay';
+import canPlayPdf from './blocks/pdf/canPlay';
 
 const routeTwitter: ReactEmbedRouter = (blocks, {pathname}) => {
   const steps = pathname.split('/');
@@ -89,7 +90,9 @@ const routeToBlock: ReactEmbedRouter = (blocks: Blocks, parsed: ParsedUrl) => {
     case 'gfycat.com':
       return routeGfycat(blocks, parsed);
     default:
-      if (canPlaySimplePlayer(url)) {
+      if (canPlayPdf(url)) {
+        return [blocks.pdf, ''];
+      } else if (canPlaySimplePlayer(url)) {
         return [blocks.simplePlayer, ''];
       } else if (canPlay(url)) {
         return [blocks.reactPlayer, ''];