refactor(frontend): split endpoint handling

frontend/src/pages/ClipEdit.tsx

@@ -5,7 +5,8 @@ import PlaybackSlider from "./../components/video/PlaybackSlider";
 import ClipRangeSlider from "./../components/video/ClipRangeSlider";
 import ConfigBox from "../components/video/ConfigBox.tsx";
 import ExportWidget from "../components/video/ExportWidget.tsx";
-import { compress, getJob } from "../utils/endpoints"
+import { compress } from "../utils/api/media"
+import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
 import Box from "../components/Box.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";

frontend/src/pages/EditClip.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
-import { getClipById, patchClip } from "../utils/endpoints.ts";
+import { getClipById, patchClip } from "../utils/api/clips.ts";
 import Box from "../components/Box.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 

frontend/src/pages/EditVod.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
-import { getVodById, patchVod } from "../utils/endpoints.ts";
+import { getVodById, patchVod } from "../utils/api/vods.ts";
 import Box from "../components/Box.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 

frontend/src/pages/MyClips.tsx

@@ -1,7 +1,7 @@
 import VideoCard from "../components/video/VideoCard";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { getClips, deleteClip } from "../utils/endpoints";
+import { getClips, deleteClip } from "../utils/api/clips";
 import type { Clip } from "../utils/types";
 
 const MyClips = () => {

frontend/src/pages/MyVods.tsx

@@ -1,7 +1,7 @@
 import VideoCard from "../components/video/VideoCard";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { getVods, deleteVod } from "../utils/endpoints";
+import { getVods, deleteVod } from "../utils/api/vods";
 import type { Vod } from "../utils/types";
 
 const MyVods = () => {

frontend/src/pages/Profile.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { Eye, EyeOff, Copy, Check } from "lucide-react";
 import Box from "../components/Box.tsx";
-import { getUser } from "../utils/endpoints.ts";
+import { getUser } from "../utils/api/users.ts";
 import type { User } from "../utils/types.ts";
 import { formatLocalDate } from "../utils/utils.ts";
 

frontend/src/pages/StreamControl.tsx

@@ -3,17 +3,11 @@ import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lu
 import clsx from "clsx";
 import Box from "../components/Box.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
-import {
-    getUser,
-    getCurrentStream,
-    getStreamHistory,
-    getMarkers,
-    createMarker,
-    deleteMarker,
-    saveSectionByMarkers,
-    clipSection,
-    getJob,
-} from "../utils/endpoints.ts";
+import { getUser } from "../utils/api/users.ts";
+import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
+import { getMarkers, createMarker, deleteMarker } from "../utils/api/markers.ts";
+import { saveSectionByMarkers, clipSection } from "../utils/api/media.ts";
+import { getJob } from "../utils/api/jobs.ts";
 import type { User, StreamStatus, StreamHistoryItem, Marker, JobResponse } from "../utils/types.ts";
 import { formatTime, formatLocalDate, stringToDate } from "../utils/utils.ts";
 
@@ -134,7 +128,6 @@ const StreamControl = () => {
         refreshMarkers();
         const interval = setInterval(refreshMarkers, 5000);
         return () => clearInterval(interval);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isStreaming, streamStatus?.id]);
 
     useEffect(() => {

frontend/src/pages/VideoPlayer.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Lock, Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
 import type { Clip } from "../utils/types";
-import { AuthError, getClipById, getVideoBlob } from "../utils/endpoints.ts";
+import { AuthError } from "../utils/api/client.ts";
+import { getClipById, getVideoBlob } from "../utils/api/clips.ts";
 import Box from "../components/Box.tsx";
 import { dateToTimeAgo, formatTime, stringToDate } from "../utils/utils.ts";
 

frontend/src/pages/VodPlayer.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Lock, Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
 import type { Vod } from "../utils/types";
-import { AuthError, getVodById, getVodBlob } from "../utils/endpoints.ts";
+import { AuthError } from "../utils/api/client.ts";
+import { getVodById, getVodBlob } from "../utils/api/vods.ts";
 import Box from "../components/Box.tsx";
 import { dateToTimeAgo, formatTime, stringToDate } from "../utils/utils.ts";