From db521fff7655f06c6658839ce5679fa7bfa40eda Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 01:37:56 +0100
Subject: [PATCH 01/11] CSS text-ellipsis of item summary

---
 app/components/item/Item.js     | 11 +----------
 app/styles/components/Item.scss | 12 ++++++++++++
 app/styles/variables.scss       |  4 ----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index 6c33257b..252d35c0 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -103,8 +103,6 @@ export default class Item extends Component<Props, State> {
 
   checkCastingDevicesInterval: number;
 
-  SUMMARY_CHAR_LIMIT = 300;
-
   defaultTorrent: torrentSelectionType = {
     default: {
       quality: undefined,
@@ -919,14 +917,7 @@ export default class Item extends Component<Props, State> {
                   {item.genres && <h6>{item.genres.join(', ')}</h6>}
                 </span>
               </Row>
-              {/* HACK: Prefer a CSS solution to this, using text-overflow: ellipse */}
-              <h6 className="row-margin" id="summary">
-                {item.summary
-                  ? item.summary.length > this.SUMMARY_CHAR_LIMIT
-                    ? `${item.summary.slice(0, this.SUMMARY_CHAR_LIMIT)}...`
-                    : item.summary
-                  : ''}
-              </h6>
+              <h6 className="row-margin item__summary">{item.summary}</h6>
               <Row className="row-margin row-center Item--details">
                 {item.rating && typeof item.rating === 'number' && (
                   <Col sm="5">
diff --git a/app/styles/components/Item.scss b/app/styles/components/Item.scss
index 640a521c..088a59b4 100644
--- a/app/styles/components/Item.scss
+++ b/app/styles/components/Item.scss
@@ -48,6 +48,18 @@
     }
   }
 
+  //cf. https://codepen.io/martinwolf/pen/qlFdp
+  .item__summary {
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+    margin: 0 auto;
+    line-height: 2rem;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   > .row > .plyr {
     position: absolute;
     left: 0;
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 7833db2c..a3ba117a 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -83,10 +83,6 @@ $headings-font-weight: 400;
   margin: 20px 0;
 }
 
-#summary {
-  line-height: 2rem;
-}
-
 ::selection {
   background: black;
   color: white;

From 249d2cde5509d8c583b37427a410a1ba2d7855d3 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 01:39:50 +0100
Subject: [PATCH 02/11] No need to wrap event props

---
 app/components/item/Item.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index 252d35c0..28d0fef0 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -492,7 +492,7 @@ export default class Item extends Component<Props, State> {
     return [];
   }
 
-  stopPlayback() {
+  stopPlayback = () => {
     const { torrentInProgress, playbackInProgress, currentPlayer } = this.state;
     if (!torrentInProgress && !playbackInProgress) {
       return;
@@ -509,7 +509,7 @@ export default class Item extends Component<Props, State> {
     this.player.destroy();
     this.torrent.destroy();
     this.setState({ torrentInProgress: false });
-  }
+  };
 
   selectShow = (
     type: string,
@@ -621,7 +621,7 @@ export default class Item extends Component<Props, State> {
     return captions;
   }
 
-  closeVideo() {
+  closeVideo = () => {
     const { playbackInProgress } = this.state;
     if (!playbackInProgress) {
       return;
@@ -631,7 +631,7 @@ export default class Item extends Component<Props, State> {
     this.setState({
       currentPlayer: 'default'
     });
-  }
+  };
 
   toggleActive() {
     this.setState(prevState => ({
@@ -807,7 +807,7 @@ export default class Item extends Component<Props, State> {
             role="presentation"
             className="pct-btn pct-btn-tran pct-btn-outline pct-btn-round"
             data-e2e="item-button-back"
-            onClick={() => this.stopPlayback()}
+            onClick={this.stopPlayback}
           >
             <i className="ion-md-arrow-back" /> Back
           </span>
@@ -815,11 +815,6 @@ export default class Item extends Component<Props, State> {
         <Row>
           <Plyr
             captions={captions}
-            // captions={[{
-            //   kind: "captions",
-            //   label: "English captions",
-            //   src: 'http://localhost:4000/Deadpool.2.Super.Duper.Cut.2018.HDRip.XviD.AC3-EVO.vtt'
-            // }]}
             type="video"
             url={playbackInProgress ? servingUrl || item.trailer : undefined}
             poster={(item && item.images && item.images.fanart.full) || ''}
@@ -841,7 +836,7 @@ export default class Item extends Component<Props, State> {
               data-e2e="close-player"
               role="presentation"
               id="close-button"
-              onClick={() => this.closeVideo()}
+              onClick={this.closeVideo}
             >
               <i className="ion-md-close" />
             </span>

From 17c82b9e48c051039b159356da23b85fd9d91a72 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 10:09:51 +0100
Subject: [PATCH 03/11] Fix summary test

---
 test/e2e/HomePage.e2e.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/HomePage.e2e.js b/test/e2e/HomePage.e2e.js
index 6820b34c..41f3d7ad 100644
--- a/test/e2e/HomePage.e2e.js
+++ b/test/e2e/HomePage.e2e.js
@@ -56,7 +56,7 @@ test('it should navigate to item on CardList click', async t => {
     .contains('#/item/shows/')
     .expect(Selector('#title').visible)
     .ok()
-    .expect(Selector('#summary').visible)
+    .expect(Selector('.item__summary').visible)
     .ok();
 });
 

From 76cffaea861655e318c952f6457e47b729538edf Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 10:37:09 +0100
Subject: [PATCH 04/11] CSS solution for torrent health

---
 app/components/item/Item.js      | 19 +++++--------------
 app/styles/components/Movie.scss | 23 ++++++++++++++++-------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index 28d0fef0..0e810738 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -780,18 +780,10 @@ export default class Item extends Component<Props, State> {
 
     const { activeMode } = this.props;
 
-    const statusColorStyle = {
-      backgroundColor: (() => {
-        switch (idealTorrent && idealTorrent.health) {
-          case 'healthy':
-            return 'green';
-          case 'decent':
-            return 'yellow';
-          default:
-            return 'red';
-        }
-      })()
-    };
+    const torrentHealthClassName = classNames([
+      'torrent__health',
+      { [`torrent__health--${idealTorrent.health}`]: idealTorrent.health }
+    ]);
 
     const itemBackgroundUrl = {
       backgroundImage: `url(${item.images.fanart.full})`
@@ -938,8 +930,7 @@ export default class Item extends Component<Props, State> {
                   <div
                     id="magnetPopoverOpen"
                     data-e2e="item-magnet-torrent-health-popover"
-                    className="Movie--status"
-                    style={statusColorStyle}
+                    className={torrentHealthClassName}
                   />
                   <Tooltip
                     placement="top"
diff --git a/app/styles/components/Movie.scss b/app/styles/components/Movie.scss
index 748d0704..fc5bee79 100644
--- a/app/styles/components/Movie.scss
+++ b/app/styles/components/Movie.scss
@@ -16,6 +16,22 @@
     padding: 3px 9px;
   }
 
+  .torrent__health {
+    height: 10px;
+    width: 10px;
+    border-radius: 100%;
+    margin: 10px;
+    background-color: red;
+  }
+
+  .torrent__health--healthy {
+    background-color: green;
+  }
+
+  .torrent__health--decent {
+    background-color: yellow;
+  }
+
   .Movie--poster-image {
     width: 100%;
     position: absolute;
@@ -23,13 +39,6 @@
     z-index: -1;
   }
 
-  .Movie--status {
-    height: 10px;
-    width: 10px;
-    border-radius: 100%;
-    margin: 10px;
-  }
-
   i {
     color: white;
   }

From 856a195b308f622743fdb724c758bfea38e4c524 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 10:47:04 +0100
Subject: [PATCH 05/11] Use uncontrolled tooltip

---
 app/components/item/Item.js | 28 ++++++----------------------
 1 file changed, 6 insertions(+), 22 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index 0e810738..ef12866a 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -4,14 +4,14 @@
  */
 import React, { Component } from 'react';
 import {
-  Tooltip,
   Dropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
   Container,
   Row,
-  Col
+  Col,
+  UncontrolledTooltip
 } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
@@ -75,7 +75,6 @@ type State = {
   fetchingTorrents: boolean,
   dropdownOpen: boolean,
   idealTorrent: torrentType,
-  magnetPopoverOpen: boolean,
   torrent: torrentSelectionType,
   servingUrl: string,
   similarLoading: boolean,
@@ -165,7 +164,6 @@ export default class Item extends Component<Props, State> {
     episode: {},
     castingDevices: [],
     currentPlayer: 'default',
-    magnetPopoverOpen: false,
     playbackInProgress: false,
     fetchingTorrents: false,
     idealTorrent: this.defaultTorrent,
@@ -639,12 +637,6 @@ export default class Item extends Component<Props, State> {
     }));
   }
 
-  toggleStateProperty(property: string) {
-    this.setState(prevState => ({
-      [property]: !prevState[property]
-    }));
-  }
-
   async startPlayback(
     magnet?: string,
     activeMode?: string,
@@ -772,8 +764,6 @@ export default class Item extends Component<Props, State> {
       playbackInProgress,
       favorites,
       watchList,
-      magnetPopoverOpen,
-      trailerPopoverOpen,
       castingDevices,
       captions
     } = this.state;
@@ -932,17 +922,15 @@ export default class Item extends Component<Props, State> {
                     data-e2e="item-magnet-torrent-health-popover"
                     className={torrentHealthClassName}
                   />
-                  <Tooltip
+                  <UncontrolledTooltip
                     placement="top"
-                    isOpen={magnetPopoverOpen || false}
                     target="magnetPopoverOpen"
-                    toggle={() => this.toggleStateProperty('magnetPopoverOpen')}
                   >
                     {idealTorrent && idealTorrent.seeders
                       ? idealTorrent.seeders
                       : 0}{' '}
                     Seeders
-                  </Tooltip>
+                  </UncontrolledTooltip>
                 </Col>
 
                 {process.env.NODE_ENV === 'test' &&
@@ -956,16 +944,12 @@ export default class Item extends Component<Props, State> {
                         onClick={() => this.setPlayer('youtube')}
                         role="presentation"
                       />
-                      <Tooltip
+                      <UncontrolledTooltip
                         placement="top"
-                        isOpen={trailerPopoverOpen || false}
                         target="trailerPopoverOpen"
-                        toggle={() =>
-                          this.toggleStateProperty('trailerPopoverOpen')
-                        }
                       >
                         Trailer
-                      </Tooltip>
+                      </UncontrolledTooltip>
                     </Col>
                   )}
               </Row>

From 60b89fd36350c0fe8175ee79cfc0ceb1e029501c Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 10:49:52 +0100
Subject: [PATCH 06/11] Use uncontrolled dropdown

---
 app/components/item/Item.js | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index ef12866a..e21c1334 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -4,7 +4,7 @@
  */
 import React, { Component } from 'react';
 import {
-  Dropdown,
+  UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
@@ -73,7 +73,6 @@ type State = {
   currentPlayer: playerType,
   playbackInProgress: boolean,
   fetchingTorrents: boolean,
-  dropdownOpen: boolean,
   idealTorrent: torrentType,
   torrent: torrentSelectionType,
   servingUrl: string,
@@ -155,7 +154,6 @@ export default class Item extends Component<Props, State> {
       }
     },
     servingUrl: undefined,
-    dropdownOpen: false,
     isFinished: false,
     selectedSeason: 1,
     selectedEpisode: 1,
@@ -214,12 +212,6 @@ export default class Item extends Component<Props, State> {
     this.setState({ currentPlayer: player });
   }
 
-  toggle() {
-    this.setState(prevState => ({
-      dropdownOpen: !prevState.dropdownOpen
-    }));
-  }
-
   async componentDidMount() {
     const { itemId } = this.props;
     window.scrollTo(0, 0);
@@ -234,7 +226,6 @@ export default class Item extends Component<Props, State> {
 
     this.setState({
       ...this.initialState,
-      dropdownOpen: false,
       currentPlayer: 'default',
       favorites: await this.butter.favorites('get'),
       watchList: await this.butter.watchList('get')
@@ -752,7 +743,6 @@ export default class Item extends Component<Props, State> {
       servingUrl,
       torrentInProgress,
       fetchingTorrents,
-      dropdownOpen,
       currentPlayer,
       seasons,
       selectedSeason,
@@ -961,11 +951,7 @@ export default class Item extends Component<Props, State> {
 
         <Row className="row-margin">
           <Col sm="2">
-            <Dropdown
-              style={{ float: 'left' }}
-              isOpen={dropdownOpen}
-              toggle={() => this.toggle()}
-            >
+            <UncontrolledDropdown style={{ float: 'left' }}>
               <DropdownToggle caret>
                 {currentPlayer || 'default'}
               </DropdownToggle>
@@ -998,7 +984,7 @@ export default class Item extends Component<Props, State> {
                   </DropdownItem>
                 ))}
               </DropdownMenu>
-            </Dropdown>
+            </UncontrolledDropdown>
           </Col>
           <Col sm="10">
             {process.env.FLAG_MANUAL_TORRENT_SELECTION === 'true' && (

From b8932400e0f13f1f73ac922f59c14f1ad8e08c76 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 11:17:04 +0100
Subject: [PATCH 07/11] Read playback information from state directly

---
 app/components/item/Item.js | 66 +++++++++++++------------------------
 1 file changed, 22 insertions(+), 44 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index e21c1334..8de4e7c5 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -628,19 +628,24 @@ export default class Item extends Component<Props, State> {
     }));
   }
 
-  async startPlayback(
-    magnet?: string,
-    activeMode?: string,
-    currentPlayer: playerType
-  ) {
+  startPlayback = async ({
+    target: { name: playbackQuality }
+  }: Event<HTMLButtonElement>) => {
     const {
+      currentPlayer,
       torrentInProgress,
       selectedEpisode,
       selectedSeason,
       item,
-      captions
+      captions,
+      torrent,
+      idealTorrent
     } = this.state;
 
+    const { magnet, method: activeMode } = playbackQuality
+      ? torrent[playbackQuality]
+      : idealTorrent;
+
     if (torrentInProgress) {
       this.stopPlayback();
     }
@@ -672,7 +677,7 @@ export default class Item extends Component<Props, State> {
         servingUrl: string,
         file: { name: string },
         files: string,
-        torrent: string
+        torrentHash: string
       ) => {
         console.log(`Serving torrent at: ${servingUrl}`);
 
@@ -727,13 +732,13 @@ export default class Item extends Component<Props, State> {
           servingUrl
         });
 
-        return torrent;
+        return torrentHash;
       },
       downloaded => {
         console.log('DOWNLOADING', downloaded);
       }
     );
-  }
+  };
 
   render() {
     const {
@@ -820,26 +825,14 @@ export default class Item extends Component<Props, State> {
                 <div
                   role="presentation"
                   className="Item--play"
-                  onClick={() =>
-                    this.startPlayback(
-                      idealTorrent.magnet,
-                      idealTorrent.method,
-                      currentPlayer
-                    )
-                  }
+                  onClick={this.startPlayback}
                 >
                   {idealTorrent.magnet && (
                     <i
                       role="presentation"
                       data-e2e="item-play-button"
                       className="Item--icon-play ion-md-play"
-                      onClick={() =>
-                        this.startPlayback(
-                          idealTorrent.magnet,
-                          idealTorrent.method,
-                          currentPlayer
-                        )
-                      }
+                      onClick={this.startPlayback}
                     />
                   )}
                 </div>
@@ -991,26 +984,16 @@ export default class Item extends Component<Props, State> {
               <span>
                 <button
                   type="button"
-                  onClick={() =>
-                    this.startPlayback(
-                      torrent['1080p'].magnet,
-                      torrent['1080p'].method,
-                      currentPlayer
-                    )
-                  }
+                  name="1080p"
+                  onClick={this.startPlayback}
                   disabled={!torrent['1080p'].quality}
                 >
                   Start 1080p -- {torrent['1080p'].seeders} seeders
                 </button>
                 <button
                   type="button"
-                  onClick={() =>
-                    this.startPlayback(
-                      torrent['720p'].magnet,
-                      torrent['720p'].method,
-                      currentPlayer
-                    )
-                  }
+                  name="720p"
+                  onClick={this.startPlayback}
                   disabled={!torrent['720p'].quality}
                 >
                   Start 720p -- {torrent['720p'].seeders} seeders
@@ -1018,13 +1001,8 @@ export default class Item extends Component<Props, State> {
                 {activeMode === 'shows' && (
                   <button
                     type="button"
-                    onClick={() =>
-                      this.startPlayback(
-                        torrent['480p'].magnet,
-                        torrent['480p'].method,
-                        currentPlayer
-                      )
-                    }
+                    name="480p"
+                    onClick={this.startPlayback}
                     disabled={!torrent['480p'].quality}
                   >
                     Start 480p -- {torrent['480p'].seeders} seeders

From aac4cddffeef0a7f3aa09c9fc463f781b5768e7c Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 21:46:15 +0100
Subject: [PATCH 08/11] description component

---
 app/components/item/Item.js        | 104 ++++-----------------------
 app/components/item/description.js | 108 +++++++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 89 deletions(-)
 create mode 100644 app/components/item/description.js

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index 8de4e7c5..e24fd44e 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -10,8 +10,7 @@ import {
   DropdownItem,
   Container,
   Row,
-  Col,
-  UncontrolledTooltip
+  Col
 } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
@@ -21,7 +20,7 @@ import Plyr from '@amilajack/react-plyr';
 import yifysubtitles from '@amilajack/yifysubtitles';
 import CardList from '../card/CardList';
 import SaveItem from '../metadata/SaveItem';
-import Rating from '../card/Rating';
+import Description from './description';
 import Show from '../show/Show';
 import ChromecastPlayerProvider from '../../api/players/ChromecastPlayerProvider';
 import { getIdealTorrent } from '../../api/torrents/BaseTorrentProvider';
@@ -765,11 +764,6 @@ export default class Item extends Component<Props, State> {
 
     const { activeMode } = this.props;
 
-    const torrentHealthClassName = classNames([
-      'torrent__health',
-      { [`torrent__health--${idealTorrent.health}`]: idealTorrent.health }
-    ]);
-
     const itemBackgroundUrl = {
       backgroundImage: `url(${item.images.fanart.full})`
     };
@@ -857,87 +851,19 @@ export default class Item extends Component<Props, State> {
                 watchList={watchList}
               />
             </Col>
-
-            <Col sm="6" className="Movie">
-              <h1 className="row-margin" id="title">
-                {item.title}
-              </h1>
-              <Row>
-                {item.runtime && item.runtime.hours && item.runtime.minutes && (
-                  <span className="col-sm-3" id="runtime">
-                    <h6>
-                      {item.runtime.hours ? `${item.runtime.hours} hrs ` : ''}
-                      {item.runtime.minutes
-                        ? `${item.runtime.minutes} min`
-                        : ''}
-                    </h6>
-                  </span>
-                )}
-                <span className="col-sm-9" id="genres">
-                  {item.genres && <h6>{item.genres.join(', ')}</h6>}
-                </span>
-              </Row>
-              <h6 className="row-margin item__summary">{item.summary}</h6>
-              <Row className="row-margin row-center Item--details">
-                {item.rating && typeof item.rating === 'number' && (
-                  <Col sm="5">
-                    <Rating
-                      emptyStarColor="rgba(255, 255, 255, 0.2)"
-                      starColor="white"
-                      rating={item.rating}
-                    />
-                  </Col>
-                )}
-                <Col sm="2">
-                  <span data-e2e="item-year">{item.year}</span>
-                </Col>
-
-                {item && item.certification && item.certification !== 'n/a' && (
-                  <Col sm="3">
-                    <div className="certification">{item.certification}</div>
-                  </Col>
-                )}
-
-                <Col sm="2" className="row-center">
-                  <i className="ion-md-magnet" />
-                  <div
-                    id="magnetPopoverOpen"
-                    data-e2e="item-magnet-torrent-health-popover"
-                    className={torrentHealthClassName}
-                  />
-                  <UncontrolledTooltip
-                    placement="top"
-                    target="magnetPopoverOpen"
-                  >
-                    {idealTorrent && idealTorrent.seeders
-                      ? idealTorrent.seeders
-                      : 0}{' '}
-                    Seeders
-                  </UncontrolledTooltip>
-                </Col>
-
-                {process.env.NODE_ENV === 'test' &&
-                  item.trailer &&
-                  item.trailer !== 'n/a' && (
-                    <Col sm="3" className="row-center">
-                      <i
-                        id="trailerPopoverOpen"
-                        data-e2e="item-trailer-button"
-                        className="ion-md-videocam"
-                        onClick={() => this.setPlayer('youtube')}
-                        role="presentation"
-                      />
-                      <UncontrolledTooltip
-                        placement="top"
-                        target="trailerPopoverOpen"
-                      >
-                        Trailer
-                      </UncontrolledTooltip>
-                    </Col>
-                  )}
-              </Row>
-            </Col>
-
+            <Description
+              certification={item.certification}
+              genres={item.genres}
+              nrSeeders={idealTorrent.seeders}
+              onTrailerClick={() => this.setPlayer('youtube')}
+              rating={item.rating}
+              runtime={item.runtime}
+              summary={item.summary}
+              title={item.title}
+              torrentHeath={idealTorrent.health}
+              trailer={item.trailer}
+              year={item.year}
+            />
             <div className="Item--overlay" />
           </Col>
         </Row>
diff --git a/app/components/item/description.js b/app/components/item/description.js
new file mode 100644
index 00000000..be1b194b
--- /dev/null
+++ b/app/components/item/description.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Row, Col, UncontrolledTooltip } from 'reactstrap';
+
+import Rating from '../card/Rating';
+
+type Props = {
+  title: string,
+  runtime: Object,
+  genres: Array,
+  summary: string,
+  rating: number,
+  onTrailerClick: Function,
+  year: number,
+  torrentHealth: string,
+  certification: string,
+  nrSeeders: number,
+  trailer: string
+};
+
+export default function Description({
+  title,
+  runtime,
+  genres,
+  summary,
+  rating = 'n/a',
+  onTrailerClick,
+  year,
+  torrentHealth,
+  certification,
+  nrSeeders = 0,
+  trailer
+}: Props) {
+  const torrentHealthClassName = classNames([
+    'torrent__health',
+    { [`torrent__health--${torrentHealth}`]: torrentHealth }
+  ]);
+
+  return (
+    <Col sm="6" className="Movie">
+      <h1 className="row-margin" id="title">
+        {title}
+      </h1>
+      <Row>
+        {(runtime.hours || runtime.minutes) && (
+          <span className="col-sm-3" id="runtime">
+            <h6>
+              {runtime.hours ? `${runtime.hours} hrs ` : ''}
+              {runtime.minutes ? `${runtime.minutes} min` : ''}
+            </h6>
+          </span>
+        )}
+        <span className="col-sm-9" id="genres">
+          {genres && <h6>{genres.join(', ')}</h6>}
+        </span>
+      </Row>
+      <h6 className="row-margin item__summary">{summary}</h6>
+      <Row className="row-margin row-center Item--details">
+        {rating && typeof rating === 'number' && (
+          <Col sm="5">
+            <Rating
+              emptyStarColor="rgba(255, 255, 255, 0.2)"
+              starColor="white"
+              rating={rating}
+            />
+          </Col>
+        )}
+        <Col sm="2">
+          <span data-e2e="item-year">{year}</span>
+        </Col>
+
+        {certification && certification !== 'n/a' && (
+          <Col sm="3">
+            <div className="certification">{certification}</div>
+          </Col>
+        )}
+
+        <Col sm="2" className="row-center">
+          <i className="ion-md-magnet" />
+          <div
+            id="magnetPopoverOpen"
+            data-e2e="item-magnet-torrent-health-popover"
+            className={torrentHealthClassName}
+          />
+          <UncontrolledTooltip placement="top" target="magnetPopoverOpen">
+            {nrSeeders}
+            {' Seeders'}
+          </UncontrolledTooltip>
+        </Col>
+
+        {process.env.NODE_ENV === 'test' && trailer !== 'n/a' && (
+          <Col sm="3" className="row-center">
+            <i
+              id="trailerPopoverOpen"
+              data-e2e="item-trailer-button"
+              className="ion-md-videocam"
+              onClick={onTrailerClick}
+              role="presentation"
+            />
+            <UncontrolledTooltip placement="top" target="trailerPopoverOpen">
+              Trailer
+            </UncontrolledTooltip>
+          </Col>
+        )}
+      </Row>
+    </Col>
+  );
+}

From 06722e26fde415bb97d7e02fa078761764cacf24 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 22:32:41 +0100
Subject: [PATCH 09/11] Remove unused state vars

---
 app/components/item/Item.js | 33 ++++++---------------------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index e24fd44e..afb21f8e 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -66,7 +66,6 @@ type State = {
   selectedEpisode: number,
   seasons: [],
   season: [],
-  episode: {},
   episodes: [],
   castingDevices: Array<deviceType>,
   currentPlayer: playerType,
@@ -76,7 +75,6 @@ type State = {
   torrent: torrentSelectionType,
   servingUrl: string,
   similarLoading: boolean,
-  metadataLoading: boolean,
   torrentInProgress: boolean,
   torrentProgress: number,
   isFinished: boolean,
@@ -272,40 +270,22 @@ export default class Item extends Component<Props, State> {
     ]);
   }
 
-  async getShowData(
-    type: string,
-    imdbId: string,
-    season?: number,
-    episode?: number
-  ) {
+  async getShowData(type: string, imdbId: string, season?: number) {
     switch (type) {
       case 'seasons':
-        this.setState({ seasons: [], episodes: [], episode: {} });
+        this.setState({ seasons: [], episodes: [] });
         this.setState({
           seasons: await this.butter.getSeasons(imdbId),
-          episodes: await this.butter.getSeason(imdbId, 1),
-          episode: await this.butter.getEpisode(imdbId, 1, 1)
+          episodes: await this.butter.getSeason(imdbId, 1)
         });
         break;
       case 'episodes':
         if (!season) {
           throw new Error('"season" not provided to getShowData()');
         }
-        this.setState({ episodes: [], episode: {} });
-        this.setState({
-          episodes: await this.butter.getSeason(imdbId, season),
-          episode: await this.butter.getEpisode(imdbId, season, 1)
-        });
-        break;
-      case 'episode':
-        if (!season || !episode) {
-          throw new Error(
-            '"season" or "episode" not provided to getShowData()'
-          );
-        }
-        this.setState({ episode: {} });
+        this.setState({ episodes: [] });
         this.setState({
-          episode: await this.butter.getEpisode(imdbId, season, episode)
+          episodes: await this.butter.getSeason(imdbId, season)
         });
         break;
       default:
@@ -318,7 +298,6 @@ export default class Item extends Component<Props, State> {
    */
   async getItem(imdbId: string) {
     const { activeMode } = this.props;
-    this.setState({ metadataLoading: true });
 
     const item = await (() => {
       switch (activeMode) {
@@ -331,7 +310,7 @@ export default class Item extends Component<Props, State> {
       }
     })();
 
-    this.setState({ item, metadataLoading: false });
+    this.setState({ item });
 
     return item;
   }

From edf5e9244626c6d0236091a949265eb8b7317f4e Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 23:00:32 +0100
Subject: [PATCH 10/11] use data-e2e attribute

---
 app/components/item/description.js | 4 +++-
 test/e2e/HomePage.e2e.js           | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/item/description.js b/app/components/item/description.js
index be1b194b..88e5b39a 100644
--- a/app/components/item/description.js
+++ b/app/components/item/description.js
@@ -54,7 +54,9 @@ export default function Description({
           {genres && <h6>{genres.join(', ')}</h6>}
         </span>
       </Row>
-      <h6 className="row-margin item__summary">{summary}</h6>
+      <h6 data-e2e="summary" className="row-margin item__summary">
+        {summary}
+      </h6>
       <Row className="row-margin row-center Item--details">
         {rating && typeof rating === 'number' && (
           <Col sm="5">
diff --git a/test/e2e/HomePage.e2e.js b/test/e2e/HomePage.e2e.js
index 41f3d7ad..b3167b67 100644
--- a/test/e2e/HomePage.e2e.js
+++ b/test/e2e/HomePage.e2e.js
@@ -56,7 +56,7 @@ test('it should navigate to item on CardList click', async t => {
     .contains('#/item/shows/')
     .expect(Selector('#title').visible)
     .ok()
-    .expect(Selector('.item__summary').visible)
+    .expect(Selector('[data-e2e="summary"]').visible)
     .ok();
 });
 

From a19a1a099307548d8ca80edd29513740f8f070d2 Mon Sep 17 00:00:00 2001
From: Pedro Abreu <pmig.abreu@gmail.com>
Date: Sun, 21 Apr 2019 23:20:26 +0100
Subject: [PATCH 11/11] Capitalize react component filename

---
 app/components/item/{description.js => Description.js} | 0
 app/components/item/Item.js                            | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/components/item/{description.js => Description.js} (100%)

diff --git a/app/components/item/description.js b/app/components/item/Description.js
similarity index 100%
rename from app/components/item/description.js
rename to app/components/item/Description.js
diff --git a/app/components/item/Item.js b/app/components/item/Item.js
index afb21f8e..472c1f7e 100644
--- a/app/components/item/Item.js
+++ b/app/components/item/Item.js
@@ -20,7 +20,7 @@ import Plyr from '@amilajack/react-plyr';
 import yifysubtitles from '@amilajack/yifysubtitles';
 import CardList from '../card/CardList';
 import SaveItem from '../metadata/SaveItem';
-import Description from './description';
+import Description from './Description';
 import Show from '../show/Show';
 import ChromecastPlayerProvider from '../../api/players/ChromecastPlayerProvider';
 import { getIdealTorrent } from '../../api/torrents/BaseTorrentProvider';