⚡ perf: replace gif with videos #69 (#79)

scriptified · Oct 29, 2021 · 1c30c4a · 1c30c4a
1 parent 8d328a4
commit 1c30c4a
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 28 deletions.
diff --git a/components/GIFItem.tsx b/components/GIFItem.tsx
@@ -1,22 +1,63 @@
 import Image from 'next/image';
 import Gif from '../interfaces/gif';
 import { useThemeState } from '../theme/ThemeContext';
+import { getMediaFormat } from '../utils';
 import Text from './common/Text';
 import Markdown from './Markdown';
 
-const GIFItem = ({ gif: { caption, gifURL } }: { gif: Gif }): JSX.Element => {
+type SupportedMediaFormats = 'gif' | 'mp4';
+interface RenderMediaProps {
+  format: SupportedMediaFormats | string;
+  source: string;
+  caption: string;
+}
+
+const GIFItem = ({ gif }: { gif: Gif }): JSX.Element => {
+  const { caption, gifURL } = gif;
+
   const theme = useThemeState();
+
+  const format = getMediaFormat(gifURL);
+
+  const renderMedia = ({ format, source, caption }: RenderMediaProps): JSX.Element => {
+    switch (format) {
+      case 'mp4':
+        return (
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
+            className={`bg-gradient-to-br from-${theme}-300 to-${theme}-600 rounded object-fill`}
+            width={500}
+            height={350}
+            title={caption}
+            preload="metadata"
+          >
+            <source src={source} type="video/mp4" />
+            <p>
+              Your browser doesn&apos;t support HTML5 video. Here is a <a href={source}>link to the video</a> instead.
+            </p>
+          </video>
+        );
+      case 'gif':
+        return (
+          <Image
+            className={`bg-gradient-to-br from-${theme}-300 to-${theme}-600 rounded object-fill`}
+            width={500}
+            height={350}
+            src={source}
+            alt={caption}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="flex flex-col items-center">
-      <div className="mt-4">
-        <Image
-          className={`bg-gradient-to-br from-${theme}-300 to-${theme}-600 rounded object-fill`}
-          width={500}
-          height={350}
-          src={gifURL}
-          alt={caption}
-        />
-      </div>
+      <div className="mt-4">{renderMedia({ format, source: gifURL, caption })}</div>
       <Text type="small" color="text-gray-700" additionalStyles="mt-3 text-center">
         <Markdown>{caption}</Markdown>
       </Text>

diff --git a/lib/issues.ts b/lib/issues.ts
@@ -5,11 +5,7 @@ import { convertDate } from '../utils';
 import cloneDeep from 'lodash/cloneDeep';
 import SAMPLE_ISSUE from './sampleIssue';
 
-const ASSETS_URL = 'https://images.scriptified.dev/';
-
-const OG_IMAGE_BASE = 'https://og.scriptified.dev/';
-
-const DEFAULT_TOOL_ASSET = `${ASSETS_URL}common/default-tool.png`;
+const DEFAULT_TOOL_ASSET = `${process.env.NEXT_PUBLIC_ASSETS_URL}common/default-tool.png`;
 
 export function getAllIssueIds(issues: IssueAPIResponse[]): Array<{ params: { id: string } }> {
   // Returns an array that looks like this:
@@ -58,9 +54,9 @@ export function oxfordComma(arr: string[]): string {
 
 function getOGImage(title: string, issueNumber: number, date: string): string {
   const parsedDate = convertDate(date);
-  return `${OG_IMAGE_BASE}${encodeURIComponent(title)}.png?issue_number=${issueNumber}&date=${encodeURIComponent(
-    parsedDate
-  )}`;
+  return `${process.env.NEXT_PUBLIC_OG_IMAGE_BASE}${encodeURIComponent(
+    title
+  )}.png?issue_number=${issueNumber}&date=${encodeURIComponent(parsedDate)}`;
 }
 
 function isValidHttpUrl(str: string) {
@@ -83,7 +79,7 @@ function getAssetURL(issueNumber: number, assetURL: string | undefined | null, d
   if (isValidHttpUrl(assetURL)) {
     return assetURL;
   }
-  return `${ASSETS_URL}issue-${issueNumber}/${assetURL}`;
+  return `${process.env.NEXT_PUBLIC_ASSETS_URL}issue-${issueNumber}/${assetURL}`;
 }
 
 export function mapToIssue(issue: IssueAPIResponse): Issue {

diff --git a/lib/sampleIssue.ts b/lib/sampleIssue.ts
@@ -1,6 +1,8 @@
 /* eslint-disable max-len */
 import { IssueAPIResponse } from '../interfaces/api';
 
+const SAMPLE_VIDEO_URL = `${process.env.NEXT_PUBLIC_ASSETS_URL}common/sample-video.mp4`;
+
 const SAMPLE_ISSUE_API_RESPONSE: IssueAPIResponse = {
   id: 1,
   dateOfPublishing: '2021-03-06',
@@ -43,7 +45,7 @@ const SAMPLE_ISSUE_API_RESPONSE: IssueAPIResponse = {
   },
   gif: {
     id: 1,
-    gifURL: 'https://www.placecage.com/gif/200/300',
+    gifURL: SAMPLE_VIDEO_URL,
     caption: 'a random description about what makes this GIF so great',
     issue: 1,
     published_at: '2021-05-01T07:14:14.757Z',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scriptified",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "private": true,
   "license": "(MIT OR Apache-2.0)",
   "scripts": {

diff --git a/scripts/issueEmailGenerator.js b/scripts/issueEmailGenerator.js
@@ -58,14 +58,11 @@ if (typeof options.issueNumber !== 'number') {
     return new Date(date).toLocaleDateString('en-US', options);
   };
 
-  const OG_IMAGE_BASE = 'https://og.scriptified.dev/';
-  const ASSETS_URL = 'https://images.scriptified.dev/';
-
   function getOGImage(title, issueNumber, date) {
     const parsedDate = convertDate(date);
-    return `${OG_IMAGE_BASE}${encodeURIComponent(title)}.png?issue_number=${issueNumber}&date=${encodeURIComponent(
-      parsedDate
-    )}`;
+    return `${process.env.NEXT_PUBLIC_OG_IMAGE_BASE}${encodeURIComponent(
+      title
+    )}.png?issue_number=${issueNumber}&date=${encodeURIComponent(parsedDate)}`;
   }
 
   function isValidHttpUrl(str) {
@@ -84,7 +81,7 @@ if (typeof options.issueNumber !== 'number') {
     if (isValidHttpUrl(assetURL)) {
       return assetURL;
     }
-    return `${ASSETS_URL}issue-${issueNumber}/${assetURL}`;
+    return `${process.env.NEXT_PUBLIC_ASSETS_URL}issue-${issueNumber}/${assetURL}`;
   }
 
   const ogImgURL = getOGImage(currentIssue.title, currentIssue.id, currentIssue.dateOfPublishing);

diff --git a/utils/index.ts b/utils/index.ts
@@ -35,3 +35,22 @@ export const convertDate = (date: string): string => {
 };
 
 /* =================================================================== */
+
+/**
+ * Get format/extension of media from it's URL
+ * @param mediaUrl URL of media
+ * @returns {string} media format
+ */
+export const getMediaFormat = (mediaUrl: string): string => {
+  const extension = mediaUrl.split('.');
+  const mediaFormat = extension.pop();
+
+  switch (mediaFormat) {
+    case 'gif':
+      return 'gif';
+    case 'mp4':
+      return 'mp4';
+    default:
+      return mediaFormat;
+  }
+};