added linear background to modal

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -1,22 +1,60 @@
-import React from 'react'; 
+import React, { Component } from 'react'; 
 import Aux from '../../../hoc/Aux/Aux';
 import MovieRow from '../MovieRow'; 
  
 
-const movieSummary = (props) => (
+class MovieSummary extends Component {
 
-   <Aux>
+   
-      <h1 className="modal__title">{props.movie.title}</h1>
+
-      <p className="modal__info">
+   render() {
-         <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
+
-         Release date: {props.movie.release_date}  Runtime: {props.movie.runtime}m
+
-      </p>
+      return (
-      <p className="modal__overview">{props.movie.overview}</p>
+            <Aux>
-       <button>Play</button>  
+            <div className="shit">
-       <button>My list</button>  
+               <h1 className="modal__title">{this.props.movie.title || this.props.movie.name}</h1>
-       <p>staring: mdf gglo bool emmy djf </p>
+               <p className="modal__info">
-       <p>Genres: mdf gglo bool emmy djf </p>
+                  <span className="modal__rating">Rating: {this.props.movie.vote_average * 10}%  </span>
+                  Release date: {this.props.movie.release_date || this.props.movie.first_air_date}  Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time}m
+         </p>
+               <p className="modal__episode">{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
+                  {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}</p>
+               <p className="modal__overview">{this.props.movie.overview}</p>
+               <button>Play</button>
+               <button>My list</button>
+               <p>staring: mdf gglo bool emmy djf </p>
+               <p>Genres: mdf gglo bool emmy djf </p>
+            </div>
+
+   
+      
    </Aux>
-); 
+      )
+   }
+}
 
-export default movieSummary; 
+
+
+
+// const movieSummary = (props) => (
+
+//    <Aux>
+//       <div>
+//          <h1 className="modal__title">{props.movie.title || props.movie.name}</h1>
+//          <p className="modal__info">
+//             <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
+//             Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime  || props.movie.episode_run_time}m
+//          </p>
+//          <p className="modal__episode">{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} 
+//             {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}</p>
+//          <p className="modal__overview">{props.movie.overview}</p>
+//          <button>Play</button>  
+//          <button>My list</button>  
+//          <p>staring: mdf gglo bool emmy djf </p>
+//          <p>Genres: mdf gglo bool emmy djf </p>
+//       </div>
+//    </Aux>
+// ); 
+
+export default MovieSummary; 

src/components/UI/Modal/Modal.js

@@ -1,15 +1,38 @@
-import React from 'react'; 
+import React, {Component} from 'react'; 
 import Aux from '../../../hoc/Aux/Aux'; 
 import Backdrop from '../Backdrop/Backdrop'
 
-const modal = (props) => (
+class Modal extends Component {
-   <Aux>
-      <Backdrop show={props.show} toggleBackdrop={props.modalClosed}/>
-      <div 
-         className={"modal " + (props.show ? "show" : "hide")}>
-         {props.children}
-      </div>
-   </Aux>
-); 
 
-export default modal; 
+  
+
+   render() {
+// `background: linear-gradient(90deg, #000000, #ffffff00),
+
+      const backgroundStyle = {
+         // overflow: 'hidden',
+
+         // backgroundRepeat: "no-repeat",
+         // // backgroundPosition: 'center center'
+         // background: "red",
+         backgroundSize: "cover",
+         // backgroundImage: 'linear-gradient(to right, #1c1b1b, rgb(237, 232, 232)'
+         backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`,
+      }
+      return (
+         <Aux>
+            <Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
+               <div
+                  style={backgroundStyle}
+                  className={"modal " + (this.props.show ? "show" : "hide")}>
+                  {this.props.children}
+               </div>
+           
+       
+         </Aux>
+      ); 
+   }
+
+}
+
+export default Modal; 

src/containers/App.js

@@ -22,7 +22,7 @@ makeAipCall = (searchItem) => {
   const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`;
       axios.get(url)
          .then(res => {
-            console.log(res.data.results); 
+            // console.log(res.data.results); 
             // extract the data from json object 
             const results = res.data.results;
             let movieImageUrl; 
@@ -34,7 +34,7 @@ makeAipCall = (searchItem) => {
                  // pass in the movie object to our MovieRow component and keep it in a variable called 
                  // movieComponent 
                  const movieComponent = <MovieRow
-                   movieDetails={() => this.selectMovieHandler(movie.id)}
+                   movieDetails={() => this.selectMovieHandler(movie)}
                    key={movie.id}
                    movieImage={movieImageUrl}
                    movie={movie} />
@@ -56,7 +56,7 @@ makeAipCall = (searchItem) => {
     }); 
     const userInput = event.target.value; 
     this.makeAipCall(userInput); 
-    console.log(userInput);
+
 
     if (userInput === "") {
       this.setState({
@@ -65,10 +65,16 @@ makeAipCall = (searchItem) => {
     } 
   }
 
-  selectMovieHandler = (movieId) => {
+  selectMovieHandler = (movie) => {
     this.setState({toggleModal: true}); 
-    console.log(movieId); 
+    let url; 
-    const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&append_to_response=tv,videos`;
+    if (movie.media_type === "movie") {
+      const movieId = movie.id; 
+      url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    } else if (movie.media_type === "tv") {
+      const tvId = movie.id 
+      url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
+    }
     axios.get(url)
       .then(res => {
 
@@ -93,7 +99,7 @@ makeAipCall = (searchItem) => {
           <Navigation showMovies={this.onSearchHandler} />
           {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
                                             className="search-container">{this.state.rows}</div>}
-          <Modal show={this.state.toggleModal} modalClosed={this.closeModal}>
+          <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
             <MovieSummary movie={this.state.movieDetails}/>
           </Modal>  
          </div>
@@ -105,12 +111,3 @@ makeAipCall = (searchItem) => {
 export default App; 
 
 
-
-
-
-
-
-
-// curl --request GET \
-// --url 'https://api.themoviedb.org/3/find/ur95210597?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&external_source=imdb_id' \
-//   --data '{}'

src/static/sass/components/_backdrop.scss

@@ -5,5 +5,6 @@
    z-index: 100; 
    left: 0; 
    top: 0; 
-   background-color: rgba($color-background, .7); 
+   background-color: rgba($color-background, .7);
+   
 }

src/static/sass/components/_modal.scss

@@ -1,17 +1,12 @@
 .modal {
-   padding-left: 4rem;
-   padding-top: 2rem;
    position: fixed;
    z-index: 500; 
    width: 100%;
-   top: 30%; 
+   top:  25%; 
    left: 0; 
-   color: white;
+   color: #fff;
-   height: 44rem;
+   height: 50rem;
-   background: $color-background-modal;
+ 
-   transition: all 1s; 
-   transform: scale(0);
-
    &__title {
       font-size: 4rem;
    }
@@ -26,23 +21,41 @@
       font-size: 2rem;
    }
 
+   &__episode {
+      padding-top: .5rem;
+      font-size: 2rem;
+   }
+
    &__overview {
       color: $color-modal-grey;
       padding-top: 2rem;
       font-size: 2rem;
+      hyphens: auto;
+      width: 60%;
    }
 }
 
-.show {
+// .hide {
-   // transform: 50%
+//    transition: all 1s;
-   transition: transform 1s;
+//    // transform: translateY(-100vh); 
-   transform: scale(1); 
+//    display: none;
-   opacity: 1;
+// }
-}
 
-.hide {
+   .show {
+      opacity: 1;
+      // transform: scale(1);
+   }
 
-   transform: translateY(-100vh); 
+   .hide {
-   display: none;
+      transition: all 1s;
-}
+      // transform: translateY(-100vh); 
+      display: none;
+   }
 
+   .shit {
+     background: linear-gradient(90deg, #000 50%, transparent);
+     width: 70%;
+     padding-top: 3rem;
+     height: 100%;
+     padding-left: 3.5rem;
+   }