Merge pull request #215 from ajeetchaulagain/add-video-player-component-for-blog-post

Add a VideoPlayer component for markdown

Author: ajeetchaulagain

src/components/index.ts

@@ -6,6 +6,7 @@ export * from './layout';
 export * from './markdown-renderer/MarkdownRenderer';
 export * from './project-list/ProjectList';
 export * from './newsletter/NewsLetter';
+export * from './video-player/VideoPlayer';
 export * from './seo/SEO';
 export * from './gatsby-image/StyledGatsbyImage';
 export * from './blog-post-card-list/BlogPostCardList';

src/components/markdown-renderer/MarkdownRenderer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MDXProvider } from '@mdx-js/react';
+import { VideoPlayer } from '../video-player/VideoPlayer';
 
 import { HeadingProps } from '../heading/Heading';
 import {
@@ -14,6 +15,7 @@ import {
   StyledParagraph,
 } from './styles';
 import { slugify } from './slugify';
+import { InfoCallToAction } from 'components/info-call-to-action/InfoCallToAction';
 
 type MarkdownRendererProps = {
   children: React.ReactNode;
@@ -59,6 +61,8 @@ export const MarkdownRenderer = ({ children }: MarkdownRendererProps) => {
         a: AnchorLink,
         p: StyledParagraph,
         span: Span,
+        VideoPlayer,
+        InfoCallToAction,
       }}
     >
       {children}

src/components/video-player/VideoPlayer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { mb, mt } from 'styled-components-spacing';
+
+type VideoPlayerProps = {
+  src: string;
+  caption?: string;
+};
+
+const Figure = styled.figure`
+  ${mb(5)};
+`;
+
+const Video = styled.video`
+  max-width: 100%;
+  height: auto;
+  display: block;
+`;
+
+const Caption = styled.figcaption`
+  font-family: ${({ theme }) => theme.fonts.body};
+  font-size: ${({ theme }) => theme.fontSizes.small};
+  color: ${({ theme }) => theme.colors.primaryText};
+  text-align: left;
+  ${mt(2)};
+`;
+
+export const VideoPlayer = ({ src, caption }: VideoPlayerProps) => {
+  return (
+    <Figure>
+      <Video src={src} controls muted playsInline />
+      {caption && <Caption>{caption}</Caption>}
+    </Figure>
+  );
+};

src/posts/react-image-gallery.md

@@ -11,8 +11,6 @@ thumbnail:
 author: 'Ajeet Chaulagain'
 ---
 
-import { InfoCallToAction } from "../components/info-call-to-action/InfoCallToAction.tsx"
-
 If you are creating web pages, you might need an image gallery showing multiple images at some point. However, developing an image gallery from scratch is quite an effort as you need to consider several things, such as user experience, customizability, and probably more features support. But a community-loved React package, [react-image-gallery,](https://www.npmjs.com/package/react-image-gallery) will help you develop a beautiful image gallery with a wide range of [features and customizability](https://github.com/xiaolin/react-image-gallery#user-content-features)
 
 React image gallery is one of the [most popular npm package](https://npmtrends.com/react-gallery-swiper-vs-react-grid-gallery-vs-react-image-gallery-vs-react-image-lightbox-vs-react-image-slider-vs-react-images) that provide React component to build highly customizable image galleries. Also, It supports a wide range of features out of the box. These features include swipe gestures for mobile devices, navigation through thumbnails, responsive design, and much more. In this tutorial, you will learn how to build a _beautiful and elegant image gallery_ using a react-image-gallery npm package. Let's get started.