Merge pull request #42 from QortalSeth/main

Tooltip displays when hovering over video title

src/constants/Misc.ts

@@ -5,3 +5,10 @@ export const titleFormatterOnSave = /[\r\n/<>:"'\\*|?]+/g;
 
 export const videoMaxSize = 400; // Size in Megabytes (decimal)
 export const maxSize = videoMaxSize * 1024 * 1024;
+
+export const fontSizeExSmall = "60%";
+export const fontSizeSmall = "80%";
+export const fontSizeMedium = "100%";
+export const fontSizeLarge = "120%";
+export const fontSizeExLarge = "150%";
+export const maxCommentLength = 10_000;

src/pages/ContentPages/IndividualProfile/IndividualProfile.tsx

@@ -1,37 +1,14 @@
-import React, { useMemo } from "react";
-import { VideoListComponentLevel } from "../../Home/Components/VideoListComponentLevel.tsx";
-import { HeaderContainer, ProfileContainer } from "./Profile-styles.tsx";
-import {
-  AuthorTextComment,
-  StyledCardColComment,
-  StyledCardHeaderComment,
-} from "../VideoContent/VideoContent-styles.tsx";
-import { Avatar, Box, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
+import React from "react";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { setUserAvatarHash } from "../../../state/features/globalSlice.ts";
-import { RootState } from "../../../state/store.ts";
-import { SubscribeButton } from "../../../components/common/ContentButtons/SubscribeButton.tsx";
-import { FollowButton } from "../../../components/common/ContentButtons/FollowButton.tsx";
+import { VideoListComponentLevel } from "../../Home/Components/VideoListComponentLevel.tsx";
+import { ChannelActions } from "../VideoContent/ChannelActions.tsx";
+import { StyledCardHeaderComment } from "../VideoContent/VideoContent-styles.tsx";
+import { HeaderContainer, ProfileContainer } from "./Profile-styles.tsx";
 
 export const IndividualProfile = () => {
   const { name: channelName } = useParams();
-  const userName = useSelector((state: RootState) => state.auth.user?.name);
 
-  const userAvatarHash = useSelector(
-    (state: RootState) => state.global.userAvatarHash
-  );
-
-  const theme = useTheme();
-
-  const avatarUrl = useMemo(() => {
-    let url = "";
-    if (channelName && userAvatarHash[channelName]) {
-      url = userAvatarHash[channelName];
-    }
-
-    return url;
-  }, [userAvatarHash, channelName]);
   return (
     <ProfileContainer>
       <HeaderContainer>
@@ -47,35 +24,7 @@ export const IndividualProfile = () => {
               },
             }}
           >
-            <Box>
-              <Avatar
-                src={`/arbitrary/THUMBNAIL/${channelName}/qortal_avatar`}
-                alt={`${channelName}'s avatar`}
-              />
-            </Box>
-            <StyledCardColComment>
-              <AuthorTextComment
-                color={
-                  theme.palette.mode === "light"
-                    ? theme.palette.text.secondary
-                    : "#d6e8ff"
-                }
-              >
-                {channelName}
-              </AuthorTextComment>
-            </StyledCardColComment>
-            {channelName !== userName && (
-              <>
-                <SubscribeButton
-                  subscriberName={channelName}
-                  sx={{ marginLeft: "10px" }}
-                />
-                <FollowButton
-                  followerName={channelName}
-                  sx={{ marginLeft: "20px" }}
-                />
-              </>
-            )}
+            <ChannelActions channelName={channelName} />
           </StyledCardHeaderComment>
         </Box>
       </HeaderContainer>

src/pages/Home/Components/VideoList.tsx

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx";
 import ResponsiveImage from "../../../components/ResponsiveImage.tsx";
+import { fontSizeSmall } from "../../../constants/Misc.ts";
 import {
   blockUser,
   setEditPlaylist,
@@ -126,6 +127,7 @@ export const VideoList = ({ videos }: VideoListProps) => {
                   </Tooltip>
                 )}
               </IconsBox>
+
               <VideoCard
                 sx={{
                   cursor: !hasHash && "default",
@@ -143,7 +145,9 @@ export const VideoList = ({ videos }: VideoListProps) => {
                     maxHeight: "50%",
                   }}
                 />
+
                 <VideoCardTitle>{videoObj?.title}</VideoCardTitle>
+
                 <BottomParent>
                   <NameContainer
                     onClick={e => {
@@ -239,7 +243,13 @@ export const VideoList = ({ videos }: VideoListProps) => {
                 videoImage={videoObj.videoImage}
                 frameImages={videoObj?.extracts || []}
               />
-              <VideoCardTitle>{videoObj.title}</VideoCardTitle>
+              <Tooltip
+                title={videoObj.title}
+                placement="top"
+                slotProps={{ tooltip: { sx: { fontSize: fontSizeSmall } } }}
+              >
+                <VideoCardTitle>{videoObj.title}</VideoCardTitle>
+              </Tooltip>
               <BottomParent>
                 <NameContainer
                   onClick={e => {