PEXELS STREAM 1.14.0

Update Responsive Update Header.tsx Update translate.ts Update Header.styles.ts Update WatchVideoContents.tsx Update HomepageVideos.styles.ts Update WatchVideoContents.styles.ts
DavidGomezToca · Jan 28, 2025 · 72c0340 · 72c0340
1 parent 40339ce
commit 72c0340
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 - **STACK :**
 
-  - **PEXELS STREAM** : `1.13.0`
+  - **PEXELS STREAM** : `1.14.0`
   - **FAKER** : `8.4.1`
   - **REACT** : `18.2.0`
   - **PEXELS** : `1.4.0`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pexels-stream",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "private": true,
   "dependencies": {
     "@faker-js/faker": "^8.4.1",

diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts
@@ -35,6 +35,10 @@ export const LogoSection = styled(Link)`
   align-items: center;
   gap: 0.2rem;
   text-decoration: none;
+
+  &.small {
+    scale: 0.8;
+  }
 `;
 
 export const SearchBar = styled.div`
@@ -52,4 +56,8 @@ export const SearchBar = styled.div`
     font-size: inherit;
     padding-left: 1rem;
   }
+
+  input.small {
+    padding: 0;
+  }
 `;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -55,14 +55,15 @@ const Header = () => {
             <SlMenu size={17} />
           </Icon>
         )}
-        <LogoSection to="/">
+        <LogoSection className={window.innerWidth <= 400 ? "small" : ""} to="/">
           <FaYoutube color="#FF0000" size={30} />
           <Text className="logo">PexelsStream</Text>
         </LogoSection>
       </LeftSection>
       <SearchSection>
         <SearchBar>
           <input
+            className={window.innerWidth <= 400 ? "small" : ""}
             id="search-bar-input"
             value={searchText}
             placeholder={text.search}

diff --git a/src/components/homepageVideos/HomepageVideos.styles.ts b/src/components/homepageVideos/HomepageVideos.styles.ts
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const StyledHomepageVideos = styled.div`
   overflow-y: scroll;
   height: 100vh;
-  padding: 1.6rem 1.5rem 2rem 1.5rem;
+  padding: 1.6rem 1.5rem 5rem 1.5rem;
 `;
 
 export const RegularVideoThumbnailsContainer = styled.div`

diff --git a/src/components/watchVideoContents/WatchVideoContents.styles.ts b/src/components/watchVideoContents/WatchVideoContents.styles.ts
@@ -8,6 +8,10 @@ export const StyledWatchVideoContents = styled.div`
   grid-template-columns: 71.5vw 24vw;
   padding: 0 1.5rem;
   overflow: scroll;
+
+  &.small {
+    grid-template-columns: 100%;
+  }
 `;
 
 export const MoreVideosContainer = styled.div`
@@ -25,7 +29,6 @@ export const WatchVideosContainer = styled.div`
 
 export const VideoScreen = styled.div`
   width: 100%;
-  height: 44rem;
   border-radius: 1rem;
   overflow: hidden;
 `;
@@ -56,6 +59,10 @@ export const VideoDetailsActions = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-top: 1rem;
+
+  &.small {
+    display: block;
+  }
 `;
 
 export const VideoDetailsInfo = styled.div`
@@ -98,6 +105,10 @@ export const DetailsActions = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
+
+  &.small {
+    margin-top: 20px;
+  }
 `;
 
 export const DetailsActionButton = styled.div`

diff --git a/src/components/watchVideoContents/WatchVideoContents.tsx b/src/components/watchVideoContents/WatchVideoContents.tsx
@@ -126,7 +126,9 @@ const WatchVideoContents = () => {
 
   return (
     <div>
-      <StyledWatchVideoContents>
+      <StyledWatchVideoContents
+        className={window.innerWidth <= 1100 ? "small" : ""}
+      >
         <WatchVideosContainer>
           <VideoScreen>
             <ReactPlayer
@@ -142,7 +144,9 @@ const WatchVideoContents = () => {
           </VideoScreen>
           <VideoDetails>
             <Text className="videoScreenTitle">{title}</Text>
-            <VideoDetailsActions>
+            <VideoDetailsActions
+              className={window.innerWidth <= 600 ? "small" : ""}
+            >
               <VideoDetailsInfo>
                 <RegularVideoPic>
                   <img src={videoToWatchData?.image} alt="profile pic" />
@@ -160,7 +164,9 @@ const WatchVideoContents = () => {
                   {subscribed ? text.subscribed : text.subscribe}
                 </SubscribeButton>
               </VideoDetailsInfo>
-              <DetailsActions>
+              <DetailsActions
+                className={window.innerWidth <= 600 ? "small" : ""}
+              >
                 <DetailsActionButton>
                   <>
                     <TiThumbsUp
@@ -204,14 +210,18 @@ const WatchVideoContents = () => {
             </VideoDescription>
           </VideoDetails>
         </WatchVideosContainer>
-        <MoreVideosContainer>
-          <Categories />
-          {videos
-            .filter((video) => video.id !== videoToWatchData?.id)
-            .map((video) => (
-              <RegularVideoItem key={video.id} smallView={true} video={video} />
-            ))}
-        </MoreVideosContainer>
+          <MoreVideosContainer>
+            <Categories />
+            {videos
+              .filter((video) => video.id !== videoToWatchData?.id)
+              .map((video) => (
+                <RegularVideoItem
+                  key={video.id}
+                  smallView={true}
+                  video={video}
+                />
+              ))}
+          </MoreVideosContainer>
       </StyledWatchVideoContents>
     </div>
   );

diff --git a/src/utils/translate.ts b/src/utils/translate.ts
@@ -16,16 +16,16 @@ export const translateText = async (
         )
       ) {
         console.warn("Translation limit reached:", data.responseDetails);
-        return text; // Return the original text if the limit is reached
+        return text;
       }
       if (data?.responseData?.translatedText) {
         return data.responseData.translatedText;
       }
       console.error("Translation response does not contain translated text.");
-      return null;
+      return text;
     } catch (error) {
       console.error("Error fetching translation:", error);
-      return null;
+      return text;
     }
   } else {
     return text;