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

@@ -6,13 +6,15 @@ import Video from "@/components/Pages/Video";
 
 import { fetchVideoData } from "@/utils/scrape/video";
 
+import { decodeVideoUrlPath } from '@/utils/string';
+
 import { useLocale } from 'next-intl';
 
 export default async function VideoPage({ params }: { params: { id: string } }) {
 
   const locale = useLocale()
 
-  const decodedId = decodeURIComponent(params.id)
+  const decodedId = decodeVideoUrlPath(params.id)
 
   const [data, related] = await fetchVideoData(decodedId)
 

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

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import Link from 'next/link'
 
 import style from './Thumbnail.module.scss'
+import { encodeVideoUrlPath } from '@/utils/string';
 
 interface Props {
     locale: string
@@ -22,7 +23,7 @@ const Thumbnail: React.FC<Props> = (props) => {
 
     const { locale, videoUrl, imgUrl, text, show } = props
 
-    const encodedUri = encodeURIComponent(videoUrl)
+    const encodedUri = encodeVideoUrlPath(videoUrl)
 
     return (
         <div className={classNames(style.thumbnailContainer, { [style.show]: show } )}>

src/utils/string.ts

@@ -1,20 +1,20 @@
 import { GalleryData } from "@/meta/data";
 
 export const findVideoUrlInsideTagStringByFunctionNameAndExtension = (
-    tagBlock: string, functionName: string, extension: string): string|null => {
-        const start = tagBlock.indexOf(`html5player.${functionName}('`) + `html5player.${functionName}('`.length;
-        const end = tagBlock.toString().indexOf("'", start);
+    tagBlock: string, functionName: string, extension: string): string | null => {
+    const start = tagBlock.indexOf(`html5player.${functionName}('`) + `html5player.${functionName}('`.length;
+    const end = tagBlock.toString().indexOf("'", start);
 
-        const substr = tagBlock.substring(start, end);
+    const substr = tagBlock.substring(start, end);
 
-        if (substr.includes(extension)) {
-            return substr
-        }
+    if (substr.includes(extension)) {
+        return substr
+    }
 
-        return null
+    return null
 }
 
-export const findRelatedVideos = (tagBlock: string): GalleryData[]|null => {
+export const findRelatedVideos = (tagBlock: string): GalleryData[] | null => {
     if (!(tagBlock.includes('video_related=['))) {
         return null
     }
@@ -43,9 +43,17 @@ export const findRelatedVideos = (tagBlock: string): GalleryData[]|null => {
 
 export const removeHttpS = (url: string): string => {
     if (url.startsWith("http://")) {
-      return url.slice(7);
+        return url.slice(7);
     } else if (url.startsWith("https://")) {
-      return url.slice(8);
+        return url.slice(8);
     }
     return url;
-  };
+};
+
+export const encodeVideoUrlPath = (input: string): string => {
+    return input.replace(/^\/+/, '').replace(/\/+$/, '').replace(/\//g, "-");
+};
+
+export const decodeVideoUrlPath = (input: string): string => {
+    return `/${input.replace(/^\-+/, '').replace(/\-+$/, '').replace(/\-/g, "/")}`;
+};