Add icon to copy magnet URL to clipboard

README.md

@@ -63,6 +63,8 @@ The torrent data is updated daily, and to do so, run, or place this in a crontab
 
 This updates the repository, and rebuilds the sqlite cache necessary for searching.
 
+To re-build the frontend assets, use `cd server/ui && yarn build`. There is no need to restart the `./webserver.sh` script.
+
 ## Command Line Searching
 
 ### Requirements

server/ui/src/components/search.tsx

@@ -153,6 +153,13 @@ export class Search extends Component<any, State> {
                   {moment(torrent.scraped_date * 1000).fromNow()}
                 </td>
                 <td class="text-right">
+                  <span class="btn btn-sm no-outline px-1"
+                    data-balloon="Copy Magnet link to clipboard"
+                    data-balloon-pos="left"
+                    data-href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)}
+                    onClick={this.copyLink}>
+                    <svg class="icon icon-copy"><use xlinkHref="#icon-copy"></use></svg>
+                  </span>
                   <a class="btn btn-sm no-outline px-1"
                     href={magnetLink(torrent.infohash, (torrent.name) ? torrent.name : torrent.path, torrent.index_)}
                     data-balloon="Magnet link"
@@ -202,4 +209,14 @@ export class Search extends Component<any, State> {
     newSearch.page += (a.nextPage) ? 1 : -1;
     a.i.props.history.push(`/search/${newSearch.type_}/${newSearch.q}/${newSearch.page}`);
   }
+
+  copyLink(evt) {
+    const href = evt.currentTarget.dataset.href;
+    try {
+      navigator.clipboard.writeText(href)
+        .then(() => alert("Copied magnet URL to clipboard"));
+    } catch(err) {
+      alert("Could not copy magnet URL: " + href)
+    }
+  }
 }

server/ui/src/index.tsx

@@ -61,6 +61,9 @@ class Index extends Component<any, any> {
 <title>spinner</title>
 <path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
 </symbol>
+<symbol id="icon-copy" viewBox="0 0 32 32">
+  <path d="M20 8v-8h-14l-6 6v18h12v8h20v-24h-12zM6 2.828v3.172h-3.172l3.172-3.172zM2 22v-14h6v-6h10v6l-6 6v8h-10zM18 10.828v3.172h-3.172l3.172-3.172zM30 30h-16v-14h6v-6h10v20z"></path>
+</symbol>
 </defs>
 </svg>
   );