optimize image

bitfreee · Jun 8, 2024 · b083c82 · b083c82
1 parent 07bf722
commit b083c82
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 59 deletions.
diff --git a/src/components/custom-image.tsx b/src/components/custom-image.tsx
@@ -1,5 +1,5 @@
 import { type ImageProps, type ImageLoaderProps } from 'next/image';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Image from 'next/image';
 import { env } from '@/env.mjs';
 
@@ -24,36 +24,38 @@ const customLoader = ({ src, width, quality }: ImageLoaderProps) => {
   return src;
 };
 
-const defaultLoader = ({ src, width, quality }: ImageLoaderProps) => {
-  // if (src[0] === "/") src = src.slice(1);
-  const cutOffIndex = src.lastIndexOf('-w');
-  src = cutOffIndex !== -1 ? src.substring(0, cutOffIndex) : src;
-  src = src.replace("'", ''); // hot fix crawl error
-  src = encodeURIComponent(src);
-  const params = [`w=${width}`];
-  if (quality) {
-    params.push(`q=${quality}`);
-  } else {
-    params.push(`q=75`);
-  }
-  const paramsString = params.join('&');
-  let urlEndpoint = '/_next/image';
-  if (urlEndpoint.endsWith('/'))
-    urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);
-  return `${urlEndpoint}?url=${src}&${paramsString}`;
-};
+// const defaultLoader = ({ src, width, quality }: ImageLoaderProps) => {
+//   // if (src[0] === "/") src = src.slice(1);
+//   const cutOffIndex = src.lastIndexOf('-w');
+//   src = cutOffIndex !== -1 ? src.substring(0, cutOffIndex) : src;
+//   src = src.replace("'", ''); // hot fix crawl error
+//   src = encodeURIComponent(src);
+//   const params = [`w=${width}`];
+//   if (quality) {
+//     params.push(`q=${quality}`);
+//   } else {
+//     params.push(`q=75`);
+//   }
+//   const paramsString = params.join('&');
+//   let urlEndpoint = '/_next/image';
+//   if (urlEndpoint.endsWith('/'))
+//     urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);
+//   return `${urlEndpoint}?url=${src}&${paramsString}`;
+// };
+//
 
-const CustomImage = (
-  props: ImageProps & React.RefAttributes<HTMLImageElement | null>,
-) => {
+const CustomImage = forwardRef(function CustomImage(
+  props: ImageProps,
+  ref: React.Ref<HTMLImageElement>,
+) {
   return (
     <Image
       {...props}
-      // loader={imageKitLoader}
       loader={customLoader}
+      ref={ref}
       alt={props.alt || env.NEXT_PUBLIC_SITE_NAME}
     />
   );
-};
+});
 
 export default CustomImage;
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -9,8 +9,6 @@ import { MediaType, type Show } from '@/types';
 import { type AxiosResponse } from 'axios';
 import Link from 'next/link';
 import React from 'react';
-import Image from 'next/image';
-import { env } from '@/env.mjs';
 import CustomImage from './custom-image';
 
 interface HeroProps {
@@ -64,11 +62,12 @@ const Hero = ({ randomShow }: HeroProps) => {
         <>
           <div className="absolute inset-0 z-0 h-[100vw] w-full sm:h-[56.25vw]">
             <CustomImage
-              src={`https://image.tmdb.org/t/p/w1280${
+              src={`https://image.tmdb.org/t/p/original${
                 randomShow?.backdrop_path ?? randomShow?.poster_path ?? ''
               }`}
               alt={randomShow?.title ?? 'poster'}
               className="-z-40 h-auto w-full object-cover"
+              sizes="(max-width: 768px) 50vw, (max-width: 1200px) 100vw, 33vw"
               fill
               priority
             />

diff --git a/src/components/shows-carousel.tsx b/src/components/shows-carousel.tsx
@@ -1,15 +1,13 @@
 'use client';
 
-import * as React from 'react';
 import { useModalStore } from '@/stores/modal';
 import { MediaType, type Show } from '@/types';
+import * as React from 'react';
 
-import { cn, getNameFromShow, getSlug } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
+import { cn, getNameFromShow, getSlug } from '@/lib/utils';
 import { usePathname } from 'next/navigation';
-import Image from 'next/image';
-import { env } from '@/env.mjs';
 import CustomImage from './custom-image';
 
 interface ShowsCarouselProps {
@@ -93,13 +91,7 @@ const ShowsCarousel = ({ title, shows }: ShowsCarouselProps) => {
 
 export default ShowsCarousel;
 
-export const ShowCard = ({
-  show,
-  pathname,
-}: {
-  show: Show;
-  pathname: string;
-}) => {
+export const ShowCard = ({ show }: { show: Show; pathname: string }) => {
   const imageOnErrorHandler = (
     event: React.SyntheticEvent<HTMLImageElement, Event>,
   ) => {
@@ -130,14 +122,15 @@ export const ShowCard = ({
       <CustomImage
         src={
           show.poster_path ?? show.backdrop_path
-            ? `https://image.tmdb.org/t/p/w300${
+            ? `https://image.tmdb.org/t/p/w500${
                 show.poster_path ?? show.backdrop_path
               }`
             : '/images/grey-thumbnail.jpg'
         }
         alt={show.title ?? show.name ?? 'poster'}
         className="h-full w-full cursor-pointer rounded-lg px-1 transition-all md:hover:scale-110"
         fill
+        sizes="(max-width: 768px) 50vw, (max-width: 1200px) 100vw, 33vw"
         style={{
           objectFit: 'cover',
         }}

diff --git a/src/components/shows-modal.tsx b/src/components/shows-modal.tsx
@@ -1,15 +1,5 @@
 'use client';
 
-import * as React from 'react';
-import { useModalStore } from '@/stores/modal';
-import {
-  MediaType,
-  type Genre,
-  type ShowWithGenreAndVideo,
-  type VideoResult,
-} from '@/types';
-import Youtube from 'react-youtube';
-import { getMobileDetect, getYear } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import {
@@ -18,11 +8,19 @@ import {
   DialogDescription,
   DialogTitle,
 } from '@/components/ui/dialog';
-import Link from 'next/link';
+import { getMobileDetect, getYear } from '@/lib/utils';
 import MovieService from '@/services/MovieService';
+import { useModalStore } from '@/stores/modal';
+import {
+  MediaType,
+  type Genre,
+  type ShowWithGenreAndVideo,
+  type VideoResult,
+} from '@/types';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import Image from 'next/image';
-import { env } from '@/env.mjs';
+import * as React from 'react';
+import Youtube from 'react-youtube';
 import CustomImage from './custom-image';
 
 type YouTubePlayer = {
@@ -59,7 +57,6 @@ const defaultOptions: Record<string, object> = {
 };
 
 const ShowModal = () => {
-  const pathname = usePathname();
   // stores
   const modalStore = useModalStore();
   const IS_MOBILE: boolean = isMobile();
@@ -162,7 +159,8 @@ const ShowModal = () => {
             ref={imageRef}
             alt={modalStore?.show?.title ?? 'poster'}
             className="-z-40 z-[1] h-auto w-full object-cover"
-            src={`https://image.tmdb.org/t/p/w1280${modalStore.show?.backdrop_path}`}
+            src={`https://image.tmdb.org/t/p/original${modalStore.show?.backdrop_path}`}
+            sizes="(max-width: 768px) 50vw, (max-width: 1200px) 100vw, 33vw"
           />
           {trailer && (
             <Youtube

diff --git a/src/components/shows-skeleton.tsx b/src/components/shows-skeleton.tsx
@@ -1,10 +1,9 @@
 import { motion } from 'framer-motion';
 
-import { itemFade, itemsReveal } from '@/lib/constants';
 import { Skeleton } from '@/components/ui/skeleton';
+import { itemFade, itemsReveal } from '@/lib/constants';
 import { cn } from '@/lib/utils';
 import { useSearchStore } from '@/stores/search';
-import Image from 'next/image';
 import CustomImage from './custom-image';
 
 interface ShowsSkeletonProps {
@@ -49,6 +48,7 @@ const ShowsSkeleton = ({
                   <CustomImage
                     alt={'poster'}
                     src={'/images/grey-thumbnail.jpg'}
+                    sizes="(max-width: 768px) 50vw, (max-width: 1200px) 100vw, 33vw"
                     className="h-full w-full cursor-pointer rounded-lg px-1 transition-all md:hover:scale-110"
                     style={{ objectFit: 'cover' }}
                   />

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -3,7 +3,7 @@ import { env } from '@/env.mjs';
 import MovieService from '@/services/MovieService';
 import type { CategorizedShows, KeyWord, KeyWordResponse, Show } from '@/types';
 import { type AxiosResponse } from 'axios';
-import { type ClassValue, clsx } from 'clsx';
+import { clsx, type ClassValue } from 'clsx';
 import { cache } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -152,7 +152,7 @@ export const handleMetadata = cache(
         type: 'website',
         locale: 'en_US',
         url: `${siteConfig.url}/${page}/${slug}`,
-        images: `https://image.tmdb.org/t/p/w1280${
+        images: `https://image.tmdb.org/t/p/original${
           data?.backdrop_path ?? data?.poster_path ?? ''
         }`,
         title: getNameFromShow(data),
@@ -163,7 +163,7 @@ export const handleMetadata = cache(
         card: 'summary_large_image',
         title: getNameFromShow(data),
         description: data?.overview ?? '',
-        images: `https://image.tmdb.org/t/p/w1280${
+        images: `https://image.tmdb.org/t/p/original${
           data?.backdrop_path ?? data?.poster_path ?? ''
         }`,
         creator: siteConfig.author,