From cc2fae5ae8be566132b73d9b407568f28750be2f Mon Sep 17 00:00:00 2001
From: Hedgehog <goresares@gmail.com>
Date: Fri, 4 Apr 2014 12:03:27 +0400
Subject: [PATCH] added youtube and vimeo links preview

added youtube and vimeo links preview with the ability to turn it off
on Options page
---
 css/style.css            |  94 ++++++++++++++++++++++++++--------
 home.html                |  11 ++++
 js/calm.js               |  50 ++++++++++++++++--
 js/options.js            |  23 +++++----
 js/twister_formatpost.js | 106 +++++++++++++++++++++++++++++++--------
 options.html             |  17 +++++--
 6 files changed, 244 insertions(+), 57 deletions(-)

diff --git a/css/style.css b/css/style.css
index dd99ddc..8b9f17a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
diff --git a/home.html b/home.html
index c26b8a0..3393060 100644
--- a/home.html
+++ b/home.html
@@ -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>
diff --git a/js/calm.js b/js/calm.js
index bff4c6e..6d87ac6 100644
--- a/js/calm.js
+++ b/js/calm.js
@@ -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)
+	})
 }
\ No newline at end of file
diff --git a/js/options.js b/js/options.js
index 9e4763a..37778f0 100644
--- a/js/options.js
+++ b/js/options.js
@@ -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;
+			}
 		}
 	})
 	
diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js
index f85f630..b343e71 100644
--- a/js/twister_formatpost.js
+++ b/js/twister_formatpost.js
@@ -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);
+            }
+        });
     }
 }
\ No newline at end of file
diff --git a/options.html b/options.html
index 45906e0..e36e7f2 100644
--- a/options.html
+++ b/options.html
@@ -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>