Merge branch 'ux' into 'master'

UX

See merge request !81

src/public/js/components/buttons/download.js

@@ -47,7 +47,7 @@ export default class DownloadButton extends React.PureComponent {
           </MenuItem>
         </Dropdown.Menu>
 
-        <Modal show={this.state.showModal} onHide={this.hideModal}>
+        <Modal show={this.state.showModal} onHide={this.hideModal} dialogClassName="player-modal">
           <Modal.Header closeButton>
             <Modal.Title>
               <i className="fa fa-globe"></i>

src/public/js/components/list/poster.js

@@ -1,41 +1,18 @@
 import React from "react"
 
-export default class Poster extends React.Component {
+export default function Poster(props) {
-  constructor(props) {
+  const selected = props.selected ? " thumbnail-selected" : "";
-    super(props);
+  const imgClass = "thumbnail" + selected;
-  }
+  return (
-  shouldComponentUpdate(nextProps) {
+    <div>
-    if (nextProps.index !== this.props.index) { return true }
+      <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
-    if (nextProps.selected !== this.props.selected) { return true }
+        <a className={imgClass}>
-    if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true }
+          <img
-    return false;
+            src={props.data.get("poster_url")}
-  }
+            onClick={props.onClick}
-  render() {
+          />
-    const selected = this.props.selected ? " thumbnail-selected" : "";
+        </a>
-    const imgClass = "thumbnail" + selected;
-    const displayClearFixLg = (this.props.index % 6) === 0;
-    const displayClearFixMd = (this.props.index % 4) === 0;
-    const displayClearFixSm = (this.props.index % 2) === 0;
-    return (
-      <div>
-        {displayClearFixLg &&
-            <div className="clearfix visible-lg"></div>
-        }
-        {displayClearFixMd &&
-            <div className="clearfix visible-md"></div>
-        }
-        {displayClearFixSm &&
-            <div className="clearfix visible-sm"></div>
-        }
-        <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
-          <a className={imgClass}>
-            <img
-              src={this.props.data.get("poster_url")}
-              onClick={this.props.onClick}
-            />
-          </a>
-        </div>
       </div>
-    );
+    </div>
-  }
+  );
 }

src/public/js/components/list/posters.js

@@ -131,14 +131,26 @@ class Posters extends React.PureComponent {
           {this.props.elmts.toIndexedSeq().map(function(movie, index) {
             const imdbId = movie.get("imdb_id");
             const selected = (imdbId === this.props.selectedImdbId) ? true : false;
+
+            let clearFixes = [];
+            if ((index % 6) === 0) { clearFixes.push("clearfix visible-lg") };
+            if ((index % 4) === 0) { clearFixes.push("clearfix visible-md") };
+            if ((index % 2) === 0) { clearFixes.push("clearfix visible-sm") };
+
             return (
-              <Poster
+              <div>
-                index={index}
+                {clearFixes.length > 0 && clearFixes.map(function(el, i) {
-                data={movie}
+                  return (
-                key={imdbId}
+                    <div key={`${imdbId}-${i}`} className={el}></div>
-                selected={selected}
+                  );
-                onClick={() => this.props.onClick(imdbId)}
+                })}
-              />
+                <Poster
+                  data={movie}
+                  key={imdbId}
+                  selected={selected}
+                  onClick={() => this.props.onClick(imdbId)}
+                />
+              </div>
             )
           } ,this)}
         </InfiniteScroll>

src/public/js/components/navbar.js

@@ -2,14 +2,16 @@ import React from "react"
 import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
 import { LinkContainer } from "react-router-bootstrap"
 
-export default class NavBar extends React.PureComponent {
+export default class AppNavBar extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       userLoggedIn: (props.username !== ""),
       displayMoviesSearch: this.shouldDisplayMoviesSearch(props.router),
       displayShowsSearch: this.shouldDisplayShowsSearch(props.router),
+      expanded: false,
     };
+    this.setExpanded = this.setExpanded.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     // Update the state based on the next props
@@ -34,10 +36,14 @@ export default class NavBar extends React.PureComponent {
     const location = router.getCurrentLocation().pathname;
     return (location.indexOf(keyword) !== -1)
   }
+  setExpanded(value) {
+    if (this.state.expanded === value) { return }
+    this.setState({ expanded: value });
+  }
   render() {
     return (
       <div>
-        <Navbar fluid fixedTop collapseOnSelect>
+        <Navbar fluid fixedTop collapseOnSelect expanded={this.state.expanded} onToggle={this.setExpanded}>
           <Navbar.Header>
             <LinkContainer to="/">
               <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@@ -63,6 +69,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search movies"
                 router={this.props.router}
                 path='/movies/search'
+                setExpanded={this.setExpanded}
               />
             }
             {(this.state.displayShowsSearch && this.state.userLoggedIn) &&
@@ -70,6 +77,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search shows"
                 router={this.props.router}
                 path='/shows/search'
+                setExpanded={this.setExpanded}
               />
             }
           </Navbar.Collapse>
@@ -86,6 +94,7 @@ class Search extends React.Component {
   }
   handleSearch(ev) {
     ev.preventDefault();
+    this.props.setExpanded(false);
     this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
   }
   render() {

src/public/js/components/torrents/list.js

@@ -36,7 +36,11 @@ class AddTorrent extends React.PureComponent {
   handleChange(event) {
     this.setState({ url: event.target.value });
   }
-  handleSubmit() {
+  handleSubmit(ev) {
+    if (ev) {
+      ev.preventDefault();
+    }
+
     if (this.state.url === "") {
       return;
     }

src/public/less/app.less

@@ -8,8 +8,14 @@ body {
 }
 
 .thumbnail-selected {
-    border-color: @brand-primary;
+    transition: border 400ms ease-in-out;
-    background-color: @brand-primary;
+    animation-name: select-thumbnail;
+    animation-duration: 400ms;
+    animation-fill-mode: forwards;
+}
+@keyframes select-thumbnail {
+    0%   { background-color: @gray-light;    }
+    100% { background-color: @brand-primary; }
 }
 
 .clickable {
@@ -65,3 +71,7 @@ div.sweet-alert > h2 {
         display: inherit;
     }
 }
+
+.player-modal {
+    width: 90%;
+}