Adds video and name statistics

src/hooks/useFetchVideos.tsx

@@ -12,6 +12,9 @@ import {
 import {
   setIsLoadingGlobal,
   setUserAvatarHash,
+  setTotalVideosPublished,
+  setTotalNamesPublished,
+  setVideosPerNamePublished,
 } from "../state/features/globalSlice";
 import { RootState } from "../state/store";
 import { fetchAndEvaluateVideos } from "../utils/fetchVideos";
@@ -32,6 +35,15 @@ export const useFetchVideos = () => {
   const userAvatarHash = useSelector(
     (state: RootState) => state.global.userAvatarHash
   );
+  const totalVideosPublished = useSelector(
+    (state: RootState) => state.global.totalVideosPublished
+  );
+  const totalNamesPublished = useSelector(
+    (state: RootState) => state.global.totalNamesPublished
+  );
+  const videosPerNamePublished = useSelector(
+    (state: RootState) => state.global.videosPerNamePublished
+  );
   const filteredVideos = useSelector(
     (state: RootState) => state.video.filteredVideos
   );
@@ -386,6 +398,35 @@ export const useFetchVideos = () => {
     } catch (error) {}
   }, [videos]);
 
+  const getVideosCount = React.useCallback(
+    async () => {
+      try {
+        let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QTUBE_VIDEO_BASE}`;
+
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const responseData = await response.json();
+
+        const totalVideosPublished = responseData.length;
+        const uniqueNames = new Set(responseData.map(video => video.name));
+        const totalNamesPublished = uniqueNames.size;
+        const videosPerNamePublished = (totalVideosPublished / totalNamesPublished).toFixed(2);
+
+        dispatch(setTotalVideosPublished(totalVideosPublished));
+        dispatch(setTotalNamesPublished(totalNamesPublished));
+        dispatch(setVideosPerNamePublished(videosPerNamePublished));
+      } catch (error) {
+        console.log({ error });
+      } finally {
+      }
+    },
+    []
+  );
+
   return {
     getVideos,
     checkAndUpdateVideo,
@@ -394,5 +435,6 @@ export const useFetchVideos = () => {
     getNewVideos,
     checkNewVideos,
     getVideosFiltered,
+    getVideosCount,
   };
 };

src/pages/Home/Home.tsx

@@ -64,6 +64,15 @@ export const Home = ({ mode }: HomeProps) => {
   const selectedCategoryVideos = useSelector(
     (state: RootState) => state.video.selectedCategoryVideos
   );
+  const totalVideosPublished = useSelector(
+    (state: RootState) => state.global.totalVideosPublished
+  );
+  const totalNamesPublished = useSelector(
+    (state: RootState) => state.global.totalNamesPublished
+  );
+  const videosPerNamePublished = useSelector(
+    (state: RootState) => state.global.videosPerNamePublished
+  );
 
   const { videos: globalVideos } = useSelector(
     (state: RootState) => state.video
@@ -111,7 +120,7 @@ export const Home = ({ mode }: HomeProps) => {
   const afterFetch = useRef(false);
   const isFetching = useRef(false);
 
-  const { getVideos, getNewVideos, checkNewVideos, getVideosFiltered } =
+  const { getVideos, getNewVideos, checkNewVideos, getVideosFiltered, getVideosCount } =
     useFetchVideos();
 
   const getVideosHandler = React.useCallback(
@@ -149,11 +158,12 @@ export const Home = ({ mode }: HomeProps) => {
   );
 
   useEffect(() => {
+    getVideosCount();
     if (isFiltering && filterValue !== prevVal?.current) {
       prevVal.current = filterValue;
       getVideosHandler();
     }
-  }, [filterValue, isFiltering, filteredVideos]);
+  }, [filterValue, isFiltering, filteredVideos, getVideosCount]);
 
   const getVideosHandlerMount = React.useCallback(async () => {
     if (firstFetch.current) return;
@@ -262,6 +272,20 @@ export const Home = ({ mode }: HomeProps) => {
   };
 
   return (
+    <>
+      <Box sx={{ width: "100%" }}>
+        <Grid container spacing={2} justifyContent="space-around">
+          <Grid item xs={12} sm={4}>
+            Total Videos Published: {totalVideosPublished}
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            Total Names Publishing: {totalNamesPublished}
+          </Grid>
+          <Grid item xs={12} sm={4}>
+            Average Videos per Name: {videosPerNamePublished}
+          </Grid>
+        </Grid>
+      </Box>
     <Grid container sx={{ width: "100%" }}>
       <FiltersCol item xs={12} md={2} lg={2} xl={2} sm={3}>
         <FiltersContainer>
@@ -536,5 +560,6 @@ export const Home = ({ mode }: HomeProps) => {
         <ListSuperLikeContainer />
       </FiltersCol>
     </Grid>
+    </>
   );
 };

src/state/features/globalSlice.ts

@@ -8,6 +8,9 @@ interface GlobalState {
   publishNames: string[] | null
   videoPlaying: any | null
   superlikelistAll: any[]
+  totalVideosPublished: number
+  totalNamesPublished: number
+  videosPerNamePublished: number
 }
 const initialState: GlobalState = {
   isLoadingGlobal: false,
@@ -15,7 +18,10 @@ const initialState: GlobalState = {
   userAvatarHash: {},
   publishNames: null,
   videoPlaying: null,
-  superlikelistAll: []
+  superlikelistAll: [],
+  totalVideosPublished: null,
+  totalNamesPublished: null,
+  videosPerNamePublished: null
 }
 
 export const globalSlice = createSlice({
@@ -52,6 +58,15 @@ export const globalSlice = createSlice({
     setSuperlikesAll: (state, action) => {
       state.superlikelistAll = action.payload
     },
+    setTotalVideosPublished: (state, action) => {
+      state.totalVideosPublished = action.payload
+    },
+    setTotalNamesPublished: (state, action) => {
+      state.totalNamesPublished = action.payload
+    },
+    setVideosPerNamePublished: (state, action) => {
+      state.videosPerNamePublished = action.payload
+    },
   }
 })
 
@@ -62,7 +77,10 @@ export const {
   setUserAvatarHash,
   addPublishNames,
   setVideoPlaying,
-  setSuperlikesAll
+  setSuperlikesAll,
+  setTotalVideosPublished,
+  setTotalNamesPublished,
+  setVideosPerNamePublished
 } = globalSlice.actions
 
 export default globalSlice.reducer