diff --git a/package.json b/package.json
index 1ea38c0..f877cf2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"react-bootstrap": "^0.30.6",
"react-bootstrap-sweetalert": "^3.0.0",
"react-dom": "^15.3.2",
+ "react-infinite": "^0.10.0",
"react-loading": "^0.0.9",
"react-redux": "^4.4.6",
"react-redux-form": "^1.2.4",
diff --git a/src/public/js/app.js b/src/public/js/app.js
index f8bb1d1..6baf48a 100644
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@@ -110,7 +110,7 @@ ReactDOM.render((
-
+
diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js
index cf44062..789a186 100644
--- a/src/public/js/components/list/posters.js
+++ b/src/public/js/components/list/posters.js
@@ -1,62 +1,91 @@
import React from 'react'
+
import fuzzy from 'fuzzy';
+import Infinite from 'react-infinite';
import ListFilter from './filter'
import ListPoster from './poster'
-export default function ListPosters(props) {
- let elmts = props.data.slice();
-
- // Filter the list of elements
- if (props.filter !== "") {
- const filtered = fuzzy.filter(props.filter, elmts, {
- extract: (el) => el.title
+export default class ListPosters extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ elementHeight: 150,
+ elementWidth: 70,
+ containerWidth: 0,
+ elementPerRaw: 1,
+ fakeElementHeight: 100,
+ };
+ this.updateDimensions = this.updateDimensions.bind(this);
+ }
+ updateDimensions() {
+ let thumbnails = document.getElementsByClassName("thumbnail");
+ if (thumbnails.length === 0) {
+ return
+ }
+ let containers = document.getElementsByClassName("posters-infinite-container");
+ if (containers.length === 0) {
+ return
+ }
+ let elementHeight = thumbnails[0].parentNode.clientHeight;
+ let elementWidth = thumbnails[0].parentNode.clientWidth;
+ let containerWidth = containers[0].clientWidth;
+ let elementPerRaw = Math.round(containerWidth/elementWidth);
+ let fakeElementHeight = Math.round(elementHeight/elementPerRaw);
+ this.setState({
+ elementHeight: elementHeight,
+ elementWidth: elementWidth,
+ containerWidth: containerWidth,
+ elementPerRaw: elementPerRaw,
+ fakeElementHeight: fakeElementHeight,
});
- elmts = filtered.map((el) => el.original);
- } else {
- // Get the page number if defined
- let page = 1;
- let perPage = props.perPage;
- if (props.params && props.params.page) {
- page = parseInt(props.params.page);
- }
-
- let from = 0;
- let to = perPage - 1;
- if (page > 1) {
- from = ((page - 1) * perPage) - 1;
- to = from + perPage;
- }
-
- // Limit the number of results
- if ((from + perPage) > elmts.length) {
- elmts = elmts.slice(from);
- } else {
- elmts = elmts.slice(from, to);
- }
+ }
+ componentDidMount() {
+ window.addEventListener("resize", this.updateDimensions);
+ this.updateDimensions();
+ }
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.updateDimensions);
}
- return (
-
-
-
- {elmts.map(function(el, index) {
- const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
- return (
-
props.onClick(el.imdb_id)}
- />
- )}
- )}
+ render() {
+ let elmts = this.props.data.slice();
+
+ // Filter the list of elements
+ if (this.props.filter !== "") {
+ const filtered = fuzzy.filter(this.props.filter, elmts, {
+ extract: (el) => el.title
+ });
+ elmts = filtered.map((el) => el.original);
+ }
+
+ return (
+
+
+
+ {elmts.map(function(el, index) {
+ const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false;
+ return (
+ this.props.onClick(el.imdb_id)}
+ />
+ )}
+ , this)}
+
-
- );
+ );
+ }
}
diff --git a/yarn.lock b/yarn.lock
index a1fd710..9a29bab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2253,7 +2253,7 @@ lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
-lodash.isarray@^3.0.0:
+lodash.isarray@^3.0.0, lodash.isarray@3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
@@ -2261,6 +2261,10 @@ lodash.isempty@^4.2.1, lodash.isempty@4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+lodash.isfinite@3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.2.0.tgz#aa69ffb93a37e82fab0ce18862655f9174ced339"
+
lodash.isplainobject@^4.0.4:
version "4.0.6"
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -2604,6 +2608,10 @@ object-assign@^4.0.1, object-assign@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+object-assign@4.0.1:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd"
+
object.omit@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -3087,6 +3095,14 @@ react-dom@^15.3.2:
version "15.3.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
+react-infinite:
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/react-infinite/-/react-infinite-0.10.0.tgz#04567469dd26b2f0d53bd9793bafbcd26e05c58b"
+ dependencies:
+ lodash.isarray "3.0.4"
+ lodash.isfinite "3.2.0"
+ object-assign "4.0.1"
+
react-loading:
version "0.0.9"
resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-0.0.9.tgz#e9fba6948915ba7742a508193828b6c73eb04956"