added linear background to modal

2018-11-15 11:36:10 -05:00
parent 51ba36e611
commit f9dbf2ae9d
5 changed files with 134 additions and 62 deletions
--- a/src/components/MovieRow/MovieSummary/MovieSummary.js
+++ b/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">
-         <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
-         Release date: {props.movie.release_date}  Runtime: {props.movie.runtime}m
-      </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>
+   
+
+   render() {
+
+
+      return (
+            <Aux>
+            <div className="shit">
+               <h1 className="modal__title">{this.props.movie.title || this.props.movie.name}</h1>
+               <p className="modal__info">
+                  <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; 
--- a/src/components/UI/Modal/Modal.js
+++ b/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) => (
-   <Aux>
-      <Backdrop show={props.show} toggleBackdrop={props.modalClosed}/>
-      <div 
-         className={"modal " + (props.show ? "show" : "hide")}>
-         {props.children}
-      </div>
-   </Aux>
-); 
+class Modal extends Component {

-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; 
--- a/src/containers/App.js
+++ b/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); 
-    const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&append_to_response=tv,videos`;
+    let url; 
+    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 '{}'
--- a/src/static/sass/components/_backdrop.scss
+++ b/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);
+   
 }
--- a/src/static/sass/components/_modal.scss
+++ b/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;
-   height: 44rem;
-   background: $color-background-modal;
-   transition: all 1s; 
-   transform: scale(0);
-
+   color: #fff;
+   height: 50rem;
+ 
   &__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 {
-   // transform: 50%
-   transition: transform 1s;
-   transform: scale(1); 
-   opacity: 1;
-}
+// .hide {
+//    transition: all 1s;
+//    // transform: translateY(-100vh); 
+//    display: none;
+// }

-.hide {
+   .show {
+      opacity: 1;
+      // transform: scale(1);
+   }

-   transform: translateY(-100vh); 
-   display: none;
-}
+   .hide {
+      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;
+   }