feat(vod): local users and playback start

Zibbp · Sep 30, 2023 · 304059e · 304059e
1 parent 3fd61bd
commit 304059e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git 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) => {
         </div>
         <div className={classes.titleBarRight}>
           <div className={classes.titleBarBadge}>
-            {vod.views ? (
+            {vod.views && (
               <Group mr={15}>
                 <Tooltip
-                  label={`${vod.views.toLocaleString()} views`}
+                  label={`${vod.views.toLocaleString()} source views`}
                   openDelay={250}
                 >
                   <div className={classes.titleBarBadge}>
@@ -87,12 +87,16 @@ export const VodTitleBar = ({ vod }: any) => {
                   </div>
                 </Tooltip>
               </Group>
-            ) : (
+            )}
+            {vod.local_views && (
               <Group mr={15}>
-                <Tooltip label={`0 views`} openDelay={250}>
+                <Tooltip
+                  label={`${vod.local_views.toLocaleString()} local views`}
+                  openDelay={250}
+                >
                   <div className={classes.titleBarBadge}>
-                    <Text mr={3}>0</Text>
-                    <IconUsers size={20} />
+                    <Text mr={3}>{vod.local_views.toLocaleString()}</Text>
+                    <IconUser size={20} />
                   </div>
                 </Tooltip>
               </Group>

diff --git 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<string>("");
   const [videoPoster, setVideoPoster] = useState<string>("");
   const [videoTitle, setVideoTitle] = useState<string>("");
+  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;