Browse Source

added youtube and vimeo links preview

added youtube and vimeo links preview with the ability to turn it off
on Options page
master
Hedgehog 11 years ago
parent
commit
cc2fae5ae8
  1. 94
      css/style.css
  2. 11
      home.html
  3. 50
      js/calm.js
  4. 23
      js/options.js
  5. 106
      js/twister_formatpost.js
  6. 17
      options.html

94
css/style.css

@ -1139,6 +1139,80 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
color: #5e8da4; color: #5e8da4;
text-decoration: none; text-decoration: none;
} }
/* Inpost previw */
.preview-container
{
height: 100px;
width: 95%;
margin: 0 auto;
overflow: hidden;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*line-height: 0;*/
margin-bottom: 3px;
position: relative;
}
.image-preview
{
max-height: 500px;
max-width: 100%;
margin: 0 auto;
display: block;
}
/* video preview */
.vimeo #imgOverlay {
border-left: 10px solid #0f5fb6;
}
.youtube #imgOverlay {
border-left: 10px solid #d8121e;
}
#ytPreviewTmpl {
position: relative;
height: 100%;
width: 100%;
}
#vidPreviewTmpl img {
max-height: 500px;
width: 100%;
margin: 0 auto;
display: block;
}
#imgOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
}
#descWrap {
position: absolute;
top: 5px;
left: 50%;
width: 450px;
margin-left: -225px;
}
#descWrap a, #descWrap p {
position: relative;
}
#descWrap a {
color: #fff;
font: 22px "Open Sans Condensed", sans-serif;
}
#descWrap p {
color: #d3d3d3;
font: 14px "Open Sans Condensed", sans-serif;
margin-top: 5px;
}
.mini-screen-name .mini-screen-name
{ {
font-size: 13px; font-size: 13px;
@ -1256,26 +1330,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
display: none; display: none;
padding: 5px 5px 0 5px; padding: 5px 5px 0 5px;
} }
.image-preview
{
max-height: 500px;
max-width: 100%;
margin: 0 auto;
display: block;
}
.preview-container
{
height: 100px;
width: 95%;
margin: 0 auto;
overflow: hidden;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
line-height: 0;
margin-bottom: 3px;
}
.post-stats .post-stats
{ {
margin: 0 10px 0 55px; margin: 0 10px 0 55px;

11
home.html

@ -292,6 +292,17 @@
</div> </div>
<p class="post-text"></p> <p class="post-text"></p>
<div class="preview-container"></div> <div class="preview-container"></div>
<!-- YOUTUBE PREVIEW TEMPLATE-->
<div id="vidPreviewTmpl" style="display:none">
<img src="">
<div id="imgOverlay"></div>
<div id="descWrap">
<a href=""></a>
<p></p>
</div>
</div>
<div style="clearfix:both"></div> <div style="clearfix:both"></div>
<div class="post-context" style="display: none;"> <div class="post-context" style="display: none;">
<i class="post-retransmited-icon"></i> <i class="post-retransmited-icon"></i>

50
js/calm.js

@ -1,7 +1,5 @@
$(function(){ $(function(){
$('.post-text').on('click', 'a', function(e){ $('.post-text, #descWrap').on('click', 'a', function(e){e.stopPropagation();});
e.stopPropagation();
});
$('#showqr').on('click', function(){ $('#showqr').on('click', function(){
if($('#qrcode img')[0]) return; if($('#qrcode img')[0]) return;
var skey = document.getElementById('skey').innerText; var skey = document.getElementById('skey').innerText;
@ -16,7 +14,6 @@ $(function(){
}) })
function dhtIndicatorBg(){ function dhtIndicatorBg(){
var bgcolor = ''; var bgcolor = '';
if(twisterDhtNodes <= 20){bgcolor = '#770900' if(twisterDhtNodes <= 20){bgcolor = '#770900'
@ -76,8 +73,53 @@ function changeStyle() {
$('#profilecss').attr('href', profile); $('#profilecss').attr('href', profile);
setTimeout(function(){$(menu).removeAttr('style')}, 0); setTimeout(function(){$(menu).removeAttr('style')}, 0);
} }
function getJSONToLocalStorage (t) {
var ytRegExp = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?/i;
var vimeoRegExp = /http:\/\/(www\.)?vimeo.com\/(\d+)(\/)?/i;
if (ytRegExp.test(t.value)){
var ytid = t.value.match(ytRegExp) ? RegExp.$1 : false;
var ytDataStorage = localStorage['ytData'] ? JSON.parse(localStorage['ytData']) : {};
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=jsonc",
dataType: 'jsonp',
success: function(data) {
ytDataStorage[ytid] = {
title: data.data.title,
description: data.data.description.substring(0, 400),
thumbnail: data.data.thumbnail.hqDefault,
link: 'http://youtu.be/'+ytid
};
localStorage['ytData'] = JSON.stringify(ytDataStorage);
}
});
}else if(vimeoRegExp.test(t.value)) {
var vimid = t.value.match(vimeoRegExp) ? RegExp.$2 : false;
var vimDataStorage = localStorage['vimData'] ? JSON.parse(localStorage['vimData']) : {};
$.ajax({
url: "http://vimeo.com/api/v2/video/"+vimid+".json",
dataType: 'json',
success: function(data) {
console.log(data);
vimDataStorage[vimid] = {
title: data[0].title,
description: data[0].description.substring(0, 400),
thumbnail: data[0].thumbnail_large,
link: data[0].url,
time: Date.now()
};
localStorage['vimData'] = JSON.stringify(vimDataStorage);
}
});
}
}
function homeIntInit () { function homeIntInit () {
modalDMIntr (); modalDMIntr ();
$('textarea').on('click', function() {mensAutocomplete(this)}); $('textarea').on('click', function() {mensAutocomplete(this)});
$('textarea').on('keyup', function() {
getJSONToLocalStorage(this)
})
} }

23
js/options.js

@ -104,20 +104,25 @@ function setTheme() {
} }
function setShowPreviewOpt(){ function setShowPreviewOpt(){
$('#displayPreview').val(localStorage['showPreviewOpt'] || "enable"); $('.previewOpt').each(function() {
$('input[type="checkbox"]').prop('checked', localStorage['showPreviewOptGif'] == 'true') this.value = localStorage[this.id] || 'enable';
})
$('input[type="checkbox"]').prop('checked', localStorage['imagesPreviewGif'] == 'true')
if(localStorage['showPreviewOpt'] == 'disable'){ if(localStorage['imagesPreview'] == 'disable'){
$('input[type="checkbox"]').prop('disabled', true) $('input[type="checkbox"]').prop('disabled', true)
} }
if(!localStorage['showPreviewOpt']) localStorage['showPreviewOpt'] = "enable"; if(!localStorage['imagesPreview']) localStorage['imagesPreview'] = "enable";
$('#displayPreview').on('change', function(){ $('.previewOpt').on('change', function(){
localStorage['showPreviewOpt'] = $(this).val(); localStorage[this.id] = $(this).val();
switch($(this).val()){ if (this.id === 'imagesPreview'){
case 'enable': $('.gifCheckBox').prop('disabled', false); break; switch($(this).val()){
case 'disable': $('.gifCheckBox').prop('disabled', true); break; case 'enable': $('.gifCheckBox').prop('disabled', false); break;
case 'disable': $('.gifCheckBox').prop('disabled', true); break;
}
} }
}) })

106
js/twister_formatpost.js

@ -100,14 +100,25 @@ function postToElem( post, kind ) {
retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by)); retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by));
retweetedByElem.text('@'+retweeted_by); retweetedByElem.text('@'+retweeted_by);
} }
//hed//image in post
var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text"); //hed//media preview
var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text");
if(imagePreview(postText)){ var postLink = postText.find("a[rel='nofollow']")[0] ? postText.find("a[rel='nofollow']")[0].href : '';
var ytRegExp = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?/i;
var vimeoRegExp = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/i;
if (postLink && localStorage['imagesPreview'] == 'enable' && (/(\.jpg)|(\.gif)|(\.png)|(\.jpeg)|(\.jpe)/i.test(postLink) || /https:\/\/img.bi/gi.test(postLink))){
previewContainer.show(); previewContainer.show();
previewContainer.append(imagePreview(postText)) previewContainer.append(imagePreview(postLink, t));
}; }else if(postLink && ytRegExp.test(postLink) && localStorage['youtubePreview'] === 'enable'){
var ytid = postLink.match(ytRegExp) ? RegExp.$1 : false;
previewContainer.show();
previewContainer.append(getYoutubePreview(postLink, ytid));
}else if(postLink && vimeoRegExp.test(postLink) && localStorage['vimeoPreview'] === 'enable'){
var vimid = postLink.match(vimeoRegExp) ? RegExp.$2 : false;
previewContainer.show();
previewContainer.append(getVimeoPreview(postLink, vimid));
}
return elem; return elem;
} }
@ -293,19 +304,72 @@ function _extractHashtag(s) {
function escapeHtmlEntities(str) { function escapeHtmlEntities(str) {
return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&apos;'); return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&apos;');
} }
function imagePreview(post) {
if (localStorage['showPreviewOpt'] == 'enable') { function imagePreview(link) {
var link = post.find("a[rel='nofollow']"); var linkAnon = 'https://ssl-proxy.my-addr.org/myaddrproxy.php/http/';
var linkAnon = 'https://ssl-proxy.my-addr.org/myaddrproxy.php/http/';
if (link.html() && /(\.jpg)|(\.gif)|(\.png)|(\.jpeg)|(\.jpe)/.test(link.html().toLowerCase())) if (link && /https:\/\/img.bi/gi.test(link)){
{ return "<img data-imgbi='" + link + "' class='image-preview' />";
var cleanLink = link.html().replace(/^http[s]?:\/\//i, ''); imgBiJS();
if(/\.gif\b/i.test(cleanLink) && localStorage['showPreviewOptGif'] == 'false') return; }else{
return "<img src='"+linkAnon+cleanLink+"' class='image-preview' />"; var cleanLink = link.replace(/^http[s]?:\/\//i, '');
} else if (link.html() && /https:\/\/img.bi/.test(link.html().toLowerCase())) if(/\.gif\b/i.test(cleanLink) && localStorage['imagesPreviewGif'] == 'false') return;
{ return "<img src='"+linkAnon+cleanLink+"' class='image-preview' />";
return "<img data-imgbi='" + link.html() + "' class='image-preview' />"; }
// imgBiJS(); }
}
function getYoutubePreview(link, ytid) {
var vidPreviewTmpl = $('#vidPreviewTmpl').clone(true).removeAttr('style').removeAttr('class').addClass("youtube");
var ytDataStorage = localStorage['ytData'] ? JSON.parse(localStorage['ytData']) : {};
if (ytDataStorage[ytid]) {
vidPreviewTmpl.find('img').attr('src', ytDataStorage[ytid].thumbnail);
vidPreviewTmpl.find('a').text(ytDataStorage[ytid].title).attr('href', link).attr('target', '_blank');
if (ytDataStorage[ytid].description) vidPreviewTmpl.find('p').html(ytDataStorage[ytid].description+'…');
return vidPreviewTmpl;
}else{
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=jsonc",
dataType: 'jsonp',
success: function(data) {
ytDataStorage[ytid] = {
title: data.data.title,
description: data.data.description.substring(0, 400),
thumbnail: data.data.thumbnail.hqDefault,
link: 'http://youtu.be/'+ytid,
time: Date.now()
};
localStorage['ytData'] = JSON.stringify(ytDataStorage);
}
});
}
}
function getVimeoPreview (link, vimid) {
var vidPreviewTmpl = $('#vidPreviewTmpl').clone(true).removeAttr('style').removeAttr('class').addClass("vimeo");
var vimDataStorage = localStorage['vimData'] ? JSON.parse(localStorage['vimData']) : {};
if (vimDataStorage[vimid]) {
vidPreviewTmpl.find('img').attr('src', vimDataStorage[vimid].thumbnail);
vidPreviewTmpl.find('a').text(vimDataStorage[vimid].title).attr('href', link).attr('target', '_blank');
if (vimDataStorage[vimid].description) vidPreviewTmpl.find('p').html(vimDataStorage[vimid].description+'…');
return vidPreviewTmpl;
}else{
$.ajax({
url: "http://vimeo.com/api/v2/video/"+vimid+".json",
dataType: 'json',
success: function(data) {
vimDataStorage[vimid] = {
title: data[0].title,
description: data[0].description.substring(0, 400),
thumbnail: data[0].thumbnail_large,
link: data[0].url,
time: Date.now()
};
localStorage['vimData'] = JSON.stringify(vimDataStorage);
}
});
} }
} }

17
options.html

@ -138,12 +138,23 @@
</div> </div>
<div class="module"> <div class="module">
<h1>Inline image preview</h1> <h1>Media links preview</h1>
<select name="" id="displayPreview"> <h2>Images preview</h2>
<select name="" id="imagesPreview" class="previewOpt">
<option value="disable">Disable</option>
<option value="enable">Enable</option>
</select>
<label><span>Display GIF images</span><input class="gifCheckBox" type="checkbox" name="imagesPreviewGif"></label>
<h2>Youtube links preview</h2>
<select name="" id="youtubePreview" class="previewOpt">
<option value="disable">Disable</option>
<option value="enable">Enable</option>
</select>
<h2>Vimeo links preview</h2>
<select name="" id="vimeoPreview" class="previewOpt">
<option value="disable">Disable</option> <option value="disable">Disable</option>
<option value="enable">Enable</option> <option value="enable">Enable</option>
</select> </select>
<label><span>Display GIF images</span><input class="gifCheckBox" type="checkbox" name="showPreviewOptGif"></label>
</div> </div>
</div> </div>

Loading…
Cancel
Save