feat(home): add an option to disable/enable opening channels on name …

…click

src/store/reducers/settings.ts

@@ -34,6 +34,7 @@ export const defaultSettings = {
       channels: {
         collapseByDefault: false,
         displayVideosCount: false,
+        openChannelOnNameClick: false,
       },
       videosSeniority: VideosSeniority.Any,
     },
@@ -50,6 +51,7 @@ export const defaultSettings = {
       channels: {
         collapseByDefault: false,
         displayVideosCount: false,
+        openChannelOnNameClick: false,
       },
       videosSeniority: VideosSeniority.Any,
     },
@@ -65,6 +67,7 @@ export const defaultSettings = {
       channels: {
         collapseByDefault: false,
         displayVideosCount: false,
+        openChannelOnNameClick: false,
       },
       videosSeniority: VideosSeniority.Any,
     },

src/types/Settings.ts

@@ -37,6 +37,7 @@ export interface Settings {
 export interface ChannelOptions {
   collapseByDefault: boolean;
   displayVideosCount: boolean;
+  openChannelOnNameClick: boolean;
 }
 
 export enum ExtraVideoAction {

src/ui/components/pages/Home/ChannelRenderer/ChannelTitle/ChannelName.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SxProps, Typography } from '@mui/material';
+import { Channel, HomeView } from 'types';
+import { useAppSelector } from 'store';
+import { selectViewChannelOption } from 'store/selectors/settings';
+import ChannelLink from './ChannelLink';
+
+interface ChannelNameProps {
+  view: HomeView;
+  channel: Channel;
+}
+
+function ChannelName(props: ChannelNameProps) {
+  const { view, channel } = props;
+  const openChannelOnNameClick = useAppSelector(
+    selectViewChannelOption(view, 'openChannelOnNameClick'),
+  );
+
+  const renderName = (sx?: SxProps) => (
+    <Typography sx={sx} variant="subtitle1" color="text.primary">
+      {channel.title}
+    </Typography>
+  );
+
+  return openChannelOnNameClick ? (
+    <ChannelLink channel={channel}>{renderName()}</ChannelLink>
+  ) : (
+    renderName({ cursor: 'default' })
+  );
+}
+
+export default ChannelName;

src/ui/components/pages/Home/ChannelRenderer/ChannelTitle/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { Channel, HomeView } from 'types';
 import ChannelLink from './ChannelLink';
 import ChannelAvatar from './ChannelAvatar';
+import ChannelName from './ChannelName';
 import ChannelExpandToggle from './ChannelExpandToggle';
 
 interface ChannelTitleProps {
@@ -25,11 +26,7 @@ function ChannelTitle(props: ChannelTitleProps) {
       <ChannelLink channel={channel}>
         <ChannelAvatar view={view} channel={channel} />
       </ChannelLink>
-      <ChannelLink channel={channel}>
-        <Typography variant="subtitle1" color="text.primary">
-          {channel.title}
-        </Typography>
-      </ChannelLink>
+      <ChannelName view={view} channel={channel} />
       <ChannelExpandToggle />
     </Box>
   );

src/ui/components/pages/Home/TabActions/CommonMenus/ViewChannelOptions.tsx

@@ -25,6 +25,10 @@ const options: ViewChannelOption[] = [
     label: 'Display videos count per channel',
     value: 'displayVideosCount',
   },
+  {
+    label: 'Open channel on name click',
+    value: 'openChannelOnNameClick',
+  },
 ];
 
 interface ViewChannelOptionsProps extends Omit<NestedMenuItemProps, 'label'> {