Add new torrent button in movies view

src/public/js/components/movies/list.js

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import TorrentsButton from './torrents'
 import ListPosters from '../list/posters'
 import ListDetails from '../list/details'
 import Loader from '../loader/loader'
@@ -37,13 +38,11 @@ class MovieButtons extends React.Component {
             <i className="fa fa-download"></i> Download
           </a>
         }
-        {this.props.movie.torrents && this.props.movie.torrents.map(function(torrent, index) {
-          return (
-            <a key={torrent.url} type="button" className="btn btn-primary btn-sm" href={torrent.url}>
-              <i className="fa fa-download"></i> {torrent.quality} Torrent
-            </a>
-          )}
-        )}
+
+        {this.props.movie.torrents &&
+            <TorrentsButton torrents={this.props.movie.torrents} />
+        }
+
         <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
           <i className="fa fa-external-link"></i> IMDB
         </a>

src/public/js/components/movies/torrents.js

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import { DropdownButton, MenuItem } from 'react-bootstrap'
+
+export default function TorrentsButton(props) {
+  const entries = buildMenuItems(props.torrents);
+  return (
+    <DropdownButton className="btn btn-default btn-sm" title="Torrents" dropup id="download-torrents-button">
+      {entries.map(function(e, index) {
+        switch (e.type) {
+          case 'header':
+            return (
+              <MenuItem key={index} className="text-warning" header>{e.value}</MenuItem>
+            );
+          case 'divider':
+            return (
+              <MenuItem key={index} divider></MenuItem>
+            );
+          case 'entry':
+            return (
+              <MenuItem key={index}>{e.quality}</MenuItem>
+            );
+        }
+      })}
+    </DropdownButton>
+  );
+}
+
+function buildMenuItems(torrents) {
+  // Organise by source
+  let sources = {}
+  for (let torrent of torrents) {
+    if (!sources[torrent.source]) {
+      sources[torrent.source] = [];
+    }
+    sources[torrent.source].push(torrent);
+  }
+
+  // Build the array of entries
+  let entries = [];
+  let sourceNames = Object.keys(sources);
+  let dividerCount = sourceNames.length - 1;
+  for (let source of sourceNames) {
+    // Push the title
+    entries.push({
+      type: "header",
+      value: source,
+    });
+
+    // Push the torrents
+    for (let torrent of sources[source]) {
+      entries.push({
+        type: "entry",
+        quality: torrent.quality,
+        url: torrent.url,
+      });
+    }
+
+    // Push the divider
+    if (dividerCount > 0) {
+      dividerCount--;
+      entries.push({ type: "divider" });
+    }
+  }
+
+  return entries;
+}