{h1}
71 |{h1}
44 |28 | {siteConfig.name} - {siteConfig.slogan} 29 | {/* {siteConfig.name} - watch tv shows online, watch movies online. */} 30 | {/* An e-commerce skateshop built with everything new in Next.js 13 */} 31 |
32 |33 | Step into a world where entertainment knows no boundaries, where your 34 | screens come alive with an endless array of captivating stories. 35 |
36 |
37 |
38 | Watch Now
43 |
49 |
57 | 50 | Features 51 |
52 |53 | {siteConfig.name} offers a host of powerful features designed to 54 | enhance your movie-watching experience. 55 |
56 |
58 |
147 | {/*
59 |
72 |
60 |
63 |
71 |
64 |
70 | Vast Movie Library
65 |66 | Thousands of movies, spanning diverse genres, languages, and 67 | decades. 68 |
69 |
73 |
85 |
74 |
77 |
84 |
78 |
83 | Personalized Recommendations
79 |80 | Suggesting movies and shows tailored to your taste. 81 |
82 |
86 |
99 |
87 |
90 |
98 |
91 |
97 | Multiple Device Support
92 |93 | Including smart TVs, smartphones, tablets, laptops, and gaming 94 | consoles. 95 |
96 |
100 |
113 |
101 |
104 |
112 |
105 |
111 | Privacy First
106 |107 | No Login , No Signup = No Data Collection 108 | 109 |
110 |
114 |
133 |
115 |
124 |
132 |
125 |
131 | High-Definition Streaming
126 |127 | Stunning visuals with content available in 4K, Ultra HD and 128 | HDR. 129 |
130 |
134 |
146 |
135 |
138 |
145 |
139 |
144 | Free
140 |141 | Everything is free, no subscription or credit card required. 142 |
143 | */}
148 | {/*
*/}
152 | */} 149 | {/* Taxonomy also includes a blog and a full-featured documentation site */} 150 | {/*
*/} 151 | {/*{h1}
75 |
72 |
89 |
112 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/dynamic-tooltip.tsx:
--------------------------------------------------------------------------------
1 | import type { PropsWithChildren } from "react";
2 |
3 | import {
4 | Tooltip,
5 | TooltipContent,
6 | TooltipProvider,
7 | TooltipTrigger,
8 | } from "@/components/ui/tooltip";
9 |
10 | interface DynamicTooltipProps extends PropsWithChildren {
11 | text: string;
12 | }
13 |
14 | const DynamicTooltip = ({ children, text }: DynamicTooltipProps) => {
15 | return (
16 | {text}
21 |
71 |
133 |
134 |
135 | )}
136 |
81 |
{' '}
130 |
131 |
132 |
82 |
129 | 83 | {randomShow?.title ?? randomShow?.name} 84 |
85 |
86 |
92 | {/* 87 | {Math.round(randomShow?.vote_average * 10) ?? '-'}% Match 88 |
89 | {/*{randomShow?.release_date ?? "-"}
*/} 90 |{randomShow?.release_date ?? '-'}
91 |*/} 93 |
94 | {randomShow?.overview ?? '-'} 95 |
96 |
97 |
102 |
114 |
115 |
127 |
128 |
19 | {children}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/navigation/main-nav.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { type Show, type NavItem } from '@/types';
5 | import Link from 'next/link';
6 | import {
7 | cn,
8 | getSearchValue,
9 | handleDefaultSearchBtn,
10 | handleDefaultSearchInp,
11 | } from '@/lib/utils';
12 | import { siteConfig } from '@/configs/site';
13 | import { Icons } from '@/components/icons';
14 | import {
15 | DropdownMenu,
16 | DropdownMenuContent,
17 | DropdownMenuItem,
18 | DropdownMenuLabel,
19 | DropdownMenuSeparator,
20 | DropdownMenuTrigger,
21 | } from '@/components/ui/dropdown-menu';
22 | import { Button } from '@/components/ui/button';
23 | import { usePathname, useRouter } from 'next/navigation';
24 | import { useSearchStore } from '@/stores/search';
25 | import { ModeToggle as ThemeToggle } from '@/components/theme-toggle';
26 | import { DebouncedInput } from '@/components/debounced-input';
27 | import MovieService from '@/services/MovieService';
28 |
29 | interface MainNavProps {
30 | items?: NavItem[];
31 | }
32 |
33 | interface SearchResult {
34 | results: Show[];
35 | }
36 |
37 | export function MainNav({ items }: MainNavProps) {
38 | const path = usePathname();
39 | const router = useRouter();
40 | // search store
41 | const searchStore = useSearchStore();
42 | const [isScrolled, setIsScrolled] = React.useState(false);
43 |
44 | React.useEffect(() => {
45 | window.addEventListener('popstate', handlePopstateEvent, false);
46 | return () => {
47 | window.removeEventListener('popstate', handlePopstateEvent, false);
48 | };
49 | }, []);
50 |
51 | const handlePopstateEvent = () => {
52 | const pathname = window.location.pathname;
53 | const search: string = getSearchValue('q');
54 |
55 | if (!search?.length || !pathname.includes('/search')) {
56 | searchStore.reset();
57 | searchStore.setOpen(false);
58 | } else if (search?.length) {
59 | searchStore.setOpen(true);
60 | searchStore.setLoading(true);
61 | searchStore.setQuery(search);
62 | setTimeout(() => {
63 | handleDefaultSearchBtn();
64 | }, 10);
65 | setTimeout(() => {
66 | handleDefaultSearchInp();
67 | }, 20);
68 | MovieService.searchMovies(search)
69 | .then((response: SearchResult) => {
70 | void searchStore.setShows(response.results);
71 | })
72 | .catch((e) => {
73 | console.error(e);
74 | })
75 | .finally(() => searchStore.setLoading(false));
76 | }
77 | };
78 |
79 | async function searchShowsByQuery(value: string) {
80 | if (!value?.trim()?.length) {
81 | if (path === '/search') {
82 | router.push('/home');
83 | } else {
84 | window.history.pushState(null, '', path);
85 | }
86 | return;
87 | }
88 |
89 | if (getSearchValue('q')?.trim()?.length) {
90 | window.history.replaceState(null, '', `search?q=${value}`);
91 | } else {
92 | window.history.pushState(null, '', `search?q=${value}`);
93 | }
94 |
95 | searchStore.setQuery(value);
96 | searchStore.setLoading(true);
97 | const shows = await MovieService.searchMovies(value);
98 | searchStore.setLoading(false);
99 | void searchStore.setShows(shows.results);
100 |
101 | if (typeof window !== 'undefined') {
102 | window.scrollTo({ top: 0, behavior: 'smooth' });
103 | }
104 | }
105 |
106 | // change background color on scroll
107 | React.useEffect(() => {
108 | const changeBgColor = () => {
109 | window.scrollY > 0 ? setIsScrolled(true) : setIsScrolled(false);
110 | };
111 | window.addEventListener('scroll', changeBgColor);
112 | return () => window.removeEventListener('scroll', changeBgColor);
113 | }, [isScrolled]);
114 |
115 | const handleChangeStatusOpen = (value: boolean): void => {
116 | searchStore.setOpen(value);
117 | if (!value) searchStore.reset();
118 | };
119 |
120 | return (
121 |
233 | );
234 | }
235 |
236 | export default MainNav;
237 |
--------------------------------------------------------------------------------
/src/components/navigation/mobile-nav.tsx:
--------------------------------------------------------------------------------
1 | // "use client";
2 | //
3 | // import * as React from "react";
4 | // import Link from "next/link";
5 | // import { useSelectedLayoutSegment } from "next/navigation";
6 | // import type { MainNavItem, SidebarNavItem } from "@/types";
7 | //
8 | // import { cn } from "@/lib/utils";
9 | // import {
10 | // Accordion,
11 | // AccordionContent,
12 | // AccordionItem,
13 | // AccordionTrigger,
14 | // } from "@/components/ui/accordion";
15 | // import { Icons } from "@/components/icons";
16 | // import { useLockBody } from "@/hooks/use-lock-body";
17 | //
18 | // type MobileNavProps = {
19 | // items: MainNavItem[];
20 | // sidebarNavItems?: SidebarNavItem[];
21 | // className?: string;
22 | // };
23 | //
24 | // export function MobileNav({
25 | // items,
26 | // sidebarNavItems,
27 | // className,
28 | // }: MobileNavProps) {
29 | // const segment = useSelectedLayoutSegment();
30 | // const [isOpen, setIsOpen] = React.useState(false);
31 | // // useLockBody();
32 | //
33 | // return (
34 | //
35 | //
46 | // {isOpen && (
47 | //
107 | // );
108 | // }
109 | //
110 | // interface MobileLinkProps extends React.PropsWithChildren {
111 | // href: string;
112 | // disabled?: boolean;
113 | // segment: string;
114 | // setIsOpen: React.Dispatch
52 | //
105 | // )}
106 | //
53 | // item.title)}
56 | // // className="grid grid-flow-row auto-rows-max"
57 | // >
58 | // {items?.map((item, index) => (
59 | //
60 | // {item.items ? (
61 | // <>
62 | //
63 | // {item.title}
64 | //
65 | //
66 | //
89 | //
90 | // ) : (
91 | //
97 | // {item.title}
98 | //
99 | // )}
100 | //
101 | // ))}
102 | //
103 | //
104 | //
67 | // {item.items?.map((subItem, index) =>
68 | // subItem.href ? (
69 | //
76 | // {subItem.title}
77 | //
78 | // ) : (
79 | //
88 | //
83 | // {item.title}
84 | //
85 | // ),
86 | // )}
87 | //
8 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/shows-carousel.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import { useModalStore } from '@/stores/modal';
5 | import { MediaType, type Show } from '@/types';
6 |
7 | import { cn, getNameFromShow, getSlug } from '@/lib/utils';
8 | import { Icons } from '@/components/icons';
9 | import { Button } from '@/components/ui/button';
10 | import { usePathname } from 'next/navigation';
11 |
12 | interface ShowsCarouselProps {
13 | title: string;
14 | shows: Show[];
15 | }
16 |
17 | const ShowsCarousel = ({ title, shows }: ShowsCarouselProps) => {
18 | const pathname = usePathname();
19 |
20 | const showsRef = React.useRef
56 |
86 | )}
87 | 57 | {title ?? '-'} 58 |
59 |
60 |
70 |
85 |
73 | {shows.map((show) => (
74 |
77 |
84 | 
{
141 | const name = getNameFromShow(show);
142 | const path: string =
143 | show.media_type === MediaType.TV ? 'tv-shows' : 'movies';
144 | window.history.pushState(
145 | null,
146 | '',
147 | `${path}/${getSlug(show.id, name)}`,
148 | );
149 | useModalStore.setState({
150 | show: show,
151 | open: true,
152 | play: true,
153 | });
154 | }}
155 | onError={imageOnErrorHandler}
156 | />
157 |
65 | //
67 | // );
68 | // }
69 |
70 | if (searchStore.query.length > 0) {
71 | return
27 | {query && searchStore.loading ? (
28 |
54 |
31 |
42 | ) : (
43 |
32 |
41 | {`Your search for "${query}" did not have any matches.`}
33 |Suggestions:
34 |-
35 |
- Try different keywords 36 |
- Looking for a movie or TV show? 37 |
- Try using a movie, TV show title, an actor or director 38 |
- Try a genre, like comedy, romance, sports, or drama 39 |
48 | {shows.map((show: Show) => (
49 |
52 | )}
53 |
29 |
58 | ) : (
59 |
38 | >
39 | {Array.from({ length: count }, (_, i) => (
40 |
41 | {/* */}
42 |
43 | {/* 
53 |
54 |
55 | ))}
56 |
57 |
53 |
6 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
5 | import { type ThemeProviderProps } from "next-themes/dist/types";
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return xs
7 |
8 | sm
9 |
10 | md
11 | lg
12 | xl
13 | 2xl
14 | {children}
56 |
87 |
96 | ));
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName;
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
39 |
47 |
48 | );
49 | }
50 |
51 | export default EmbedPlayer;
52 |
--------------------------------------------------------------------------------
/src/configs/site.ts:
--------------------------------------------------------------------------------
1 | // import type { FooterItem, MainNavItem } from "@/types"
2 | //
3 | // import { productCategories } from "@/config/products"
4 | // import { slugify } from "@/lib/utils"
5 |
6 | import { Icons } from '@/components/icons';
7 | import { env } from '@/env.mjs';
8 |
9 | export type SiteConfig = typeof siteConfig;
10 |
11 | export const siteConfig = {
12 | name: env.NEXT_PUBLIC_SITE_NAME,
13 | author: env.NEXT_PUBLIC_SITE_NAME,
14 | slogan: 'Watch TV Shows & Movies Online.',
15 | description:
16 | 'Watch movies & TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.',
17 | keywords: [
18 | 'watch movies',
19 | 'movies online',
20 | 'watch TV',
21 | 'TV online',
22 | 'TV shows online',
23 | 'watch TV shows',
24 | 'stream movies',
25 | 'stream tv',
26 | 'instant streaming',
27 | 'watch online',
28 | 'movies',
29 | 'watch TV online',
30 | 'no download',
31 | 'full length movies',
32 | env.NEXT_PUBLIC_SITE_NAME,
33 | ],
34 | url: env.NEXT_PUBLIC_APP_URL,
35 | ogImage: `${env.NEXT_PUBLIC_APP_URL}/images/hero.jpg`,
36 | links: {
37 | twitter: `${env.NEXT_PUBLIC_TWITTER}`,
38 | github: 'https://github.com/dragonpilee/cinegeek-beta',
39 | githubAccount: '',
40 | },
41 | socialLinks: [
42 | {
43 | title: 'Facebook',
44 | href: `${env.NEXT_PUBLIC_FACEBOOK}`,
45 | icon: Icons.facebook,
46 | },
47 | {
48 | title: 'Instagram',
49 | href: `${env.NEXT_PUBLIC_INSTAGRAM}`,
50 | icon: Icons.instagram,
51 | },
52 | {
53 | title: 'Twitter',
54 | href: `${env.NEXT_PUBLIC_TWITTER}`,
55 | icon: Icons.twitter,
56 | },
57 | {
58 | title: 'Youtube',
59 | href: `${env.NEXT_PUBLIC_YOUTUBE}`,
60 | icon: Icons.youtube,
61 | },
62 | ],
63 | footerItems: [
64 | //{ title: 'Audio Description', href: '/' },
65 | //{ title: 'Help Center', href: '/' },
66 | //{ title: 'Gift Cards', href: '/' },
67 | //{ title: 'Media Center', href: '/' },
68 | //{ title: 'Investor Relations', href: '/' },
69 | //{ title: 'Jobs', href: '/' },
70 | //{ title: 'Terms of Use', href: '/terms-of-use' },
71 | //{ title: 'Privacy', href: '/' },
72 | //{ title: 'Legal Notices', href: '/' },
73 | //{ title: 'Cookie Preferences', href: '/' },
74 | //{ title: 'Corporate Information', href: '/' },
75 | //{ title: 'Contact Us', href: '/' },
76 | ],
77 | mainNav: [
78 | {
79 | title: 'Home',
80 | href: '/home',
81 | // icon: Icons.play,
82 | },
83 | {
84 | title: 'TV Shows',
85 | href: '/tv-shows',
86 | // icon: Icons.tvShow,
87 | },
88 | {
89 | title: 'Movies',
90 | href: '/movies',
91 | // icon: Icons.movie,
92 | },
93 | {
94 | title: 'New & Popular',
95 | href: '/new-and-popular',
96 | // icon: Icons.trendingUp,
97 | },
98 | // {
99 | // title: "My List",
100 | // href: "/my-list",
101 | // // icon: Icons.list,
102 | // },
103 | {
104 | title: 'Notifications',
105 | // onClick: () => alert("🛹 Do a kickflip"),
106 | // icon: Icons.bell,
107 | },
108 | ],
109 | };
110 |
--------------------------------------------------------------------------------
/src/enums/genre.ts:
--------------------------------------------------------------------------------
1 | export enum Genre {
2 | ACTION = 28,
3 | ADVENTURE = 12,
4 | ANIMATION = 16,
5 | COMEDY = 35,
6 | CRIME = 80,
7 | DOCUMENTARY = 99,
8 | DRAMA = 18,
9 | FAMILY = 10751,
10 | FANTASY = 14,
11 | HISTORY = 36,
12 | HORROR = 27,
13 | MUSIC = 10402,
14 | MYSTERY = 9648,
15 | ROMANCE = 10749,
16 | SCIENCE_FICTION = 878,
17 | TV_MOVIE = 10770,
18 | THRILLER = 53,
19 | WAR = 10752,
20 | WESTERN = 37,
21 | ACTION_ADVENTURE = 10759,
22 | KIDS = 10762,
23 | NEWS = 10763,
24 | REALITY = 10764,
25 | SCIFI_FANTASY = 10765,
26 | SOAP = 10766,
27 | TALK = 10767,
28 | WAR_POLITICS = 10768,
29 | }
30 |
--------------------------------------------------------------------------------
/src/enums/request-type.ts:
--------------------------------------------------------------------------------
1 | import { type MediaType, type Show } from '@/types';
2 | import { type Genre } from './genre';
3 |
4 | export enum RequestType {
5 | TRENDING = 'trending',
6 | TOP_RATED = 'top_rated',
7 | NETFLIX = 'netflix',
8 | POPULAR = 'popular',
9 | GENRE = 'genre',
10 | KOREAN = 'korean',
11 | DEFAULT = 'default',
12 | }
13 |
14 | export type TmdbPagingResponse = {
15 | results: Show[];
16 | page: number;
17 | totalPages: number;
18 | totalResults: number;
19 | };
20 |
21 | export type TmdbRequest = {
22 | requestType: RequestType;
23 | mediaType: MediaType;
24 | genre?: Genre;
25 | page?: number;
26 | };
27 |
28 | export type ShowRequest = {
29 | title: string;
30 | req: TmdbRequest;
31 | visible: boolean;
32 | };
33 |
--------------------------------------------------------------------------------
/src/env.mjs:
--------------------------------------------------------------------------------
1 | import { createEnv } from '@t3-oss/env-nextjs';
2 | import { z } from 'zod';
3 |
4 | export const env = createEnv({
5 | /**
6 | * Specify your server-side environment variables schema here. This way you can ensure the app
7 | * isn't built with invalid env vars.
8 | */
9 | server: {
10 | NODE_ENV: z.enum(['development', 'test', 'production']),
11 | },
12 |
13 | /**
14 | * Specify your client-side environment variables schema here. This way you can ensure the app
15 | * isn't built with invalid env vars. To expose them to the client, prefix them with
16 | * `NEXT_PUBLIC_`.
17 | */
18 | client: {
19 | NEXT_PUBLIC_APP_URL: z.string().url(),
20 | NEXT_PUBLIC_TMDB_TOKEN: z.string(),
21 | NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: z.string().optional(),
22 | NEXT_PUBLIC_SITE_NAME: z.string(),
23 | NEXT_PUBLIC_TWITTER: z.string().url().optional(),
24 | NEXT_PUBLIC_FACEBOOK: z.string().url().optional(),
25 | NEXT_PUBLIC_INSTAGRAM: z.string().url().optional(),
26 | NEXT_PUBLIC_YOUTUBE: z.string().url().optional(),
27 | },
28 |
29 | /**
30 | * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
31 | * middlewares) or client-side so we need to destruct manually.
32 | */
33 | runtimeEnv: {
34 | NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
35 | NODE_ENV: process.env.NODE_ENV,
36 | NEXT_PUBLIC_TMDB_TOKEN: process.env.NEXT_PUBLIC_TMDB_TOKEN,
37 | NEXT_PUBLIC_GOOGLE_ANALYTICS_ID:
38 | process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
39 | NEXT_PUBLIC_SITE_NAME: process.env.NEXT_PUBLIC_SITE_NAME,
40 | NEXT_PUBLIC_TWITTER: process.env.NEXT_PUBLIC_TWITTER ?? 'https://x.com',
41 | NEXT_PUBLIC_FACEBOOK:
42 | process.env.NEXT_PUBLIC_FACEBOOK ?? 'https://facebook.com',
43 | NEXT_PUBLIC_INSTAGRAM:
44 | process.env.NEXT_PUBLIC_INSTAGRAM ?? 'https://instagram.com',
45 | NEXT_PUBLIC_YOUTUBE:
46 | process.env.NEXT_PUBLIC_YOUTUBE ?? 'https://youtube.com',
47 | },
48 | /**
49 | * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
50 | * This is especially useful for Docker builds.
51 | */
52 | skipValidation: !!process.env.SKIP_ENV_VALIDATION,
53 | });
54 |
--------------------------------------------------------------------------------
/src/hooks/use-lock-body.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | // @see https://usehooks.com/useLockBodyScroll.
4 | export function useLockBody() {
5 | React.useLayoutEffect((): (() => void) => {
6 | const originalStyle: string = window.getComputedStyle(
7 | document.body,
8 | ).overflow;
9 | document.body.style.overflow = "hidden";
10 | return () => (document.body.style.overflow = originalStyle);
11 | }, []);
12 | }
13 |
--------------------------------------------------------------------------------
/src/hooks/use-mounted.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function useMounted() {
4 | const [mounted, setMounted] = React.useState(false);
5 |
6 | React.useEffect(() => {
7 | setMounted(true);
8 |
9 | return () => setMounted(false);
10 | }, []);
11 |
12 | return mounted;
13 | }
14 |
--------------------------------------------------------------------------------
/src/hooks/use-on-click-outside.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function useOnClickOutside