diff --git a/src/components/Vod/TitleBar.tsx b/src/components/Vod/TitleBar.tsx
index d0bc639..9cff29e 100644
--- a/src/components/Vod/TitleBar.tsx
+++ b/src/components/Vod/TitleBar.tsx
@@ -7,7 +7,7 @@ import {
Text,
Tooltip,
} from "@mantine/core";
-import { IconCalendarEvent, IconUsers } from "@tabler/icons";
+import { IconCalendarEvent, IconUser, IconUsers } from "@tabler/icons";
import dayjs from "dayjs";
import getConfig from "next/config";
import { ROLES, useJsxAuth } from "../../hooks/useJsxAuth";
@@ -75,10 +75,10 @@ export const VodTitleBar = ({ vod }: any) => {
- {vod.views ? (
+ {vod.views && (
@@ -87,19 +87,23 @@ export const VodTitleBar = ({ vod }: any) => {
- ) : (
+ )}
+ {vod.local_views && (
-
+
- 0
-
+ {vod.local_views.toLocaleString()}
+
)}
@@ -111,7 +115,7 @@ export const VodTitleBar = ({ vod }: any) => {
-
+
{vod.type}
@@ -128,4 +132,4 @@ export const VodTitleBar = ({ vod }: any) => {
);
-};
+};
\ No newline at end of file
diff --git a/src/components/Vod/VideoPlayer.tsx b/src/components/Vod/VideoPlayer.tsx
index 920629b..18444f4 100644
--- a/src/components/Vod/VideoPlayer.tsx
+++ b/src/components/Vod/VideoPlayer.tsx
@@ -28,6 +28,7 @@ import ReactDOM from "react-dom";
import TheaterModeIcon from "./TheaterModeIcon";
import { escapeURL } from "../../util/util";
import { useSearchParams } from 'next/navigation'
+import { showNotification } from "@mantine/notifications";
const useStyles = createStyles((theme) => ({
playerContainer: {
@@ -53,6 +54,7 @@ const NewVideoPlayer = ({ vod }: any) => {
const [videoType, setVideoType] = useState("");
const [videoPoster, setVideoPoster] = useState("");
const [videoTitle, setVideoTitle] = useState("");
+ const startedPlayback = useRef(false);
const searchParams = useSearchParams()
@@ -83,6 +85,31 @@ const NewVideoPlayer = ({ vod }: any) => {
}),
});
+ // start playback
+ useEffect(() => {
+ if (!data) return;
+ if (startedPlayback.current) return;
+ try {
+ useApi(
+ {
+ method: "POST",
+ url: `/api/v1/playback/start?video_id=${vod.id}`,
+ withCredentials: false,
+ },
+ false
+ ).then(() => {
+ startedPlayback.current = true;
+ })
+ } catch (error) {
+ console.error(error);
+ showNotification({
+ title: "Error",
+ message: "Failed to start playback",
+ color: "red",
+ });
+ }
+ }, [data])
+
useEffect(() => {
if (!data) return;
@@ -234,4 +261,4 @@ const NewVideoPlayer = ({ vod }: any) => {
);
};
-export default NewVideoPlayer;
+export default NewVideoPlayer;
\ No newline at end of file