fix: change src structure to fetch files from CDN instead of locally

subvisual · Oct 16, 2024 · a04ce9d · a04ce9d
1 parent a770ed1
commit a04ce9d
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"}
 
       />