YOU STREAM 0.34.0

Add WatchVideoContents.tsx Add WatchVideoContents.styles.ts Update App.tsx Update App.context.tsx Update ShortsVideoItem.tsx Update RegularVideoItem.tsx
DavidGomezToca · Apr 18, 2024 · 985c2c0 · 985c2c0
1 parent eda0294
commit 985c2c0
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 
 - **STACK :**
 
-  - **YOU STREAM** : `0.33.0`
+  - **YOU STREAM** : `0.34.0`
   - **REACT** : `18.2.0`
   - **PEXELS** : `1.4.0`
   - **REACT ICONS** : `5.0.1`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "you-stream",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/resources/img/Thumbnail.png b/resources/img/Thumbnail.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,8 @@ import { useAppContext } from "./context/App.context";
 import Header from "./components/header/Header";
 import ToolTips from "./utils/ToolTips";
 import Body from "./components/body/Body";
+import { Route, Routes } from "react-router-dom";
+import WatchVideoContents from "./components/watchVideoContents/WatchVideoContents";
 
 function App() {
   const { theme } = useAppContext();
@@ -16,7 +18,10 @@ function App() {
       <ToolTips />
       <AppContainer>
         <Header />
-        <Body />
+        <Routes>
+          <Route path="/" element={<Body />} />
+          <Route path="/:id" element={<WatchVideoContents />} />
+        </Routes>
       </AppContainer>
     </ThemeProvider>
   );

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -48,7 +48,7 @@ const Header = () => {
         </Icon>
         <LogoSection to="/">
           <FaYoutube color="#FF0000" size={30} />
-          <Text className="logo">YouStream v0.33.0</Text>
+          <Text className="logo">YouStream v0.34.0</Text>
         </LogoSection>
       </LeftSection>
       <SearchSection>

diff --git a/src/components/regularVideoItem/RegularVideoItem.tsx b/src/components/regularVideoItem/RegularVideoItem.tsx
@@ -19,13 +19,14 @@ interface IRegularVideoItemProps {
 
 const RegularVideoItem = ({ video }: IRegularVideoItemProps) => {
   const [playTrailer, setPlayTrailer] = useState(false);
-  const { isMenuSmall } = useAppContext();
+  const { isMenuSmall, setVideoToWatch } = useAppContext();
   const TITLE_LENGTH = 50;
 
   return (
     <StyledRegularVideoItem
       onMouseOver={() => setPlayTrailer(true)}
       onMouseOut={() => setPlayTrailer(false)}
+      onClick={() => setVideoToWatch(video.id)}
     >
       <RegularVideoThumbnail $isMenuSmall={isMenuSmall}>
         {playTrailer ? (

diff --git a/src/components/shortsVideoItem/ShortsVideoItem.tsx b/src/components/shortsVideoItem/ShortsVideoItem.tsx
@@ -15,13 +15,14 @@ interface IShortsVideoItemProps {
 
 const ShortsVideoItem = ({ video }: IShortsVideoItemProps) => {
   const [playTrailer, setPlayTrailer] = useState(false);
-  const { isMenuSmall } = useAppContext();
+  const { isMenuSmall, setVideoToWatch } = useAppContext();
   const TITLE_LENGTH = 50;
 
   return (
     <StyledShortsVideoItem
       onMouseOver={() => setPlayTrailer(true)}
       onMouseOut={() => setPlayTrailer(false)}
+      onClick={() => setVideoToWatch(video.id)}
     >
       <StyledShortsVideoThumbnail $isMenuSmall={isMenuSmall}>
         {playTrailer ? (

diff --git a/src/components/watchVideoContents/WatchVideoContents.styles.ts b/src/components/watchVideoContents/WatchVideoContents.styles.ts
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const StyledWatchVideoContents = styled.div`
+  background-color: blue;
+`;
diff --git a/src/components/watchVideoContents/WatchVideoContents.tsx b/src/components/watchVideoContents/WatchVideoContents.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text } from "../../utils/Text.styles";
+import { StyledWatchVideoContents } from "./WatchVideoContents.styles";
+
+const WatchVideoContents = () => {
+  return (
+    <div>
+      <StyledWatchVideoContents>
+        <Text>WatchVideoContents</Text>
+      </StyledWatchVideoContents>
+    </div>
+  );
+};
+
+export default WatchVideoContents;
diff --git a/src/context/App.context.tsx b/src/context/App.context.tsx
@@ -10,6 +10,7 @@ import {
 import { ITranslations, LANGUAGE } from "../utils/translations";
 import { Video, Videos, createClient } from "pexels";
 import { PEXELES_API_KEY } from "../utils/pexels";
+import { useNavigate } from "react-router-dom";
 
 interface IAppContextValue {
   theme: "light" | "dark";
@@ -26,6 +27,8 @@ interface IAppContextValue {
   setActiveCategory: Dispatch<SetStateAction<string>>;
   videos: Video[];
   isFetchingVideos: boolean;
+  videoToWatch: number;
+  setVideoToWatch: Dispatch<SetStateAction<number>>;
 }
 
 const AppContext = createContext<IAppContextValue | null>(null);
@@ -53,6 +56,15 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
   const [activeCategory, setActiveCategory] = useState("All");
   const [videos, setVideos] = useState<Video[]>([]);
   const [isFetchingVideos, setIsFetchingVideos] = useState(false);
+  const [videoToWatch, setVideoToWatch] = useState<number>(0);
+
+  let navigate = useNavigate();
+
+  useEffect(() => {
+    if (videoToWatch !== 0) {
+      navigate(`/${videoToWatch}`);
+    }
+  }, [videoToWatch]);
 
   useEffect(() => {
     fetchVideos(activeCategory);
@@ -100,6 +112,8 @@ export const AppContextProvider = ({ children }: IAppContextProviderProps) => {
     setActiveCategory,
     videos,
     isFetchingVideos,
+    videoToWatch,
+    setVideoToWatch,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;