[ { "path": ".dockerignore", "content": ".*\nbuild\nnode_modules" }, { "path": ".firebaserc", "content": "{\n \"projects\": {\n \"default\": \"websites-f0426\"\n }\n}\n" }, { "path": ".github/workflows/firebase-hosting-merge.yml", "content": "# This file was auto-generated by the Firebase CLI\n# https://github.com/firebase/firebase-tools\n\nname: Deploy to Firebase Hosting on merge\n'on':\n push:\n branches:\n - main\njobs:\n build_and_deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - run: npm ci && npm run build\n env:\n VITE_APP_API_ENDPOINT_URL: '${{ secrets.VITE_APP_API_ENDPOINT_URL }}'\n VITE_APP_TMDB_V3_API_KEY: '${{ secrets.VITE_APP_TMDB_V3_API_KEY }}'\n - uses: FirebaseExtended/action-hosting-deploy@v0\n with:\n repoToken: '${{ secrets.GITHUB_TOKEN }}'\n firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_WEBSITES_F0426 }}'\n channelId: live\n projectId: websites-f0426\n" }, { "path": ".github/workflows/firebase-hosting-pull-request.yml", "content": "# This file was auto-generated by the Firebase CLI\n# https://github.com/firebase/firebase-tools\n\nname: Deploy to Firebase Hosting on PR\n'on': pull_request\njobs:\n build_and_preview:\n if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - run: npm ci && npm run build\n - uses: FirebaseExtended/action-hosting-deploy@v0\n with:\n repoToken: '${{ secrets.GITHUB_TOKEN }}'\n firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_WEBSITES_F0426 }}'\n projectId: websites-f0426\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# env\n.env\n\n# testing\n/coverage\n\n# production\n/build\n/dist\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn.lock\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": "Dockerfile", "content": "FROM node:16.17.0-alpine as builder\nWORKDIR /app\nCOPY ./package.json .\nCOPY ./yarn.lock .\nRUN yarn install\nCOPY . .\nARG TMDB_V3_API_KEY\nENV VITE_APP_TMDB_V3_API_KEY=${TMDB_V3_API_KEY}\nENV VITE_APP_API_ENDPOINT_URL=\"https://api.themoviedb.org/3\"\nRUN yarn build\n\nFROM nginx:stable-alpine\nWORKDIR /usr/share/nginx/html\nRUN rm -rf ./*\nCOPY --from=builder /app/dist .\nEXPOSE 80\nENTRYPOINT [\"nginx\", \"-g\", \"daemon off;\"]" }, { "path": "README.md", "content": "
\n \n \"Logo\"\n \n\n

Netflix Clone

\n\n

\n View Demo\n ·\n Report Bug\n ·\n Request Feature\n

\n
\n\n
\n Table of Contents\n
    \n
  1. \n Prerequests\n
    2. \n
  2. \n Which features this project deals with\n
    3. \n
  3. Third Party libraries used except for React and RTK
    4. \n
  4. \n Contact\n
    5. \n
\n
\n\n
\n\n
\n \"Logo\"\n

Home Page

\n \"Logo\"\n

Mini Portal

\n \"Logo\"\n

Detail Modal

\n \"Logo\"\n

Grid Genre Page

\n \"Logo\"\n

Watch Page with customer contol bar

\n
\n\n## Prerequests\n\n- Create an account if you don't have on [TMDB](https://www.themoviedb.org/).\n Because I use its free API to consume movie/tv data.\n- And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key\n- Finally, if you use v3 of TMDB API, create a file named `.env`, and copy and paste the content of `.env.example`.\n And then paste the API Key you just created.\n\n## Which features this project deal with\n\n- How to create and use [Custom Hooks](https://reactjs.org/docs/hooks-custom.html)\n- How to use [Context](https://reactjs.org/docs/context.html) and its provider\n- How to use lazy and Suspense for [Code-Splitting](https://reactjs.org/docs/code-splitting.html)\n- How to use a new [lazy](https://reactrouter.com/en/main/route/lazy) feature of react-router to reduce bundle size.\n- How to use data [loader](https://reactrouter.com/en/main/route/loader) of react-router, and how to use redux dispatch in the loader to fetch data before rendering component.\n- How to use [Portal](https://reactjs.org/docs/portals.html)\n- How to use [Fowarding Refs](https://reactjs.org/docs/forwarding-refs.html) to make components reusuable\n- How to create and use [HOC](https://reactjs.org/docs/higher-order-components.html)\n- How to customize default theme of [MUI](https://mui.com/)\n- How to use [RTK](https://redux-toolkit.js.org/introduction/getting-started)\n- How to use [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)\n- How to customize default classname of [MUI](https://mui.com/material-ui/experimental-api/classname-generator)\n- Infinite Scrolling(using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))\n- How to make awesome carousel using [slick-carousel](https://react-slick.neostack.com)\n\n## Third Party libraries used except for React and RTK\n\n- [react-router-dom@v6.9](https://reactrouter.com/en/main)\n- [MUI(Material UI)](https://mui.com/)\n- [framer-motion](https://www.framer.com/docs/)\n- [video.js](https://videojs.com)\n- [react-slick](https://react-slick.neostack.com/)\n\n## Install with Docker\n\n```sh\ndocker build --build-arg TMDB_V3_API_KEY=your_api_key_here -t netflix-clone .\n\ndocker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone\n```\n\n## Todo\n\n- Make the animation of video card portal more similar to Netflix.\n- Improve performance. I am using `context` and `provider` but all components subscribed to the context's value are re-rendered. These re-renders happen even if the part of the value is not used in render of the component. there are [several ways](https://blog.axlight.com/posts/4-options-to-prevent-extra-rerenders-with-react-context/) to prevent the re-renders from these behaviours. In addition to them, there may be several performance issues.\n- Replace bundler([Vite](https://vitejs.dev/guide)) with [Turbopack](https://turbo.build/pack/docs/why-turbopack). Turbopack is introduced in Next.js conf recently. It's very fast but it's nor ready to use right now. it just support Next.js, and they plan to support all others as soon as possible. so if it's ready to use, replace [Vite](https://vitejs.dev/guide) with [Turbopack](https://turbo.build/pack/docs/why-turbopack).\n- Add accessibilities for better UX.\n- Add Tests.\n" }, { "path": "firebase.json", "content": "{\n \"hosting\": {\n \"public\": \"dist\",\n \"ignore\": [\n \"firebase.json\",\n \"**/.*\",\n \"**/node_modules/**\"\n ],\n \"rewrites\": [\n {\n \"source\": \"**\",\n \"destination\": \"/index.html\"\n }\n ]\n }\n}\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n \n \n \n \n Netflix\n \n \n
\n \n \n\n" }, { "path": "package.json", "content": "{\n \"name\": \"netflix-clone-using-react-typescript-mui\",\n \"version\": \"0.1.1\",\n \"type\": \"module\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@emotion/react\": \"^11.10.0\",\n \"@emotion/styled\": \"^11.10.0\",\n \"@mui/icons-material\": \"^5.8.4\",\n \"@mui/material\": \"^5.10.0\",\n \"@reduxjs/toolkit\": \"^1.8.3\",\n \"framer-motion\": \"^7.1.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-redux\": \"^8.0.2\",\n \"react-router-dom\": \"^6.9.0\",\n \"react-slick\": \"^0.29.0\",\n \"slick-carousel\": \"^1.8.1\",\n \"video.js\": \"^8.3.0\",\n \"videojs-youtube\": \"^3.0.1\",\n \"vite-tsconfig-paths\": \"^3.5.2\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.0.24\",\n \"@types/react-dom\": \"^18.0.8\",\n \"@types/react-slick\": \"^0.23.10\",\n \"@vitejs/plugin-react\": \"^2.2.0\",\n \"typescript\": \"^4.6.4\",\n \"vite\": \"^3.2.1\"\n }\n}\n" }, { "path": "public/index.html", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n Netflix\n \n \n \n
\n \n \n\n" }, { "path": "public/manifest.json", "content": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n" }, { "path": "public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "src/CustomClassNameSetup.ts", "content": "import { unstable_ClassNameGenerator as ClassNameGenerator } from \"@mui/material/className\";\n\nClassNameGenerator.configure((componentName) => {\n let newComponentName = componentName;\n // you can replace Mui, default prefix of every component with new one you want\n newComponentName = newComponentName.replace(\"Mui\", \"Netflix\");\n // you can replace default classname of component with new one you want\n newComponentName = newComponentName.replace(\"Button\", \"Btn\");\n\n return newComponentName;\n});\n" }, { "path": "src/components/AgeLimitChip.tsx", "content": "import Chip, { ChipProps } from \"@mui/material/Chip\";\nexport default function AgeLimitChip({ sx, ...others }: ChipProps) {\n return (\n span\": { p: 0 },\n ...sx,\n }}\n variant=\"outlined\"\n />\n );\n}\n" }, { "path": "src/components/DetailModal.tsx", "content": "import { forwardRef, useCallback, useRef, useState } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Grid from \"@mui/material/Grid\";\nimport Container from \"@mui/material/Container\";\nimport Stack from \"@mui/material/Stack\";\nimport IconButton from \"@mui/material/IconButton\";\nimport Typography from \"@mui/material/Typography\";\nimport Dialog from \"@mui/material/Dialog\";\nimport DialogContent from \"@mui/material/DialogContent\";\nimport Slide from \"@mui/material/Slide\";\nimport { TransitionProps } from \"@mui/material/transitions\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport ThumbUpOffAltIcon from \"@mui/icons-material/ThumbUpOffAlt\";\nimport VolumeUpIcon from \"@mui/icons-material/VolumeUp\";\nimport VolumeOffIcon from \"@mui/icons-material/VolumeOff\";\nimport Player from \"video.js/dist/types/player\";\n\nimport MaxLineTypography from \"./MaxLineTypography\";\nimport PlayButton from \"./PlayButton\";\nimport NetflixIconButton from \"./NetflixIconButton\";\nimport AgeLimitChip from \"./AgeLimitChip\";\nimport QualityChip from \"./QualityChip\";\nimport { formatMinuteToReadable, getRandomNumber } from \"src/utils/common\";\nimport SimilarVideoCard from \"./SimilarVideoCard\";\nimport { useDetailModal } from \"src/providers/DetailModalProvider\";\nimport { useGetSimilarVideosQuery } from \"src/store/slices/discover\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport VideoJSPlayer from \"./watch/VideoJSPlayer\";\n\nconst Transition = forwardRef(function Transition(\n props: TransitionProps & {\n children: React.ReactElement;\n },\n ref: React.Ref\n) {\n return ;\n});\n\nexport default function DetailModal() {\n const { detail, setDetailType } = useDetailModal();\n const { data: similarVideos } = useGetSimilarVideosQuery(\n { mediaType: detail.mediaType ?? MEDIA_TYPE.Movie, id: detail.id ?? 0 },\n { skip: !detail.id }\n );\n const playerRef = useRef(null);\n const [muted, setMuted] = useState(true);\n\n const handleReady = useCallback((player: Player) => {\n playerRef.current = player;\n setMuted(player.muted());\n }, []);\n\n const handleMute = useCallback((status: boolean) => {\n if (playerRef.current) {\n playerRef.current.muted(!status);\n setMuted(!status);\n }\n }, []);\n\n if (detail.mediaDetail) {\n return (\n \n \n \n \n \n\n \n \n {\n setDetailType({ mediaType: undefined, id: undefined });\n }}\n sx={{\n top: 15,\n right: 15,\n position: \"absolute\",\n bgcolor: \"#181818\",\n width: { xs: 22, sm: 40 },\n height: { xs: 22, sm: 40 },\n \"&:hover\": {\n bgcolor: \"primary.main\",\n },\n }}\n >\n \n \n \n \n {detail.mediaDetail?.title}\n \n \n \n \n \n \n \n \n \n \n handleMute(muted)}\n sx={{ zIndex: 2 }}\n >\n {!muted ? : }\n \n \n\n \n \n \n \n {`${getRandomNumber(100)}% Match`}\n \n {detail.mediaDetail?.release_date.substring(0, 4)}\n \n \n {`${formatMinuteToReadable(\n getRandomNumber(180)\n )}`}\n \n \n\n \n {detail.mediaDetail?.overview}\n \n \n \n \n {`Genres : ${detail.mediaDetail?.genres\n .map((g) => g.name)\n .join(\", \")}`}\n \n \n {`Available in : ${detail.mediaDetail?.spoken_languages\n .map((l) => l.name)\n .join(\", \")}`}\n \n \n \n \n \n \n {similarVideos && similarVideos.results.length > 0 && (\n \n \n More Like This\n \n \n {similarVideos.results.map((sm) => (\n \n \n \n ))}\n \n \n )}\n \n \n \n );\n }\n\n return null;\n}\n" }, { "path": "src/components/GenreBreadcrumbs.tsx", "content": "import Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport Breadcrumbs, { BreadcrumbsProps } from \"@mui/material/Breadcrumbs\";\n\nconst Separator = (\n \n);\n\ninterface GenreBreadcrumbsProps extends BreadcrumbsProps {\n genres: string[];\n}\n\nexport default function GenreBreadcrumbs({\n genres,\n ...others\n}: GenreBreadcrumbsProps) {\n return (\n \n {genres.map((genre, idx) => (\n \n {genre}\n \n ))}\n \n );\n}\n" }, { "path": "src/components/GridPage.tsx", "content": "import withPagination from \"src/hoc/withPagination\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport { CustomGenre, Genre } from \"src/types/Genre\";\nimport GridWithInfiniteScroll from \"./GridWithInfiniteScroll\";\n\ninterface GridPageProps {\n genre: Genre | CustomGenre;\n mediaType: MEDIA_TYPE;\n}\nexport default function GridPage({ genre, mediaType }: GridPageProps) {\n const Component = withPagination(\n GridWithInfiniteScroll,\n mediaType,\n genre\n );\n return ;\n}\n" }, { "path": "src/components/GridWithInfiniteScroll.tsx", "content": "import { useRef, useEffect } from \"react\";\nimport Grid from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport Container from \"@mui/material/Container\";\nimport Typography from \"@mui/material/Typography\";\nimport VideoItemWithHover from \"./VideoItemWithHover\";\nimport { CustomGenre, Genre } from \"src/types/Genre\";\nimport { PaginatedMovieResult } from \"src/types/Common\";\nimport useIntersectionObserver from \"src/hooks/useIntersectionObserver\";\n\ninterface GridWithInfiniteScrollProps {\n genre: Genre | CustomGenre;\n data: PaginatedMovieResult;\n handleNext: (page: number) => void;\n}\nexport default function GridWithInfiniteScroll({\n genre,\n data,\n handleNext,\n}: GridWithInfiniteScrollProps) {\n const intersectionRef = useRef(null);\n const intersection = useIntersectionObserver(intersectionRef);\n\n useEffect(() => {\n if (\n intersection &&\n intersection.intersectionRatio === 1 &&\n data.page < data.total_pages\n ) {\n handleNext(data.page + 1);\n }\n }, [intersection]);\n\n return (\n <>\n \n {`${genre.name} Movies`}\n \n {data.results\n .filter((v) => !!v.backdrop_path)\n .map((video, idx) => (\n \n \n \n ))}\n \n \n \n \n );\n}\n" }, { "path": "src/components/HeroSection.tsx", "content": "import { useEffect, useState, useMemo, useCallback, useRef } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Stack from \"@mui/material/Stack\";\nimport VolumeUpIcon from \"@mui/icons-material/VolumeUp\";\nimport VolumeOffIcon from \"@mui/icons-material/VolumeOff\";\nimport Player from \"video.js/dist/types/player\";\n\nimport { getRandomNumber } from \"src/utils/common\";\nimport MaxLineTypography from \"./MaxLineTypography\";\nimport PlayButton from \"./PlayButton\";\nimport MoreInfoButton from \"./MoreInfoButton\";\nimport NetflixIconButton from \"./NetflixIconButton\";\nimport MaturityRate from \"./MaturityRate\";\nimport useOffSetTop from \"src/hooks/useOffSetTop\";\nimport { useDetailModal } from \"src/providers/DetailModalProvider\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport {\n useGetVideosByMediaTypeAndCustomGenreQuery,\n useLazyGetAppendedVideosQuery,\n} from \"src/store/slices/discover\";\nimport { Movie } from \"src/types/Movie\";\nimport VideoJSPlayer from \"./watch/VideoJSPlayer\";\n\ninterface TopTrailerProps {\n mediaType: MEDIA_TYPE;\n}\n\nexport default function TopTrailer({ mediaType }: TopTrailerProps) {\n const { data } = useGetVideosByMediaTypeAndCustomGenreQuery({\n mediaType,\n apiString: \"popular\",\n page: 1,\n });\n const [getVideoDetail, { data: detail }] = useLazyGetAppendedVideosQuery();\n const [video, setVideo] = useState(null);\n const [muted, setMuted] = useState(true);\n const playerRef = useRef(null);\n const isOffset = useOffSetTop(window.innerWidth * 0.5625);\n const { setDetailType } = useDetailModal();\n const maturityRate = useMemo(() => {\n return getRandomNumber(20);\n }, []);\n\n const handleReady = useCallback((player: Player) => {\n playerRef.current = player;\n }, []);\n\n useEffect(() => {\n if (playerRef.current) {\n if (isOffset) {\n playerRef.current.pause();\n } else {\n if (playerRef.current.paused()) {\n playerRef.current.play();\n }\n }\n }\n }, [isOffset]);\n\n useEffect(() => {\n if (data && data.results) {\n const videos = data.results.filter((item) => !!item.backdrop_path);\n setVideo(videos[getRandomNumber(videos.length)]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data]);\n\n useEffect(() => {\n if (video) {\n getVideoDetail({ mediaType, id: video.id });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [video]);\n\n const handleMute = useCallback((status: boolean) => {\n if (playerRef.current) {\n playerRef.current.muted(!status);\n setMuted(!status);\n }\n }, []);\n\n return (\n \n \n \n {video && (\n <>\n \n {detail && (\n \n )}\n \n \n \n handleMute(muted)}\n sx={{ zIndex: 2 }}\n >\n {!muted ? : }\n \n {`${maturityRate}+`}\n \n \n\n \n \n \n {video.title}\n \n \n {video.overview}\n \n \n \n {\n setDetailType({ mediaType, id: video.id });\n }}\n />\n \n \n \n \n )}\n \n \n \n );\n}\n" }, { "path": "src/components/Logo.tsx", "content": "import Box, { BoxProps } from \"@mui/material/Box\";\nimport { Link as RouterLink } from \"react-router-dom\";\nimport { MAIN_PATH } from \"src/constant\";\n\nexport default function Logo({ sx }: BoxProps) {\n return (\n \n \n \n );\n}\n" }, { "path": "src/components/MainLoadingScreen.tsx", "content": "import CircularProgress from \"@mui/material/CircularProgress\";\n\nfunction MainLoadingScreen() {\n return (\n \n \n \n );\n}\n\nexport default MainLoadingScreen;\n" }, { "path": "src/components/MaturityRate.tsx", "content": "import Box from \"@mui/material/Box\";\nimport { ReactNode } from \"react\";\n\nexport default function MaturityRate({ children }: { children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/MaxLineTypography.tsx", "content": "import { forwardRef } from \"react\";\nimport Typography, { TypographyProps } from \"@mui/material/Typography\";\n\nconst MaxLineTypography = forwardRef<\n HTMLDivElement,\n TypographyProps & { maxLine: number }\n>(({ maxLine, children, sx, ...others }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nexport default MaxLineTypography;\n" }, { "path": "src/components/MoreInfoButton.tsx", "content": "import Button, { ButtonProps } from \"@mui/material/Button\";\nimport InfoOutlinedIcon from \"@mui/icons-material/InfoOutlined\";\n\nexport default function MoreInfoButton({ sx, ...others }: ButtonProps) {\n return (\n \n }\n {...others}\n sx={{\n ...sx,\n px: { xs: 1, sm: 2 },\n py: { xs: 0.5, sm: 1 },\n fontSize: { xs: 18, sm: 24, md: 28 },\n lineHeight: 1.5,\n fontWeight: \"bold\",\n textTransform: \"capitalize\",\n bgcolor: \"#6d6d6eb3\",\n whiteSpace: \"nowrap\",\n \"&:hover\": { bgcolor: \"#6d6d6e66\" },\n }}\n >\n More Info\n \n );\n}\n" }, { "path": "src/components/NetflixIconButton.tsx", "content": "import { forwardRef } from \"react\";\nimport IconButton, { IconButtonProps } from \"@mui/material/IconButton\";\n\nconst NetflixIconButton = forwardRef(\n ({ children, sx, ...others }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n\nexport default NetflixIconButton;\n" }, { "path": "src/components/NetflixNavigationLink.tsx", "content": "import {\n Link as RouterLink,\n LinkProps as RouterLinkProps,\n} from \"react-router-dom\";\nimport Link, { LinkProps } from \"@mui/material/Link\";\n\nexport default function NetflixNavigationLink({\n sx,\n children,\n ...others\n}: LinkProps & RouterLinkProps) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/PlayButton.tsx", "content": "import Button, { ButtonProps } from \"@mui/material/Button\";\nimport PlayArrowIcon from \"@mui/icons-material/PlayArrow\";\nimport { useNavigate } from \"react-router-dom\";\nimport { MAIN_PATH } from \"src/constant\";\n\nexport default function PlayButton({ sx, ...others }: ButtonProps) {\n const navigate = useNavigate();\n return (\n \n }\n {...others}\n sx={{\n px: { xs: 1, sm: 2 },\n py: { xs: 0.5, sm: 1 },\n fontSize: { xs: 18, sm: 24, md: 28 },\n lineHeight: 1.5,\n fontWeight: \"bold\",\n whiteSpace: \"nowrap\",\n textTransform: \"capitalize\",\n ...sx,\n }}\n onClick={() => navigate(`/${MAIN_PATH.watch}`)}\n >\n Play\n \n );\n}\n" }, { "path": "src/components/QualityChip.tsx", "content": "import Chip, { ChipProps } from \"@mui/material/Chip\";\nexport default function QualityChip({ sx, ...others }: ChipProps) {\n return (\n span\": { p: 0 },\n ...sx,\n }}\n />\n );\n}\n" }, { "path": "src/components/SearchBox.tsx", "content": "import { useState, useRef } from \"react\";\nimport { styled } from \"@mui/material/styles\";\nimport InputBase from \"@mui/material/InputBase\";\nimport SearchIcon from \"@mui/icons-material/Search\";\n\nconst Search = styled(\"div\")(({ theme }) => ({\n position: \"relative\",\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n}));\n\nconst SearchIconWrapper = styled(\"div\")(({ theme }) => ({\n cursor: \"pointer\",\n padding: theme.spacing(0, 1),\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n}));\n\nconst StyledInputBase = styled(InputBase)(({ theme }) => ({\n color: \"inherit\",\n \"& .NetflixInputBase-input\": {\n width: 0,\n transition: theme.transitions.create(\"width\", {\n duration: theme.transitions.duration.complex,\n easing: theme.transitions.easing.easeIn,\n }),\n \"&:focus\": {\n width: \"auto\",\n },\n },\n}));\n\nexport default function SearchBox() {\n const [isFocused, setIsFocused] = useState(false);\n const searchInputRef = useRef();\n\n const handleClickSearchIcon = () => {\n if (!isFocused) {\n searchInputRef.current?.focus();\n }\n };\n\n return (\n \n \n \n \n {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n }}\n />\n \n );\n}\n" }, { "path": "src/components/SimilarVideoCard.tsx", "content": "import Stack from \"@mui/material/Stack\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport Typography from \"@mui/material/Typography\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport { Movie } from \"src/types/Movie\";\nimport NetflixIconButton from \"./NetflixIconButton\";\nimport MaxLineTypography from \"./MaxLineTypography\";\nimport { formatMinuteToReadable, getRandomNumber } from \"src/utils/common\";\nimport AgeLimitChip from \"./AgeLimitChip\";\nimport { useGetConfigurationQuery } from \"src/store/slices/configuration\";\n\ninterface SimilarVideoCardProps {\n video: Movie;\n}\n\nexport default function SimilarVideoCard({ video }: SimilarVideoCardProps) {\n const { data: configuration } = useGetConfigurationQuery(undefined);\n\n return (\n \n \n \n \n {`${formatMinuteToReadable(\n getRandomNumber(180)\n )}`}\n \n \n \n {video.title}\n \n \n \n \n \n \n
\n {`${getRandomNumber(100)}% Match`}\n \n \n \n {video.release_date.substring(0, 4)}\n \n \n
\n
\n \n \n \n \n \n {video.overview}\n \n \n \n \n );\n}\n" }, { "path": "src/components/VideoCardPortal.tsx", "content": "import { useNavigate } from \"react-router-dom\";\nimport Stack from \"@mui/material/Stack\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport Typography from \"@mui/material/Typography\";\nimport VolumeUpIcon from \"@mui/icons-material/VolumeUp\";\nimport PlayCircleIcon from \"@mui/icons-material/PlayCircle\";\nimport ThumbUpOffAltIcon from \"@mui/icons-material/ThumbUpOffAlt\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport { Movie } from \"src/types/Movie\";\nimport { usePortal } from \"src/providers/PortalProvider\";\nimport { useDetailModal } from \"src/providers/DetailModalProvider\";\nimport { formatMinuteToReadable, getRandomNumber } from \"src/utils/common\";\nimport NetflixIconButton from \"./NetflixIconButton\";\nimport MaxLineTypography from \"./MaxLineTypography\";\nimport AgeLimitChip from \"./AgeLimitChip\";\nimport QualityChip from \"./QualityChip\";\nimport GenreBreadcrumbs from \"./GenreBreadcrumbs\";\nimport { useGetConfigurationQuery } from \"src/store/slices/configuration\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport { useGetGenresQuery } from \"src/store/slices/genre\";\nimport { MAIN_PATH } from \"src/constant\";\n\ninterface VideoCardModalProps {\n video: Movie;\n anchorElement: HTMLElement;\n}\n\nexport default function VideoCardModal({\n video,\n anchorElement,\n}: VideoCardModalProps) {\n const navigate = useNavigate();\n\n const { data: configuration } = useGetConfigurationQuery(undefined);\n const { data: genres } = useGetGenresQuery(MEDIA_TYPE.Movie);\n const setPortal = usePortal();\n const rect = anchorElement.getBoundingClientRect();\n const { setDetailType } = useDetailModal();\n\n return (\n {\n setPortal(null, null);\n }}\n sx={{\n width: rect.width * 1.5,\n height: \"100%\",\n }}\n >\n \n \n \n \n {video.title}\n \n
\n \n \n \n
\n
\n \n \n \n navigate(`/${MAIN_PATH.watch}`)}\n >\n \n \n \n \n \n \n \n \n
\n {\n setDetailType({ mediaType: MEDIA_TYPE.Movie, id: video.id });\n }}\n >\n \n \n \n \n {`${getRandomNumber(100)}% Match`}\n \n {`${formatMinuteToReadable(\n getRandomNumber(180)\n )}`}\n \n \n {genres && (\n video.genre_ids.includes(genre.id))\n .map((genre) => genre.name)}\n />\n )}\n \n \n \n );\n}\n" }, { "path": "src/components/VideoItemWithHover.tsx", "content": "import { useEffect, useState, useRef } from \"react\";\nimport { Movie } from \"src/types/Movie\";\nimport { usePortal } from \"src/providers/PortalProvider\";\nimport { useGetConfigurationQuery } from \"src/store/slices/configuration\";\nimport VideoItemWithHoverPure from \"./VideoItemWithHoverPure\";\ninterface VideoItemWithHoverProps {\n video: Movie;\n}\n\nexport default function VideoItemWithHover({ video }: VideoItemWithHoverProps) {\n const setPortal = usePortal();\n const elementRef = useRef(null);\n const [isHovered, setIsHovered] = useState(false);\n\n const { data: configuration } = useGetConfigurationQuery(undefined);\n\n useEffect(() => {\n if (isHovered) {\n setPortal(elementRef.current, video);\n }\n }, [isHovered]);\n\n return (\n \n );\n}\n" }, { "path": "src/components/VideoItemWithHoverPure.tsx", "content": "import { PureComponent, ForwardedRef, forwardRef } from \"react\";\n\ntype VideoItemWithHoverPureType = {\n src: string;\n innerRef: ForwardedRef;\n handleHover: (value: boolean) => void;\n};\n\nclass VideoItemWithHoverPure extends PureComponent {\n render() {\n return (\n \n {\n // console.log(\"onPointerEnter\");\n this.props.handleHover(true);\n }}\n onPointerLeave={() => {\n // console.log(\"onPointerLeave\");\n this.props.handleHover(false);\n }}\n />\n
\n );\n }\n}\n\nconst VideoItemWithHoverRef = forwardRef<\n HTMLDivElement,\n Omit\n>((props, ref) => );\nVideoItemWithHoverRef.displayName = \"VideoItemWithHoverRef\";\n\nexport default VideoItemWithHoverRef;\n" }, { "path": "src/components/VideoPortalContainer.tsx", "content": "import { useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport Portal from \"@mui/material/Portal\";\n\nimport VideoCardPortal from \"./VideoCardPortal\";\nimport MotionContainer from \"./animate/MotionContainer\";\nimport {\n varZoomIn,\n varZoomInLeft,\n varZoomInRight,\n} from \"./animate/variants/zoom/ZoomIn\";\nimport { usePortalData } from \"src/providers/PortalProvider\";\n\nexport default function VideoPortalContainer() {\n const { miniModalMediaData, anchorElement } = usePortalData();\n const container = useRef(null);\n const rect = anchorElement?.getBoundingClientRect();\n\n const hasToRender = !!miniModalMediaData && !!anchorElement;\n let isFirstElement = false;\n let isLastElement = false;\n let variant = varZoomIn;\n if (hasToRender) {\n const parentElement = anchorElement.closest(\".slick-active\");\n const nextSiblingOfParentElement = parentElement?.nextElementSibling;\n const previousSiblingOfParentElement =\n parentElement?.previousElementSibling;\n if (!previousSiblingOfParentElement?.classList.contains(\"slick-active\")) {\n isFirstElement = true;\n variant = varZoomInLeft;\n } else if (\n !nextSiblingOfParentElement?.classList.contains(\"slick-active\")\n ) {\n isLastElement = true;\n variant = varZoomInRight;\n }\n }\n\n return (\n <>\n {hasToRender && (\n \n \n \n )}\n \n \n \n \n );\n}\n" }, { "path": "src/components/VideoSlider.tsx", "content": "import withPagination from \"src/hoc/withPagination\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport { CustomGenre, Genre } from \"src/types/Genre\";\nimport SlickSlider from \"./slick-slider/SlickSlider\";\n\ninterface SliderRowForGenreProps {\n genre: Genre | CustomGenre;\n mediaType: MEDIA_TYPE;\n}\nexport default function SliderRowForGenre({\n genre,\n mediaType,\n}: SliderRowForGenreProps) {\n const Component = withPagination(SlickSlider, mediaType, genre);\n return ;\n}\n" }, { "path": "src/components/animate/MotionContainer.tsx", "content": "import { motion } from \"framer-motion\";\nimport Box, { BoxProps } from \"@mui/material/Box\";\nimport { varWrapBoth } from \"./variants/Wrap\";\n\ninterface MotionContainerProps extends BoxProps {\n initial?: boolean | string;\n open?: boolean;\n}\n\nexport default function MotionContainer({\n open,\n children,\n ...other\n}: MotionContainerProps) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/animate/variants/Wrap.ts", "content": "export const varWrapEnter = {\n animate: {\n transition: { staggerChildren: 0.1 },\n },\n};\n\nexport const varWrapExit = {\n exit: {\n transition: { staggerChildren: 0.1 },\n },\n};\n\nexport const varWrapBoth = {\n animate: {\n transition: { staggerChildren: 0.07, delayChildren: 0.1 },\n },\n exit: {\n transition: { staggerChildren: 0.05, staggerDirection: -1 },\n },\n};\n" }, { "path": "src/components/animate/variants/fade/FadeIn.ts", "content": "const TRANSITION_ENTER = {\n duration: 0.64,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\nconst TRANSITION_EXIT = {\n duration: 0.48,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\n\nexport const varFadeIn = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: TRANSITION_ENTER },\n exit: { opacity: 0, transition: TRANSITION_EXIT },\n};\n" }, { "path": "src/components/animate/variants/fade/FadeOut.ts", "content": "const TRANSITION_ENTER = {\n duration: 0.64,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\nconst TRANSITION_EXIT = {\n duration: 0.48,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\n\nexport const varFadeOut = {\n initial: { opacity: 1 },\n animate: { opacity: 0, transition: TRANSITION_ENTER },\n exit: { opacity: 1, transition: TRANSITION_EXIT },\n};\n" }, { "path": "src/components/animate/variants/zoom/ZoomIn.ts", "content": "const DISTANCE = 0;\nconst IN = { scale: 1, opacity: 1 };\nconst OUT = { scale: 0, opacity: 0 };\n\nconst TRANSITION_ENTER = {\n duration: 1,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\n\nconst TRANSITION_EXIT = {\n duration: 1,\n ease: [0.43, 0.13, 0.23, 0.96],\n};\n\nexport const varZoomIn = {\n initial: OUT,\n animate: { ...IN, transition: TRANSITION_ENTER },\n exit: { ...OUT, transition: TRANSITION_EXIT },\n};\n\nexport const varZoomInLeft = {\n initial: { ...OUT, translateX: -DISTANCE },\n animate: { ...IN, translateX: 0, transition: TRANSITION_ENTER },\n exit: { ...OUT, translateX: -DISTANCE, transition: TRANSITION_EXIT },\n};\n\nexport const varZoomInRight = {\n initial: { ...OUT, translateX: DISTANCE },\n animate: { ...IN, translateX: 0, transition: TRANSITION_ENTER },\n exit: { ...OUT, translateX: DISTANCE, transition: TRANSITION_EXIT },\n};\n" }, { "path": "src/components/layouts/Footer.tsx", "content": "import Box from \"@mui/material/Box\";\nimport Link from \"@mui/material/Link\";\nimport Typography from \"@mui/material/Typography\";\nimport Divider from \"@mui/material/Divider\";\n\nexport default function Footer() {\n return (\n \n \n \n Developed by{\" \"}\n \n Crazy Man\n \n \n \n \n );\n}\n" }, { "path": "src/components/layouts/MainHeader.tsx", "content": "import * as React from \"react\";\nimport AppBar from \"@mui/material/AppBar\";\nimport Box from \"@mui/material/Box\";\nimport Stack from \"@mui/material/Stack\";\nimport Toolbar from \"@mui/material/Toolbar\";\nimport IconButton from \"@mui/material/IconButton\";\nimport Typography from \"@mui/material/Typography\";\nimport Menu from \"@mui/material/Menu\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport Avatar from \"@mui/material/Avatar\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport MenuItem from \"@mui/material/MenuItem\";\nimport useOffSetTop from \"src/hooks/useOffSetTop\";\nimport { APP_BAR_HEIGHT } from \"src/constant\";\nimport Logo from \"../Logo\";\nimport SearchBox from \"../SearchBox\";\nimport NetflixNavigationLink from \"../NetflixNavigationLink\";\n\nconst pages = [\"My List\", \"Movies\", \"Tv Shows\"];\n\nconst MainHeader = () => {\n const isOffset = useOffSetTop(APP_BAR_HEIGHT);\n\n const [anchorElNav, setAnchorElNav] = React.useState(\n null\n );\n const [anchorElUser, setAnchorElUser] = React.useState(\n null\n );\n\n const handleOpenNavMenu = (event: React.MouseEvent) => {\n setAnchorElNav(event.currentTarget);\n };\n const handleOpenUserMenu = (event: React.MouseEvent) => {\n setAnchorElUser(event.currentTarget);\n };\n\n const handleCloseNavMenu = () => {\n setAnchorElNav(null);\n };\n\n const handleCloseUserMenu = () => {\n setAnchorElUser(null);\n };\n\n return (\n theme.shadows[4],\n }\n : { boxShadow: 0, bgcolor: \"transparent\" }),\n }}\n >\n \n \n\n \n \n \n \n \n {pages.map((page) => (\n \n {page}\n \n ))}\n \n \n \n Netflix\n \n \n {pages.map((page) => (\n \n {page}\n \n ))}\n \n\n \n \n \n \n \n \n \n \n {[\"Account\", \"Logout\"].map((setting) => (\n \n {setting}\n \n ))}\n \n \n \n \n );\n};\nexport default MainHeader;\n" }, { "path": "src/components/layouts/index.ts", "content": "export { default as MainHeader } from \"./MainHeader\";\r\nexport { default as Footer } from \"./Footer\";\r\n" }, { "path": "src/components/slick-slider/CustomNavigation.tsx", "content": "import { styled } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport ArrowBackIosNewIcon from \"@mui/icons-material/ArrowBackIosNew\";\nimport ArrowForwardIosIcon from \"@mui/icons-material/ArrowForwardIos\";\nimport { MouseEventHandler, ReactNode } from \"react\";\n\nconst ArrowStyle = styled(Box)(({ theme }) => ({\n top: 0,\n bottom: 0,\n position: \"absolute\",\n zIndex: 9,\n height: \"100%\",\n opacity: 0.48,\n display: \"flex\",\n cursor: \"pointer\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: theme.palette.common.white,\n // background: theme.palette.grey[700],\n transition: theme.transitions.create(\"opacity\"),\n \"&:hover\": {\n opacity: 0.8,\n background: theme.palette.grey[900],\n },\n [theme.breakpoints.down(\"sm\")]: {\n display: \"none\",\n },\n}));\n\ninterface CustomNaviationProps {\n isEnd: boolean;\n arrowWidth: number;\n children: ReactNode;\n activeSlideIndex: number;\n onNext: MouseEventHandler;\n onPrevious: MouseEventHandler;\n}\n\nexport default function CustomNavigation({\n isEnd,\n onNext,\n children,\n onPrevious,\n arrowWidth,\n activeSlideIndex,\n}: CustomNaviationProps) {\n return (\n <>\n {activeSlideIndex > 0 && (\n \n // `linear-gradient(to right, ${theme.palette.background.default} 0%, rgba(0,0,0,0) 100%)`,\n }}\n >\n \n \n )}\n\n {children}\n {!isEnd && (\n \n // `linear-gradient(to left, ${theme.palette.background.default} 0%, rgba(0,0,0,0) 100%)`,\n }}\n >\n \n \n )}\n \n );\n}\n" }, { "path": "src/components/slick-slider/SlickSlider.tsx", "content": "import { useState, useRef } from \"react\";\nimport Slider, { Settings } from \"react-slick\";\nimport { motion } from \"framer-motion\";\n\nimport { styled, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Stack from \"@mui/material/Stack\";\n\nimport CustomNavigation from \"./CustomNavigation\";\nimport VideoItemWithHover from \"src/components/VideoItemWithHover\";\nimport { ARROW_MAX_WIDTH } from \"src/constant\";\nimport NetflixNavigationLink from \"src/components/NetflixNavigationLink\";\nimport MotionContainer from \"src/components/animate/MotionContainer\";\nimport { varFadeIn } from \"src/components/animate/variants/fade/FadeIn\";\nimport { CustomGenre, Genre } from \"src/types/Genre\";\nimport { Movie } from \"src/types/Movie\";\nimport { PaginatedMovieResult } from \"src/types/Common\";\n\nconst RootStyle = styled(\"div\")(() => ({\n position: \"relative\",\n overflow: \"inherit\",\n}));\n\nconst StyledSlider = styled(Slider)(\n ({ theme, padding }: { theme: Theme; padding: number }) => ({\n display: \"flex !important\",\n justifyContent: \"center\",\n overflow: \"initial !important\",\n \"& > .slick-list\": {\n overflow: \"visible\",\n },\n [theme.breakpoints.up(\"sm\")]: {\n \"& > .slick-list\": {\n width: `calc(100% - ${2 * padding}px)`,\n },\n \"& .slick-list > .slick-track\": {\n margin: \"0px !important\",\n },\n \"& .slick-list > .slick-track > .slick-current > div > .NetflixBox-root > .NetflixPaper-root:hover\":\n {\n transformOrigin: \"0% 50% !important\",\n },\n },\n [theme.breakpoints.down(\"sm\")]: {\n \"& > .slick-list\": {\n width: `calc(100% - ${padding}px)`,\n },\n },\n })\n);\n\ninterface SlideItemProps {\n item: Movie;\n}\n\nfunction SlideItem({ item }: SlideItemProps) {\n return (\n \n \n \n );\n}\n\ninterface SlickSliderProps {\n data: PaginatedMovieResult;\n genre: Genre | CustomGenre;\n handleNext: (page: number) => void;\n}\nexport default function SlickSlider({ data, genre }: SlickSliderProps) {\n const sliderRef = useRef(null);\n const [activeSlideIndex, setActiveSlideIndex] = useState(0);\n const [showExplore, setShowExplore] = useState(false);\n const [isEnd, setIsEnd] = useState(false);\n const theme = useTheme();\n\n const beforeChange = async (currentIndex: number, nextIndex: number) => {\n if (currentIndex < nextIndex) {\n setActiveSlideIndex(nextIndex);\n } else if (currentIndex > nextIndex) {\n setIsEnd(false);\n }\n setActiveSlideIndex(nextIndex);\n };\n\n const settings: Settings = {\n speed: 500,\n arrows: false,\n infinite: false,\n lazyLoad: \"ondemand\",\n slidesToShow: 6,\n slidesToScroll: 6,\n // afterChange: (current) => {\n // console.log(\"After Change\", current);\n // },\n beforeChange,\n // onEdge: (direction) => {\n // console.log(\"Edge: \", direction);\n // },\n responsive: [\n {\n breakpoint: 1536,\n settings: {\n slidesToShow: 5,\n slidesToScroll: 5,\n },\n },\n {\n breakpoint: 1200,\n settings: {\n slidesToShow: 4,\n slidesToScroll: 4,\n },\n },\n {\n breakpoint: 900,\n settings: {\n slidesToShow: 3,\n slidesToScroll: 3,\n },\n },\n {\n breakpoint: 600,\n settings: {\n slidesToShow: 2,\n slidesToScroll: 2,\n },\n },\n ],\n };\n\n const handlePrevious = () => {\n sliderRef.current?.slickPrev();\n };\n\n const handleNext = () => {\n sliderRef.current?.slickNext();\n };\n\n return (\n \n {data.results.length > 0 && (\n <>\n \n {\n setShowExplore(true);\n }}\n onMouseLeave={() => {\n setShowExplore(false);\n }}\n >\n {`${genre.name} Movies `}\n \n {\"Explore All\".split(\"\").map((letter, index) => (\n \n {letter}\n \n ))}\n \n \n \n\n \n \n \n {data.results\n .filter((i) => !!i.backdrop_path)\n .map((item) => (\n \n ))}\n \n \n \n \n )}\n \n );\n}\n" }, { "path": "src/components/watch/PlayerControlButton.tsx", "content": "import { forwardRef } from \"react\";\n\nimport IconButton, { IconButtonProps } from \"@mui/material/IconButton\";\n\nconst PlayerControlButton = forwardRef(\n ({ children, ...others }, ref) => (\n \n {children}\n \n )\n);\n\nexport default PlayerControlButton;\n" }, { "path": "src/components/watch/PlayerSeekbar.tsx", "content": "import Slider from \"@mui/material/Slider\";\nimport { styled } from \"@mui/material/styles\";\n\nimport { formatTime } from \"src/utils/common\";\n\nconst StyledSlider = styled(Slider)({\n borderRadius: 0,\n \"& .NetflixSlider-track\": {\n backgroundColor: \"red !important\",\n border: 0,\n },\n \"& .NetflixSlider-rail\": {\n border: \"none\",\n backgroundColor: \"white !important\",\n opacity: 0.85,\n },\n \"& .NetflixSlider-thumb\": {\n borderRadius: \"50%\",\n height: 10,\n width: 10,\n backgroundColor: \"red\",\n \"&:focus, &:hover, &.Netflix-active, &.Netflix-focusVisible\": {\n boxShadow: \"inherit\",\n height: 15,\n width: 15,\n },\n \"&:before\": {\n display: \"none\",\n boxShadow: \"0 2px 2px 0 #fff\",\n height: 10,\n width: 10,\n },\n },\n // \"& .NetflixSlider-valueLabel\": {\n // lineHeight: 1.2,\n // fontSize: 12,\n // background: \"unset\",\n // padding: 0,\n // width: 32,\n // height: 32,\n // borderRadius: \"50% 50% 50% 0\",\n // backgroundColor: \"#52af77\",\n // transformOrigin: \"bottom left\",\n // transform: \"translate(50%, -100%) rotate(-45deg) scale(0)\",\n // \"&:before\": { display: \"none\" },\n // \"&.NetflixSlider-valueLabelOpen\": {\n // transform: \"translate(50%, -100%) rotate(-45deg) scale(1)\",\n // },\n // \"& > *\": {\n // transform: \"rotate(45deg)\",\n // },\n // },\n});\n\nfunction PlayerSeekbar({\n playedSeconds,\n duration,\n seekTo,\n}: {\n playedSeconds: number;\n duration: number;\n seekTo: (value: number) => void;\n}) {\n return (\n formatTime(v)}\n // components={{\n // ValueLabel: ValueLabelComponent,\n // }}\n value={playedSeconds}\n max={duration}\n onChange={(_, value) => {\n seekTo(value as number);\n }}\n />\n );\n}\n\nexport default PlayerSeekbar;\n" }, { "path": "src/components/watch/VideoJSPlayer.tsx", "content": "import { useEffect, useRef } from \"react\";\nimport Player from \"video.js/dist/types/player\";\nimport videojs from \"video.js\";\nimport \"videojs-youtube\";\nimport \"video.js/dist/video-js.css\";\n\nexport default function VideoJSPlayer({\n options,\n onReady,\n}: {\n options: any;\n onReady: (player: Player) => void;\n}) {\n const videoRef = useRef(null);\n const playerRef = useRef(null);\n\n useEffect(() => {\n (async function handleVideojs() {\n // Make sure Video.js player is only initialized once\n if (!playerRef.current) {\n // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.\n const videoElement = document.createElement(\"video-js\");\n // videoElement.classList.add(\"vjs-big-play-centered\", \"vjs-16-9\");\n\n videoRef.current?.appendChild(videoElement);\n const player = (playerRef.current = videojs(\n videoElement,\n options,\n () => {\n onReady && onReady(player);\n }\n ));\n\n // import(\"video.js\").then(async ({ default: videojs }) => {\n // await import(\"video.js/dist/video-js.css\");\n // if (options[\"techOrder\"] && options[\"techOrder\"].includes(\"youtube\")) {\n // // eslint-disable-next-line\n // await import(\"videojs-youtube\");\n // }\n // const player = (playerRef.current = videojs(\n // videoElement,\n // options,\n // () => {\n // onReady && onReady(player);\n // }\n // ));\n // });\n\n // await import(\"video.js/dist/video-js.css\");\n // const videojs = await import(\"video.js\");\n // if (options[\"techOrder\"] && options[\"techOrder\"].includes(\"youtube\")) {\n // // eslint-disable-next-line\n // await import(\"videojs-youtube\");\n // }\n // const player = (playerRef.current = videojs.default(\n // videoElement,\n // options,\n // () => {\n // onReady && onReady(player);\n // }\n // ));\n\n // You could update an existing player in the `else` block here\n // on prop change, for example:\n } else {\n const player = playerRef.current;\n // player.autoplay(options.autoplay);\n player.width(options.width);\n player.height(options.height);\n }\n })();\n }, [options, videoRef]);\n\n // Dispose the Video.js player when the functional component unmounts\n useEffect(() => {\n const player = playerRef.current;\n\n return () => {\n if (player && !player.isDisposed()) {\n player.dispose();\n playerRef.current = null;\n }\n };\n }, [playerRef]);\n\n return (\n
\n
\n
\n );\n}\n" }, { "path": "src/components/watch/VolumeControllers.tsx", "content": "import { Stack } from \"@mui/material\";\nimport Slider from \"@mui/material/Slider\";\nimport { styled } from \"@mui/material/styles\";\nimport { SliderUnstyledOwnProps } from \"@mui/base/SliderUnstyled\";\nimport VolumeUpIcon from \"@mui/icons-material/VolumeUp\";\nimport VolumeOffIcon from \"@mui/icons-material/VolumeOff\";\nimport PlayerControlButton from \"./PlayerControlButton\";\n\nconst StyledSlider = styled(Slider)({\n height: 5,\n borderRadius: 0,\n padding: 0,\n \"& .NetflixSlider-track\": {\n border: \"none\",\n backgroundColor: \"red\",\n },\n \"& .NetflixSlider-rail\": {\n border: \"none\",\n backgroundColor: \"white\",\n opacity: 0.85,\n },\n \"& .NetflixSlider-thumb\": {\n height: 10,\n width: 10,\n backgroundColor: \"red\",\n \"&:focus, &:hover, &.Netflix-active, &.Netflix-focusVisible\": {\n boxShadow: \"inherit\",\n height: 15,\n width: 15,\n },\n \"&:before\": {\n display: \"none\",\n },\n },\n});\n\nexport default function VolumeControllers({\n value,\n handleVolume,\n handleVolumeToggle,\n muted,\n}: {\n value: number;\n handleVolume: SliderUnstyledOwnProps[\"onChange\"];\n handleVolumeToggle: React.MouseEventHandler;\n muted: boolean;\n}) {\n return (\n \n \n {!muted ? : }\n \n x}\n onChange={handleVolume}\n sx={{ width: { xs: 60, sm: 80, md: 100 } }}\n />\n \n );\n}\n" }, { "path": "src/constant/index.ts", "content": "import { CustomGenre } from \"src/types/Genre\";\n\nexport const API_ENDPOINT_URL = import.meta.env.VITE_APP_API_ENDPOINT_URL;\nexport const TMDB_V3_API_KEY = import.meta.env.VITE_APP_TMDB_V3_API_KEY;\n\nexport const MAIN_PATH = {\n root: \"\",\n browse: \"browse\",\n genreExplore: \"genre\",\n watch: \"watch\",\n};\n\nexport const ARROW_MAX_WIDTH = 60;\nexport const COMMON_TITLES: CustomGenre[] = [\n { name: \"Popular\", apiString: \"popular\" },\n { name: \"Top Rated\", apiString: \"top_rated\" },\n { name: \"Now Playing\", apiString: \"now_playing\" },\n { name: \"Upcoming\", apiString: \"upcoming\" },\n];\n\nexport const YOUTUBE_URL = \"https://www.youtube.com/watch?v=\";\nexport const APP_BAR_HEIGHT = 70;\n\nexport const INITIAL_DETAIL_STATE = {\n id: undefined,\n mediaType: undefined,\n mediaDetail: undefined,\n};\n" }, { "path": "src/hoc/withPagination.tsx", "content": "import { ElementType, useCallback, useEffect } from \"react\";\nimport MainLoadingScreen from \"src/components/MainLoadingScreen\";\nimport { useAppDispatch, useAppSelector } from \"src/hooks/redux\";\nimport {\n initiateItem,\n useLazyGetVideosByMediaTypeAndGenreIdQuery,\n useLazyGetVideosByMediaTypeAndCustomGenreQuery,\n} from \"src/store/slices/discover\";\nimport { MEDIA_TYPE } from \"src/types/Common\";\nimport { CustomGenre, Genre } from \"src/types/Genre\";\n\nexport default function withPagination(\n Component: ElementType,\n mediaType: MEDIA_TYPE,\n genre: Genre | CustomGenre\n) {\n return function WithPagination() {\n const dispatch = useAppDispatch();\n const itemKey = genre.id ?? (genre as CustomGenre).apiString;\n const mediaState = useAppSelector((state) => state.discover[mediaType]);\n const pageState = mediaState ? mediaState[itemKey] : undefined;\n const [getVideosByMediaTypeAndGenreId] =\n useLazyGetVideosByMediaTypeAndGenreIdQuery();\n const [getVideosByMediaTypeAndCustomGenre] =\n useLazyGetVideosByMediaTypeAndCustomGenreQuery();\n\n useEffect(() => {\n if (!mediaState || !pageState) {\n dispatch(initiateItem({ mediaType, itemKey }));\n }\n }, [mediaState, pageState]);\n\n useEffect(() => {\n if (pageState && pageState.page === 0) {\n handleNext(pageState.page + 1);\n }\n }, [pageState]);\n\n const handleNext = useCallback((page: number) => {\n if (genre.id) {\n getVideosByMediaTypeAndGenreId({\n mediaType,\n genreId: genre.id,\n page,\n });\n } else {\n getVideosByMediaTypeAndCustomGenre({\n mediaType,\n apiString: (genre as CustomGenre).apiString,\n page,\n });\n }\n // dispatch(setNextPage({ mediaType, itemKey }));\n }, []);\n\n if (pageState) {\n return (\n \n );\n }\n return ;\n };\n}\n" }, { "path": "src/hooks/redux.ts", "content": "import { TypedUseSelectorHook, useDispatch, useSelector } from \"react-redux\";\nimport type { RootState, AppDispatch } from \"../store\";\n\n// Use throughout your app instead of plain `useDispatch` and `useSelector`\nexport const useAppDispatch: () => AppDispatch = useDispatch;\nexport const useAppSelector: TypedUseSelectorHook = useSelector;\n" }, { "path": "src/hooks/useIntersectionObserver.ts", "content": "import { RefObject, useEffect, useState } from \"react\";\r\n// import { buildThresholdList } from \"src/utils\";\r\n\r\nexport default function useIntersectionObserver(\r\n ref: RefObject,\r\n options?: IntersectionObserverInit\r\n) {\r\n const [entry, setEntry] = useState(null);\r\n\r\n useEffect(() => {\r\n const observer = new IntersectionObserver(\r\n ([entry]) => {\r\n setEntry(entry);\r\n },\r\n options ?? {\r\n root: null,\r\n rootMargin: \"0px\",\r\n // threshold: buildThresholdList(),\r\n threshold: 1,\r\n }\r\n );\r\n\r\n if (ref.current) {\r\n observer.observe(ref.current);\r\n }\r\n\r\n return () => {\r\n if (ref.current) {\r\n observer.unobserve(ref.current);\r\n }\r\n };\r\n }, []);\r\n\r\n return entry;\r\n}\r\n" }, { "path": "src/hooks/useOffSetTop.ts", "content": "import { useState, useEffect, useCallback } from \"react\";\n\nexport default function useOffSetTop(top: number) {\n const [offsetTop, setOffSetTop] = useState(false);\n const onScroll = useCallback(() => {\n if (window.pageYOffset > top) {\n setOffSetTop(true);\n } else {\n setOffSetTop(false);\n }\n }, [top]);\n\n useEffect(() => {\n window.addEventListener(\"scroll\", onScroll);\n return () => {\n window.removeEventListener(\"scroll\", onScroll);\n };\n }, [top]);\n\n return offsetTop;\n}\n" }, { "path": "src/hooks/useWindowSize.ts", "content": "import { useState, useEffect } from \"react\";\r\n\r\nexport default function useWindowSize() {\r\n // Initialize state with undefined width/height so server and client renders match\r\n // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/\r\n const [windowSize, setWindowSize] = useState<{\r\n width: number | undefined;\r\n height: number | undefined;\r\n }>({\r\n width: undefined,\r\n height: undefined,\r\n });\r\n\r\n useEffect(() => {\r\n // Handler to call on window resize\r\n function handleResize() {\r\n // Set window width/height to state\r\n setWindowSize({\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n });\r\n }\r\n // Add event listener\r\n window.addEventListener(\"resize\", handleResize);\r\n // Call handler right away so state gets updated with initial window size\r\n handleResize();\r\n // Remove event listener on cleanup\r\n return () => window.removeEventListener(\"resize\", handleResize);\r\n }, []); // Empty array ensures that effect is only run on mount\r\n\r\n return windowSize;\r\n}\r\n" }, { "path": "src/layouts/MainLayout.tsx", "content": "import { Outlet, useLocation, useNavigation } from \"react-router-dom\";\nimport Box from \"@mui/material/Box\";\n\nimport DetailModal from \"src/components/DetailModal\";\nimport VideoPortalContainer from \"src/components/VideoPortalContainer\";\nimport DetailModalProvider from \"src/providers/DetailModalProvider\";\nimport PortalProvider from \"src/providers/PortalProvider\";\nimport { MAIN_PATH } from \"src/constant\";\nimport { Footer, MainHeader } from \"src/components/layouts\";\nimport MainLoadingScreen from \"src/components/MainLoadingScreen\";\n\nexport default function MainLayout() {\n const location = useLocation();\n const navigation = useNavigation();\n // console.log(\"Nav Stat: \", navigation.state);\n return (\n \n \n {navigation.state !== \"idle\" && }\n \n \n \n {/* */}\n \n \n \n \n {location.pathname !== `/${MAIN_PATH.watch}` &&