From 7a6888ed75a74bae2615a6925e81774b6af8774a Mon Sep 17 00:00:00 2001 From: Siddharth Taneja Date: Tue, 15 Feb 2022 18:51:15 +0530 Subject: [PATCH 1/4] first --- src/pages/HomePage.js | 20 +----- src/styles/_header.scss | 137 +++++++++++++++++++------------------ src/ui/Header.js | 78 --------------------- src/ui/List.js | 8 --- src/ui/MediaCard.js | 80 ---------------------- src/ui/MediaSlider.js | 35 ---------- src/ui/PrimarySidebar.js | 34 --------- src/ui/SecondarySidebar.js | 63 ----------------- src/ui/Sidebar.js | 7 -- src/ui/TrailerModal.js | 44 ------------ 10 files changed, 71 insertions(+), 435 deletions(-) diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 2e9f5100c..2a806e166 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,30 +1,12 @@ import React from 'react'; -import MediaSlider from "ui/MediaSlider"; -import Header from "ui/Header"; -import Sidebar from "ui/Sidebar"; -import { useState } from "react"; - function HomeScreen() { - const [isToggledSidebar, setIsToggledSideBar] = useState(true); return (
-
setIsToggledSideBar((isToggled) => !isToggled)} - /> - - + hello
); } diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 1889a88b5..22cabb612 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -1,6 +1,6 @@ //hp -- home page -.hp-header-container{ +.hp-header{ position: fixed; top: 0; left: 0; @@ -12,88 +12,91 @@ width: 100%; background: #202020; - .hp-header{ - display: flex; - flex-direction: row; - align-items: center; - } + &__left{ + padding: 1rem; + img{ + height: 6rem; + margin-left: 1rem; + } + } - .hp-header-left{ - padding: 1rem; - img{ - height: 6rem; - margin-left: 1rem; - } - } + &__right { + > .r-icon{ + margin: auto 0.7rem; + } + } - .hp-header-middle{ + &__middle{ width: 50%; @media (max-width: 685px){ justify-content: flex-end; } + } + + &__control{ + flex: 1; + background:#121212; + border: 0.3px solid #303030; + height: 2.5rem; + margin-right: 0.7rem; + @media (max-width: 685px){ + flex: 0; + border: 0px; + } + button{ + background: #303030 ; + height: 100%; + outline: none; + border: none; + padding-left: 1rem; + padding-right: 1rem; - .hp-header-control{ - flex: 1; - background:#121212; - border: 0.3px solid #303030; - height: 2.5rem; - margin-right: 0.7rem; @media (max-width: 685px){ - flex: 0; - border: 0px; + background: #202020; } + } + } - .ctrl-input{ - flex: 1; - display: flex; - align-items: center; - justify-content: center; - - @media (max-width: 685px){ - display: none; - flex: 0; - } + &__ctrl-input{ + flex: 1; + display: flex; + align-items: center; + justify-content: center; - input{ - display: flex; - align-items: center; - justify-content: center; - flex: 1; - height: 100%; - outline: none; - border: none; - background:#121212; - caret-color: #ffffff; - color: #ffffff; - margin-left: 0.5rem; - font-size: 1rem; - - } - .clear-input-button{ - padding-top: 0.2rem; - padding-right: 0.6rem; - background:#121212; - height: 100%; - } - } - button{ - background: #303030 ; - height: 100%; - outline: none; - border: none; - padding-left: 1rem; - padding-right: 1rem; + @media (max-width: 685px){ + display: none; + flex: 0; + } - @media (max-width: 685px){ - background: #202020; - } - } + input{ + display: flex; + align-items: center; + justify-content: center; + flex: 1; + height: 100%; + outline: none; + border: none; + background:#121212; + caret-color: #ffffff; + color: #ffffff; + margin-left: 0.5rem; + font-size: 1rem; } } - .hp-header-right > .r-icon{ - margin: auto 0.7rem; + &__clear-input-button{ + padding-top: 0.2rem; + padding-right: 0.6rem; + background:#121212; + height: 100%; } } + + +.hp-header{ + display: flex; + flex-direction: row; + align-items: center; +} \ No newline at end of file diff --git a/src/ui/Header.js b/src/ui/Header.js index aa2095cbc..e69de29bb 100644 --- a/src/ui/Header.js +++ b/src/ui/Header.js @@ -1,78 +0,0 @@ -//hooks -import {useState} from 'react'; -//Material UI icons -import MenuIcon from "@mui/icons-material/Menu"; -import ClearIcon from "@mui/icons-material/Clear"; -import SearchIcon from "@mui/icons-material/Search"; -import KeyboardVoiceIcon from "@mui/icons-material/KeyboardVoice"; -import VideoCallIcon from "@mui/icons-material/VideoCall"; -import AppsIcon from "@mui/icons-material/Apps"; -import NotificationsIcon from "@mui/icons-material/Notifications"; -import { Avatar } from "@mui/material"; - -//Images -import yt_logo from "../assets/youtube-logo.svg"; - - -const Header = (props) => { - //style - const iconColor = { - color: "white", - cursor: "pointer" - }; - const [searchTerm, setSearchTerm] = useState(''); - const searchInputHandler=(e)=>{ - setSearchTerm(e.target.value); - } - - return ( -
-
- { - props.onClickMenu(); - }} - /> - youtube-logo -
-
-
-
- -
- { searchTerm.length !== 0 && {setSearchTerm("")}} - />} -
-
- -
- - - -
-
-
- -
-
- {" "} - -
-
- -
-
- S -
-
-
- ); -}; - -export default Header; diff --git a/src/ui/List.js b/src/ui/List.js index b828d4f44..e69de29bb 100644 --- a/src/ui/List.js +++ b/src/ui/List.js @@ -1,8 +0,0 @@ -const List = ({ icon, description, style }) => ( -
  • - {icon} - {description &&

    {description}

    } -
    • -); - -export default List; diff --git a/src/ui/MediaCard.js b/src/ui/MediaCard.js index 0b018c2c4..e69de29bb 100644 --- a/src/ui/MediaCard.js +++ b/src/ui/MediaCard.js @@ -1,80 +0,0 @@ -import React, { useState } from 'react'; -import classNames from 'classnames'; - -import { generateImageUrl, ImageSizes } from "utils/tmdb"; -import TrailerModal from './TrailerModal'; -import AccountCircleIcon from '@mui/icons-material/AccountCircle'; - -function dayDiff(d) { - const date1 = new Date(); - const date2 = new Date(d); - const diffTime = Math.abs(date2 - date1); - const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - const months = date1.getMonth() - date2.getMonth() + - (12 * (date1.getFullYear() - date2.getFullYear())) - const year = Math.ceil(months/12); - console.log(months); - if(diffDays < 31) { - return (diffDays + " days"); - } else if(months < 12) { - return months + " months" - } else { - return year+" years" - } -} -function MediaCard({ media, mediaType, isLarge }) { - const [isTrailerOpen, setTrailerOpen] = useState(false); - const iconColor = { - color: "white", - cursor: "pointer", - height: 45, - width: 45, - }; - return ( - <> -
    setTrailerOpen(true)} - > - {media.original_title} -
    -
    - -
    -
    -
    - {media.title || media.name || media.original_name} -
    -
    - {dayDiff(media.first_air_date) + ' ago'} -
    -
    -
    -
    - {isTrailerOpen && ( - setTrailerOpen(false)} - /> - )} - - ); -} - -export default MediaCard; diff --git a/src/ui/MediaSlider.js b/src/ui/MediaSlider.js index 2a6a8ff6b..e69de29bb 100644 --- a/src/ui/MediaSlider.js +++ b/src/ui/MediaSlider.js @@ -1,35 +0,0 @@ -import React, { useState, useEffect } from "react"; - -import MediaCard from "./MediaCard"; -import tmdbApi from 'api/tmdb'; - -function MediaSlider({ mediaType, title, path, params = {}, isLarge }) { - const [items, setItems] = useState([]); - - useEffect(() => { - const fetchData = async () => { - const json = await tmdbApi.get(path, params); - setItems(json.results); - }; - fetchData(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - - return ( -
    -
    - {items.map((media) => ( - - ))} -
    -
    - ); -} - -export default MediaSlider; diff --git a/src/ui/PrimarySidebar.js b/src/ui/PrimarySidebar.js index 5e1f076e3..e69de29bb 100644 --- a/src/ui/PrimarySidebar.js +++ b/src/ui/PrimarySidebar.js @@ -1,34 +0,0 @@ -//material ui icons -import HomeIcon from "@mui/icons-material/Home"; -import ExploreIcon from "@mui/icons-material/Explore"; -import SubscriptionsIcon from "@mui/icons-material/Subscriptions"; -import VideoLibraryIcon from "@mui/icons-material/VideoLibrary"; - -//style -const iconColor = { - color: "white" -}; -const PrimarySidebar = () => ( -
    -
      -
    • - -

      Home

      -
      • -
    • - -

      Explore

      -
      • -
    • - -

      Subscriptions

      -
      • -
    • - -

      Library

      -
      • -
    -
    -); - -export default PrimarySidebar; diff --git a/src/ui/SecondarySidebar.js b/src/ui/SecondarySidebar.js index 87e6b1148..e69de29bb 100644 --- a/src/ui/SecondarySidebar.js +++ b/src/ui/SecondarySidebar.js @@ -1,63 +0,0 @@ -//UI -import List from "./List"; -//Material UI -import HomeIcon from "@mui/icons-material/Home"; -import ExploreIcon from "@mui/icons-material/Explore"; -import SubscriptionsIcon from "@mui/icons-material/Subscriptions"; -import VideoLibraryIcon from "@mui/icons-material/VideoLibrary"; -import WatchLaterIcon from "@mui/icons-material/WatchLater"; -import HistoryIcon from "@mui/icons-material/History"; -import ThumbUpIcon from "@mui/icons-material/ThumbUp"; -import YouTubeIcon from "@mui/icons-material/YouTube"; -import SettingsIcon from "@mui/icons-material/Settings"; -import FlagIcon from "@mui/icons-material/Flag"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import FeedbackIcon from "@mui/icons-material/Feedback"; - -const iconColor = { - color: "white", - cursor: "pointer" -}; -const SecondarySidebar = () => ( -
    -
      - } description="Home" /> - } description="Explore" /> - } - description="Subscription" - /> -
      - } - description="Library" - /> - } description="History" /> - } - description="Watch Later" - /> - } - description="Liked Videos" - /> -
      - } - description="Youtube Premium" - /> - } description="Settings" /> - } - description="Report History" - /> - } description="Help" /> - } - description="Send Feedback" - /> -
    -
    -); - -export default SecondarySidebar; diff --git a/src/ui/Sidebar.js b/src/ui/Sidebar.js index 06e9de63a..e69de29bb 100644 --- a/src/ui/Sidebar.js +++ b/src/ui/Sidebar.js @@ -1,7 +0,0 @@ -import PrimarySidebar from "./PrimarySidebar"; -import SecondarySideBar from "./SecondarySidebar"; - -const Sidebar = ({ toggleSidebar }) => { - return toggleSidebar ? : ; -}; -export default Sidebar; diff --git a/src/ui/TrailerModal.js b/src/ui/TrailerModal.js index 127704272..e69de29bb 100644 --- a/src/ui/TrailerModal.js +++ b/src/ui/TrailerModal.js @@ -1,44 +0,0 @@ -import tmdbApi from 'api/tmdb'; -import React, { useEffect, useState } from 'react'; - -function TrailerModal({ mediaType, mediaId, onClose }) { - const [videoId, setVideoId] = useState(null); - - useEffect(() => { - async function fetchTrailer() { - const json = await tmdbApi.get(`/${mediaType}/${mediaId}/videos`); - const video = json.results.find(o => o.site === 'YouTube'); - setVideoId(video?.key); - } - - fetchTrailer(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - <> -
    -
    - {videoId && ( -