perf(api): add HTTP range requests on media sources (#9)

Reviewed-on: https://gitea.vodsystem.ddns.net/dylan/vod-system/pulls/9

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// App.jsx
+ // App.jsx
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout';
 import ClipUpload from './pages/ClipUpload';
@@ -7,8 +7,9 @@ import Home from './pages/Home';
 import {useEffect} from "react";
 import MyClips from './pages/MyClips';
 import MyVods from './pages/MyVods';
-import VideoPlayer from "./pages/VideoPlayer.tsx";
-import VodPlayer from "./pages/VodPlayer.tsx";
+import MediaPlayer from "./pages/MediaPlayer.tsx";
+import { getVodById, getVodMediaUrl } from "./utils/api/vods.ts";
+import { getClipById, getClipMediaUrl } from "./utils/api/clips.ts";
 import EditClip from "./pages/EditClip.tsx";
 import EditVod from "./pages/EditVod.tsx";
 import Profile from "./pages/Profile.tsx";
@@ -31,8 +32,8 @@ function App() {
                         <Route path="/create/:id" element={<ClipEdit />} />
                         <Route path="/my-clips" element={<MyClips />} />
                         <Route path="/my-vods" element={<MyVods />} />
-                        <Route path="/video/:id" element={<VideoPlayer />} />
-                        <Route path="/vod/:id" element={<VodPlayer />} />
+                        <Route path="/video/:id" element={<MediaPlayer noun="Clip" getMediaUrl={getClipMediaUrl} fetchDetails={getClipById} />} />
+                        <Route path="/vod/:id" element={<MediaPlayer noun="VoD" getMediaUrl={getVodMediaUrl} fetchDetails={getVodById} />} />
                         <Route path="/clips/:id/edit" element={<EditClip />} />
                         <Route path="/vods/:id/edit" element={<EditVod />} />
                         <Route path="/profile" element={<Profile />} />