From a04ce9d2f89cf4754341ebac9f1dd4fea3ef889e Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Wed, 16 Oct 2024 10:06:17 +0100
Subject: [PATCH] fix: change src structure to fetch files from CDN instead of
 locally

---
 src/app/(pages)/page.tsx                      | 26 +++++++++++++++++++
 src/app/_blocks/BlogpostContent/index.tsx     |  3 ++-
 src/app/_blocks/EpisodeHead/index.tsx         |  9 ++++---
 src/app/_blocks/EpisodeHead/styles.module.css |  1 +
 src/app/_components/AuthorPill/index.tsx      |  2 +-
 src/app/_components/AuthorSummary/index.tsx   |  2 +-
 src/app/_components/ContentCard/index.tsx     |  2 +-
 src/app/_components/FeaturedImage/index.tsx   |  5 ++--
 8 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx
index 5984c34..b55a368 100644
--- a/src/app/(pages)/page.tsx
+++ b/src/app/(pages)/page.tsx
@@ -6,3 +6,29 @@ export const revalidate = 10
 export default PageTemplate
 
 // export { generateMetadata }
+//
+// import configPromise from '@payload-config'
+// import { getPayloadHMR } from "@payloadcms/next/utilities";
+// import FeaturedImage from "@/app/_components/FeaturedImage";
+// export default async function Page() {
+//
+//   const payload = await getPayloadHMR({config: configPromise})
+//   const media = await payload.find({
+//     collection: 'media'
+//   })
+//   const authors = await payload.find({
+//     collection: 'authors'
+//   }).then(res => res.docs[0])
+//
+//   return (
+//         <div>
+//           <h5>Hello</h5>
+//           {/*{media && <pre>{JSON.stringify(media, null, 2)}</pre>}*/}
+//           {authors && <pre>{JSON.stringify(authors.featuredImage.url, null, 2)}</pre>}
+//           <FeaturedImage src={authors.featuredImage.url}/>
+//
+//
+//
+//         </div>
+//     )
+// }
diff --git a/src/app/_blocks/BlogpostContent/index.tsx b/src/app/_blocks/BlogpostContent/index.tsx
index 8e3c59c..ad515b1 100644
--- a/src/app/_blocks/BlogpostContent/index.tsx
+++ b/src/app/_blocks/BlogpostContent/index.tsx
@@ -7,10 +7,11 @@ import RichText from "@/components/RichText";
 
 export default function BlogpostContent({ blogpost }) {
   const { summary, featuredImage } = blogpost;
+  console.log('post passing src:', featuredImage.url)
   return (
     <div className={styles.container}>
       <div className={styles.featuredImage}>
-        {featuredImage && <FeaturedImage src={featuredImage} />}
+        {featuredImage && <FeaturedImage src={featuredImage.url} />}
       </div>
       <div className={styles.summary}>{summary}</div>
       <RichText content={blogpost.content} />
diff --git a/src/app/_blocks/EpisodeHead/index.tsx b/src/app/_blocks/EpisodeHead/index.tsx
index f870422..56421af 100644
--- a/src/app/_blocks/EpisodeHead/index.tsx
+++ b/src/app/_blocks/EpisodeHead/index.tsx
@@ -17,10 +17,11 @@ export default function EpisodeHead({ episode }) {
   // TODO: convert into conditional logic based on ContentType
 
   // Initial undefined state
-  const { audioFileSource, audioFileType } = getAudio(episodeFile)
+  // const { audioFileSource, audioFileType } = getAudio(episodeFile)
 
   return (
     <div className={styles.container}>
+      {/*{<pre>{JSON.stringify(episode.episodeFile, null, 2)}</pre>}*/}
       <BackButton className={styles.backButton} color={'var(--soft-white-100)'} />
 
       <div className={styles.metadataContainer}>
@@ -40,12 +41,12 @@ export default function EpisodeHead({ episode }) {
         {/* TODO Add conditionals later on: render only if it's a podcast episode */}
         <div className={styles.audioPlayer}>
           {/*// @ts-ignore*/}
-          <AudioPlayer src={audioFileSource} type={audioFileType} />
+          <AudioPlayer src={episode.episodeFile.url} type={episode.episodeFile.mimeType} />
         </div>
 
         {/* TODO: Second Column displays EpisodeFeaturedImage if ContentType is podcast */}
-        <div className={styles.featuredImageContainer}>
-          {featuredImage && <FeaturedImage className={styles.featuredImage} src={featuredImage} />}
+        <div className={styles.featuredImage}>
+          {featuredImage && <FeaturedImage className={styles.featuredImage} src={featuredImage.url} />}
         </div>
       </div>
     </div>
diff --git a/src/app/_blocks/EpisodeHead/styles.module.css b/src/app/_blocks/EpisodeHead/styles.module.css
index a651b8c..e1b4109 100644
--- a/src/app/_blocks/EpisodeHead/styles.module.css
+++ b/src/app/_blocks/EpisodeHead/styles.module.css
@@ -61,6 +61,7 @@
 }
 
 .featuredImage {
+  position: relative;
   width: max(120px, 294px);
   aspect-ratio: 1 / 1;
   border-radius: 10px;
diff --git a/src/app/_components/AuthorPill/index.tsx b/src/app/_components/AuthorPill/index.tsx
index 5ef3887..f35fa29 100644
--- a/src/app/_components/AuthorPill/index.tsx
+++ b/src/app/_components/AuthorPill/index.tsx
@@ -25,7 +25,7 @@ const dynamicVars = {
     <>
       <div className={styles.authorPill}>
         <div className={styles.authorImage}>
-          {featuredImage && <FeaturedImage src={featuredImage} />}
+          {featuredImage && <FeaturedImage src={featuredImage.url} />}
         </div>
         {name}
       </div>
diff --git a/src/app/_components/AuthorSummary/index.tsx b/src/app/_components/AuthorSummary/index.tsx
index 25d0764..9e0f6e6 100644
--- a/src/app/_components/AuthorSummary/index.tsx
+++ b/src/app/_components/AuthorSummary/index.tsx
@@ -14,7 +14,7 @@ export default function AuthorSummary({ author }) {
   return (
     <div className={styles.gridContainer}>
       <div className={styles.authorInfoCard}>
-        {featuredImage && <FeaturedImage className={styles.featuredImage} src={featuredImage} />}
+        {featuredImage && <FeaturedImage className={styles.featuredImage} src={featuredImage.url} />}
         <div className={styles.authorInfo}>
           <h5>{name}</h5>
           <p>{role}</p>
diff --git a/src/app/_components/ContentCard/index.tsx b/src/app/_components/ContentCard/index.tsx
index 88638ed..1abd4dd 100644
--- a/src/app/_components/ContentCard/index.tsx
+++ b/src/app/_components/ContentCard/index.tsx
@@ -43,7 +43,7 @@ export default function ContentCard({ contentType, content }: ContentSummaryProp
         <div className={styles.contentMetaContainer}>
           <div className={styles.imageContainer}>
           {/*  @ts-ignore */}
-            {featuredImage && <FeaturedImage src={featuredImage} />}
+            {featuredImage && <FeaturedImage src={featuredImage.url} />}
             </div>
           {/*<ArchiveButton collection={archiveMap[contentType]} />*/}
           <h6>{title} </h6>
diff --git a/src/app/_components/FeaturedImage/index.tsx b/src/app/_components/FeaturedImage/index.tsx
index 6a81aec..2b596a0 100644
--- a/src/app/_components/FeaturedImage/index.tsx
+++ b/src/app/_components/FeaturedImage/index.tsx
@@ -9,14 +9,15 @@ import { fetchMediaByID } from "@/app/_utilities/contentFetchers";
 export default function FeaturedImage({ src, className }: { className?: string; src: Media }) {
 
 
-  const imageSource = getImage(src);
+  // const imageSource = getImage(src);
+  // console.log('src is:',src)
 
 
   return (
 
       <Image fill={true}
              className={className ? className : styles.featuredImage}
-             src={imageSource} alt={"alt info"}
+             src={src} alt={"alt info"}
 
       />