Fixed bug that caused subscriptions to not work properly if Q-Tube was opened through a link

Default Tab is now "All Tabs" since people running Q-Tube for the first time won't have any subscriptions.

Stats section of home page uses no horizontal padding to prevent the numbers from going to another line. Average videos per publisher doesn't show decimals for the same reason.

src/App.tsx

@@ -17,44 +17,44 @@ import { persistStore } from "redux-persist";
 import { setFilteredSubscriptions } from "./state/features/videoSlice.ts";
 import { SubscriptionObject } from "./state/features/persistSlice.ts";
 
-function App() {
-  // const themeColor = window._qdnTheme
+export const getUserName = async () => {
+  const account = await qortalRequest({
+    action: "GET_USER_ACCOUNT",
+  });
+  const nameData = await qortalRequest({
+    action: "GET_ACCOUNT_NAMES",
+    address: account.address,
+  });
 
-  const [theme, setTheme] = useState("dark");
-  let persistor = persistStore(store);
+  if (nameData?.length > 0) return nameData[0].name;
+  else return "";
+};
 
-  const filterVideosByName = (
-    subscriptionList: SubscriptionObject[],
-    userName: string
-  ) => {
-    return subscriptionList.filter(item => {
-      return item.userName === userName;
-    });
-  };
+export const filterVideosByName = (
+  subscriptionList: SubscriptionObject[],
+  userName: string
+) => {
+  return subscriptionList.filter(item => {
+    return item.userName === userName;
+  });
+};
 
-  const getUserName = async () => {
-    const account = await qortalRequest({
-      action: "GET_USER_ACCOUNT",
-    });
-    const nameData = await qortalRequest({
-      action: "GET_ACCOUNT_NAMES",
-      address: account.address,
-    });
+export const subscriptionListFilter = async () => {
+  const subscriptionList = store.getState().persist.subscriptionList;
+  const filterByUserName =
+    store.getState().persist.subscriptionListFilter === "currentNameOnly";
+  const userName = await getUserName();
 
-    if (nameData?.length > 0) return nameData[0].name;
-    else return "";
-  };
+  if (filterByUserName && userName) {
+    return filterVideosByName(subscriptionList, userName);
+  } else return subscriptionList;
+};
 
-  const subscriptionListFilter = async () => {
-    const subscriptionList = store.getState().persist.subscriptionList;
-    const filterByUserName =
-      store.getState().persist.subscriptionListFilter === "currentNameOnly";
-    const userName = await getUserName();
+function App() {
+  // const themeColor = window._qdnTheme
 
-    if (filterByUserName && userName) {
-      return filterVideosByName(subscriptionList, userName);
-    } else return subscriptionList;
-  };
+  const [theme, setTheme] = useState("dark");
+  let persistor = persistStore(store);
 
   useEffect(() => {
     const subscriptionList = store.getState().persist.subscriptionList;

src/components/common/SubscribeButton.tsx

@@ -3,11 +3,12 @@ import { MouseEvent, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../state/store.ts";
 import {
-  resetSubscriptions,
   subscribe,
+  SubscriptionObject,
   unSubscribe,
 } from "../../state/features/persistSlice.ts";
 import { setFilteredSubscriptions } from "../../state/features/videoSlice.ts";
+import { subscriptionListFilter } from "../../App.tsx";
 
 interface SubscribeButtonProps extends ButtonProps {
   subscriberName: string;
@@ -18,19 +19,34 @@ export const SubscribeButton = ({
   ...props
 }: SubscribeButtonProps) => {
   const dispatch = useDispatch();
+  const subscriptionList = useSelector((state: RootState) => {
+    return state.persist.subscriptionList;
+  });
+
   const filteredSubscriptionList = useSelector((state: RootState) => {
     return state.video.filteredSubscriptionList;
   });
+
   const userName = useSelector((state: RootState) => state.auth.user?.name);
   const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
 
-  useEffect(() => {
-    const isSubscribedToName =
-      filteredSubscriptionList.find(item => {
+  const isSubscribedToName = (subscriptionList: SubscriptionObject[]) => {
+    return (
+      subscriptionList.find(item => {
         return item.subscriberName === subscriberName;
-      }) !== undefined;
+      }) !== undefined
+    );
+  };
 
-    setIsSubscribed(isSubscribedToName);
+  useEffect(() => {
+    if (!filteredSubscriptionList || filteredSubscriptionList.length === 0) {
+      subscriptionListFilter().then(filteredList => {
+        dispatch(setFilteredSubscriptions(filteredList));
+        setIsSubscribed(isSubscribedToName(filteredList));
+      });
+    } else {
+      setIsSubscribed(isSubscribedToName(filteredSubscriptionList));
+    }
   }, []);
 
   const subscriptionData = {

src/hooks/useFetchVideos.tsx

@@ -414,34 +414,33 @@ 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 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 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);
+      const totalVideosPublished = responseData.length;
+      const uniqueNames = new Set(responseData.map(video => video.name));
+      const totalNamesPublished = uniqueNames.size;
+      const videosPerNamePublished = (
+        totalVideosPublished / totalNamesPublished
+      ).toFixed(0);
 
-        dispatch(setTotalVideosPublished(totalVideosPublished));
-        dispatch(setTotalNamesPublished(totalNamesPublished));
-        dispatch(setVideosPerNamePublished(videosPerNamePublished));
-      } catch (error) {
-        console.log({ error });
-      } finally {
-      }
-    },
-    []
-  );
+      dispatch(setTotalVideosPublished(totalVideosPublished));
+      dispatch(setTotalNamesPublished(totalNamesPublished));
+      dispatch(setVideosPerNamePublished(videosPerNamePublished));
+    } catch (error) {
+      console.log({ error });
+    } finally {
+    }
+  }, []);
 
   return {
     getVideos,

src/pages/Home/Home.tsx

@@ -300,19 +300,19 @@ export const Home = ({ mode }: HomeProps) => {
               sx={{ display: persistReducer.showStats ? "block" : "none" }}
             >
               <div>
-                # of Videos:{" "}
+                Videos:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {totalVideosPublished}
                 </span>
               </div>
               <div>
-                Names Publishing:{" "}
+                Publishers:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {totalNamesPublished}
                 </span>
               </div>
               <div>
-                Videos per Name:{" "}
+                Average:{" "}
                 <span style={{ fontWeight: "bold" }}>
                   {videosPerNamePublished}
                 </span>

src/pages/Home/VideoList-styles.tsx

@@ -241,7 +241,7 @@ export const StatsCol = styled(Grid)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   width: "100%",
-  padding: "20px 15px",
+  padding: "20px 0px",
   backgroundColor: theme.palette.background.default,
   borderTop: `1px solid ${theme.palette.background.paper}`,
   borderRight: `1px solid ${theme.palette.background.paper}`,

src/state/features/persistSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { subscriptionTabValue } from "../../constants/Misc.ts";
+import { allTabValue, subscriptionTabValue } from "../../constants/Misc.ts";
 
 type StretchVideoType = "contain" | "fill" | "cover" | "none" | "scale-down";
 type SubscriptionListFilterType = "ALL" | "currentNameOnly";
@@ -20,7 +20,7 @@ interface settingsState {
 }
 
 const initialState: settingsState = {
-  selectedTab: subscriptionTabValue,
+  selectedTab: allTabValue,
   stretchVideoSetting: "contain",
   filterType: "videos",
   subscriptionList: [],