From b083c822f7838988425347f1b49c0551de1b03e9 Mon Sep 17 00:00:00 2001 From: bitfreee Date: Sat, 8 Jun 2024 22:55:52 +0700 Subject: [PATCH] optimize image --- src/components/custom-image.tsx | 50 ++++++++++++++++--------------- src/components/hero.tsx | 5 ++-- src/components/shows-carousel.tsx | 17 ++++------- src/components/shows-modal.tsx | 28 ++++++++--------- src/components/shows-skeleton.tsx | 4 +-- src/lib/utils.ts | 6 ++-- 6 files changed, 51 insertions(+), 59 deletions(-) diff --git a/src/components/custom-image.tsx b/src/components/custom-image.tsx index b893545..1c284c0 100644 --- 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, -) => { +const CustomImage = forwardRef(function CustomImage( + props: ImageProps, + ref: React.Ref, +) { return ( {props.alt ); -}; +}); export default CustomImage; diff --git a/src/components/hero.tsx b/src/components/hero.tsx index 8220807..b38e1c2 100644 --- 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) => { <>
diff --git a/src/components/shows-carousel.tsx b/src/components/shows-carousel.tsx index daa824a..65ce115 100644 --- 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, ) => { @@ -130,7 +122,7 @@ export const ShowCard = ({ = { }; 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 && ( diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 07ae1e5..2e2fe39 100644 --- 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,