src/app/[locale]/video/[platform]/[id]/page.tsx

@@ -9,12 +9,19 @@ import { decodeVideoUrlPath } from '@/utils/string';
 import { fetchVideoData } from '@/utils/scrape/xvideos/video';
 
 import { useLocale } from 'next-intl';
+import { Platforms } from '@/meta/settings';
 
-export default async function VideoPage({ params }: { params: { id: string } }) {
+export default async function VideoPage({ params }: { params: { platform: Platforms, id: string } }) {
+
+  const { platform, id } = params
 
   const locale = useLocale()
 
-  const decodedId = decodeVideoUrlPath(params.id)
+  if (!platform || !Object.keys(Platforms).includes(platform)) {
+    redirect(`/${locale}/404`)
+  }
+
+  const decodedId = decodeVideoUrlPath(id)
 
   const [data, related] = await fetchVideoData(decodedId)
 
@@ -23,6 +30,6 @@ export default async function VideoPage({ params }: { params: { id: string } })
   }
  
   return <Layout>
-    <Video id={params.id} data={data} related={related}/>
+    <Video id={id} data={data} related={related}/>
   </Layout>
 }

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/index.tsx

@@ -9,25 +9,28 @@ import classNames from 'classnames';
 import Link from 'next/link'
 
 import style from './Thumbnail.module.scss'
+
 import { encodeVideoUrlPath } from '@/utils/string';
+import { Platforms } from '@/meta/settings';
 
 interface Props {
     locale: string
     videoUrl: string
     imgUrl: string
+    platform: Platforms
     text: string
     show: boolean
 }
 
 const Thumbnail: React.FC<Props> = (props) => {
 
-    const { locale, videoUrl, imgUrl, text, show } = props
+    const { locale, platform, videoUrl, imgUrl, text, show } = props
 
     const encodedUri = encodeVideoUrlPath(videoUrl)
 
     return (
         <div className={classNames(style.thumbnailContainer, { [style.show]: show } )}>
-            <Link href={`/${locale}/video/${encodedUri}`}>
+            <Link href={`/${locale}/video/${platform}/${encodedUri}`}>
                 <Img className={style.image} src={imgUrl} unloader={<div className={style.imgPlaceholder}></div>} />
                 <div className={style.text}>{text}</div>
             </Link>

src/components/Layout/Results/Wrapper/Gallery/index.tsx

@@ -27,6 +27,7 @@ const Gallery: React.FC<Props> = (props) => {
                         key={key}
                         imgUrl={elem.imgUrl}
                         videoUrl={elem.videoUrl}
+                        platform={elem.platform}
                         text={elem.text}
                         locale={locale} />
                 })}

src/meta/data.ts

@@ -1,7 +1,10 @@
+import { Platforms } from "./settings"
+
 export interface GalleryData {
     videoUrl: string
     imgUrl: string
     text: string
+    platform: Platforms
 }
 
 export interface VideoData {

src/utils/scrape/xvideos/gallery.ts

@@ -4,6 +4,7 @@ import axios, { AxiosError } from 'axios';
 import * as cheerio from "cheerio";
 import { getHeaders } from '../headers';
 import { getXVideosQueryUrl } from './url';
+import { Platforms } from '@/meta/settings';
 
 interface FetchParams {
     baseUrl?: string
@@ -37,7 +38,8 @@ export const fetchGalleryData = async (params?: FetchParams): Promise<GalleryDat
                 videoUrl && imgUrl && text && data.push({
                     videoUrl,
                     imgUrl,
-                    text
+                    text,
+                    platform: Platforms.xvideos
                 })
             })