Merge branch 'movieGetDetails' into 'master'

Movie get details + New theme

See merge request !21

package.json

@@ -6,6 +6,7 @@
     "dependencies": {
         "babel-polyfill": "^6.16.0",
         "bootstrap": "^3.3.6",
+        "bootswatch": "^3.3.7",
         "font-awesome": "^4.7.0",
         "history": "^4.4.0",
         "jquery": "^2.2.4",

src/internal/movies/handlers.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"net/url"
 
+	"github.com/gorilla/mux"
 	"github.com/odwrtw/papi"
 	polochon "github.com/odwrtw/polochon/lib"
 	"github.com/odwrtw/polochon/modules/pam"
@@ -134,3 +135,16 @@ func ExplorePopular(env *web.Env, w http.ResponseWriter, r *http.Request) error
 
 	return env.RenderJSON(w, movies)
 }
+
+// GetDetailsHandler retrieves details for a movie
+func GetDetailsHandler(env *web.Env, w http.ResponseWriter, r *http.Request) error {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	m := New(id)
+	if err := m.GetDetails(env, true); err != nil {
+		return err
+	}
+
+	return env.RenderJSON(w, m)
+}

src/internal/movies/movies.go

@@ -2,6 +2,7 @@ package movies
 
 import (
 	"fmt"
+	"os"
 	"path/filepath"
 
 	"github.com/Sirupsen/logrus"
@@ -50,7 +51,8 @@ var (
 type Movie struct {
 	sqly.BaseModel
 	polochon.Movie
-	PolochonURL string
+	PolochonURL string `json:"polochon_url"`
+	PosterURL   string `json:"poster_url"`
 }
 
 func New(imdbID string) *Movie {
@@ -62,12 +64,12 @@ func New(imdbID string) *Movie {
 }
 
 // Get returns show details in database from id or imdbid or an error
-func (m *Movie) Get(db *sqlx.DB) error {
+func (m *Movie) Get(env *web.Env) error {
 	var err error
 	if m.ID != "" {
-		err = db.QueryRowx(getMovieQueryByID, m.ID).StructScan(m)
+		err = env.Database.QueryRowx(getMovieQueryByID, m.ID).StructScan(m)
 	} else if m.ImdbID != "" {
-		err = db.QueryRowx(getMovieQueryByImdbID, m.ImdbID).StructScan(m)
+		err = env.Database.QueryRowx(getMovieQueryByImdbID, m.ImdbID).StructScan(m)
 	} else {
 		err = fmt.Errorf("Can't get movie details, you have to specify an ID or ImdbID")
 	}
@@ -77,6 +79,10 @@ func (m *Movie) Get(db *sqlx.DB) error {
 		}
 		return err
 	}
+
+	// Set the poster url
+	m.PosterURL = m.GetPosterURL(env)
+
 	return nil
 }
 
@@ -101,7 +107,7 @@ func (m *Movie) GetDetails(env *web.Env, force bool) error {
 	var dbFunc func(db *sqlx.DB) error
 
 	var err error
-	err = m.Get(env.Database)
+	err = m.Get(env)
 	switch err {
 	case nil:
 		log.Debug("movie found in database")
@@ -133,14 +139,16 @@ func (m *Movie) GetDetails(env *web.Env, force bool) error {
 	log.Debug("movie added in database")
 
 	// Download poster
-	imgPath := filepath.Join(env.Config.PublicDir, "img", "movies", m.ImdbID+".jpg")
+	err = web.Download(m.Thumb, m.imgFile(env))
-	err = web.Download(m.Thumb, imgPath)
 	if err != nil {
 		return err
 	}
 
 	log.Debug("poster downloaded")
 
+	// Set the poster url
+	m.PosterURL = m.GetPosterURL(env)
+
 	return nil
 }
 
@@ -177,3 +185,23 @@ func (m *Movie) Delete(db *sqlx.DB) error {
 	}
 	return nil
 }
+
+// imgURL returns the default image url
+func (m *Movie) imgURL(env *web.Env) string {
+	return fmt.Sprintf("img/movies/%s.jpg", m.ImdbID)
+}
+
+// imgFile returns the image location on disk
+func (m *Movie) imgFile(env *web.Env) string {
+	return filepath.Join(env.Config.PublicDir, m.imgURL(env))
+}
+
+// GetPosterURL returns the image URL or the default image if the poster is not yet downloaded
+func (m *Movie) GetPosterURL(env *web.Env) string {
+	// Check if the movie image exists
+	if _, err := os.Stat(m.imgFile(env)); os.IsNotExist(err) {
+		// TODO image in the config ?
+		return "img/noimage.png"
+	}
+	return m.imgURL(env)
+}

src/internal/web/download.go

@@ -1,19 +1,33 @@
 package web
 
 import (
+	"image"
+	"image/jpeg"
 	"io"
 	"net/http"
 	"os"
+	"path"
+
+	"github.com/nfnt/resize"
 )
 
 // Download used for downloading file
 var Download = func(srcURL, dest string) error {
+	if err := createDirectory(dest); err != nil {
+		return err
+	}
+
 	resp, err := http.Get(srcURL)
 	if err != nil {
 		return err
 	}
 	defer resp.Body.Close()
 
+	img, err := resizeImage(resp.Body)
+	if err != nil {
+		return err
+	}
+
 	// Create the file
 	file, err := os.Create(dest)
 	if err != nil {
@@ -21,10 +35,19 @@ var Download = func(srcURL, dest string) error {
 	}
 	defer file.Close()
 
-	// Write from the net to the file
+	return jpeg.Encode(file, img, nil)
-	_, err = io.Copy(file, resp.Body)
+}
-	if err != nil {
+
-		return err
+// createDirectory creates the destination directory
-	}
+func createDirectory(dest string) error {
-	return nil
+	return os.MkdirAll(path.Dir(dest), os.ModePerm)
+}
+
+func resizeImage(img io.Reader) (image.Image, error) {
+	image, _, err := image.Decode(img)
+	if err != nil {
+		return nil, err
+	}
+
+	return resize.Resize(300, 0, image, resize.Lanczos3), nil
 }

src/main.go

@@ -75,6 +75,7 @@ func main() {
 
 	env.Handle("/movies/polochon", movies.FromPolochon).WithRole(users.UserRole)
 	env.Handle("/movies/explore/popular", movies.ExplorePopular).WithRole(users.UserRole)
+	env.Handle("/movies/{id:tt[0-9]+}/get_details", movies.GetDetailsHandler).WithRole(users.UserRole)
 
 	n := negroni.Classic()
 	n.Use(authMiddleware)

src/public/js/actions/actionCreators.js

@@ -69,6 +69,13 @@ export function getUserInfos() {
   )
 }
 
+export function getMovieDetails(imdb_id) {
+  return request(
+    'MOVIE_GET_DETAILS',
+    configureAxios().get(`/movies/${imdb_id}/get_details`)
+  )
+}
+
 export function fetchMovies(url) {
   return request(
     'MOVIE_LIST_FETCH',

src/public/js/app.js

@@ -43,11 +43,9 @@ class Main extends React.Component {
         <NavBar {...this.props}/>
         <Error {...this.props}/>
         <div className="container-fluid">
-          <div className="container">
           {React.cloneElement(this.props.children, this.props)}
         </div>
       </div>
-      </div>
     );
   }
 }

src/public/js/components/movies/list.js

@@ -32,71 +32,104 @@ function MoviePosters(props) {
   );
 }
 
-class MoviePoster extends React.Component {
+function MoviePoster(props) {
-  constructor(props) {
+  const selected = props.selected ? ' thumbnail-selected' : '';
-    super(props);
-    this.state = {
-      src: `/img/movies/${this.props.data.imdb_id}.jpg`,
-    }
-    this.handleError = this.handleError.bind(this);
-  }
-  handleError() {
-    this.setState({ src: '/img/noimage.png' });
-  }
-  render() {
-    const selected = this.props.selected ? ' thumbnail-selected' : '';
   const imgClass = 'thumbnail' + selected;
   return (
-      <div className="col-xs-12 col-md-3">
+    <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
       <a className={imgClass}>
         <img
-            src={this.state.src}
+          src={props.data.poster_url}
-            onClick={this.props.onClick}
+          onClick={props.onClick}
-            onError={this.handleError}
         />
       </a>
     </div>
   );
-  }
 }
 
 function MovieDetails(props) {
   return (
     <div className="col-xs-7 col-md-4">
       <div className="movie-detail affix">
-        <h1 className="hidden-xs">{props.data.title}</h1>
+        <h1 className="hidden-xs">{props.movie.title}</h1>
-        <h3 className="visible-xs">{props.data.title}</h3>
+        <h3 className="visible-xs">{props.movie.title}</h3>
         <p>
           <i className="fa fa-clock-o"></i>
-          {props.data.runtime} min
+          &nbsp;{props.movie.runtime} min
         </p>
         <p>
           <i className="fa fa-star-o"></i>
-          {props.data.rating} <small>({props.data.votes} counts)</small>
+          &nbsp;{props.movie.rating} <small>({props.movie.votes} counts)</small>
         </p>
-        <p className="movie-plot">{props.data.plot}</p>
+        <p className="movie-plot">{props.movie.plot}</p>
       </div>
+      <MovieButtons {...props} />
     </div>
   );
 }
 
+class MovieButtons extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    if (this.props.fetching) {
+      return
+    }
+    this.props.getMovieDetails(this.props.movie.imdb_id);
+  }
+  render() {
+    const imdb_link = `http://www.imdb.com/title/${this.props.movie.imdb_id}`;
+    return (
+      <div className="movie-details-buttons btn-toolbar">
+        <a type="button" className="btn btn-default btn-sm" onClick={this.handleClick}>
+          {this.props.fetching ||
+            <span>
+              <i className="fa fa-refresh"></i> Refresh
+            </span>
+          }
+          {this.props.fetching &&
+            <span>
+              <i className="fa fa-spin fa-refresh"></i> Refreshing
+            </span>
+          }
+        </a>
+        {this.props.movie.polochon_url !== "" &&
+          <a type="button" className="btn btn-primary btn-sm" href={this.props.movie.polochon_url}>
+            <i className="fa fa-download"></i> Download
+          </a>
+        }
+        <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
+          <i className="fa fa-external-link"></i> IMDB
+        </a>
+      </div>
+    );
+  }
+}
+
 export default class MovieList extends React.Component {
   componentWillMount() {
     this.props.fetchMovies(this.props.moviesUrl);
   }
   render() {
     const movies = this.props.movieStore.movies;
-    const index = this.props.movieStore.selectedMovieIndex;
+    const index = this.props.movieStore.selectedMovie.index;
     const selectedMovie = movies[index];
     return (
-      <div className="row" id="movie-library">
+      <div className="row" id="container">
         <MoviePosters
           movies={this.props.movieStore.movies}
           selectedMovieIndex={index}
           onClick={this.props.selectMovie}
         />
         {selectedMovie &&
-          <MovieDetails data={selectedMovie} />
+          <MovieDetails
+            movie={selectedMovie}
+            fetching={this.props.movieStore.selectedMovie.fetchingDetails}
+            getMovieDetails={this.props.getMovieDetails}
+          />
         }
       </div>
     );

src/public/js/components/navbar.js

@@ -12,7 +12,7 @@ export default class NavBar extends React.Component {
     const isLoggedIn = username !== "" ? true : false;
     return (
       <div>
-        <Navbar inverse fixedTop collapseOnSelect>
+        <Navbar fluid fixedTop collapseOnSelect>
           <Navbar.Header>
             <LinkContainer to="/">
               <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@@ -53,7 +53,6 @@ export default class NavBar extends React.Component {
           </Navbar.Collapse>
         </Navbar>
       </div>
-
     );
   }
 }

src/public/js/reducers/movies.js

@@ -1,6 +1,9 @@
 const defaultState = {
   movies: [],
-  selectedMovieIndex: 0,
+  selectedMovie: {
+    index: 0,
+    fetchingDetails: false,
+  },
 };
 
 export default function movieStore(state = defaultState, action) {
@@ -9,11 +12,31 @@ export default function movieStore(state = defaultState, action) {
       return Object.assign({}, state, {
         movies: action.payload.data,
       })
-    case 'MOVIE_LIST_FETCH_PENDING':
+    case 'MOVIE_GET_DETAILS_PENDING':
-      return state
-    case 'SELECT_MOVIE':
       return Object.assign({}, state, {
-        selectedMovieIndex: action.index,
+        selectedMovie: Object.assign({}, state.selectedMovie, {
+          fetchingDetails: true,
+        }),
+      })
+    case 'MOVIE_GET_DETAILS_FULFILLED':
+      let movies = state.movies.slice();
+      movies[state.selectedMovie.index] = action.payload.data;
+      return Object.assign({}, state, {
+        movies: movies,
+        selectedMovie: Object.assign({}, state.selectedMovie, {
+          fetchingDetails: false,
+        }),
+      })
+    case 'SELECT_MOVIE':
+      // Don't select the movie if we're fetching another movie's details
+      if (state.selectedMovie.fetchingDetails) {
+        return state
+      }
+
+      return Object.assign({}, state, {
+        selectedMovie: Object.assign({}, state.selectedMovie, {
+          index: action.index,
+        }),
       })
     default:
       return state

src/public/less/app.less

@@ -1,13 +1,15 @@
 @import "~bootstrap/less/bootstrap.less";
+@import "~bootswatch/superhero/variables.less";
+@import "~bootswatch/superhero/bootswatch.less";
 @import "~font-awesome/less/font-awesome.less";
 
 body {
-  padding-top: 70px;
+  padding-top: @navbar-height + 10px;
 }
 
 .thumbnail-selected {
-    border-color:#f1c40f;
+    border-color: @brand-primary;
-    background-color:#f1c40f;
+    background-color: @brand-primary;
 }
 
 .movie-plot {
@@ -20,3 +22,7 @@ body {
     bottom: 1%;
     right: 1%;
 }
+
+.navbar {
+    opacity: 0.95;
+}

yarn.lock

@@ -773,6 +773,10 @@ bootstrap@^3.3.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
 
+bootswatch:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-3.3.7.tgz#eb6f9a9a8523b87a706ea91deec3e0d7eaa8ab1f"
+
 brace-expansion@^1.0.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"