Merge twister-html-webtorrent into blaster

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;

home.html

@@ -126,6 +126,9 @@
           <form class="post-area-new">
             <textarea placeholder="New Post..."></textarea>
             <div class="post-area-extras">
+              <div class="post-area-attach" style="display: none;">
+                <input type="file" id="fileInputAttach" style="font-size: 10px;/>
+              </div>
               <span class="post-area-remaining">140</span>
               <button class="undo-unicode disabled" disabled="disabled">undo</button>
               <button class="post-submit disabled" disabled="disabled">post</button>

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
@@ -907,6 +908,7 @@ function fetchShortenedURI(req, attemptCount) {
 
 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')
@@ -914,7 +916,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])
@@ -924,6 +926,89 @@ 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) {
+                    if(!(long in twister.torrentIds)) {
+                        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) {
+        // try guessing by filename extension
+        isMedia = /^[^?]+\.(?:jpe?g|gif|png|mp4|webm|mp3|ogg|wav|)$/i.test(file.name)
+    }
+    
+    if (isMedia) {
+        var imagePreview = $('<div class="image-preview" />');
+        previewContainer.append(imagePreview);
+        file.appendTo(imagePreview[0], function (err, elem) {
+            if ('pause' in elem) {
+                elem.pause();
+            }
+        });
+        imagePreview.find("video").removeAttr("autoplay");
+    } 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,98 @@ function refreshTwistdayReminder() {
     }
 }
 
+function initWebTorrent() {
+    //localStorage.debug = '*'
+    localStorage.removeItem('debug')
+
+    WEBTORRENT_ANNOUNCE = $.Options.WebTorrentTrackers.val.split(/[ ,]+/)
+    $.getScript('js/webtorrent.min.js', function() {
+        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');
+
+        $.getScript('js/localforage.min.js', function() {
+            localforage.setDriver([localforage.INDEXEDDB,localforage.WEBSQL]).then(function() {
+                for (var torrentId in twister.torrentIds) {
+                    if( twister.torrentIds[torrentId] ) {
+                        if (typeof(twister.torrentIds[torrentId]) === "string") {
+                            // get blob file to restart seeding this file
+                            var onGetItem = function(torrentId, err, data) {
+                                console.log("onget:", torrentId, err, data)
+                                if (err || data === null) {
+                                    // error reading blob, just add torrentId
+                                    console.log("WebTorrent auto-download: " + torrentId + 
+                                                " (previously seeded as: " + twister.torrentIds[torrentId] + ")" );
+                                    WebTorrentClient.add(torrentId);
+                                } else {
+                                    var fileBlob = new File([data], twister.torrentIds[torrentId]);
+                                    console.log('WebTorrent seeding: "' + twister.torrentIds[torrentId] +
+                                                '" size: ' + data.size);
+                                    WebTorrentClient.seed(fileBlob);
+                                }
+                            }
+                            localforage.getItem(torrentId, onGetItem.bind(null, torrentId));
+                        } else if ($.Options.WebTorrentAutoDownload.val === 'enable') {
+                            console.log("WebTorrent auto-download: " + torrentId);
+                            WebTorrentClient.add(torrentId);
+                        }
+                    }
+                }
+
+                // setup attach button
+                $(".post-area-attach").show();
+                var fileInput = $("#fileInputAttach");
+                fileInput.on('change', function(event) {
+                    var file = fileInput[0].files[0];
+                    var seedingTorrent = undefined;
+                    for (var i = 0; i < WebTorrentClient.torrents.length; i++) {
+                        var torrent = WebTorrentClient.torrents[i];
+                        if (torrent.length === file.size &&
+                            torrent.files[0].name === file.name) {
+                            seedingTorrent = torrent;
+                        }
+                    }
+                    var saveBlobFile = function(infoHash,file) {
+                        var magnetLink = "magnet:?xt=urn:btih:" + infoHash
+                        var blobFile = new Blob([file]);
+                        localforage.setItem(magnetLink, blobFile);
+                        twister.torrentIds[magnetLink] = file.name;
+                        $.localStorage.set('torrentIds', twister.torrentIds);
+                        return magnetLink;
+                    }
+                    if (seedingTorrent) {
+                        var magnetLink = saveBlobFile(seedingTorrent.infoHash,file);
+                        console.log('Already seeding ' + magnetLink);
+                        shortenMagnetLink(event,magnetLink);
+                    } else {
+                        WebTorrentClient.seed(file, function (torrent) {
+                            var magnetLink = saveBlobFile(torrent.infoHash,file);
+                            console.log('Client is seeding ' + magnetLink);
+                            shortenMagnetLink(event,magnetLink);
+                        });
+                    }
+                });
+            });
+        });
+    });
+}
+
+function shortenMagnetLink(event,magnetLink) {
+    var uri = prompt(polyglot.t('shorten_URI_enter_link'), magnetLink);
+    var textArea = $(event.target).closest('form').find('textarea');
+    newShortURI(uri, function(long,short) {
+        textArea.append(short);
+    });
+}
+
 //***********************************************
 //******************* 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