Demagnetizr - Tweetable magnet urls

Demagnetizr - Tweetable Magnet URLs

Demo

Donwloadable/tweetable torrent of M.I.A's Piracy Funds Terrorism

The problem

Many web and desktop applications turn a URL in the text you type into a clickable link. Some (like Twitter) even shorten it automatically. Sadly, however, this is not true for magnet torrent URLs (if you don't what they're good for, see "Micro FAQ" below).

The solution

Demagnetizr is a browser app that can display a short "info page" for a magnet, including title, download and tweet buttons. It doesn't "know" the magnet URL or anything about it. It simply accepts it as the hash string of the page's URL, for example: http://zzzen.com/demagnetizr/#magnet%3A%3Fxt%3Durn%3Abtih%3A6554d899acb6a17d0264a4bab9b41ad71094ae30%26dn%3DCultures%2BOf%2BResistance%2B2010%2BDOCU%2BDVDRip%2BXviD-JETSET%26tr%3Dudp%253A%252F%252Ftracker.openbittorrent.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.publicbt.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.ccc.de%253A80 and presents it in a useful way.

This "demagnetized" representation of a magnet URL can be recognized by URL shorteners (including Twitter itself, which is how we can have a tweet button), or used as-is in email, IM, etc.

If you're at the receving end of such a link, just click on it. It's quite self explanatory. If you want to create such links, read on. It's really simple.

"Demagnetize" and spread your favorite torrents

You can also click search and look up anything you have in mind (try spiral tribe. Recommended). You'll get a list of possible torrents, sorted by number of seeds currently online (the more - the better). Clicking on any of the links would paste its magnet URL in the text box, and update the download and tweet buttons, etc.
You can also paste a magnet URL from your torrent app or some site in the text box top right - and it will update everything below it (download and tweet buttons, etc.) on the fly.

Advanced: become a demagnetizr patron

If you know even a little bit of html, it only takes 10 minutes, and it's fun.

Thanks

The search feature uses @makevoid's thorrents.com API which - in turn - searches The Pirate Bay.
Thanks to both of them, <300 lines of html+js can be a powerful app.

Thanks to twitter's Bootstrap, this thing can look presentable, and thanks to the robustness of GitHub Pages, we can leech all this CSS and JS goodness and keep everything in a single, short page.

Respect, y'all. Mankind rules, and I'm proud to be a shareholder.

Changes

v0.4b

Make it work when pastehtml runs us in a frame and "swallows" our hash :)

V0.4a

Fixed urlhash browser compatibility bug. Thanks to Warprofit for the heads-up.

V0.4

Added patrons :)

V0.3

Now using twitter's Bootstrap (leeching the css+js off their demo asset folder to stay single-page, but it's a bit heavy. At least it's a static site :) ).

V0.2

Search feature (via Thorrents.com API).
Can now run on pastehtml.com (it messes up location.search, so now we use location.hash).
location.search is still supported for legacy tweet compatibility :)

To Do

CSS already looks presentable, but perhaps could look better (and should be more efficient). Whatever you do, please try to keep it all contained in a single pastehtml-able page.
Another possibility is to add a "facebook this" button (or whatever you folks call it). I couldn't be bothered since I don't have facebook, but here's a nice and easy procrastination for ya.

Magnet "micro FAQ"

How do I use Magnet URLs?

Here's recommended software for Linux/Mac and Windows. Once you install the software, you can go to the demagnetizr demo and click on the download button. Like the music? Click to tweet about it. Easy.

Why use magnet URLs?

One reason is that they might work even if torrent indexers like The Pirate Bay are blocked by your ISP (they might not work - e.g. if the trackers are blocked too - but many of the ways to circumvent that would involve magnet URLs anyway :) ).

<!DOCTYPE html>

<title>Demagnetizr V0.4b - Tweetable magnet links</title>
  <meta name="description" content="">
  <meta name="author" content="">
  
  
  
  <link href=
  "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css"
  rel="stylesheet" type="text/css">
  <style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
      input {width:100%}
      .torrentdesc {overflow:hidden}
  </style>
</head>

<body>
  <noscript>
  <h1>This page requires javascript :(</h1></noscript>

<div id="all" style="display:none">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <span class="brand">Demagnetizr V0.4b -
          Tweetable magnet links</span>
          <p class="navbar-text pull-right">
            <a target="_blank" href="https://gist.github.com/1731123#readme"><strong>Help</strong></a>
            (from <a target="_blank" href="https://gist.github.com/1731123#uFaq">what's a magnet</a> to geeky stuff)
          </p>
        </div>
      </div>
    </div>

<div class="span6">
          <div class="well">
            <div class="row-fluid">
              <div class="span12">
                <h1>Download</h1>
                <input class="selectme" id="inp" value=""
                placeholder=
                "Use search or recommendations, or paste a magnet URL here">
              </div>
            </div>

<div class="row-fluid">
                <div class="span6">
                  <a class="btn btn-large btn-primary" id="maglink"
                  name="maglink">Download the torrent</a>
                  <p></p>
                  <p>Download button doesn't work? You need <a target="_blank" href="https://gist.github.com/1731123#uFaq">magnet</a>-friendly software:</p>
                  <div class="btn-group">
                    <a class="btn" target="_blank" href=
                    "https://www.transmissionbt.com/download/">Linux/Mac</a>
                    <a class="btn" target="_blank" href=
                    "https://www.utorrent.com/">Windows</a>
                  </div>
                </div>

<div class="span6">
                  <a class="btn btn-large" target="_blank" id=
                  "tweet" name="tweet">Tweet about it</a>
                  <p></p>
                  <p>For IM etc. copy this url:</p>
                  <input id="demag" class="selectme" value="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="span6">
          <div class="notwell">
            <div class="row-fluid">
              <div class="span4">
                <h2>Search</h2>
              </div>

<div class="span8 pagination-right">
                (courtesy of <a target="_blank" href=
                "https://thorrents.com">Thorrents.com</a> API)
              </div>
            </div>

<div class="span2">
                <a id="searchbutton" class="btn" href=
                "#">Search</a>
              </div>
            </div>

<div class="row-fluid">
              <div class="span12">
                <h2><a target="_blank" href="https://magnethead.jottit.com/">MagnetHead</a> recommends</h2>
              </div>
            </div>
            <div class="row-fluid">
              <div class="span3">
                  <a target="_blank" href="https://magnethead.jottit.com/"><img src="https://666kb.com/i/c19282ygyfub1duf4.png"></a>
              </div>

<div class="span9" id="recommended">
                <ul class="nav nav-list">
                  <li><a href="#magnet%3A%3Fxt%3Durn%3Abtih%3A28163770a532eb24b9e0865878288a9bbdb7a5e6%26dn%3DDan%2BBull%2B-%2BSOPA%2BCabana%2B%255BWORKING%255D%26tr%3Dudp%253A%252F%252Ftracker.openbittorrent.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.publicbt.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.ccc.de%253A80">A song about sopa/acta/pipa</a></li>

<li><a href="#magnet%3A%3Fxt%3Durn%3Abtih%3A2abc33482794e7fba691994170fa09ebaa998e38%26dn%3DCory%2BDoctorow%2B-%2BLittle%2BBrother%2B-%2BAudio%2BBook%26tr%3Dudp%253A%252F%252Ftracker.openbittorrent.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.publicbt.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.ccc.de%253A80">Audio book: Little Brother</a></li>
                  <li><a href="#magnet%3A%3Fxt%3Durn%3Abtih%3A3949df5c9d52c50e2a30a0dc25b57bb81e330222%26dn%3DOccupy%2BWall%2BSt%2B100%2BTerryfing%2BFacts%2BAnd%2BStatistics%2BAbout%2BThe%2BCurr%26tr%3Dudp%253A%252F%252Ftracker.openbittorrent.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.publicbt.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.ccc.de%253A80">Audio: 100 reasons to occupy wall street</a></li>
                  <li><a href="#magnet%3A%3Fxt%3Durn%3Abtih%3A54e6bef13faf2133f0d59c397c9a1613ddabb12b%26dn%3DSpiral%2BTribe%2B-%2BBreach%2BThe%2BPeace%2BEP%2B%2528vinyl%2Brip%2B192Kbps%2529%26tr%3Dudp%253A%252F%252Ftracker.openbittorrent.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.publicbt.com%253A80%26tr%3Dudp%253A%252F%252Ftracker.ccc.de%253A80">EP: 90s UK ravers with an attitude</a></li>
                </ul>
              </div>
            </div>
            
            <div class="row-fluid">
              <div class="span12 pagination-right">
                <hr>
                <h4>Become
                    a <a target="_blank" href="https://magnethead.jottit.com/">Demagnetizr Patron</a></h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"
    type="text/javascript">
</script>
     <script src=
    "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"
    type="text/javascript">
</script>
     <script type="text/javascript">
$(function(){
      $('#all').show();
      // Both url ?search (legacy) and #hash are supported
      // as well as hash of parent window
      var urlhash = location.hash.substr(1)||location.search.substr(1);
      if (!urlhash && window.top.location.hash) // pastehtml being "clever"
        urlhash = window.top.location.hash.substr(1);
      // Some browsers unescape hash, some don't. Grrr.
      if (urlhash.substr(6,1) === '%') urlhash=unescape(urlhash);
      console.log('urlhash');
      var render_magnet = function() { // render title, magnet link and twitter link
            var inp=$('#inp').attr('value');
            if (inp.substr(0,7)==='magnet:'){
                var desc = '';
                try {
                  desc = unescape(inp.match(/&dn=([^&]*)&/)[1]).replace(/\+/g,' ')
                } catch(e) {
                  console.log(inp);
                }
                $("#desc").text(desc);
                // split on both '#' and '?' to also support ?search
                var demag = location.href.split('#')[0].split('?')[0]+'#'+encodeURIComponent(inp);
                $('#maglink').attr('href',inp);
                $('#demag').attr('value',demag);
                $('#tweet').attr('href','https://twitter.com/intent/tweet?text='+
                  encodeURIComponent(desc.substr(0,100))+
                  '%20%23demagnetizr&url='+encodeURIComponent(demag));
                $('#results').show();
            } else {
                $('#results').hide();
            }
          },
          use_magnet = function() { // click function of a search result link
            $('#inp').attr('value',unescape($(this).attr('href').replace(/.*#/,'')));
            render_magnet();
          },
          search_magnets = function(){ // search via thorrents.com API
            var query = encodeURIComponent($('#searchterm').attr('value').replace(/^ */,'').replace(/ *$/,''));
            if (!query) return;
            var limit = 10,
                domain = "thorrents.com",
                url = 'https://'+domain+'/search/'+query+'.json?callback=?';
            $("#searchresults").empty().append(
              $('<div/>').addClass('progress progress-info progress-striped active').append(
                $('<div/>').addClass('bar').css('width','100%')
              )
            );
            $.getJSON(url, function(data) {
              $("#searchresults").text('Found nothing :(');
              $.each(data.results, function(idx, result) {
                if (!idx) {
                  $("#searchresults").empty().append(
                    $('<div/>').addClass('row-fluid').append(
                      $('<div/>').addClass('span2 pagination-right').text('Seeds')
                    ).append(
                      $('<div/>').addClass('span9 offset1 torrentdesc').text('Torrent')
                    )
                  );
                }
                $("#searchresults").append(
                  $('<div/>').addClass('row-fluid').append(
                    $('<div/>').addClass('span2 pagination-right').text(result.seeds)
                  ).append(
                    $('<div/>').addClass('span9 offset1 torrentdesc').append(
                      $('<a/>').attr('href',
                        '#'+encodeURIComponent(result.magnet)).text(result.name)
                    )
                  )
                );
                if (idx+1 >= limit) {
                  return false;
                }
              });
              $('#searchresults a').click(use_magnet);
            });
          };
      $('#recommended a').click(use_magnet);
      $('.selectme').click(function(){$(this).select();});
      $('#demag').attr('readonly','readonly').css('cursor','auto');
      $('#searchbutton').click(search_magnets);
      $('#searchterm').bind("keyup",function(e) {
        if (e.keyCode === 13) search_magnets();
      });
      $('#inp').attr('value',urlhash).bind("change keyup",render_magnet);
      render_magnet();
    });
    </script>
  </div>
</body>
</html>

Modified http://html5shim.googlecode.com/svn/trunk/html5.js to a secure url

https://html5shim.googlecode.com/svn/trunk/html5.js