Merge branch 'movieGetDetails' into 'master'

Movie get details + New theme

See merge request !21
This commit is contained in:
Lucas 2016-11-24 12:26:21 +00:00
commit d6df379fc4
12 changed files with 197 additions and 60 deletions

View File

@ -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",

View File

@ -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)
}

View File

@ -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, imgPath)
err = web.Download(m.Thumb, m.imgFile(env))
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)
}

View File

@ -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
_, err = io.Copy(file, resp.Body)
if err != nil {
return err
}
return nil
return jpeg.Encode(file, img, nil)
}
// createDirectory creates the destination directory
func createDirectory(dest string) error {
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
}

View File

@ -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)

View File

@ -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',

View File

@ -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>
);
}
}

View File

@ -32,71 +32,104 @@ function MoviePosters(props) {
);
}
class MoviePoster extends React.Component {
constructor(props) {
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' : '';
function MoviePoster(props) {
const selected = 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}
onClick={this.props.onClick}
onError={this.handleError}
src={props.data.poster_url}
onClick={props.onClick}
/>
</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>
<h3 className="visible-xs">{props.data.title}</h3>
<h1 className="hidden-xs">{props.movie.title}</h1>
<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>
);

View File

@ -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>
);
}
}

View File

@ -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':
return state
case 'SELECT_MOVIE':
case 'MOVIE_GET_DETAILS_PENDING':
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

View File

@ -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;
background-color:#f1c40f;
border-color: @brand-primary;
background-color: @brand-primary;
}
.movie-plot {
@ -20,3 +22,7 @@ body {
bottom: 1%;
right: 1%;
}
.navbar {
opacity: 0.95;
}

View File

@ -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"