feat: local view count

Add a local_view column to the vod schema.
Add a start route to the playback group.
Will be invoked on every initial page load when viewing a video on the frontend (authenticated or unauthenticated).
Only includes incrementing the local_video count for now.

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()} Aufrufe`}
+                  label={`${vod.views.toLocaleString()} source views`}
                   openDelay={250}
                 >
                   <div className={classes.titleBarBadge}>
@@ -87,19 +87,23 @@ export const VodTitleBar = ({ vod }: any) => {
                   </div>
                 </Tooltip>
               </Group>
-            ) : (
+            )}
+            {vod.local_views && (
               <Group mr={15}>
-                <Tooltip label={`0 Aufrufe`} 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>
             )}
             <Group mr={15}>
               <Tooltip
-                label={`Ursprünglich gestreamt: ${vod.streamed_at}`}
+                label={`Originally streamed at ${vod.streamed_at}`}
                 openDelay={250}
               >
                 <div className={classes.titleBarBadge}>
@@ -111,7 +115,7 @@ export const VodTitleBar = ({ vod }: any) => {
               </Tooltip>
             </Group>
             <Group>
-              <Tooltip label={`Video Typ`} openDelay={250}>
+              <Tooltip label={`Video Type`} openDelay={250}>
                 <div className={classes.titleBarBadge}>
                   <Badge color="red" color="violet" size="lg">
                     {vod.type}
@@ -128,4 +132,4 @@ export const VodTitleBar = ({ vod }: any) => {
       </div>
     </div>
   );
-};
+};

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;
 
@@ -234,4 +261,4 @@ const NewVideoPlayer = ({ vod }: any) => {
   );
 };
 
-export default NewVideoPlayer;
+export default NewVideoPlayer;