Remove the download button to add clickable badges

BTW, let's create a polochon metadata component

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}

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,
+};
+

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,6 +27,14 @@ const ListDetails = (props) => {
           rating={props.data.get("rating")}
           votes={props.data.get("votes")}
         />
+        <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")}
@@ -31,6 +42,7 @@ const ListDetails = (props) => {
             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;

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")}

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>
+    <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}

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;
         }
     }