feat: brand new video capabilities

pixelbakery · Jan 7, 2025 · b94aa58 · b94aa58
1 parent 0d5aed1
commit b94aa58
Show file tree

Hide file tree

Showing 6 changed files with 406 additions and 33 deletions.
diff --git a/_madeToOrder/track-mattes.mdx b/_madeToOrder/track-mattes.mdx
@@ -9,7 +9,7 @@ tags:
   - Tutorial
   - After Effects
   - Track Mattes
-coverImage: /img/education/danny-hinz-Tutorial.jpg
+coverImage: /img/education/danny-hinz-tutorial.jpg
 excerpt: "Explore Danny Hinz's tutorial on using track mattes in After Effects. Learn to mask moving layers and organize them effectively."
 author:
   name: Danny Hinz

diff --git a/components/parts/Video.tsx b/components/parts/Video.tsx
@@ -13,7 +13,7 @@ import { usePlausible } from 'next-plausible'
 import { Lead } from '@typography'
 import { Loading } from '@utility'
 import { useTrackError } from '@lib/trackErrors'
-import type {BaseVideoProps} from '@types'
+import type {BaseVideoProps} from '@/types/video'
 
 //  ––––––––––––––––––––––––––––––––––––––––––
 //               PROP DEFINITIONS
@@ -82,8 +82,10 @@ type VideoProps = BaseVideoProps & (TrackingDisabled | TrackingEnabled)
  * @param {boolean} [props.light] - Enables light mode for the video player.
  * @param {string} [props.className] - Additional CSS classes for styling the video container.
  * @param {boolean} [props.dummy=false] - If `true`, renders a placeholder for testing/debugging.
+ * @param {boolean} [props.enableCaption=false] - If `true`, a caption will be displayed below the video
  * @param {boolean|string} [props.useCDN] - If `true`, prefixes the video URL with a CDN path; custom string for custom prefixes.
  * @param {boolean} [props.enableTracking=false] - If `true`, tracks video interactions via Plausible analytics.
+ * @param {boolean} [props.enableVideoTitle=false] - If `true`, add a title above the video. Defaults to false.
  * @param {string} [props.title] - Title of the video, required when `enableTracking` is `true`.
  * @param {string} [props.eventName] - Custom event name for tracking, applicable when `enableTracking` is `true`.
  *
@@ -116,6 +118,8 @@ export default function Video({
   enableTracking = false,
   eventName,
   useCDN,
+  enableCaption,
+  enableVideoTitle,
   dummy = false,
   title,
 }: VideoProps) {
@@ -144,7 +148,7 @@ export default function Video({
           <div className='relative w-full bg-black aspect-video'>
             <Image
               src={placeholderPoster}
-              alt='Loading placeholder'
+              alt={caption || 'video loading placeholder'}
               fill
               className='object-cover'
             />
@@ -193,16 +197,17 @@ export default function Video({
 
   // Render Component
   return (
-    <div className='w-full h-full'>
-      {videoTitle && (
-        <div className='mt-12'>
-          <Lead color='blue-dark' noMargins className='pb-2 mb-2'>
-            {videoTitle}
-          </Lead>
+    <>
+      {title && enableVideoTitle && (
+        <div className='w-full h-full'>
+          <div className='mt-12'>
+            <Lead color='blue-dark' noMargins className='pb-2 mb-2'>
+              {videoTitle}
+            </Lead>
+          </div>
         </div>
       )}
-
-      <div className={cn(className || 'w-full aspect-w-16 aspect-h-9')}>
+      <div className={cn('w-full aspect-video', className)}>
         <ReactPlayer
           url={useCDN ? `${process.env.NEXT_PUBLIC_IMG_PREFIX}${url}` : url}
           playing={autoPlay}
@@ -222,12 +227,12 @@ export default function Video({
           onEnded={handleEnded}
           onError={handleError}
         />
-        {caption && (
+        {caption && enableCaption && (
           <em className='max-w-md pt-1 mx-auto text-sm font-medium leading-none -mt-7 mb-14 text-blue-dark'>
             {caption}
           </em>
         )}
       </div>
-    </div>
+    </>
   )
 }
diff --git a/lib/spotify.ts b/lib/spotify.ts
@@ -3,13 +3,15 @@ const client_secret = process.env.SPOTIFY_CLIENT_SECRET
 const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN
 
 const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
-// const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`
-// const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks`
+
 const PLAYLISTS_ENDPOINT = `https://api.spotify.com/v1/playlists/`
 const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`
 
 // https://leerob.io/blog/spotify-api-nextjs
 const getAccessToken = async () => {
+  if (!refresh_token) {
+    throw new Error('Spotify refresh token is missing. Please check your environment variables.')
+  }
   const response = await fetch(TOKEN_ENDPOINT, {
     method: 'POST',
     headers: {
@@ -25,16 +27,6 @@ const getAccessToken = async () => {
   return response.json()
 }
 
-// export const getTopTracks = async () => {
-//   const { access_token } = await getAccessToken()
-
-//   return fetch(TOP_TRACKS_ENDPOINT, {
-//     headers: {
-//       Authorization: `Bearer ${access_token}`,
-//     },
-//   })
-// }
-
 export const getPlaylist = async () => {
   const { access_token } = await getAccessToken()
   const SELECTED_PLAYLIST_ENDPOINT = PLAYLISTS_ENDPOINT + `5emLQhY7DYenV7AUbcc2aZ`

diff --git a/pages/about/[slug].tsx b/pages/about/[slug].tsx
@@ -17,19 +17,13 @@ import type { PersonWithFilePath, Awards } from '@/types/people'
 import type { Post } from '@/types/posts'
 import type { CaseStudy } from '@/types/caseStudies'
 
-//Utilities & Components imports
-import remarkGfm from 'remark-gfm'
-
-
-
-
 import {
   About_Team_Header,
   About_Team_PrevNext,
   About_Team_SEO,
   About_Team_Details,
   About_Team_Awards,
-} from '@about/index'
+} from '@about'
 
 import { GetStaticPaths, GetStaticProps } from 'next'
 import type { ReactElement } from 'react'
@@ -41,7 +35,7 @@ import { Credit } from '@types'
 // -- Types ---------------------------------------------------------------------
 
 interface PersonWithBioLink extends PersonWithFilePath {
-  bioLink: string 
+  bioLink: string
 }
 
 interface PagePeopleProps {