Add prettify behavior on Row & Film 💅

* Fix Row rerender
* Fix Grid loading
* Fix webpack memory leak

Author: thcolin

README.md

@@ -200,7 +200,7 @@ Tips: Sensorr will use your `config.js` and fallback on default
 * `WebUI`
   * Fix
     * Remove `aphrodite`
-    * Migrate from `webpack` to `parcel` ?
+    * Refactor `config` to `settings` using [mozilla/node-convict](https://github.com/mozilla/node-convict)
     * Look at [`react-slot-fill`](https://github.com/camwest/react-slot-fill)
     * Fix empty `Film` link, cf. `/movies/search/Thomas Crown`
     * Fix `order=release_date`, cf. `/star/19274`
@@ -216,11 +216,6 @@ Tips: Sensorr will use your `config.js` and fallback on default
       * Show/Hide results on `focus/blur` - ?
       * Add right `select` `in [All|Movie|Collection|Star]` - ? (see [inspiration](https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/4b75c062431121.5a990e65204e6.png))
       * Display grouped results as a small `List`, not `Row`
-    * `Row`
-      * Beautify `n` firsts
-        * Use offset (see [inspiration](https://dribbble.com/shots/2647399-Sneak-Peek-Unique-UI))
-        * Use `backdrop_path` (blurred ? see [inspiration](https://dribbble.com/shots/4525124-Online-streaming-Web-App-UI))
-        * Use custom colors (use `react-image-palette`, see [inspiration](https://dribbble.com/shots/4859422-Lights-Camera-Cinero))
     * Add contextual data on `Film` & `Persona` when filtered or sorted
       * Add `label` "tag" on left (with emoji ?) - ?
       * `:hover`, bottom to top animation revealing overlay (see [inspiration](https://dribbble.com/shots/4649643-Cinematic-UI))
@@ -233,6 +228,11 @@ Tips: Sensorr will use your `config.js` and fallback on default
         * Improve `Row` integration (see [inspiration](https://dribbble.com/shots/4131890-Cinema-Website))
       * Improve `Button` (& global layout, see [inspiration](https://dribbble.com/shots/5532138-UI-Design-002-Minions)) colors with `picked` colors from `poster` (use `react-image-palette`, see [inspiration](https://dribbble.com/shots/4859422-Lights-Camera-Cinero))
       * Add `keywords`
+      * Add `policies`
+        * `Checkbox` displayed as grid or column
+          * After `Row` ? - Bad UX, far away from `state`
+        * Create `policy` option (will copy/paste `default`)
+        * Edit `policy` link
     * `Upcoming`
       * Improve performance
       * Add release day as contextual data on `Film`

package.json

@@ -24,6 +24,7 @@
     "atob": "2.1.2",
     "body-parser": "1.19.0",
     "chalk": "2.4.2",
+    "color": "^3.1.2",
     "compression": "1.7.4",
     "core-js": "3.2.1",
     "country-emoji": "1.4.4",
@@ -82,6 +83,7 @@
     "universal-rxjs-ajax": "2.0.3",
     "universal-url": "2.0.0",
     "uuid": "3.3.3",
+    "worker-plugin": "^3.2.0",
     "xml2json-light": "1.0.6"
   },
   "devDependencies": {

shared/Documents.js

@@ -7,6 +7,24 @@ class Movie {
     this.countries = ['US', 'UK', region.split('-').pop()]
   }
 
+  judge() {
+    const { vote_average } = this.payload
+
+    if (!vote_average) {
+      return '🤷'
+    } else if (vote_average < 5) {
+      return '👎'
+    } else if (vote_average < 7) {
+      return '👍'
+    } else if (vote_average < 7.5) {
+      return '👏'
+    } else if (vote_average < 8) {
+      return '🙌'
+    } else {
+      return '🙏'
+    }
+  }
+
   normalize() {
     return {
       id: this.payload.id.toString(),

shared/utils/string.js

@@ -9,4 +9,17 @@ module.exports = {
     .replace(/[^\sa-zA-Z0-9]/g, ' ')
     .replace(/ +/g, ' ')
     .trim(),
+  truncate: (str, limit = 300, options = { ellipsis: '...' }) => {
+    const sentences = str.split(/[\.\,\;\?\!]+/)
+    const position = Math.abs(sentences.reduce((length, sentence) =>
+      length < 0 ?
+      length :
+      limit > length + sentence.length ?
+      length + sentence.length + 1 :
+      -Math.abs(length),
+      0,
+    ))
+
+    return position === str.length ? str : `${str.substring(0, position - 1).trimEnd()}${options.ellipsis}`
+  },
 }

src/components/Empty.js

@@ -28,11 +28,11 @@ const styles = {
   }
 }
 
-const Empty = ({ style, emoji, title, subtitle, ...props }) => (
-  <div style={{ ...styles.element, ...style }}>
-    <h1 style={styles.emoji}>{emoji}</h1>
-    <h2 style={styles.title}>{title}</h2>
-    <p style={styles.subtitle}>{subtitle}</p>
+const Empty = ({ emoji, title, subtitle, ...props }) => (
+  <div {...props} css={[styles.element, props.css]}>
+    <h1 css={styles.emoji}>{emoji}</h1>
+    <h2 css={styles.title}>{title}</h2>
+    <p css={styles.subtitle}>{subtitle}</p>
   </div>
 )