YOU STREAM 0.33.0

Add ShortsVideoItem.tsx
Add ShortsVideoItem.styles.ts
Update VideoShorts.tsx
Update HomepageVideos.tsx

README.md

@@ -10,7 +10,7 @@
 
 - **STACK :**
 
-  - **YOU STREAM** : `0.32.0`
+  - **YOU STREAM** : `0.33.0`
   - **REACT** : `18.2.0`
   - **PEXELS** : `1.4.0`
   - **REACT ICONS** : `5.0.1`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "you-stream",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

src/components/categories/Categories.styles.ts

@@ -7,7 +7,6 @@ export const StyledCategories = styled.div`
   align-items: flex-end;
   gap: 0.5rem;
   position: relative;
-  padding-right: 10rem;
   z-index: 100;
 `;
 
@@ -35,5 +34,4 @@ export const CategoryItem = styled.div<{ active: boolean }>`
 export const CategoriesCarousel = styled.div`
   width: 100%;
   overflow-x: scroll;
-  margin-bottom: -18px;
 `;

src/components/header/Header.tsx

@@ -48,7 +48,7 @@ const Header = () => {
         </Icon>
         <LogoSection to="/">
           <FaYoutube color="#FF0000" size={30} />
-          <Text className="logo">YouStream v0.32.0</Text>
+          <Text className="logo">YouStream v0.33.0</Text>
         </LogoSection>
       </LeftSection>
       <SearchSection>

src/components/homepageVideos/HomepageVideos.styles.ts

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const StyledHomepageVideos = styled.div`
   overflow-y: scroll;
   height: 88.7vh;
-  padding: 1.6rem 1.5rem 0 0;
+  padding: 1.6rem 1.5rem 2rem 0;
 `;
 
 export const RegularVideoThumbnailsContainer = styled.div`

src/components/homepageVideos/HomepageVideos.tsx

@@ -20,6 +20,11 @@ const HomepageVideos = () => {
         ))}
       </RegularVideoThumbnailsContainer>
       <VideoShorts videos={SECOND_VIDEO_SECTION} />
+      <RegularVideoThumbnailsContainer>
+        {THIRD_VIDEO_SECTION.map((video, index) => (
+          <RegularVideoItem video={video} />
+        ))}
+      </RegularVideoThumbnailsContainer>
     </StyledHomepageVideos>
   );
 };

src/components/shortsVideoItem/ShortsVideoItem.styles.ts

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const StyledShortsVideoItem = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .videoItemTitle {
+    font-size: 16px;
+    margin-top: 0.7rem;
+    margin-bottom: 0.3rem;
+  }
+
+  .details {
+    font-size: 14px;
+    color: ${({ theme: { grey3 } }) => grey3};
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
+`;
+
+export const StyledShortsVideoThumbnail = styled.div<{ $isMenuSmall: boolean }>`
+  height: 24.8rem;
+  width: 100%;
+  border-radius: 0.8rem;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+`;

src/components/shortsVideoItem/ShortsVideoItem.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { useAppContext } from "../../context/App.context";
+import {
+  StyledShortsVideoItem,
+  StyledShortsVideoThumbnail,
+} from "./ShortsVideoItem.styles";
+import ReactPlayer from "react-player";
+import { Video } from "pexels";
+import { Text } from "../../utils/Text.styles";
+import { getTitle } from "../../utils/videos";
+
+interface IShortsVideoItemProps {
+  video: Video;
+}
+
+const ShortsVideoItem = ({ video }: IShortsVideoItemProps) => {
+  const [playTrailer, setPlayTrailer] = useState(false);
+  const { isMenuSmall } = useAppContext();
+  const TITLE_LENGTH = 50;
+
+  return (
+    <StyledShortsVideoItem
+      onMouseOver={() => setPlayTrailer(true)}
+      onMouseOut={() => setPlayTrailer(false)}
+    >
+      <StyledShortsVideoThumbnail $isMenuSmall={isMenuSmall}>
+        {playTrailer ? (
+          <ReactPlayer
+            width="100%"
+            height="100%"
+            controls={false}
+            volume={1}
+            muted={false}
+            style={{ height: "100%", width: "100%" }}
+            playing={playTrailer}
+            url={video.video_files[0].link}
+          />
+        ) : (
+          <img src={video.image} alt="thumbnail" />
+        )}
+      </StyledShortsVideoThumbnail>
+      <Text className="videoItemTitle">
+        {getTitle(video.url).slice(0, TITLE_LENGTH)}
+        {getTitle(video.url).length > TITLE_LENGTH && "..."}
+      </Text>
+      <Text className="details">{video.duration}M views</Text>
+    </StyledShortsVideoItem>
+  );
+};
+
+export default ShortsVideoItem;

src/components/videoShorts/VideoShorts.styles.ts

@@ -26,7 +26,6 @@ export const MoreLessContainer = styled.div`
 `;
 
 export const ShortsVideosContainer = styled.div`
-  color: white;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

src/components/videoShorts/VideoShorts.tsx

@@ -11,6 +11,7 @@ import { SiYoutubeshorts } from "react-icons/si";
 import { Text } from "../../utils/Text.styles";
 import { useAppContext } from "../../context/App.context";
 import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import ShortsVideoItem from "../shortsVideoItem/ShortsVideoItem";
 
 interface IVideoShortsProps {
   videos: Video[];
@@ -29,7 +30,7 @@ const VideoShorts = ({ videos }: IVideoShortsProps) => {
       </VideoShortsHeading>
       <ShortsVideosContainer>
         {videosList.map((video, index) => (
-          <p>Video {index}</p>
+          <ShortsVideoItem video={video} />
         ))}
       </ShortsVideosContainer>
       <MoreLessContainer>