initial webtorrent support to display embeded media (disabled by default)

css/style.css

@@ -1301,6 +1301,10 @@ ol.toptrends-list {
     display: block;
     margin: 0 auto 10px auto;
 }
+.image-preview video
+{
+    width: 100%;
+}
 .preview-container
 {
     max-height: 500px;

js/interface_common.js

@@ -7,6 +7,7 @@
 
 var twister = {
     URIs: {},  // shortened URIs are cached here after fetching
+    torrentIds: {},  // auto-download torrentIds
     focus: {},  // focused elements are counted here
     html: {
         detached: $('<div>'),  // here elements go to detach themself
@@ -900,6 +901,7 @@ function fetchShortenedURI(req) {
 
 function applyShortenedURI(short, uriAndMimetype) {
     var long = (uriAndMimetype instanceof Array) ? uriAndMimetype[0] : uriAndMimetype;
+    var mimetype = (uriAndMimetype instanceof Array) ? uriAndMimetype[1] : undefined;
     var elems = getElem('.link-shortened[href="' + short + '"]')
         .attr('href', long)
         .removeClass('link-shortened')
@@ -907,7 +909,7 @@ function applyShortenedURI(short, uriAndMimetype) {
         .on('click mouseup', muteEvent)
     ;
     var cropped = (/*$.Options.cropLongURIs &&*/ long.length > 23) ? long.slice(0, 23) + '…' : undefined;
-    for (var i = 0; i < elems.length; i++)
+    for (var i = 0; i < elems.length; i++) {
         if (elems[i].text === short)  // there may be some other text, possibly formatted, so we check it
             if (cropped)
                 $(elems[i])
@@ -917,6 +919,80 @@ function applyShortenedURI(short, uriAndMimetype) {
                 ;
             else
                 elems[i].text = long;
+
+        if (long.lastIndexOf('magnet:?xt=urn:btih:') === 0) {
+            var previewContainer = $(elems[i]).parents(".post-data").find(".preview-container");
+            var fromUser = $(elems[i]).parents(".post-data").attr("data-screen-name");
+            var isMedia = mimetype !== undefined &&
+                          (mimetype.lastIndexOf('video') === 0 ||
+                           mimetype.lastIndexOf('image') === 0 ||
+                           mimetype.lastIndexOf('audio') === 0);
+            if ($.Options.WebTorrent.val === 'enable') {
+                if ($.Options.WebTorrentAutoDownload.val === 'enable' &&
+                    followingUsers.indexOf(fromUser) !==-1) {
+                    twister.torrentIds[long] = true;
+                    $.localStorage.set('torrentIds', twister.torrentIds);
+                    startTorrentDownloadAndPreview(long, previewContainer, isMedia);
+                } else {
+                    // webtorrent enabled but no auto-download. provide a link to start manually.
+                    var startTorrentLink = $('<a href="#">Start WebTorrent download of this media</a>');
+                    startTorrentLink.on('click', function(event) {
+                        event.stopPropagation();
+                        startTorrentDownloadAndPreview(long, previewContainer, isMedia)
+                    });
+                    previewContainer.append(startTorrentLink);
+                }
+            } else {
+                previewContainer.text(polyglot.t('Enable WebTorrent support in options page to display this content'));
+            }
+        }
+    }
+}
+
+function startTorrentDownloadAndPreview(torrentId, previewContainer, isMedia) {
+    var torrent = WebTorrentClient.get(torrentId);
+    if( torrent === null ) 
+        torrent = WebTorrentClient.add(torrentId);
+
+    previewContainer.empty();
+    var speedStatus = $('<span class="post-text"/>');
+    previewContainer.append(speedStatus);
+    function updateSpeed () {
+        var progress = (100 * torrent.progress).toFixed(1)
+        speedStatus[0].innerHTML =
+            '<b>Peers:</b> ' + torrent.numPeers + ' ' +
+            '<b>Progress:</b> ' + progress + '% ' +
+            '<b>Download:</b> ' + torrent.downloadSpeed + '/s ' +
+            '<b>Upload:</b> ' + torrent.uploadSpeed + '/s';
+    }
+    setInterval(updateSpeed, 1000);
+    updateSpeed();
+
+    if( torrent.files.length ) {
+        webtorrentFilePreview(torrent.files[0], previewContainer, isMedia)
+    } else {
+        torrent.on('metadata', function () {
+            webtorrentFilePreview(torrent.files[0], previewContainer, isMedia)
+        });
+    }
+}
+
+function webtorrentFilePreview(file, previewContainer, isMedia) {
+    if (isMedia) {
+        var imagePreview = $('<div class="image-preview" />');
+        previewContainer.append(imagePreview);
+        file.appendTo(imagePreview[0], function (err, elem) {
+            elem.pause();
+        });
+        imagePreview.find("video").removeAttr("autoplay").get(0).pause();
+    } else {
+        file.getBlobURL(function (err, url) {
+            if (err) return console.error(err)
+            var blobLink = $('<a href="' + url + '" download="'+file.name+'">' +
+                'Download ' + file.name + '</a>');
+            previewContainer.append(blobLink);
+        })
+    }
 }
 
 function routeOnClick(event) {

js/interface_home.js

@@ -109,6 +109,9 @@ var InterfaceFunctions = function() {
             initTopTrends();
         else
             killInterfaceModule('toptrends');
+
+        if ($.Options.WebTorrent.val === 'enable')
+            initWebTorrent();
     }
 }
 
@@ -302,6 +305,34 @@ function refreshTwistdayReminder() {
     }
 }
 
+function initWebTorrent() {
+    //localStorage.debug = '*'
+    localStorage.removeItem('debug')
+
+    WEBTORRENT_ANNOUNCE = $.Options.WebTorrentTrackers.val.split(/[ ,]+/)
+    $.getScript('js/webtorrent.min.js', function( data, textStatus, jqxhr ) {
+        WebTorrentClient = new WebTorrent();
+        console.log("WebTorrent started")
+        WebTorrentClient.on('error', function (err) {
+            console.error('ERROR: ' + err.message);
+        });
+        WebTorrentClient.on('warning', function (err) {
+            console.error('WARNING: ' + err.message);
+        });
+
+        if ($.localStorage.isSet('torrentIds'))
+            twister.torrentIds = $.localStorage.get('torrentIds');
+        if ($.Options.WebTorrentAutoDownload.val === 'enable') {
+            for (var torrentId in twister.torrentIds) {
+                if( twister.torrentIds[torrentId] === true ) {
+                    console.log("WebTorrent auto-download: " + torrentId);
+                    WebTorrentClient.add(torrentId);
+                }
+            }
+        }
+    });
+}
+
 //***********************************************
 //******************* INIT **************
 //***********************************************

js/options.js

@@ -280,6 +280,21 @@ function twisterOptions() {
         getMethod: function (val) {return parseFloat(val);},
         tickMethod: function (elem) {$('.volValue').text((elem.value * 100).toFixed());}
     });
+    this.add({
+        name: 'WebTorrent',
+        valDefault: 'disable',
+        tickMethod: function (elem) {
+            $('#WebTorrentCont').css('display', (elem.value === 'enable') ? 'block' : 'none');
+        }
+    });
+    this.add({
+        name: 'WebTorrentTrackers',
+        valDefault: 'wss://tracker.webtorrent.io,wss://tracker.btorrent.xyz,wss://tracker.openwebtorrent.com,wss://tracker.fastcast.nz'
+    });
+    this.add({
+        name: 'WebTorrentAutoDownload',
+        valDefault: 'enable'
+    });
 }
 
 twisterOptions.prototype.add = function (option) {

options.html

@@ -60,6 +60,8 @@
       <label for="t-5" class="tabs selectable_theme theme_nin">Appearance</label>
       <input id="t-6" name="option_tab" type="radio" class="selectable_theme theme_nin" />
       <label for="t-6" class="tabs selectable_theme theme_nin">Users</label>
+      <input id="t-7" name="option_tab" type="radio" class="selectable_theme theme_nin" />
+      <label for="t-7" class="tabs selectable_theme theme_nin">WebTorrent</label>
 
       <div class="tab-content">
 
@@ -450,6 +452,32 @@
           </div>
         </div>
 
+        <div class="webtorrent">
+          <div class="module">
+            <p class="label label-h"> WebTorrent </p>
+            <div class="container">
+              <form>
+                <p class="label">WebTorrent support to display shortened URL media</p>
+                <select id="WebTorrent" class="container">
+                  <option value="enable">Enable</option>
+                  <option value="disable">Disable</option>
+                </select>
+              </form>
+            </div>
+            <div id="WebTorrentCont" class="container">
+              <form>
+                <p class="label">WebTorrent default trackers to use (announce list)</p>
+                <input type="text" id="WebTorrentTrackers" size="80" class="container"/>
+                <p class="label">Auto start download from users we follow</p>
+                <select id="WebTorrentAutoDownload" class="container">
+                  <option value="enable">Enable</option>
+                  <option value="disable">Disable</option>
+                </select>
+              </form>
+            </div>
+          </div>
+        </div>
+
       </div><!-- /tab-content -->
     </div><!-- /options -->
   </div><!-- /options -->

theme_nin/css/style.css

@@ -1480,7 +1480,7 @@ button:disabled:hover, button.disabled:hover, .mini-profile-actions span.disable
   visibility: hidden;
 }
 /* line 42, ../sass/_tabs.sass */
-.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users {
+.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users, .options input#t-7:checked ~ .tab-content .webtorrent {
   position: relative;
   z-index: 10;
   opacity: 1;

theme_nin/js/theme_option.js

@@ -59,5 +59,6 @@ function localizeLabels() {
     $("label[for=t-4]").text(polyglot.t("Keys"));
     $("label[for=t-5]").text(polyglot.t("Appearance"));
     $("label[for=t-6]").text(polyglot.t("Users"));
+    $("label[for=t-7]").text(polyglot.t("WebTorrent"));
 }
 

theme_nin/sass/_tabs.sass

@@ -47,6 +47,7 @@
     &#t-4:checked ~ .tab-content .keys,
     &#t-5:checked ~ .tab-content .appearance,
     &#t-6:checked ~ .tab-content .users
+    &#t-7:checked ~ .tab-content .webtorrent
       position: relative
       z-index: 10
       opacity: 1