Merge pull request #204 from RandomStudio/video-focus-mode

TARGET MR: Add Video focus mode

functions/addToNewsletterList/addToNewsletterList.js → netlify/functions/addToNewsletterList.ts

@@ -1,9 +1,6 @@
-/* eslint-disable no-console */
-import fetch from 'node-fetch';
-
 const mailChimpAPI = process.env.MAILCHIMP_API_KEY;
 
-export async function handler(event) {
+async function handler(event) {
   const createResponse = payload => ({
     statusCode: 201,
     ...payload,

netlify/functions/getVideoData.ts

@@ -0,0 +1,32 @@
+import type { HandlerEvent } from '@netlify/functions';
+import { formatVideoData } from '../../src/utils/videoUtils';
+import { getVideosList } from './getVideosList';
+
+const handler = async (event: HandlerEvent) => {
+  const items = await getVideosList();
+
+  const hasSpecifiedId = event.path.split('/').length > 4;
+
+  if (!hasSpecifiedId) {
+    return {
+      statusCode: 404,
+    };
+  }
+
+  const id = event.path.split('/').at(-1);
+
+  const details = items.find(item => item.guid === id);
+
+  if (!details) {
+    return {
+      statusCode: 400,
+    };
+  }
+
+  return {
+    statusCode: 200,
+    body: JSON.stringify(await formatVideoData(details)),
+  };
+};
+
+export { handler };

netlify/functions/getVideoThumbnail.ts

@@ -0,0 +1,46 @@
+import sharp from 'sharp';
+import type { HandlerEvent } from '@netlify/functions';
+
+const getImage = async url => {
+  const response = await fetch(url);
+
+  return Buffer.from(await response.arrayBuffer());
+};
+
+export const createBlurredImage = async (thumbnailUrl: string) => {
+  const image = await getImage(thumbnailUrl);
+
+  const buffer = await sharp(image)
+    .raw()
+    .ensureAlpha()
+    .resize(12, 12, { fit: 'inside' })
+    .toFormat(sharp.format.png)
+    .toBuffer();
+
+  return buffer.toString('base64');
+};
+
+export const handler = async (event: HandlerEvent) => {
+  if (!event.queryStringParameters) {
+    return {
+      statusCode: 404,
+    };
+  }
+
+  const { thumbnailUrl } = event.queryStringParameters;
+
+  if (!thumbnailUrl) {
+    return {
+      statusCode: 400,
+    };
+  }
+
+  const imageString = await createBlurredImage(thumbnailUrl);
+
+  return {
+    statusCode: 200,
+    body: JSON.stringify({
+      imageString,
+    }),
+  };
+};

netlify/functions/getVideosList.ts

@@ -0,0 +1,37 @@
+export const getVideosList = async () => {
+  try {
+    const response = await fetch(
+      `https://video.bunnycdn.com/library/${process.env.BUNNY_LIBRARY_ID}/videos?itemsPerPage=1000`,
+      {
+        headers: {
+          accept: 'application/json',
+          'content-type': 'application/*+json',
+          AccessKey: process.env.BUNNY_TOKEN,
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error('Unable to retrieve list of videos from Bunny');
+    }
+
+    const { items } = await response.json();
+
+    return items;
+  } catch (error) {
+    console.error(error);
+
+    return [];
+  }
+};
+
+const handler = async () => {
+  const items = await getVideosList();
+
+  return {
+    statusCode: 200,
+    body: JSON.stringify(items),
+  };
+};
+
+export { handler };

next.config.js

@@ -19,6 +19,11 @@ module.exports = withBundleAnalyzer({
         destination: 'http://eepurl.com/gebngv',
         permanent: false,
       },
+      {
+        source: '/video',
+        destination: '/',
+        permanent: false,
+      },
       {
         source: '/chloe',
         destination:

package.json

@@ -26,12 +26,13 @@
     "react-datocms": "4.0.9",
     "react-markdown": "8.0.5",
     "rehype-raw": "^6.1.1",
-    "sharp": "0.30.3",
+    "swr": "2.2.1",
     "video.js": "^8.3.0",
     "zustand": "^4.3.9"
   },
   "devDependencies": {
     "@datocms/cma-client-node": "^1.3.5",
+    "@netlify/functions": "^1.6.0",
     "@next/bundle-analyzer": "13.2.1",
     "@next/eslint-plugin-next": "13.2.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -55,7 +56,7 @@
     "postcss-preset-env": "9.0.0",
     "prettier": "2.8.4",
     "sass": "1.58.3",
-    "sharp": "0.30.3",
+    "sharp": "0.32.4",
     "typescript": "^5.0.2"
   },
   "browserslist": "last 2 versions, iOS > 15",
@@ -66,4 +67,4 @@
     "type": "git",
     "url": "https://github.com/RandomStudio/random-studio"
   }
-}
+}

src/api/getDataFromBackend.ts

@@ -1,5 +1,5 @@
 import { GraphQLClient, RequestDocument } from 'graphql-request';
-import addAdditionalInfoToBlocks from './addAdditionalInfoToBlocks';
+import addAdditionalInfoToBlocks from '../pages/api/addAdditionalDataToBlocks';
 
 const getDataFromBackend = async ({
   query,

src/components/HomeVideo/HomeVideo.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { videoPropType } from '../../propTypes';
-import Video from '../Video/Video.tsx';
+import Video from '../Video/Video';
 import styles from './HomeVideo.module.css';
 
 const HomeVideo = ({ collaborator, collaborationUrl, video }) => {

src/components/Video/Controls/Controls.tsx

@@ -1,20 +1,19 @@
 import styles from './Controls.module.scss';
-import { VideoData } from '../../../types/types';
 
 type ControlsTypes = {
+  baseUrl: string;
   handlePlayToggle: () => void;
   handleMuteToggle: () => void;
   isPlaying: boolean;
   isMuted: boolean;
-  video: VideoData;
 };
 
 const Controls = ({
+  baseUrl,
   handlePlayToggle,
   handleMuteToggle,
   isMuted,
   isPlaying,
-  video,
 }: ControlsTypes) => {
   return (
     <div className={styles.wrapper}>
@@ -35,7 +34,7 @@ const Controls = ({
       </button>
 
       <div className={styles.pullRight}>
-        <a download href={`${video.baseUrl}/original`}>
+        <a download href={`${baseUrl}/original`}>
           {'Download'}
         </a>