Merge pull request #1766 from Gamaranto/video-preview-improvements

Add text fadeIn and Make just cover clickable

src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -4,9 +4,7 @@ import { fluidRange } from 'polished'
 import { colors, spacing, typography } from '../../theme'
 import Avatar from '../Avatar'
 import Icon from '../Icon'
-import { HOVER_BORDER_SIZE } from './VideoPreviewBase.styles'
-
-type CoverImageProps = Record<string, unknown>
+import { HOVER_BORDER_SIZE, fadeInAnimation } from './VideoPreviewBase.styles'
 
 type MainProps = {
   main: boolean
@@ -19,8 +17,10 @@ type ChannelProps = {
 type ScalesWithCoverProps = {
   scalingFactor: number
 }
-
-export const CoverImage = styled.img<CoverImageProps>`
+type ClickableProps = {
+  clickable?: boolean
+}
+export const CoverImage = styled.img`
   display: block;
   position: absolute;
   top: 0;
@@ -91,12 +91,14 @@ export const StyledAvatar = styled(Avatar)<ChannelProps>`
   cursor: ${({ channelClickable }) => (channelClickable ? 'pointer' : 'auto')};
 `
 
-export const TitleHeader = styled.h3<MainProps & ScalesWithCoverProps>`
+export const TitleHeader = styled.h3<MainProps & ScalesWithCoverProps & ClickableProps>`
   margin: 0;
   font-weight: ${typography.weights.bold};
   font-size: calc(${(props) => props.scalingFactor} * ${typography.sizes.h6});
   ${({ main }) => main && fluidRange({ prop: 'fontSize', fromSize: '24px', toSize: '40px' })};
   line-height: ${({ main }) => (main ? 1 : 1.25)};
+  cursor: ${(props) => (props.clickable ? 'pointer' : 'auto')};
+  ${fadeInAnimation};
 `
 
 export const ChannelName = styled.span<ChannelProps & ScalesWithCoverProps>`
@@ -104,9 +106,11 @@ export const ChannelName = styled.span<ChannelProps & ScalesWithCoverProps>`
   line-height: 1.25rem;
   display: inline-block;
   cursor: ${({ channelClickable }) => (channelClickable ? 'pointer' : 'auto')};
+  ${fadeInAnimation};
 `
 
 export const MetaText = styled.span<MainProps & ScalesWithCoverProps>`
   font-size: ${({ main, scalingFactor }) =>
     main ? typography.sizes.h6 : `calc(${scalingFactor}*${typography.sizes.subtitle2})`};
+  ${fadeInAnimation};
 `

src/shared/components/VideoPreview/VideoPreview.tsx

@@ -108,7 +108,7 @@ const VideoPreview: React.FC<VideoPreviewProps> = ({
   )
 
   const titleNode = (
-    <TitleHeader main={main} scalingFactor={scalingFactor}>
+    <TitleHeader main={main} scalingFactor={scalingFactor} onClick={onClick} clickable={Boolean(onClick)}>
       {title}
     </TitleHeader>
   )

src/shared/components/VideoPreview/VideoPreviewBase.styles.tsx

@@ -9,9 +9,9 @@ type MainProps = {
   main: boolean
 }
 
-type ContainerProps = {
+type ClickableProps = {
   clickable: boolean
-} & MainProps
+}
 
 type ScalesWithCoverProps = {
   scalingFactor: number
@@ -26,21 +26,44 @@ const fadeIn = keyframes`
   }
 `
 
+export const fadeInAnimation = css`
+  animation: ${fadeIn} 0.5s ease-in;
+`
+
 export const CoverWrapper = styled.div`
   max-width: 650px;
   width: 100%;
 `
-
-export const CoverContainer = styled.div`
+const clickableAnimation = (clickable: boolean) =>
+  clickable
+    ? css`
+        transform: translate(-${spacing.xs}, -${spacing.xs});
+        box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue['500']};
+
+        ${CoverHoverOverlay} {
+          opacity: 1;
+        }
+        ${CoverIcon} {
+          transform: translateY(0);
+        }
+        ${ProgressOverlay} {
+          bottom: ${HOVER_BORDER_SIZE};
+        }
+      `
+    : null
+export const CoverContainer = styled.div<ClickableProps>`
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 56.25%;
-
   transition-property: box-shadow, transform;
   transition-duration: 0.4s;
   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-  animation: ${fadeIn} 0.5s ease-in;
+  ${fadeInAnimation};
+  cursor: ${(props) => (props.clickable ? 'pointer' : 'auto')};
+  :hover {
+    ${(props) => clickableAnimation(props.clickable)}
+  }
 `
 
 const mainContainerCss = css`
@@ -49,37 +72,13 @@ const mainContainerCss = css`
   }
 `
 
-export const Container = styled.article<ContainerProps>`
+export const Container = styled.article<MainProps>`
   width: 100%;
   color: ${colors.gray[300]};
-  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'auto')};
 
   display: inline-flex;
   flex-direction: column;
   ${({ main }) => main && mainContainerCss}
-
-  ${({ clickable }) =>
-    clickable &&
-    `
-				&:hover {
-					${CoverContainer} {
-						transform: translate(-${spacing.xs}, -${spacing.xs});
-						box-shadow: ${spacing.xs} ${spacing.xs} 0 ${colors.blue['500']};
-					}
-
-					${CoverHoverOverlay} {
-						opacity: 1;
-					}
-					
-					${CoverIcon} {
-						transform: translateY(0);
-					}
-
-					${ProgressOverlay} {
-						bottom: ${HOVER_BORDER_SIZE};
-					}
-				}
-			`};
 `
 
 const mainInfoContainerCss = css`

src/shared/components/VideoPreview/VideoPreviewBase.tsx

@@ -49,9 +49,9 @@ const VideoPreviewBase: React.FC<VideoPreviewBaseProps> = ({
   const metaPlaceholder = <SpacedPlaceholder height={main ? 16 : 12} width={main ? '40%' : '80%'} />
 
   return (
-    <Container onClick={onClick} clickable={clickable} main={main} className={className}>
-      <CoverWrapper>
-        <CoverContainer>{coverNode || coverPlaceholder}</CoverContainer>
+    <Container main={main} className={className}>
+      <CoverWrapper onClick={onClick}>
+        <CoverContainer clickable={clickable}>{coverNode || coverPlaceholder}</CoverContainer>
       </CoverWrapper>
       <InfoContainer main={main}>
         {displayChannel && (