twisterarmy/twister-calm
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-calm.git synced 2025-01-12 07:58:05 +00:00
Code Issues Projects Releases Wiki Activity

added youtube and vimeo links preview

Browse Source 
added youtube and vimeo links preview with the ability to turn it off
on Options page
This commit is contained in:
Hedgehog 2014-04-04 12:03:27 +04:00
parent 133599cb89
commit cc2fae5ae8
6 changed files with 244 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
css/style.css
View File

@ -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 {
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
View File

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

@ -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(){
})
function dhtIndicatorBg(){
var bgcolor = '';
if(twisterDhtNodes <= 20){bgcolor = '#770900'
@ -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
View File

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

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

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