diff --git a/components/GIFItem.tsx b/components/GIFItem.tsx
index 661a629..78be01f 100644
--- 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 (
+
+ );
+ case 'gif':
+ return (
+
+ );
+ default:
+ return null;
+ }
+ };
+
return (
-
-
-
+
{renderMedia({ format, source: gifURL, caption })}
{caption}
diff --git a/lib/issues.ts b/lib/issues.ts
index 53811b9..634735b 100644
--- 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
index a9898a7..1f929da 100644
--- 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
index e2b39d8..59680d1 100644
--- 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
index 1349686..a18938a 100644
--- 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
index 2db07cf..c326395 100644
--- 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;
+ }
+};