twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-03-11 21:11:02 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Miguel Freitas 2016-05-08 13:09:38 -03:00
parent dccc5695e0
commit 8a39eba6b6
9 changed files with 166 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/style.css
View File

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

78
js/interface_common.js
View File

@ -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) {

31
js/interface_home.js
View File

@ -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 **************
//***********************************************

15
js/options.js
View File

@ -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) {

8
js/webtorrent.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
options.html
View File

@ -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 -->

2
theme_nin/css/style.css
View File

@ -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;

1
theme_nin/js/theme_option.js
View File

@ -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"));
}

1
theme_nin/sass/_tabs.sass
View File

@ -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