Allow MP4 links to resolve properly.

frontend/pages/[id]/[vslug].tsx

@@ -11,9 +11,9 @@ import {
 import { useIntl } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
-import { IncomingMessage } from 'http';
 import { VideoEntry } from 'util/datatypes/VideoList';
 import DownloadButton from 'components/DownloadButton';
+import { basename } from 'path';
 import { getHLSMasterURL } from '../../util';
 
 import VideoPlayer from '../../components/VideoPlayer';
@@ -83,7 +83,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 
   // Check if vslug is actually point to a file name
-  const sanitizedFileName = sanitizeFileName(vslug);
+  const sanitizedFileName = `${sanitizeFileName(basename(vslug, '.mp4'))}.mp4`;
   const realVIndex = videos.findIndex(
     (video: VideoEntry) => video.fileName === sanitizedFileName,
   );

frontend/util/sanitizeFileName.ts

@@ -1,3 +1,3 @@
 const sanitizeFileName = (name: string) => name
-  .replace(/[<>:"/\\|?*%() ]/g, '_');
+  .replace(/[.<>:"/\\|?*%() ]/g, '_');
 export default sanitizeFileName;