From 84ccc6e1ebb904704aa0a6ac29cfbb8d92e51876 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Tue, 25 Jun 2019 13:07:13 +0200
Subject: [PATCH] Remove the download button to add clickable badges

BTW, let's create a polochon metadata component
---
 frontend/js/components/buttons/download.js | 67 +++++++++++++---------
 frontend/js/components/buttons/polochon.js | 29 ++++++++++
 frontend/js/components/list/details.js     | 49 ++++++----------
 frontend/js/components/movies/buttons.js   |  7 ---
 frontend/js/components/shows/details.js    | 52 ++++++-----------
 frontend/scss/app.scss                     |  4 +-
 6 files changed, 108 insertions(+), 100 deletions(-)
 create mode 100644 frontend/js/components/buttons/polochon.js

diff --git a/frontend/js/components/buttons/download.js b/frontend/js/components/buttons/download.js
index ba4e40e..1b044b7 100644
--- a/frontend/js/components/buttons/download.js
+++ b/frontend/js/components/buttons/download.js
@@ -3,55 +3,68 @@ import PropTypes from "prop-types"
 import { List } from "immutable"
 
 import Modal  from "react-bootstrap/Modal"
-import Dropdown  from "react-bootstrap/Dropdown"
-import SplitButton  from "react-bootstrap/SplitButton"
 
-const DownloadButton = (props) => {
-  if (props.url === "") { return null; }
-  const size = props.xs ? "sm" : "";
+export const DownloadAndStream = ({ url, name, subtitles }) => {
+  if (!url || url === "") { return null; }
 
+  return (
+    <React.Fragment>
+      <DownloadButton url={url} />
+      <StreamButton url={url} name={name} subtitles={subtitles} />
+    </React.Fragment>
+  );
+}
+DownloadAndStream.propTypes = {
+  url: PropTypes.string,
+  name: PropTypes.string,
+  subtitles: PropTypes.instanceOf(List),
+};
+
+const DownloadButton = ({ url }) => (
+  <h5 className="d-inline">
+    <a href={url} className="badge badge-pill badge-primary m-1">
+      <span className="fa fa-download"> </span> Download
+    </a>
+  </h5>
+);
+DownloadButton.propTypes = { url: PropTypes.string.isRequired };
+
+const StreamButton = ({ name, url, subtitles }) => {
   const [showModal, setShowModal] = useState(false);
 
   return (
     <React.Fragment>
-      <SplitButton
-        drop="up"
-        variant="danger"
-        href={props.url}
-        title="Download"
-        size={size}
-        id="download-button-id">
-        <Dropdown.Item eventKey="1" onClick={() => setShowModal(true)}>
-          <span>
-            <i className="fa fa-globe"></i> Stream in browser
-          </span>
-        </Dropdown.Item>
-      </SplitButton>
+      <h5 className="d-inline">
+        <a
+          href="#"
+          className="badge badge-pill badge-primary m-1 clickable"
+          onClick={(e) => { e.preventDefault(); setShowModal(true) }}>
+          <span className="fa fa-play-circle"> </span> Play
+        </a>
+      </h5>
 
       <Modal show={showModal} onHide={() => setShowModal(false)} size="lg" centered>
-        <Modal.Header closeButton>{props.name}</Modal.Header>
+        <Modal.Header closeButton>{name}</Modal.Header>
         <Modal.Body>
-          <Player url={props.url} subtitles={props.subtitles} />
+          <Player url={url} subtitles={subtitles} />
         </Modal.Body>
       </Modal>
     </React.Fragment>
   );
 }
-DownloadButton.propTypes = {
-  name: PropTypes.string,
-  xs: PropTypes.bool,
+StreamButton.propTypes = {
+  name: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   subtitles: PropTypes.instanceOf(List),
 };
-export default DownloadButton;
 
-const Player = (props) => {
-  const subtitles = props.subtitles;
+
+const Player = ({ url, subtitles }) => {
   const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
   return (
     <div className="embed-responsive embed-responsive-16by9">
       <video className="embed-responsive-item" controls>
-        <source src={props.url} type="video/mp4"/>
+        <source src={url} type="video/mp4"/>
         {hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
           <track
             key={index}
diff --git a/frontend/js/components/buttons/polochon.js b/frontend/js/components/buttons/polochon.js
new file mode 100644
index 0000000..4c56e40
--- /dev/null
+++ b/frontend/js/components/buttons/polochon.js
@@ -0,0 +1,29 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const PolochonMetadata = (props) => {
+  if (!props.quality || props.quality === "") {
+    return null;
+  }
+
+  const badgeStyle = (props.light) ? "light" : "secondary";
+  const className = `mx-1 badge badge-pill badge-${badgeStyle}`;
+  return (
+    <React.Fragment>
+      <span className={className}>{props.quality}</span>
+      <span className={className}>{props.container} </span>
+      <span className={className}>{props.videoCodec}</span>
+      <span className={className}>{props.audioCodec}</span>
+      <span className={className}>{props.releaseGroup}</span>
+    </React.Fragment>
+  );
+}
+PolochonMetadata.propTypes = {
+  light: PropTypes.bool,
+  quality: PropTypes.string,
+  container: PropTypes.string,
+  videoCodec: PropTypes.string,
+  audioCodec: PropTypes.string,
+  releaseGroup: PropTypes.string,
+};
+
diff --git a/frontend/js/components/list/details.js b/frontend/js/components/list/details.js
index 4670db8..2b41018 100644
--- a/frontend/js/components/list/details.js
+++ b/frontend/js/components/list/details.js
@@ -2,6 +2,9 @@ import React from "react"
 import { Map, List } from "immutable"
 import PropTypes from "prop-types"
 
+import { PolochonMetadata } from "../buttons/polochon"
+import { DownloadAndStream } from "../buttons/download"
+
 const ListDetails = (props) => {
   if (props.loading) { return null }
   if (props.data === undefined) { return null }
@@ -24,13 +27,22 @@ const ListDetails = (props) => {
           rating={props.data.get("rating")}
           votes={props.data.get("votes")}
         />
-        <PolochonMetadata
-          quality={props.data.get("quality")}
-          releaseGroup={props.data.get("release_group")}
-          container={props.data.get("container")}
-          audioCodec={props.data.get("audio_codec")}
-          videoCodec={props.data.get("video_codec")}
-        />
+        <div>
+          <DownloadAndStream
+            url={props.data.get("polochon_url")}
+            name={props.data.get("title")}
+            subtitles={props.data.get("subtitles")}
+          />
+        </div>
+        <div>
+          <PolochonMetadata
+            quality={props.data.get("quality")}
+            releaseGroup={props.data.get("release_group")}
+            container={props.data.get("container")}
+            audioCodec={props.data.get("audio_codec")}
+            videoCodec={props.data.get("video_codec")}
+          />
+        </div>
         <p className="text text-break plot">{props.data.get("plot")}</p>
       </div>
       <div className="pb-1 align-self-end">
@@ -118,29 +130,6 @@ TrackingLabel.propTypes = {
   trackedEpisode: PropTypes.number,
 };
 
-const PolochonMetadata = (props) => {
-  if (!props.quality || props.quality === "") {
-    return null;
-  }
-
-  return (
-    <p className="spaced-icons">
-      <span className="mx-1 badge badge-pill badge-secondary">{props.quality}</span>
-      <span className="mx-1 badge badge-pill badge-secondary">{props.container} </span>
-      <span className="mx-1 badge badge-pill badge-secondary">{props.videoCodec}</span>
-      <span className="mx-1 badge badge-pill badge-secondary">{props.audioCodec}</span>
-      <span className="mx-1 badge badge-pill badge-secondary">{props.releaseGroup}</span>
-    </p>
-  );
-}
-PolochonMetadata.propTypes = {
-  quality: PropTypes.string,
-  container: PropTypes.string,
-  videoCodec: PropTypes.string,
-  audioCodec: PropTypes.string,
-  releaseGroup: PropTypes.string,
-};
-
 const Genres = (props) => {
   if (props.genres === undefined) {
     return null;
diff --git a/frontend/js/components/movies/buttons.js b/frontend/js/components/movies/buttons.js
index 621bb58..b910fad 100644
--- a/frontend/js/components/movies/buttons.js
+++ b/frontend/js/components/movies/buttons.js
@@ -2,7 +2,6 @@ import React from "react"
 import PropTypes from "prop-types"
 import { Map } from "immutable"
 
-import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
 import ImdbButton from "../buttons/imdb"
 import TorrentsButton from "./torrents"
@@ -30,12 +29,6 @@ const MovieButtons = (props)  => (
       addTorrent={props.addTorrent}
     />
 
-    <DownloadButton
-      name={props.movie.get("title")}
-      url={props.movie.get("polochon_url")}
-      subtitles={props.movie.get("subtitles")}
-    />
-
     {props.movie.get("polochon_url") !== "" &&
         <SubtitlesButton
           fetching={props.movie.get("fetchingSubtitles")}
diff --git a/frontend/js/components/shows/details.js b/frontend/js/components/shows/details.js
index 67c011a..578f8ad 100644
--- a/frontend/js/components/shows/details.js
+++ b/frontend/js/components/shows/details.js
@@ -7,8 +7,10 @@ import { addTorrent } from "../../actions/torrents"
 import { refreshSubtitles } from "../../actions/subtitles"
 import { addShowToWishlist, deleteShowFromWishlist, getEpisodeDetails, fetchShowDetails } from "../../actions/shows"
 
+import { DownloadAndStream } from "../buttons/download"
+import { PolochonMetadata } from "../buttons/polochon"
+
 import Loader from "../loader/loader"
-import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
 import ImdbButton from "../buttons/imdb"
 import RefreshIndicator from "../buttons/refresh"
@@ -183,38 +185,26 @@ Season.propTypes = {
   getEpisodeDetails: PropTypes.func,
 };
 
-const PolochonMetadata = (props) => {
-  if (!props.quality || props.quality === "") { return null }
-  return (
-    <span className="my-2 d-flex d-wrap">
-      <span className="badge badge-pill badge-light mx-1">{props.quality}</span>
-      <span className="badge badge-pill badge-light mx-1">{props.container} </span>
-      <span className="badge badge-pill badge-light mx-1">{props.videoCodec}</span>
-      <span className="badge badge-pill badge-light mx-1">{props.audioCodec}</span>
-      <span className="badge badge-pill badge-light mx-1">{props.releaseGroup}</span>
-    </span>
-  );
-}
-PolochonMetadata.propTypes = {
-  quality: PropTypes.string,
-  container: PropTypes.string,
-  videoCodec: PropTypes.string,
-  audioCodec: PropTypes.string,
-  releaseGroup: PropTypes.string,
-};
-
 const Episode = (props) => (
   <div className="d-flex flex-wrap flex-md-nowrap align-items-center">
     <TrackButton data={props.data} addToWishlist={props.addToWishlist} />
     <span className="mx-2 text">{props.data.get("episode")}</span>
     <span className="mx-2 text text-truncate flex-fill">{props.data.get("title")}</span>
-    <PolochonMetadata
-      quality={props.data.get("quality")}
-      releaseGroup={props.data.get("release_group")}
-      container={props.data.get("container")}
-      audioCodec={props.data.get("audio_codec")}
-      videoCodec={props.data.get("video_codec")}
-    />
+    <span>
+      <PolochonMetadata
+        quality={props.data.get("quality")}
+        releaseGroup={props.data.get("release_group")}
+        container={props.data.get("container")}
+        audioCodec={props.data.get("audio_codec")}
+        videoCodec={props.data.get("video_codec")}
+        light
+      />
+      <DownloadAndStream
+        name={`${props.showName} - S${pad(props.data.get("season"))}E${pad(props.data.get("episode"))}`}
+        url={props.data.get("polochon_url")}
+        subtitles={props.data.get("subtitles")}
+      />
+    </span>
     <div className="align-self-end btn-toolbar">
       {props.data.get("polochon_url") !== "" &&
           <SubtitlesButton
@@ -238,12 +228,6 @@ const Episode = (props) => (
           />
         )
       })}
-      <DownloadButton
-        name={`${props.showName} - S${pad(props.data.get("season"))}E${pad(props.data.get("episode"))}`}
-        url={props.data.get("polochon_url")}
-        subtitles={props.data.get("subtitles")}
-        xs
-      />
       <GetDetailsButtonWithRouter
         showName={props.showName}
         data={props.data}
diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 12e21d1..57d554a 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -77,7 +77,7 @@ div.show.dropdown.nav-item > div {
 
 .video-details {
     font-size: $font-size-sm;
-    p {
+    div, p {
         margin-bottom: .3rem;
     }
 
@@ -85,7 +85,7 @@ div.show.dropdown.nav-item > div {
 @include media-breakpoint-up(sm) {
     .video-details {
         font-size: $font-size-base;
-        p {
+        div, p {
             margin-bottom: $paragraph-margin-bottom;
         }
     }