├── .gitignore ├── README.md ├── package.json ├── public ├── _redirects ├── android-icon-144x144.png ├── android-icon-192x192.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── apple-icon-precomposed.png ├── apple-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico ├── index.html ├── manifest.json ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png └── ms-icon-70x70.png ├── src ├── bgimg.png ├── components │ ├── Cast.js │ ├── CastArray.js │ ├── Cover.js │ ├── Header.js │ ├── Homepage.js │ ├── Movie.js │ ├── MovieArray.js │ ├── MoviePage.js │ ├── Popular.js │ └── SearchPage.js ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── icons.css ├── index.css ├── index.js ├── index.styl └── tmdb.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | .idea/ 4 | build 5 | /src/assets/ 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # zuu-movies 2 | **A React Application for interacting with the TMDb API** 3 | 4 | 5 | https://zuu.voscra.com/ 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zuu", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "jeet": "^7.1.0", 7 | "react-scripts": "0.8.4" 8 | }, 9 | "dependencies": { 10 | "boron": "^0.2.3", 11 | "history": "^4.5.0", 12 | "lodash": "^4.17.4", 13 | "react": "^15.4.1", 14 | "react-document-title": "^2.0.2", 15 | "react-dom": "^15.4.1", 16 | "react-router": "^3.0.0", 17 | "react-scrollable-anchor": "^0.4.1", 18 | "react-star-rating-component": "^1.2.2" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test --env=jsdom", 24 | "eject": "react-scripts eject" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-144x144.png -------------------------------------------------------------------------------- /public/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-192x192.png -------------------------------------------------------------------------------- /public/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-36x36.png -------------------------------------------------------------------------------- /public/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-48x48.png -------------------------------------------------------------------------------- /public/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-72x72.png -------------------------------------------------------------------------------- /public/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/android-icon-96x96.png -------------------------------------------------------------------------------- /public/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon-precomposed.png -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/apple-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ZUU | Watch Anything, Anywhere 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /public/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/public/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/bgimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/src/bgimg.png -------------------------------------------------------------------------------- /src/components/Cast.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Cast = props => { 4 | 5 | return ( 6 |
  • 7 | no 8 | 9 |
    10 |

    {props.cast.name}

    11 |

    {props.cast.character}

    12 |
    13 |
    • 14 | ) 15 | } 16 | 17 | export default Cast -------------------------------------------------------------------------------- /src/components/CastArray.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Cast from './Cast' 3 | 4 | const CastArray = props => { 5 | const cast = props.data.map( cast => ) 6 | 7 | return ( 8 | 12 | ) 13 | } 14 | 15 | export default CastArray -------------------------------------------------------------------------------- /src/components/Cover.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Header from './Header' 3 | 4 | const Cover = () => { 5 | return ( 6 |
    7 |
    8 |

    MYP 5 PERSONAL PROJECT BY KHALID

    9 | 10 | 11 | Created with Sketch.'}} /> 12 | 13 | 14 |
    15 | ) 16 | } 17 | 18 | export default Cover; 19 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Modal from 'boron/DropModal' 3 | import {browserHistory, Link} from "react-router"; 4 | 5 | class Header extends React.Component { 6 | constructor(props){ 7 | super(props) 8 | 9 | this.state = {term: ''}; 10 | } 11 | 12 | componentDidUpdate() { 13 | this.props.onSearchTermChange(this.state.term) 14 | } 15 | 16 | showModal() { 17 | this.refs.modal.show(); 18 | } 19 | 20 | hideModal(e) { 21 | e.preventDefault() 22 | this.refs.modal.hide(); 23 | } 24 | 25 | 26 | render() { 27 | let topright; 28 | 29 | 30 | if (this.props.back) { 31 | topright =
  • 32 |

    back

    33 |
    • 34 | } else if(this.props.search){ 35 | 36 | topright = e.target.placeholder = ""} 38 | value={this.state.term} 39 | onChange={e => { 40 | this.setState({term: e.target.value}) 41 | }} /> 42 | 43 | } else { 44 | topright =
  • 45 | } 46 | 47 | return ( 48 |
    49 | 55 | 56 |
    57 |

    Register Now

    58 | 59 | 60 | 61 | 62 |
    63 | 64 |
    65 |
    66 |     67 |
    68 | ) 69 | } 70 | } 71 | 72 | export default Header; 73 | -------------------------------------------------------------------------------- /src/components/Homepage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import tmdb from '../tmdb' 3 | import DocumentTitle from 'react-document-title' 4 | import ScrollableAnchor from 'react-scrollable-anchor' 5 | import { configureAnchors } from 'react-scrollable-anchor' 6 | 7 | 8 | import Cover from './Cover' 9 | import MovieArray from './MovieArray' 10 | import Popular from './Popular' 11 | 12 | 13 | 14 | class Homepage extends React.Component { 15 | constructor(props) { 16 | super(props) 17 | 18 | this.state = {trending: [], recommended: [], listpopular: [], popular: {}} 19 | 20 | tmdb.call("/movie/popular", {}, data => { 21 | data.results.splice(7) 22 | this.setState({trending: data.results.splice(1)}) 23 | }) 24 | 25 | tmdb.call("/discover/movie", {"with_genres": "878"}, data => { 26 | data.results.splice(10) 27 | this.setState({recommended: data.results.splice(4)}) 28 | }) 29 | 30 | tmdb.call("/discover/movie", {"with_genres": "12"}, data => { 31 | data.results.splice(6) 32 | this.setState({listpopular: data.results, popular: data.results[5] }) 33 | }) 34 | } 35 | 36 | componentDidMount() { 37 | let num = 1 38 | 39 | this.timerID = setInterval(() => { 40 | if (num === 5) { 41 | num = 0 42 | } else { 43 | num++ 44 | } 45 | this.setState({popular: this.state.listpopular[num] 46 | })}, 4000); 47 | } 48 | 49 | componentWillUnmount() { 50 | clearInterval(this.timerID); 51 | } 52 | 53 | render() { 54 | configureAnchors({offset: -60, scrollDuration: 800}) 55 | return ( 56 | 57 |
    58 | 59 |
    60 | 61 |
    62 | 63 | {this.state.listpopular[0] && } 64 | 65 | 66 | 67 | 68 |
    69 |     70 | 71 | 72 | ); 73 | } 74 | } 75 | 76 | export default Homepage -------------------------------------------------------------------------------- /src/components/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router' 3 | 4 | const Movie = props => { 5 | let pagelink = "/movie/" + props.movie.id 6 | 7 | return ( 8 |
  • 9 | 10 | no 11 | no 12 | 13 |
    14 |
    {props.movie.title}
    15 |
    16 | 17 |
    • 18 | ) 19 | } 20 | 21 | export default Movie -------------------------------------------------------------------------------- /src/components/MovieArray.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Movie from './Movie' 3 | 4 | const MovieArray = props => { 5 | const movies = props.data.map( movie => ) 6 | 7 | let isSearch; 8 | 9 | if (props.search) { 10 | isSearch = "search-list"; 11 | } else { 12 | isSearch = "movie-list"; 13 | } 14 | 15 | 16 | return ( 17 |
    18 |

    {props.name}

    19 | 20 |
      21 | {movies} 22 |
    23 | 24 |
    25 | 26 | ) 27 | } 28 | 29 | export default MovieArray -------------------------------------------------------------------------------- /src/components/MoviePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import tmdb from '../tmdb'; 3 | import DocumentTitle from 'react-document-title'; 4 | import StarRatingComponent from 'react-star-rating-component'; 5 | import Modal from 'boron/DropModal' 6 | import { browserHistory } from 'react-router' 7 | 8 | import Header from './Header'; 9 | import CastArray from './CastArray'; 10 | import MovieArray from './MovieArray'; 11 | 12 | 13 | class MoviePage extends React.Component { 14 | constructor(props) { 15 | super(props) 16 | 17 | this.state = {movie : {}, id: "", cast: [], similar: []} 18 | 19 | } 20 | 21 | 22 | componentWillMount(){ 23 | if(!this.props.params.id) { 24 | browserHistory.push(`/search`) 25 | } 26 | this.getData(this.props.params.id); 27 | } 28 | 29 | componentWillReceiveProps(nextProps) { 30 | if(!nextProps.params.id) { 31 | browserHistory.push(`/search`) 32 | } 33 | this.setState({movie : {}, id: "", cast: [], similar: []}) 34 | this.getData(nextProps.params.id) 35 | } 36 | 37 | getData(id) { 38 | tmdb.call("/movie/" + id, {"append_to_response" : "videos,recommendations,credits"}, data => { 39 | data.recommendations.results.splice(6) 40 | data.credits.cast.splice(6) 41 | 42 | this.setState({ 43 | movie: data, 44 | id : data.imdb_id, 45 | cast: data.credits.cast, 46 | similar: data.recommendations.results}) 47 | }, data => console.log(data)) 48 | } 49 | 50 | showModal() { 51 | this.refs.modal.show(); 52 | } 53 | 54 | 55 | duration(a) { 56 | let hours = Math.trunc(a/60); 57 | let minutes = a % 60; 58 | return hours +"h "+ minutes+"m"; 59 | } 60 | 61 | 62 | render() { 63 | const movie = this.state.movie; 64 | const title = `${(movie.title) || "Movies"} | ZUU`; 65 | 66 | 67 | return ( 68 | 69 | 70 |
    71 |
    72 |
    73 | no 74 |

    {movie.title || "Loading..."}

    75 |
    76 |
    77 | no 78 |
    79 |

    Play Now

    80 | 81 |
    82 | 83 |
    84 | 85 |
    86 |     87 |
    88 |
      89 |
    • 90 |
    • {movie.release_date}
      • 91 |
    • 92 |
    • {this.duration(movie.runtime || 0)}
      • 93 |
    • ✮ } 98 | editing={false} 99 | starCount={5} 100 | value={Math.round((movie.vote_average || 0)/2)}/>
      • 101 |
    • {(movie.vote_average || 0).toFixed(1)} IMDB
      • 102 |
    103 |
    104 |

    Overview

    105 |

    {movie.overview}

    106 |
    107 | {this.state.cast[0] && } 108 | {this.state.similar[0] &&

    SIMILAR

    } 109 |
    110 |     111 | ) 112 | } 113 | 114 | } 115 | export default MoviePage; 116 | 117 | 118 | -------------------------------------------------------------------------------- /src/components/Popular.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router' 3 | import StarRatingComponent from 'react-star-rating-component'; 4 | 5 | 6 | const Popular = props => { 7 | let pagelink = "/movie/" + props.data.id 8 | return ( 9 |
    10 |
    11 |

    Popular Movies

    12 |
    13 | 14 | no 15 | 16 |
    17 | no 18 | 19 |
    20 |

    {props.data.title}

    ({props.data.release_date.split("-")[0]}) 21 |

    {props.data.overview}

    22 |
    23 |

    {Math.random() < 0.5 ? 1 : 2}h {Math.floor(Math.random() * 56) + 10 }m

    24 | ✮ } 30 | editing={false} 31 | starCount={5} 32 | value={Math.round((props.data.vote_average)/2)} 33 | /> 34 |

    {props.data.vote_average.toFixed(1)} IMDB

    35 |
    36 | 37 |
    38 | 39 |
    40 | 41 |
    42 | 43 | ) 44 | } 45 | 46 | export default Popular -------------------------------------------------------------------------------- /src/components/SearchPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import tmdb from '../tmdb'; 3 | import _ from 'lodash' 4 | import DocumentTitle from 'react-document-title'; 5 | 6 | import Header from './Header' 7 | import MovieArray from './MovieArray' 8 | 9 | class SearchPage extends React.Component { 10 | constructor(props) { 11 | super(props) 12 | this.state = {searchresults: []} 13 | this.getData("The") 14 | } 15 | 16 | getData(term) { 17 | let query = term; 18 | 19 | if (!query) { 20 | query = "The" 21 | } 22 | 23 | tmdb.call("/search/movie", {"query": query, "include_adult": true}, data => { 24 | let results = []; 25 | 26 | data.results.map(movie => { // eslint-disable-line 27 | if(movie.poster_path) { 28 | results.push(movie) 29 | } 30 | }) 31 | 32 | this.setState({searchresults: results}) 33 | }, data => console.log(data)) 34 | } 35 | 36 | 37 | render() { 38 | const videoSearch = _.debounce(term => this.getData(term), 300) 39 | return ( 40 | 41 |
    42 | 43 |
    44 |
    45 |
    46 | 47 | {this.state.searchresults[0] && } 48 | 49 |
    50 |     51 | 52 | ) 53 | } 54 | } 55 | 56 | export default SearchPage -------------------------------------------------------------------------------- /src/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/src/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/src/fonts/icomoon.ttf -------------------------------------------------------------------------------- /src/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tawohid/zuu-movies/5bd26f2ff8e10744ed2e9777db7c1db426e92ed7/src/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('./fonts/icomoon.eot?54t0a9'); 4 | src: url('./fonts/icomoon.eot?54t0a9#iefix') format('embedded-opentype'), 5 | url('./fonts/icomoon.ttf?54t0a9') format('truetype'), 6 | url('./fonts/icomoon.woff?54t0a9') format('woff'), 7 | url('./fonts/icomoon.svg?54t0a9#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-logo:before { 28 | content: "\e900"; 29 | } 30 | .icon-combined-shape:before { 31 | content: "\e913"; 32 | } 33 | .icon-duration:before { 34 | content: "\e94e"; 35 | } 36 | .icon-search:before { 37 | content: "\e986"; 38 | } 39 | .icon-fire:before { 40 | content: "\e9a9"; 41 | } 42 | .icon-play:before { 43 | content: "\ea1c"; 44 | } 45 | .icon-date:before { 46 | content: "\ea70"; 47 | } 48 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("./icons.css"); 2 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); 3 | @import url("https://necolas.github.io/normalize.css/5.0.0/normalize.css"); 4 | body { 5 | margin: 0; 6 | padding: 0; 7 | font-family: Montserrat, sans-serif; 8 | font-weight: 800; 9 | text-transform: uppercase; 10 | color: #193240; 11 | } 12 | a { 13 | color: inherit; 14 | text-decoration: inherit; 15 | } 16 | .active { 17 | color: #26d2cc !important; 18 | } 19 | .signup { 20 | cursor: pointer; 21 | } 22 | .cover { 23 | position: relative; 24 | background: url("./bgimg.png") no-repeat center center; 25 | background-size: cover; 26 | height: 100vh; 27 | width: 100%; 28 | transition: height 999999s; 29 | } 30 | .cover h1 { 31 | font-size: 4vw; 32 | color: #26d2cc; 33 | text-shadow: 0 2px 11px #000; 34 | text-align: center; 35 | line-height: 60vh; 36 | } 37 | .cover .bounce { 38 | animation: bounce 2s infinite; 39 | } 40 | .cover .arrow { 41 | width: auto; 42 | max-width: 1440px; 43 | float: none; 44 | display: block; 45 | margin-right: auto; 46 | margin-left: auto; 47 | padding-left: 0; 48 | padding-right: 0; 49 | } 50 | .cover .arrow::after { 51 | content: ''; 52 | display: table; 53 | clear: both; 54 | } 55 | @-moz-keyframes bounce { 56 | 0%, 20%, 50%, 80%, 100% { 57 | transform: translateY(0); 58 | } 59 | 40% { 60 | transform: translateY(-30px); 61 | } 62 | 60% { 63 | transform: translateY(-15px); 64 | } 65 | } 66 | @-webkit-keyframes bounce { 67 | 0%, 20%, 50%, 80%, 100% { 68 | transform: translateY(0); 69 | } 70 | 40% { 71 | transform: translateY(-30px); 72 | } 73 | 60% { 74 | transform: translateY(-15px); 75 | } 76 | } 77 | @-o-keyframes bounce { 78 | 0%, 20%, 50%, 80%, 100% { 79 | transform: translateY(0); 80 | } 81 | 40% { 82 | transform: translateY(-30px); 83 | } 84 | 60% { 85 | transform: translateY(-15px); 86 | } 87 | } 88 | @keyframes bounce { 89 | 0%, 20%, 50%, 80%, 100% { 90 | transform: translateY(0); 91 | } 92 | 40% { 93 | transform: translateY(-30px); 94 | } 95 | 60% { 96 | transform: translateY(-15px); 97 | } 98 | } 99 | .header { 100 | display: flex; 101 | justify-content: flex-end; 102 | padding: 5vh 6vh; 103 | position: relative; 104 | list-style-type: none; 105 | margin: 0; 106 | } 107 | .header .icon { 108 | font-size: 1.8em; 109 | padding-left: 20px; 110 | color: #fff; 111 | text-shadow: 0 2px 4px rgba(0,0,0,0.35); 112 | } 113 | .header .signup { 114 | align-self: center; 115 | padding-bottom: 5px; 116 | margin-top: -9px; 117 | margin-left: 30px; 118 | font-size: 1.2em; 119 | color: #fff; 120 | text-shadow: 0 2px 4px rgba(0,0,0,0.35); 121 | border-bottom: 3px solid #26d2cc; 122 | box-shadow: 0 8px 13px -6px rgba(0,0,0,0.25); 123 | } 124 | .header .icon-logo { 125 | margin-right: auto; 126 | font-size: 2.5em; 127 | color: #26d2cc; 128 | text-shadow: 0 2px 4px rgba(0,0,0,0.35); 129 | } 130 | h4 { 131 | margin-left: 20px; 132 | margin-bottom: 30px; 133 | } 134 | h6 { 135 | font-size: 0.65em; 136 | text-align: center; 137 | width: 91%; 138 | white-space: nowrap; 139 | overflow: hidden; 140 | text-overflow: ellipsis; 141 | } 142 | .movie-list { 143 | display: flex; 144 | margin: 0; 145 | padding: 0; 146 | justify-content: space-around; 147 | list-style-type: none; 148 | } 149 | .bgimg { 150 | position: absolute; 151 | z-index: -1; 152 | filter: blur(10px); 153 | transform: scale(1.05); 154 | } 155 | .posterimg { 156 | height: 278px; 157 | width: 185px; 158 | } 159 | .movietitle { 160 | position: relative; 161 | display: flex; 162 | align-items: center; 163 | justify-content: center; 164 | height: 40px; 165 | width: 186px; 166 | margin-top: -5px; 167 | z-index: 1; 168 | background: #fff; 169 | box-shadow: 0 -17px 30px 0 rgba(0,0,0,0.52); 170 | } 171 | .popular { 172 | position: relative; 173 | margin-top: 100px; 174 | } 175 | .popular .bgcover { 176 | width: 100%; 177 | } 178 | .popular .heading { 179 | position: absolute; 180 | top: -30px; 181 | left: 40px; 182 | width: 250px; 183 | display: flex; 184 | align-content: center; 185 | justify-content: center; 186 | height: 47px; 187 | background: #fff; 188 | box-shadow: 0 2px 13px 0 rgba(0,0,0,0.5); 189 | } 190 | .popular .pinfo { 191 | background: #fff; 192 | box-shadow: 0 3px 56px 0 rgba(0,0,0,0.24); 193 | text-transform: none; 194 | position: absolute; 195 | transform-style: preserve-3d; 196 | top: 50%; 197 | left: 50%; 198 | transform: translate(-50%, -50%); 199 | width: 44%; 200 | } 201 | .popular .pinfo .details { 202 | float: left; 203 | clear: none; 204 | text-align: inherit; 205 | width: 65.66666666666666%; 206 | margin-left: 0%; 207 | margin-right: 3%; 208 | } 209 | .popular .pinfo .details::after { 210 | content: ''; 211 | display: table; 212 | clear: both; 213 | } 214 | .popular .pinfo .details:last-child { 215 | margin-right: 0%; 216 | } 217 | .popular .pinfo .poster { 218 | float: left; 219 | clear: none; 220 | text-align: inherit; 221 | width: 31.33333333333333%; 222 | margin-left: 0%; 223 | margin-right: 3%; 224 | } 225 | .popular .pinfo .poster::after { 226 | content: ''; 227 | display: table; 228 | clear: both; 229 | } 230 | .popular .pinfo .poster:last-child { 231 | margin-right: 0%; 232 | } 233 | .popular .pinfo h2 { 234 | margin-top: 12%; 235 | margin-bottom: 5%; 236 | font-size: 1.4em; 237 | display: inline-block; 238 | text-transform: uppercase; 239 | } 240 | .popular .pinfo .date { 241 | font-size: 1.4em; 242 | color: #26d2cc; 243 | margin-left: 5px; 244 | } 245 | .popular .pinfo .overview { 246 | margin: 0; 247 | font-weight: 100; 248 | font-size: 12px; 249 | line-height: 15px; 250 | width: 70%; 251 | display: -webkit-box; 252 | overflow: hidden; 253 | text-overflow: ellipsis; 254 | -webkit-line-clamp: 5; 255 | -webkit-box-orient: vertical; 256 | } 257 | .popular .pinfo .info { 258 | position: absolute; 259 | bottom: 15px; 260 | } 261 | .popular .pinfo .info .duration { 262 | display: inline-block; 263 | font-size: 9px; 264 | margin-left: 5px; 265 | } 266 | .popular .pinfo .info .stars { 267 | display: inline; 268 | margin-left: 40px; 269 | margin-bottom: -5px; 270 | } 271 | .popular .pinfo .info .score { 272 | margin-left: 10px; 273 | display: inline-block; 274 | font-size: 9px; 275 | } 276 | .recommended { 277 | margin-bottom: 50px; 278 | margin-top: 30px; 279 | } 280 | .backdropbg { 281 | height: 80vh; 282 | margin-top: -18vh; 283 | overflow: hidden; 284 | background-image: linear-gradient(1deg, rgba(21,43,55,0.87) 0%, rgba(0,0,0,0) 67%, rgba(21,43,55,0.87) 100%); 285 | } 286 | .backdrop { 287 | position: relative; 288 | width: 100%; 289 | height: 100%; 290 | object-fit: cover; 291 | overflow: hidden; 292 | z-index: -3; 293 | } 294 | .moviename { 295 | position: absolute; 296 | bottom: 23vh; 297 | left: 320px; 298 | z-index: 2; 299 | font-size: 61px; 300 | color: #fff; 301 | text-shadow: 0 4px 10px rgba(0,0,0,0.62); 302 | } 303 | .playposter { 304 | margin-left: 100px; 305 | margin-top: -145px; 306 | } 307 | .playposter .movieposter { 308 | width: 185px; 309 | height: 277px; 310 | box-shadow: 0 2px 14px 0 rgba(0,0,0,0.5); 311 | } 312 | .playposter .playbutton { 313 | position: relative; 314 | cursor: pointer; 315 | display: flex; 316 | justify-content: center; 317 | align-content: center; 318 | align-items: center; 319 | color: #fff; 320 | background: #26d2cc; 321 | box-shadow: 0 0 7px 0 rgba(0,0,0,0.28); 322 | border-radius: 100px; 323 | margin-left: 1px; 324 | margin-top: 17px; 325 | width: 184px; 326 | height: 35px; 327 | } 328 | .playposter .playbutton .playnow { 329 | font-size: 1em; 330 | margin-bottom: 12px; 331 | } 332 | .playposter .playbutton .icon-play { 333 | font-size: 0.9em; 334 | margin-left: 10px; 335 | margin-top: 5px; 336 | } 337 | .pagedetails { 338 | display: flex; 339 | justify-content: flex-start; 340 | position: relative; 341 | list-style-type: none; 342 | margin-top: -170px; 343 | margin-bottom: 30px; 344 | margin-left: 291px; 345 | text-shadow: 0 1px 1px rgba(0,0,0,0.35); 346 | } 347 | .pagedetails .dicon { 348 | color: #26d2cc; 349 | margin-right: 6px; 350 | } 351 | .pagedetails .releasedate { 352 | padding-right: 30px; 353 | } 354 | .pagedetails .startmdb { 355 | margin-left: auto; 356 | } 357 | .pagedetails .score { 358 | padding-left: 10px; 359 | padding-right: 70px; 360 | } 361 | .movieoverview { 362 | background: #fff; 363 | box-shadow: 0 3px 21px 0 rgba(0,0,0,0.2); 364 | margin-left: 320px; 365 | margin-bottom: 70px; 366 | width: 45%; 367 | padding: 0.5% 2%; 368 | } 369 | .movieoverview .overviewtitle { 370 | font-size: 1.3em; 371 | margin-bottom: 30px; 372 | } 373 | .movieoverview .overviewtext { 374 | text-transform: none; 375 | font-size: 1.1em; 376 | font-weight: 100; 377 | line-height: 30px; 378 | padding-bottom: 28px; 379 | } 380 | .cast-list { 381 | position: relative; 382 | display: flex; 383 | justify-content: space-around; 384 | list-style-type: none; 385 | width: 90%; 386 | margin: 70px auto; 387 | padding-top: 35px; 388 | padding-bottom: 15px; 389 | box-shadow: 0 2px 28px 0 rgba(0,0,0,0.16); 390 | } 391 | .cast-list .castheading { 392 | position: absolute; 393 | font-size: 1.6em; 394 | top: -42px; 395 | left: 25px; 396 | } 397 | .cast-list .cast-item { 398 | width: 60%; 399 | text-align: center; 400 | text-transform: none; 401 | } 402 | .cast-list .cast-item .avatar { 403 | box-shadow: 0 3px 13px 2px rgba(0,0,0,0.48); 404 | border-radius: 100px; 405 | } 406 | .cast-list .cast-item .castname { 407 | white-space: nowrap; 408 | margin-top: 28px; 409 | margin-bottom: 0; 410 | line-height: 0px; 411 | } 412 | .cast-list .cast-item .castcharacter { 413 | color: #26d2cc; 414 | font-size: 0.9em; 415 | } 416 | .moviecontainer { 417 | position: relative; 418 | width: 92.9%; 419 | padding: 36px 0; 420 | margin: 70px auto; 421 | box-shadow: 0 2px 28px 0 rgba(0,0,0,0.16); 422 | } 423 | .moviecontainer .similarheading { 424 | position: absolute; 425 | font-size: 1.6em; 426 | top: -40px; 427 | left: 25px; 428 | } 429 | .moviecontainer .movie-item:nth-child(6) { 430 | display: none; 431 | } 432 | .back { 433 | margin-top: -15px; 434 | cursor: pointer; 435 | display: flex; 436 | justify-content: center; 437 | align-content: center; 438 | align-items: center; 439 | margin-right: auto; 440 | font-size: 1.2em; 441 | color: #26d2cc; 442 | text-shadow: 0 2px 4px rgba(0,0,0,0.35); 443 | } 444 | .back .icon-play { 445 | transform: scale(-1, 1); 446 | padding-left: 10px; 447 | margin-top: 3px; 448 | } 449 | .searchinput { 450 | font-family: Montserrat; 451 | margin-right: auto; 452 | color: #fff; 453 | padding: 10px 10px 10px 5px; 454 | display: block; 455 | border: none; 456 | width: 30%; 457 | border-bottom: 2px solid #26d2cc; 458 | background-color: transparent; 459 | outline: none; 460 | } 461 | .searchinput::placeholder { 462 | color: #fff; 463 | } 464 | .searchcover { 465 | position: relative; 466 | background: url("./bgimg.png"); 467 | background-size: cover; 468 | } 469 | .search-list { 470 | display: flex; 471 | width: 80%; 472 | margin: 0 auto; 473 | justify-content: flex-start; 474 | flex-wrap: wrap; 475 | list-style-type: none; 476 | } 477 | .search-list .movie-item { 478 | margin-top: 10px; 479 | margin-bottom: 30px; 480 | margin-left: 30px; 481 | } 482 | form { 483 | width: 100%; 484 | height: 550px; 485 | display: flex; 486 | flex-direction: column; 487 | align-content: space-around; 488 | align-items: center; 489 | } 490 | form h2 { 491 | margin-bottom: 60px; 492 | margin-top: 70px; 493 | } 494 | form input { 495 | font-family: Montserrat; 496 | color: #193240; 497 | padding: 10px 10px 10px 5px; 498 | border: none; 499 | border-bottom: 2px solid #26d2cc; 500 | background-color: transparent; 501 | outline: none; 502 | margin-bottom: 50px; 503 | } 504 | form input::placeholder { 505 | color: #26d2cc; 506 | } 507 | .button { 508 | font-family: Montserrat; 509 | outline: none; 510 | border: none; 511 | position: relative; 512 | cursor: pointer; 513 | display: flex; 514 | justify-content: center; 515 | align-content: center; 516 | align-items: center; 517 | color: #fff; 518 | background: #26d2cc; 519 | box-shadow: 0 0 7px 0 rgba(0,0,0,0.28); 520 | border-radius: 100px; 521 | margin-left: 1px; 522 | margin-top: 17px; 523 | width: 184px; 524 | height: 35px; 525 | } 526 | .fullscreenbutton { 527 | z-index: 1000; 528 | position: fixed; 529 | opacity: 0.7; 530 | transform: scale(0.8); 531 | right: -18px; 532 | bottom: 4px; 533 | } 534 | @media screen and (max-width: 1150px) { 535 | .pinfo { 536 | width: 55% !important; 537 | } 538 | .movie-list .movie-item:nth-child(6) { 539 | display: none; 540 | } 541 | } 542 | @media screen and (max-width: 950px) { 543 | h4 { 544 | margin-left: 10%; 545 | } 546 | .pinfo { 547 | width: 60% !important; 548 | } 549 | .movie-list { 550 | justify-content: space-between; 551 | flex-wrap: wrap; 552 | width: 80%; 553 | margin: 0 auto; 554 | } 555 | .movie-list .movie-item { 556 | margin-bottom: 40px; 557 | } 558 | .movie-list .movie-item:nth-child(3n-1) { 559 | margin: 0px 30px; 560 | } 561 | .movie-list .movie-item:nth-child(6) { 562 | display: initial; 563 | } 564 | } 565 | @media screen and (max-width: 770px) { 566 | .arrow { 567 | width: 50px !important; 568 | } 569 | .pinfo { 570 | width: 80% !important; 571 | } 572 | .movie-list { 573 | justify-content: space-between; 574 | } 575 | .movie-list .movie-item:nth-child(3n-1) { 576 | margin: 0px 0px; 577 | } 578 | } 579 | @media screen and (max-width: 620px) { 580 | .heading { 581 | height: 40px !important; 582 | width: 200px !important; 583 | font-size: 0.7em; 584 | } 585 | .pinfo { 586 | width: 90% !important; 587 | } 588 | .pinfo .overview { 589 | width: 90% !important; 590 | } 591 | .pinfo .date { 592 | display: none; 593 | } 594 | } 595 | @media screen and (max-width: 464px) { 596 | .arrow { 597 | width: 37px !important; 598 | } 599 | h4 { 600 | margin-bottom: -10px !important; 601 | } 602 | .signup { 603 | display: none; 604 | } 605 | .movie-list { 606 | width: 97%; 607 | justify-content: center; 608 | } 609 | .movie-list .movie-item { 610 | transform: scale(0.8); 611 | margin-bottom: 20px; 612 | } 613 | .movie-list .movie-item:nth-child(2) { 614 | margin-top: -1%; 615 | } 616 | .pinfo { 617 | width: 100% !important; 618 | } 619 | .pinfo .overview { 620 | width: 90% !important; 621 | margin-bottom: 10px !important; 622 | font-size: 10px !important; 623 | } 624 | .pinfo h2 { 625 | font-size: 1em !important; 626 | } 627 | .info { 628 | bottom: 5px !important; 629 | } 630 | } 631 | @media screen and (max-width: 383px) { 632 | .arrow { 633 | width: 33px !important; 634 | } 635 | .heading { 636 | display: none !important; 637 | } 638 | .movie-list { 639 | justify-content: space-between; 640 | } 641 | .movie-list .movie-item { 642 | transform: scale(0.7); 643 | width: 50%; 644 | } 645 | } 646 | @media screen and (max-width: 350px) { 647 | .overview { 648 | -webkit-line-clamp: 3 !important; 649 | } 650 | .stars { 651 | margin-left: 10px !important; 652 | } 653 | } 654 | @media screen and (max-width: 1000px) { 655 | .movieoverview { 656 | width: 60%; 657 | } 658 | .cast-item { 659 | transform: scale(0.8); 660 | margin-left: -30px; 661 | } 662 | .moviecontainer { 663 | padding: 10px 10px; 664 | } 665 | .moviecontainer .movie-item { 666 | transform: scale(0.87); 667 | } 668 | } 669 | @media screen and (max-width: 900px) { 670 | .moviename { 671 | bottom: 300px; 672 | font-size: 55px; 673 | } 674 | .playposter { 675 | margin-top: -450px; 676 | margin-left: 100px; 677 | } 678 | .pagedetails { 679 | color: #fff; 680 | margin-top: -30px; 681 | margin-bottom: -30px; 682 | font-size: 0.92em; 683 | } 684 | .pagedetails .startmdb { 685 | margin-left: 30px; 686 | } 687 | .movieoverview { 688 | margin: 0 auto; 689 | margin-top: 190px; 690 | width: 90%; 691 | } 692 | .movieoverview .overviewtitle { 693 | padding-left: 10px; 694 | } 695 | .movieoverview .overviewtext { 696 | padding-left: 10px; 697 | padding-right: 10px; 698 | } 699 | .moviecontainer .movie-list { 700 | justify-content: space-between; 701 | } 702 | .moviecontainer .movie-item:nth-child(3n-1) { 703 | margin: 0px 0px; 704 | } 705 | } 706 | @media screen and (max-width: 800px) { 707 | .moviename { 708 | display: none; 709 | } 710 | .playposter { 711 | width: 185px; 712 | margin: 0 auto; 713 | margin-top: -60vh; 714 | } 715 | .playposter .playbutton { 716 | margin-top: -15px; 717 | width: 200px; 718 | margin-left: -5px; 719 | } 720 | .pagedetails { 721 | margin: 0; 722 | margin-bottom: -150px; 723 | margin-top: 18px; 724 | margin-left: 50px; 725 | justify-content: center; 726 | } 727 | .cast-list { 728 | flex-wrap: wrap; 729 | } 730 | .cast-list .cast-item { 731 | width: 40% !important; 732 | } 733 | } 734 | @media screen and (max-width: 554px) { 735 | .pagedetails { 736 | margin-left: 35px; 737 | font-size: 0.7em; 738 | } 739 | } 740 | @media screen and (max-width: 500px) { 741 | .pagedetails { 742 | margin-left: -30px; 743 | } 744 | .pagedetails .score { 745 | padding-right: 0; 746 | } 747 | .moviecontainer .movie-list { 748 | justify-content: flex-start; 749 | } 750 | .moviecontainer .movie-item { 751 | width: 50%; 752 | } 753 | } 754 | @media screen and (max-width: 400px) { 755 | .playbutton { 756 | display: none !important; 757 | } 758 | .castname { 759 | white-space: wrap; 760 | } 761 | .backdropbg { 762 | height: 100vh; 763 | margin-top: -30vh; 764 | } 765 | .playposter { 766 | transform: scale(0.8); 767 | margin-top: -70vh; 768 | } 769 | .moviecontainer .movie-list { 770 | margin-left: 0px; 771 | } 772 | .moviecontainer .movie-item { 773 | transform: scale(0.7); 774 | } 775 | .cast-item { 776 | transform: scale(0.7); 777 | } 778 | } 779 | @media screen and (max-width: 330px) { 780 | .pagedetails { 781 | visibility: hidden; 782 | } 783 | } 784 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Router, Route, browserHistory } from 'react-router' 4 | import './icons.css' 5 | import './bgimg.png'; 6 | import './index.css'; 7 | 8 | import Homepage from './components/Homepage' 9 | import MoviePage from './components/MoviePage' 10 | import SearchPage from './components/SearchPage' 11 | 12 | ReactDOM.render( 13 | window.scrollTo(0, 0)} history={browserHistory}> 14 | 15 | 16 | 17 | 18 | 19 | , 20 | document.getElementById('root') 21 | ); 22 | -------------------------------------------------------------------------------- /src/index.styl: -------------------------------------------------------------------------------- 1 | @import url('./icons.css') 2 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700') 3 | @import url('https://necolas.github.io/normalize.css/5.0.0/normalize.css') 4 | @import '../node_modules/jeet/styl' 5 | 6 | primary = #26d2cc 7 | secondary = #fff 8 | dark = #193240 9 | 10 | 11 | 12 | body 13 | margin 0 14 | padding 0 15 | font-family Montserrat, sans-serif 16 | font-weight 800 17 | text-transform uppercase 18 | color dark 19 | 20 | a 21 | color: inherit 22 | text-decoration: inherit 23 | 24 | .active 25 | color: primary !important 26 | 27 | // Homepage 28 | .signup 29 | cursor: pointer 30 | 31 | .cover 32 | position: relative 33 | background: url('./bgimg.png') no-repeat center center 34 | background-size: cover 35 | height: 100vh 36 | width: 100% 37 | transition: height 999999s 38 | 39 | h1 40 | font-size: 4vw 41 | color: primary 42 | text-shadow: 0 2px 11px #000; 43 | text-align: center 44 | line-height: 60vh 45 | 46 | 47 | @keyframes bounce { 48 | 0%, 20%, 50%, 80%, 100% { 49 | transform: translateY(0); 50 | } 51 | 40% { 52 | transform: translateY(-30px); 53 | } 54 | 60% { 55 | transform: translateY(-15px); 56 | } 57 | } 58 | 59 | .bounce 60 | animation: bounce 2s infinite 61 | 62 | .arrow 63 | center() 64 | 65 | .header 66 | display: flex 67 | justify-content: flex-end 68 | padding: 5vh 6vh 69 | position: relative 70 | list-style-type: none 71 | margin: 0 72 | 73 | .icon 74 | font-size: 1.8em 75 | padding-left: 20px 76 | color: secondary 77 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) 78 | 79 | .signup 80 | align-self: center 81 | padding-bottom: 5px 82 | margin-top: -9px 83 | margin-left: 30px 84 | font-size: 1.2em 85 | color: secondary 86 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) 87 | border-bottom: 3px solid primary 88 | box-shadow: 0 8px 13px -6px rgba(0, 0, 0, 0.25) 89 | 90 | 91 | .icon-logo 92 | margin-right: auto; 93 | font-size: 2.5em 94 | color: primary 95 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) 96 | 97 | 98 | h4 99 | margin-left: 20px; 100 | margin-bottom: 30px; 101 | 102 | h6 103 | font-size: 0.65em; 104 | text-align: center 105 | width: 91% 106 | white-space: nowrap 107 | overflow:hidden 108 | text-overflow: ellipsis 109 | 110 | 111 | .movie-list 112 | display: flex 113 | margin: 0; 114 | padding: 0; 115 | justify-content: space-around 116 | list-style-type: none 117 | 118 | .bgimg 119 | position: absolute 120 | z-index: -1 121 | filter: blur(10px) 122 | transform: scale(1.05); 123 | 124 | 125 | .posterimg 126 | height: 278px 127 | width: 185px 128 | 129 | .movietitle 130 | position: relative 131 | display: flex 132 | align-items: center 133 | justify-content: center 134 | height: 40px 135 | width: 186px 136 | margin-top: -5px; 137 | z-index: 1 138 | background: secondary 139 | box-shadow: 0 -17px 30px 0 rgba(0,0,0,0.52) 140 | 141 | .popular 142 | position: relative 143 | margin-top: 100px; 144 | 145 | .bgcover 146 | width: 100% 147 | 148 | 149 | .heading 150 | position: absolute 151 | top: -30px 152 | left: 40px 153 | width: 250px 154 | display: flex 155 | align-content: center 156 | justify-content: center 157 | height: 47px 158 | background: secondary 159 | box-shadow: 0 2px 13px 0 rgba(0,0,0,0.50); 160 | 161 | .pinfo 162 | background: secondary 163 | box-shadow: 0 3px 56px 0 rgba(0,0,0,0.24) 164 | text-transform: none 165 | align(both) 166 | width: 44% 167 | 168 | 169 | .details 170 | column(2/3) 171 | .poster 172 | column(1/3) 173 | h2 174 | margin-top: 12% 175 | margin-bottom: 5% 176 | font-size: 1.4em 177 | display: inline-block 178 | text-transform: uppercase 179 | .date 180 | font-size: 1.4em 181 | color: primary 182 | margin-left: 5px 183 | .overview 184 | margin: 0 185 | font-weight: 100 186 | font-size: 12px 187 | line-height: 15px 188 | width: 70% 189 | display: -webkit-box; 190 | overflow : hidden; 191 | text-overflow: ellipsis; 192 | -webkit-line-clamp: 5; 193 | -webkit-box-orient: vertical; 194 | .info 195 | position: absolute 196 | bottom: 15px 197 | 198 | .duration 199 | display: inline-block 200 | font-size: 9px 201 | margin-left: 5px 202 | .stars 203 | display: inline 204 | margin-left: 40px 205 | margin-bottom: -5px 206 | .score 207 | margin-left: 10px 208 | display: inline-block 209 | font-size: 9px 210 | 211 | 212 | .recommended 213 | margin-bottom: 50px 214 | margin-top: 30px 215 | 216 | 217 | 218 | // Movie Page 219 | 220 | 221 | .backdropbg 222 | height: 80vh 223 | margin-top: -18vh 224 | overflow: hidden 225 | background-image: linear-gradient(1deg, rgba(21,43,55,0.87) 0%, rgba(0,0,0,0.00) 67%, rgba(21,43,55,0.87) 100%); 226 | 227 | .backdrop 228 | position: relative 229 | width: 100% 230 | height: 100% 231 | object-fit: cover 232 | overflow: hidden 233 | z-index: -3 234 | 235 | .moviename 236 | position: absolute 237 | bottom: 23vh 238 | left: 320px 239 | z-index: 2 240 | font-size: 61px; 241 | color: secondary; 242 | text-shadow: 0 4px 10px rgba(0,0,0,0.62); 243 | 244 | .playposter 245 | margin-left: 100px 246 | margin-top: -145px 247 | 248 | .movieposter 249 | width: 185px 250 | height: 277px 251 | box-shadow: 0 2px 14px 0 rgba(0,0,0,0.50); 252 | 253 | .playbutton 254 | position: relative 255 | cursor: pointer 256 | display: flex 257 | justify-content: center 258 | align-content: center 259 | align-items: center 260 | color: secondary 261 | background: primary 262 | box-shadow: 0 0 7px 0 rgba(0,0,0,0.28) 263 | border-radius: 100px 264 | margin-left: 1px 265 | margin-top: 17px 266 | width: 184px 267 | height: 35px 268 | 269 | .playnow 270 | font-size: 1em 271 | margin-bottom: 12px 272 | 273 | .icon-play 274 | font-size: 0.9em 275 | margin-left: 10px 276 | margin-top: 5px 277 | 278 | .pagedetails 279 | display: flex 280 | justify-content: flex-start 281 | position: relative 282 | list-style-type: none; 283 | margin-top: -170px 284 | margin-bottom: 30px 285 | margin-left: 291px 286 | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) 287 | 288 | .dicon 289 | color: primary 290 | margin-right: 6px 291 | 292 | .releasedate 293 | padding-right: 30px 294 | 295 | 296 | .startmdb 297 | margin-left: auto 298 | .score 299 | padding-left: 10px 300 | padding-right: 70px 301 | 302 | .movieoverview 303 | background: secondary; 304 | box-shadow: 0 3px 21px 0 rgba(0,0,0,0.20); 305 | margin-left: 320px 306 | margin-bottom: 70px 307 | width: 45% 308 | padding: 0.5% 2% 309 | 310 | .overviewtitle 311 | font-size: 1.3em 312 | margin-bottom: 30px 313 | 314 | .overviewtext 315 | text-transform: none 316 | font-size: 1.1em 317 | font-weight: 100 318 | line-height: 30px 319 | padding-bottom: 28px 320 | 321 | .cast-list 322 | position: relative 323 | display: flex 324 | justify-content: space-around 325 | list-style-type: none 326 | width: 90% 327 | margin: 70px auto 328 | padding-top: 35px 329 | padding-bottom: 15px 330 | box-shadow: 0 2px 28px 0 rgba(0,0,0,0.16); 331 | 332 | .castheading 333 | position: absolute 334 | font-size: 1.6em 335 | top: -42px 336 | left: 25px 337 | 338 | .cast-item 339 | width: 60% 340 | text-align: center 341 | text-transform: none 342 | 343 | 344 | .avatar 345 | box-shadow: 0 3px 13px 2px rgba(0,0,0,0.48); 346 | border-radius: 100px; 347 | 348 | .castname 349 | white-space: nowrap 350 | margin-top: 28px 351 | margin-bottom: 0 352 | line-height:0px 353 | 354 | .castcharacter 355 | color: primary 356 | font-size: 0.9em 357 | 358 | .moviecontainer 359 | position: relative 360 | width: 92.9% 361 | padding: 36px 0 362 | margin: 70px auto 363 | box-shadow: 0 2px 28px 0 rgba(0,0,0,0.16); 364 | 365 | .similarheading 366 | position: absolute 367 | font-size: 1.6em 368 | top: -40px 369 | left: 25px 370 | .movie-item:nth-child(6) 371 | display: none 372 | 373 | .back 374 | margin-top: -15px 375 | cursor: pointer 376 | display: flex 377 | justify-content: center 378 | align-content: center 379 | align-items: center 380 | margin-right: auto; 381 | font-size: 1.2em 382 | color: primary 383 | text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) 384 | 385 | .icon-play 386 | transform: scale(-1, 1) 387 | padding-left: 10px 388 | margin-top: 3px 389 | 390 | // Search Page 391 | 392 | .searchinput 393 | font-family: Montserrat 394 | margin-right: auto 395 | color: secondary 396 | padding: 10px 10px 10px 5px; 397 | display: block; 398 | border: none; 399 | width: 30% 400 | border-bottom: 2px solid primary; 401 | background-color: transparent 402 | outline: none 403 | .searchinput::placeholder 404 | color: secondary 405 | 406 | .searchcover 407 | position: relative 408 | background: url('./bgimg.png') 409 | background-size: cover 410 | 411 | .search-list 412 | display: flex 413 | width: 80% 414 | margin: 0 auto 415 | justify-content: flex-start 416 | flex-wrap: wrap 417 | list-style-type: none 418 | 419 | .movie-item 420 | margin-top: 10px 421 | margin-bottom: 30px 422 | margin-left: 30px 423 | 424 | //Sign Up 425 | form 426 | width: 100% 427 | height: 550px 428 | display: flex 429 | flex-direction: column 430 | align-content: space-around 431 | align-items: center 432 | 433 | h2 434 | margin-bottom: 60px 435 | margin-top: 70px 436 | 437 | input 438 | font-family: Montserrat 439 | color: dark 440 | padding: 10px 10px 10px 5px; 441 | border: none; 442 | border-bottom: 2px solid primary; 443 | background-color: transparent 444 | outline: none 445 | margin-bottom: 50px 446 | input::placeholder 447 | color: primary 448 | 449 | .button 450 | font-family: Montserrat 451 | outline: none 452 | border: none 453 | position: relative 454 | cursor: pointer 455 | display: flex 456 | justify-content: center 457 | align-content: center 458 | align-items: center 459 | color: secondary 460 | background: primary 461 | box-shadow: 0 0 7px 0 rgba(0,0,0,0.28) 462 | border-radius: 100px 463 | margin-left: 1px 464 | margin-top: 17px 465 | width: 184px 466 | height: 35px 467 | 468 | .fullscreenbutton 469 | z-index: 1000 470 | position: fixed 471 | opacity: 0.7 472 | transform: scale(0.8) 473 | right: -18px 474 | bottom: 4px 475 | 476 | // Hompeage Media Queries 477 | 478 | @media screen and (max-width: 1150px) 479 | .pinfo 480 | width: 55% !important 481 | 482 | .movie-list 483 | .movie-item:nth-child(6) 484 | display: none 485 | 486 | 487 | @media screen and (max-width: 950px) 488 | 489 | h4 490 | margin-left: 10% 491 | 492 | .pinfo 493 | width: 60% !important 494 | 495 | .movie-list 496 | justify-content: space-between 497 | flex-wrap: wrap 498 | width: 80% 499 | margin: 0 auto 500 | .movie-item 501 | margin-bottom: 40px 502 | .movie-item:nth-child(3n-1) 503 | margin: 0px 30px 504 | 505 | .movie-item:nth-child(6) 506 | display: initial 507 | 508 | @media screen and (max-width: 770px) 509 | .arrow 510 | width: 50px !important 511 | .pinfo 512 | width: 80% !important 513 | 514 | .movie-list 515 | justify-content: space-between 516 | .movie-item:nth-child(3n-1) 517 | margin: 0px 0px 518 | 519 | @media screen and (max-width: 620px) 520 | .heading 521 | height: 40px !important 522 | width: 200px !important 523 | font-size: 0.7em 524 | 525 | .pinfo 526 | width: 90% !important 527 | .overview 528 | width: 90% !important 529 | .date 530 | display: none 531 | 532 | @media screen and (max-width: 464px) 533 | .arrow 534 | width: 37px !important 535 | h4 536 | margin-bottom: -10px !important 537 | 538 | 539 | .signup 540 | display: none 541 | 542 | .movie-list 543 | width: 97% 544 | justify-content: center 545 | .movie-item 546 | transform: scale(0.8) 547 | margin-bottom: 20px 548 | .movie-item:nth-child(2) 549 | margin-top: -1% 550 | 551 | .pinfo 552 | width: 100% !important 553 | .overview 554 | width: 90% !important 555 | margin-bottom: 10px !important 556 | font-size: 10px !important 557 | h2 558 | font-size: 1em !important 559 | .info 560 | bottom: 5px !important 561 | 562 | 563 | @media screen and (max-width: 383px) 564 | .arrow 565 | width: 33px !important 566 | .heading 567 | display: none !important 568 | .movie-list 569 | justify-content: space-between 570 | .movie-item 571 | transform: scale(0.7) 572 | width: 50% 573 | 574 | @media screen and (max-width: 350px) 575 | .overview 576 | -webkit-line-clamp: 3 !important 577 | .stars 578 | margin-left: 10px !important 579 | 580 | 581 | // Movie List Media Queries 582 | 583 | @media screen and (max-width: 1000px) 584 | .movieoverview 585 | width: 60% 586 | .cast-item 587 | transform: scale(0.8) 588 | margin-left: -30px 589 | 590 | .moviecontainer 591 | padding: 10px 10px 592 | .movie-item 593 | transform: scale(0.87) 594 | 595 | @media screen and (max-width: 900px) 596 | .moviename 597 | bottom: 300px 598 | font-size: 55px 599 | .playposter 600 | margin-top: -450px 601 | margin-left: 100px 602 | .pagedetails 603 | color: #fff 604 | margin-top: -30px 605 | margin-bottom: -30px 606 | font-size: 0.92em 607 | .startmdb 608 | margin-left: 30px 609 | .movieoverview 610 | margin: 0 auto 611 | margin-top: 190px 612 | width: 90% 613 | .overviewtitle 614 | padding-left: 10px 615 | .overviewtext 616 | padding-left: 10px 617 | padding-right: 10px 618 | 619 | .moviecontainer 620 | .movie-list 621 | justify-content: space-between 622 | .movie-item:nth-child(3n-1) 623 | margin: 0px 0px 624 | @media screen and (max-width: 800px) 625 | .moviename 626 | display: none 627 | .playposter 628 | width: 185px 629 | margin: 0 auto 630 | margin-top: -60vh 631 | .playbutton 632 | margin-top: -15px 633 | width: 200px 634 | margin-left: -5px 635 | 636 | .pagedetails 637 | margin: 0 638 | margin-bottom: -150px 639 | margin-top: 18px 640 | margin-left: 50px 641 | justify-content: center 642 | 643 | .cast-list 644 | flex-wrap: wrap 645 | .cast-item 646 | width: 40% !important 647 | 648 | @media screen and (max-width: 554px) 649 | .pagedetails 650 | margin-left: 35px 651 | font-size: 0.7em 652 | 653 | @media screen and (max-width: 500px) 654 | .pagedetails 655 | margin-left: -30px 656 | .score 657 | padding-right: 0 658 | 659 | 660 | .moviecontainer 661 | .movie-list 662 | justify-content: flex-start 663 | .movie-item 664 | width: 50% 665 | 666 | @media screen and (max-width: 400px) 667 | .playbutton 668 | display: none !important 669 | .castname 670 | white-space: wrap 671 | .backdropbg 672 | height: 100vh 673 | margin-top: -30vh 674 | .playposter 675 | transform: scale(0.8) 676 | margin-top: -70vh 677 | .moviecontainer 678 | .movie-list 679 | margin-left: 0px 680 | .movie-item 681 | transform: scale(0.7) 682 | .cast-item 683 | transform: scale(0.7) 684 | 685 | @media screen and (max-width: 330px) 686 | .pagedetails 687 | visibility: hidden -------------------------------------------------------------------------------- /src/tmdb.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable */ 2 | 3 | var tmdb = { 4 | "api_key": process.env.REACT_APP_SECRET_CODE, 5 | "base_uri": "https://api.themoviedb.org/3", 6 | "images_uri": "https://image.tmdb.org/t/p", 7 | "timeout": 5000, 8 | call: function(url, params, success, error){ 9 | var params_str ="api_key="+tmdb.api_key; 10 | for (var key in params) { 11 | if (params.hasOwnProperty(key)) { 12 | params_str+="&"+key+"="+encodeURIComponent(params[key]); 13 | } 14 | } 15 | var xhr = new XMLHttpRequest(); 16 | xhr.timeout = tmdb.timeout; 17 | xhr.ontimeout = function () { 18 | throw("Request timed out: " + url +" "+ params_str); 19 | }; 20 | xhr.open("GET", tmdb.base_uri + url + "?" + params_str, true); 21 | xhr.setRequestHeader('Accept', 'application/json'); 22 | xhr.responseType = "text"; 23 | xhr.onreadystatechange = function () { 24 | if (this.readyState === 4) { 25 | if (this.status === 200){ 26 | if (typeof success == "function") { 27 | success(JSON.parse(this.response)); 28 | }else{ 29 | throw('No success callback, but the request gave results') 30 | } 31 | }else{ 32 | if (typeof error == "function") { 33 | error(JSON.parse(this.response)); 34 | }else{ 35 | throw('No error callback') 36 | } 37 | } 38 | } 39 | }; 40 | xhr.send(); 41 | } 42 | } 43 | 44 | export default tmdb 45 | --------------------------------------------------------------------------------