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 { @@ -1139,6 +1139,80 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
color: #5e8da4;
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
{
font-size: 13px;
@ -1256,26 +1330,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder { @@ -1256,26 +1330,6 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
display: none;
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
{
margin: 0 10px 0 55px;

11
home.html

@ -292,6 +292,17 @@ @@ -292,6 +292,17 @@
</div>
<p class="post-text"></p>
<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 class="post-context" style="display: none;">
<i class="post-retransmited-icon"></i>

50
js/calm.js

@ -1,7 +1,5 @@ @@ -1,7 +1,5 @@
$(function(){
$('.post-text').on('click', 'a', function(e){
e.stopPropagation();
});
$('.post-text, #descWrap').on('click', 'a', function(e){e.stopPropagation();});
$('#showqr').on('click', function(){
if($('#qrcode img')[0]) return;
var skey = document.getElementById('skey').innerText;
@ -16,7 +14,6 @@ $(function(){ @@ -16,7 +14,6 @@ $(function(){
})
function dhtIndicatorBg(){
var bgcolor = '';
if(twisterDhtNodes <= 20){bgcolor = '#770900'
@ -76,8 +73,53 @@ function changeStyle() { @@ -76,8 +73,53 @@ function changeStyle() {
$('#profilecss').attr('href', profile);
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 () {
modalDMIntr ();
$('textarea').on('click', function() {mensAutocomplete(this)});
$('textarea').on('keyup', function() {
getJSONToLocalStorage(this)
})
}

23
js/options.js

@ -104,20 +104,25 @@ function setTheme() { @@ -104,20 +104,25 @@ function setTheme() {
}
function setShowPreviewOpt(){
$('#displayPreview').val(localStorage['showPreviewOpt'] || "enable");
$('input[type="checkbox"]').prop('checked', localStorage['showPreviewOptGif'] == 'true')
$('.previewOpt').each(function() {
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)
}
if(!localStorage['showPreviewOpt']) localStorage['showPreviewOpt'] = "enable";
if(!localStorage['imagesPreview']) localStorage['imagesPreview'] = "enable";
$('#displayPreview').on('change', function(){
localStorage['showPreviewOpt'] = $(this).val();
switch($(this).val()){
case 'enable': $('.gifCheckBox').prop('disabled', false); break;
case 'disable': $('.gifCheckBox').prop('disabled', true); break;
$('.previewOpt').on('change', function(){
localStorage[this.id] = $(this).val();
if (this.id === 'imagesPreview'){
switch($(this).val()){
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 ) { @@ -100,14 +100,25 @@ function postToElem( post, kind ) {
retweetedByElem.attr("href", $.MAL.userUrl(retweeted_by));
retweetedByElem.text('@'+retweeted_by);
}
//hed//image in post
var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text");
if(imagePreview(postText)){
//hed//media preview
var previewContainer = elem.find('.preview-container'), postText = elem.find(".post-text");
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.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;
}
@ -293,19 +304,72 @@ function _extractHashtag(s) { @@ -293,19 +304,72 @@ function _extractHashtag(s) {
function escapeHtmlEntities(str) {
return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&apos;');
}
function imagePreview(post) {
if (localStorage['showPreviewOpt'] == 'enable') {
var link = post.find("a[rel='nofollow']");
var linkAnon = 'https://ssl-proxy.my-addr.org/myaddrproxy.php/http/';
if (link.html() && /(\.jpg)|(\.gif)|(\.png)|(\.jpeg)|(\.jpe)/.test(link.html().toLowerCase()))
{
var cleanLink = link.html().replace(/^http[s]?:\/\//i, '');
if(/\.gif\b/i.test(cleanLink) && localStorage['showPreviewOptGif'] == 'false') return;
return "<img src='"+linkAnon+cleanLink+"' class='image-preview' />";
} else if (link.html() && /https:\/\/img.bi/.test(link.html().toLowerCase()))
{
return "<img data-imgbi='" + link.html() + "' class='image-preview' />";
// imgBiJS();
}
function imagePreview(link) {
var linkAnon = 'https://ssl-proxy.my-addr.org/myaddrproxy.php/http/';
if (link && /https:\/\/img.bi/gi.test(link)){
return "<img data-imgbi='" + link + "' class='image-preview' />";
imgBiJS();
}else{
var cleanLink = link.replace(/^http[s]?:\/\//i, '');
if(/\.gif\b/i.test(cleanLink) && localStorage['imagesPreviewGif'] == 'false') return;
return "<img src='"+linkAnon+cleanLink+"' class='image-preview' />";
}
}
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 @@ @@ -138,12 +138,23 @@
</div>
<div class="module">
<h1>Inline image preview</h1>
<select name="" id="displayPreview">
<h1>Media links preview</h1>
<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="enable">Enable</option>
</select>
<label><span>Display GIF images</span><input class="gifCheckBox" type="checkbox" name="showPreviewOptGif"></label>
</div>
</div>

Loading…
Cancel
Save