feat(home): add options to collapse channels by default & display vid…

…eos count per channel
AXeL-dev · Nov 5, 2022 · f9b31b0 · f9b31b0
1 parent 5e67fdc
commit f9b31b0
Show file tree

Hide file tree

Showing 16 changed files with 311 additions and 23 deletions.
diff --git a/src/providers/ChannelOptionsProvider.tsx b/src/providers/ChannelOptionsProvider.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { createContext, FC, memo, useContext, useMemo, useState } from 'react';
+import { useAppSelector } from 'store';
+import { selectViewChannelOption } from 'store/selectors/settings';
+import { HomeView } from 'types';
+
+type ChannelOptionsContextType = {
+  collapseByDefault: boolean;
+  collapsed: boolean;
+  setCollapsed: (value: boolean) => void;
+};
+
+const ChannelOptionsContext = createContext<
+  ChannelOptionsContextType | undefined
+>(undefined);
+
+export const ChannelOptionsProvider: FC<{ view: HomeView }> = memo(
+  ({ view, children }) => {
+    const collapseByDefault = useAppSelector(
+      selectViewChannelOption(view, 'collapseByDefault'),
+    );
+    const [collapsed, setCollapsed] = useState(collapseByDefault);
+
+    const value = useMemo(
+      () => ({
+        collapseByDefault,
+        collapsed: collapseByDefault && collapsed,
+        setCollapsed,
+      }),
+      [collapseByDefault, collapsed],
+    );
+
+    return (
+      <ChannelOptionsContext.Provider value={value}>
+        {children}
+      </ChannelOptionsContext.Provider>
+    );
+  },
+);
+
+export function useChannelOptions(): ChannelOptionsContextType {
+  const context = useContext(ChannelOptionsContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'useChannelOptions must be used within a ChannelOptionsContext',
+    );
+  }
+
+  return context;
+}
diff --git a/src/providers/ChannelVideosProvider.tsx b/src/providers/ChannelVideosProvider.tsx
@@ -31,6 +31,7 @@ type ChannelVideosContextType = {
     view: HomeView,
     channelId: string,
   ) => Video | undefined;
+  getChannelVideosCount: (view: HomeView, channelId: string) => number;
 };
 
 const initialVideosCount = views.reduce(
@@ -97,7 +98,13 @@ export const ChannelVideosProvider: FC = memo(({ children }) => {
   };
 
   const getLatestChannelVideo = (view: HomeView, channelId: string) => {
-    return channelsMap.current[view].get(channelId)?.items[0];
+    const channelData = channelsMap.current[view].get(channelId);
+    return channelData?.items[0];
+  };
+
+  const getChannelVideosCount = (view: HomeView, channelId: string) => {
+    const channelData = channelsMap.current[view].get(channelId);
+    return channelData?.total || 0;
   };
 
   const value = useMemo(
@@ -106,6 +113,7 @@ export const ChannelVideosProvider: FC = memo(({ children }) => {
       setChannelData,
       clearChannelsData,
       getLatestChannelVideo,
+      getChannelVideosCount,
     }),
     [videosCount],
   );
@@ -122,6 +130,7 @@ type ChannelVideosHookType = {
   setChannelData: (data: ChannelData) => void;
   clearChannelsData: () => void;
   getLatestChannelVideo: (channelId: string) => Video | undefined;
+  getChannelVideosCount: (channelId: string) => number;
 };
 
 export function useChannelVideos(view: HomeView): ChannelVideosHookType {
@@ -138,6 +147,7 @@ export function useChannelVideos(view: HomeView): ChannelVideosHookType {
     setChannelData,
     clearChannelsData,
     getLatestChannelVideo,
+    getChannelVideosCount,
   } = context;
 
   return {
@@ -146,5 +156,7 @@ export function useChannelVideos(view: HomeView): ChannelVideosHookType {
     clearChannelsData: () => clearChannelsData(view),
     getLatestChannelVideo: (channelId) =>
       getLatestChannelVideo(view, channelId),
+    getChannelVideosCount: (channelId) =>
+      getChannelVideosCount(view, channelId),
   };
 }
diff --git a/src/providers/index.ts b/src/providers/index.ts
@@ -1 +1,2 @@
 export * from './ChannelVideosProvider';
+export * from './ChannelOptionsProvider';
diff --git a/src/store/reducers/settings.ts b/src/store/reducers/settings.ts
@@ -1,5 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import {
+  ChannelOptions,
   HomeDisplayOptions,
   HomeView,
   QueryTimeout,
@@ -30,6 +31,10 @@ export const defaultSettings = {
         ignored: false,
         others: true,
       },
+      channels: {
+        collapseByDefault: false,
+        displayVideosCount: false,
+      },
       videosSeniority: VideosSeniority.Any,
     },
     [HomeView.WatchLater]: {
@@ -42,6 +47,10 @@ export const defaultSettings = {
         archived: true,
         others: true,
       },
+      channels: {
+        collapseByDefault: false,
+        displayVideosCount: false,
+      },
       videosSeniority: VideosSeniority.Any,
     },
     [HomeView.Bookmarks]: {
@@ -53,6 +62,10 @@ export const defaultSettings = {
         watchLater: true,
         others: true,
       },
+      channels: {
+        collapseByDefault: false,
+        displayVideosCount: false,
+      },
       videosSeniority: VideosSeniority.Any,
     },
   },
@@ -101,6 +114,21 @@ export const settingsSlice = createSlice({
         };
       }
     },
+    setViewChannelOptions: (
+      state,
+      action: PayloadAction<{
+        view: HomeView;
+        options: Partial<ChannelOptions>;
+      }>,
+    ) => {
+      const { view, options } = action.payload;
+      if (state.viewOptions[view]) {
+        state.viewOptions[view].channels = {
+          ...state.viewOptions[view].channels,
+          ...options,
+        };
+      }
+    },
     setViewSorting: (
       state,
       action: PayloadAction<{
@@ -154,6 +182,7 @@ export const {
   setViewFilters,
   setViewSorting,
   setVideosSeniority,
+  setViewChannelOptions,
   setHomeDisplayOptions,
 } = settingsSlice.actions;
 

diff --git a/src/store/selectors/settings.ts b/src/store/selectors/settings.ts
@@ -1,6 +1,6 @@
 import type { RootState } from 'store';
 import { createSelector } from 'reselect';
-import { HomeView, ViewFilters, ExtraVideoAction } from 'types';
+import { HomeView, ViewFilters, ExtraVideoAction, ChannelOptions } from 'types';
 import { defaultSettings } from 'store/reducers/settings';
 
 export const selectSettings = (state: RootState) => state.settings;
@@ -17,6 +17,20 @@ export const selectViewFilters = (view: HomeView) =>
     } as ViewFilters;
   });
 
+export const selectViewChannelOptions = (view: HomeView) =>
+  createSelector(selectSettings, (settings): ChannelOptions => {
+    return {
+      ...defaultSettings.viewOptions[view].channels,
+      ...settings.viewOptions[view].channels,
+    } as ChannelOptions;
+  });
+
+export const selectViewChannelOption = (
+  view: HomeView,
+  option: keyof ChannelOptions,
+) =>
+  createSelector(selectViewChannelOptions(view), (options) => options[option]);
+
 const legacyViewFilterKeys = ['uncategorised', 'viewed'];
 
 export const getActiveViewFilters = (filters: ViewFilters) =>

diff --git a/src/store/utils/preload.ts b/src/store/utils/preload.ts
@@ -66,16 +66,19 @@ const replaceLegacySettings = (
     ...rest,
     viewOptions: {
       [HomeView.All]: {
+        ...defaultSettings.viewOptions[HomeView.All],
         sorting: recentViewSorting,
         filters: recentViewFilters,
         videosSeniority: recentVideosSeniority,
       },
       [HomeView.WatchLater]: {
+        ...defaultSettings.viewOptions[HomeView.WatchLater],
         sorting: watchLaterViewSorting,
         filters: watchLaterViewFilters,
         videosSeniority: VideosSeniority.Any,
       },
       [HomeView.Bookmarks]: {
+        ...defaultSettings.viewOptions[HomeView.Bookmarks],
         sorting: bookmarksViewSorting,
         filters: bookmarksViewFilters,
         videosSeniority: VideosSeniority.Any,

diff --git a/src/types/Settings.ts b/src/types/Settings.ts
@@ -13,16 +13,19 @@ export interface Settings {
     [HomeView.All]: {
       sorting: ViewSorting;
       filters: AllViewFilters;
+      channels: ChannelOptions;
       videosSeniority: VideosSeniority;
     };
     [HomeView.WatchLater]: {
       sorting: ViewSorting;
       filters: WatchLaterViewFilters;
+      channels: ChannelOptions;
       videosSeniority: VideosSeniority;
     };
     [HomeView.Bookmarks]: {
       sorting: ViewSorting;
       filters: BookmarksViewFilters;
+      channels: ChannelOptions;
       videosSeniority: VideosSeniority;
     };
   };
@@ -31,6 +34,11 @@ export interface Settings {
   queryTimeout: number;
 }
 
+export interface ChannelOptions {
+  collapseByDefault: boolean;
+  displayVideosCount: boolean;
+}
+
 export enum ExtraVideoAction {
   CopyLink = 'copyLink',
 }

diff --git a/src/ui/components/pages/Home/ChannelRenderer/ChannelRenderer.tsx b/src/ui/components/pages/Home/ChannelRenderer/ChannelRenderer.tsx
@@ -3,6 +3,7 @@ import { Box } from '@mui/material';
 import { Channel, HomeView, Video } from 'types';
 import ChannelTitle from './ChannelTitle';
 import ChannelVideos from './ChannelVideos';
+import { ChannelOptionsProvider, useChannelOptions } from 'providers';
 
 export interface ChannelRendererProps {
   view: HomeView;
@@ -18,12 +19,21 @@ export interface ChannelRendererProps {
 }
 
 function ChannelRenderer(props: ChannelRendererProps) {
-  const { channel, videos, count, total, isLoading, maxResults, ...rest } =
-    props;
+  const {
+    view,
+    channel,
+    videos,
+    count,
+    total,
+    isLoading,
+    maxResults,
+    ...rest
+  } = props;
   const videosCount = count || videos.length;
   const hasVideos = isLoading || videos.length > 0;
   const hasMore =
     videosCount > 0 && videosCount >= maxResults && total > maxResults;
+  const { collapsed } = useChannelOptions();
 
   return hasVideos ? (
     <Box
@@ -33,18 +43,31 @@ function ChannelRenderer(props: ChannelRendererProps) {
         pb: 3,
       }}
     >
-      <ChannelTitle channel={channel} />
-      <ChannelVideos
-        videos={videos}
-        isLoading={isLoading}
-        maxResults={maxResults}
-        hasMore={hasMore}
-        {...rest}
-      />
+      <ChannelTitle view={view} channel={channel} />
+      {!collapsed ? (
+        <ChannelVideos
+          view={view}
+          videos={videos}
+          isLoading={isLoading}
+          maxResults={maxResults}
+          hasMore={hasMore}
+          {...rest}
+        />
+      ) : null}
     </Box>
   ) : null;
 }
 
+function ChannelRendererWrapper(props: ChannelRendererProps) {
+  const { view } = props;
+
+  return (
+    <ChannelOptionsProvider view={view}>
+      <ChannelRenderer {...props} />
+    </ChannelOptionsProvider>
+  );
+}
+
 function propsAreEqual(
   prevProps: ChannelRendererProps,
   nextProps: ChannelRendererProps,
@@ -61,4 +84,4 @@ function propsAreEqual(
   );
 }
 
-export default React.memo(ChannelRenderer, propsAreEqual);
+export default React.memo(ChannelRendererWrapper, propsAreEqual);
diff --git a/src/ui/components/pages/Home/ChannelRenderer/ChannelTitle/ChannelAvatar.tsx b/src/ui/components/pages/Home/ChannelRenderer/ChannelTitle/ChannelAvatar.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Avatar, Badge } from '@mui/material';
+import { Channel, HomeView } from 'types';
+import { useAppSelector } from 'store';
+import { selectViewChannelOption } from 'store/selectors/settings';
+import { useChannelVideos } from 'providers';
+
+interface ChannelAvatarProps {
+  view: HomeView;
+  channel: Channel;
+}
+
+function ChannelAvatar(props: ChannelAvatarProps) {
+  const { view, channel } = props;
+  const displayVideosCount = useAppSelector(
+    selectViewChannelOption(view, 'displayVideosCount'),
+  );
+  const { getChannelVideosCount } = useChannelVideos(view);
+  const videosCount = displayVideosCount
+    ? getChannelVideosCount(channel.id)
+    : null;
+
+  return (
+    <Badge
+      color="primary"
+      badgeContent={videosCount}
+      title={`${videosCount || ''}`}
+    >
+      <Avatar alt={channel.title} src={channel.thumbnail} />
+    </Badge>
+  );
+}
+
+export default ChannelAvatar;