vimeo embedding support, fixes #43

This commit is contained in:
Hannes Mannerheim 2016-03-12 21:36:00 +01:00
parent e53e866b3f
commit 3e90377125
4 changed files with 153 additions and 41 deletions

View File

@ -2403,7 +2403,8 @@ body.rtl .queet.rtl .expanded-content {
background-size:100% auto; background-size:100% auto;
} }
.queet .queet-thumbs.thumb-num-1 .thumb-container.youtube { .queet .queet-thumbs.thumb-num-1 .thumb-container.host-youtube-com,
.queet .queet-thumbs.thumb-num-1 .thumb-container.host-vimeo-com {
height:250px; height:250px;
} }
@ -5013,11 +5014,13 @@ body.rtl .modal-footer button {
margin: 0 auto; margin: 0 auto;
min-height: 0; min-height: 0;
} }
#queet-thumb-popup .modal-body .thumb-container.youtube iframe { #queet-thumb-popup .modal-body .thumb-container.host-youtube-com iframe,
#queet-thumb-popup .modal-body .thumb-container.host-vimeo-com iframe {
position:absolute; position:absolute;
z-index:2; z-index:2;
} }
#queet-thumb-popup .modal-body .thumb-container.youtube { #queet-thumb-popup .modal-body .thumb-container.host-youtube-com,
#queet-thumb-popup .modal-body .thumb-container.host-vimeo-com {
background-image:none !important; background-image:none !important;
z-index:1; z-index:1;
} }

View File

@ -1298,14 +1298,24 @@ function expand_queet(q,doScrolling) {
} }
// if there's only one thumb and it's a youtube video, show it inline // if there's only one thumb and it's a youtube video, show it inline
if(q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.youtube').length == 1) { if(q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.host-youtube-com').length == 1) {
var youtubeURL = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.youtube').children('.attachment-thumb').attr('data-full-image-url'); var youtubeURL = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.host-youtube-com').children('.attachment-thumb').attr('data-full-image-url');
if(q.children('.queet').find('.expanded-content').children('.media').children('iframe[src="' + youTubeEmbedLinkFromURL(youtubeURL) + '"]').length < 1) { // not if already showed if(q.children('.queet').find('.expanded-content').children('.media').children('iframe[src="' + youTubeEmbedLinkFromURL(youtubeURL) + '"]').length < 1) { // not if already showed
q.children('.queet').find('.queet-thumbs').addClass('hide-thumbs'); q.children('.queet').find('.queet-thumbs').addClass('hide-thumbs');
// show video // show video
q.children('.queet').find('.expanded-content').prepend('<div class="media"><iframe width="510" height="315" src="' + youTubeEmbedLinkFromURL(youtubeURL) + '" frameborder="0" allowfullscreen></iframe></div>'); q.children('.queet').find('.expanded-content').prepend('<div class="media"><iframe width="510" height="315" src="' + youTubeEmbedLinkFromURL(youtubeURL) + '" frameborder="0" allowfullscreen></iframe></div>');
} }
} }
// if there's only one thumb and it's a vimeo video, show it inline
else if(q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.host-vimeo-com').length == 1) {
var vimeoURL = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.host-vimeo-com').children('.attachment-thumb').attr('data-full-image-url');
var embedURL = vimeoEmbedLinkFromURL(vimeoURL);
if(q.children('.queet').find('.expanded-content').children('.media').children('iframe[src="' + embedURL + '"]').length < 1) { // not if already showed
q.children('.queet').find('.queet-thumbs').addClass('hide-thumbs');
// show video
q.children('.queet').find('.expanded-content').prepend('<iframe src="' + embedURL + '" width="510" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}
}
// show certain attachments in expanded content // show certain attachments in expanded content
if(q.children('.queet').children('script.attachment-json').length > 0 if(q.children('.queet').children('script.attachment-json').length > 0
@ -2478,6 +2488,7 @@ function buildAttachmentHTML(attachments){
&& this.oembed !== false && this.oembed !== false
&& this.oembed.title !== null && this.oembed.title !== null
&& this.oembed.provider != 'YouTube' && this.oembed.provider != 'YouTube'
&& this.oembed.provider != 'Vimeo'
&& this.oembed.type != 'photo') { && this.oembed.type != 'photo') {
var oembedImage = ''; var oembedImage = '';
@ -2560,15 +2571,10 @@ function buildAttachmentHTML(attachments){
// play button for videos and animated gifs // play button for videos and animated gifs
var playButtonClass = ''; var playButtonClass = '';
if((this.url.indexOf('://www.youtube.com') > -1 || this.url.indexOf('://youtu.be') > -1) if(typeof this.animated != 'undefined' && this.animated === true
|| (typeof this.animated != 'undefined' && this.animated === true)) { || (this.url.indexOf('://www.youtube.com') > -1 || this.url.indexOf('://youtu.be') > -1)
var playButtonClass = ' play-button'; || this.url.indexOf('://vimeo.com') > -1) {
} playButtonClass = ' play-button';
// youtube class
var youTubeClass = '';
if(this.url.indexOf('://www.youtube.com') > -1 || this.url.indexOf('://youtu.be') > -1) {
youTubeClass = ' youtube';
} }
// gif-class // gif-class
@ -2600,7 +2606,7 @@ function buildAttachmentHTML(attachments){
var urlToHide = window.siteInstanceURL + 'attachment/' + this.id; var urlToHide = window.siteInstanceURL + 'attachment/' + this.id;
attachmentHTML += '<a data-local-attachment-url="' + urlToHide + '" style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + playButtonClass + youTubeClass + animatedGifClass + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '" data-full-image-url="' + this.url + '" data-thumb-url="' + img_url + '"></a>'; attachmentHTML += '<a data-local-attachment-url="' + urlToHide + '" style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + playButtonClass + animatedGifClass + ' ' + CSSclassNameByHostFromURL(this.url) + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '" data-full-image-url="' + this.url + '" data-thumb-url="' + img_url + '"></a>';
urlsToHide.push(urlToHide); // hide this attachment url from the queet text urlsToHide.push(urlToHide); // hide this attachment url from the queet text
attachmentNum++; attachmentNum++;
} }

View File

@ -2634,24 +2634,99 @@ function shortenUrlsInBox(shortenButton) {
} }
/* ·
·
· Youtube ID from Youtube URL
·
· · · · · · · · · · · · · */
function youTubeIDFromYouTubeURL(url) {
return url.replace('https://youtube.com/watch?v=','').replace('http://youtube.com/watch?v=','').replace('http://www.youtube.com/watch?v=','').replace('https://www.youtube.com/watch?v=','').replace('http://youtu.be/','').replace('https://youtu.be/','').substr(0,11);
}
/* · /* ·
· ·
· Youtube embed link from youtube url · Youtube embed link from youtube url
· ·
· · · · · · · · · · · · · */ · · · · · · · · · · · · · */
function youTubeEmbedLinkFromURL(url) { function youTubeEmbedLinkFromURL(url, autoplay) {
var youtubeId = url.replace('http://www.youtube.com/watch?v=','').replace('https://www.youtube.com/watch?v=','').replace('http://youtu.be/','').replace('https://youtu.be/','').substr(0,11);
// get start time hash // get start time hash
var l = document.createElement("a"); var l = document.createElement("a");
l.href = url; l.href = url;
var addStart = '';
if(l.hash.substring(0,3) == '#t=') { if(l.hash.substring(0,3) == '#t=') {
return '//www.youtube.com/embed/' + youtubeId + '?start=' + l.hash.substring(3); addStart = '&start=' + l.hash.substring(3);
} }
else {
return '//www.youtube.com/embed/' + youtubeId; var addAutoplay = '';
if(typeof autoplay != 'undefined' && autoplay === true) {
addAutoplay = '&autoplay=1';
} }
return '//www.youtube.com/embed/' + youTubeIDFromYouTubeURL(url) + '?enablejsapi=1&version=3&playerapiid=ytplayer' + addStart + addAutoplay;
}
/* ·
·
· Vimeo ID from Vimeo URL
·
· · · · · · · · · · · · · */
function vimeoIDFromVimeoURL(url) {
id = url.replace('http://vimeo.com/','').replace('https://vimeo.com/','');
if(id.indexOf('#') > -1) {
id = id.substring(0,id.indexOf('#'));
}
return id;
}
/* ·
·
· Vimeo embed link from vimeo url
·
· · · · · · · · · · · · · */
function vimeoEmbedLinkFromURL(url, autoplay) {
// get start time hash
var l = document.createElement("a");
l.href = url;
var addStart = '';
if(l.hash.substring(0,3) == '#t=') {
addStart = l.hash;
}
var addAutoplay = '&autoplay=0';
if(typeof autoplay != 'undefined' && autoplay === true) {
addAutoplay = '&autoplay=1';
}
return 'https://player.vimeo.com/video/' + vimeoIDFromVimeoURL(url) + '?api=1' + addAutoplay + addStart;
}
/* ·
·
· CSS class name from URL
·
· · · · · · · · · · · · · */
function CSSclassNameByHostFromURL(url) {
var host = getHost(url);
if(host.indexOf('www.') === 0) {
host = host.substring(4);
}
host = host.toLowerCase().replace(/\./g, "-");
host = host.replace(/[^a-zA-Z0-9-]+/g, "_");
if(host == 'youtu-be') {
host = 'youtube-com';
}
return 'host-' + host;
} }

View File

@ -2179,23 +2179,18 @@ $('body').on('click','.stream-item .queet img.attachment-thumb',function (event)
$thumbToDisplay = $queetThumbsClone.find('img.attachment-thumb[src="' + thisAttachmentThumbSrc + '"]'); $thumbToDisplay = $queetThumbsClone.find('img.attachment-thumb[src="' + thisAttachmentThumbSrc + '"]');
$thumbToDisplay.parent().addClass('display-this-thumb'); $thumbToDisplay.parent().addClass('display-this-thumb');
// "play" all animated gifs and add youtube iframes to all youtube videos // "play" all animated gifs and add youtube iframes to all youtube and vimeo videos
$.each($queetThumbsClone.find('img.attachment-thumb'),function(){ $.each($queetThumbsClone.find('img.attachment-thumb'),function(){
if($(this).attr('data-mime-type') == 'image/gif' if($(this).attr('data-mime-type') == 'image/gif'
&& $(this).parent().hasClass('play-button')) { && $(this).parent().hasClass('play-button')) {
$(this).attr('src',$(this).attr('data-full-image-url')); $(this).attr('src',$(this).attr('data-full-image-url'));
$(this).parent('.thumb-container').css('background-image','url(\'' + $(this).attr('data-full-image-url') + '\')'); $(this).parent('.thumb-container').css('background-image','url(\'' + $(this).attr('data-full-image-url') + '\')');
} }
else if($(this).parent().hasClass('youtube')){ else if($(this).parent().hasClass('host-youtube-com')){
$(this).parent().prepend('<iframe width="510" height="315" src="' + youTubeEmbedLinkFromURL($(this).attr('data-full-image-url'), $(this).parent().hasClass('display-this-thumb')) + '" frameborder="0" allowscriptaccess="always" allowfullscreen></iframe>');
// autoplay a clicked video }
var autoplayFlag = ''; else if($(this).parent().hasClass('host-vimeo-com')){
if($(this).parent().hasClass('display-this-thumb')) { $(this).parent().prepend('<iframe src="' + vimeoEmbedLinkFromURL($(this).attr('data-full-image-url'), $(this).parent().hasClass('display-this-thumb')) + '" width="510" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
autoplayFlag = '&autoplay=1';
}
var youtubeId = $(this).attr('data-full-image-url').replace('http://www.youtube.com/watch?v=','').replace('https://www.youtube.com/watch?v=','').replace('http://youtu.be/','').replace('https://youtu.be/','').substr(0,11);
$(this).parent().prepend('<iframe width="510" height="315" src="//www.youtube.com/embed/' + youtubeId + '?enablejsapi=1&version=3&playerapiid=ytplayer' + autoplayFlag + '" frameborder="0" allowscriptaccess="always" allowfullscreen></iframe>');
} }
}); });
@ -2208,7 +2203,7 @@ $('body').on('click','.stream-item .queet img.attachment-thumb',function (event)
if(parentStreamItem.hasClass('expanded')) { if(parentStreamItem.hasClass('expanded')) {
var calculatedDimensions = calculatePopUpAndImageDimensions($thumbToDisplay.attr('src')); var calculatedDimensions = calculatePopUpAndImageDimensions($thumbToDisplay);
var $thisImgInQueetThumbsClone = $queetThumbsClone.find('img[src="' + $thumbToDisplay.attr('src') + '"]'); var $thisImgInQueetThumbsClone = $queetThumbsClone.find('img[src="' + $thumbToDisplay.attr('src') + '"]');
// set dimensions // set dimensions
@ -2220,12 +2215,22 @@ $('body').on('click','.stream-item .queet img.attachment-thumb',function (event)
// open popup // open popup
popUpAction('queet-thumb-popup', '', '' + $queetThumbsClone.outerHTML() + '', parentStreamItemHTMLWithoutFooter, calculatedDimensions.popUpWidth); popUpAction('queet-thumb-popup', '', '' + $queetThumbsClone.outerHTML() + '', parentStreamItemHTMLWithoutFooter, calculatedDimensions.popUpWidth);
disableOrEnableNavigationButtonsInImagePopup($('#queet-thumb-popup')); disableOrEnableNavigationButtonsInImagePopup($('#queet-thumb-popup'));
// for some reason vimeo autoplays when we have a #t=x start time, so stop any vimeo videos running in the background (delay so it has time to load)
setTimeout(function(){
$.each($('#queet-thumb-popup').find('.thumb-container.host-vimeo-com:not(.display-this-thumb)').children('iframe'),function(){
console.log($(this).attr('src'));
this.contentWindow.postMessage('{"method": "pause"}', '*');
});
},1000);
} }
} }
}); });
// popups can be max 900px wide, and should not be higher than the window, so we need to do some calculating // popups can be max 900px wide, and should not be higher than the window, so we need to do some calculating
function calculatePopUpAndImageDimensions(img_src) { function calculatePopUpAndImageDimensions(img) {
var img_src = img.attr('src');
// trick to get width and height, we can't go with what gnusocial tells us, because // trick to get width and height, we can't go with what gnusocial tells us, because
// gnusocial doesn't (always?) report width and height after proper orientation // gnusocial doesn't (always?) report width and height after proper orientation
@ -2285,7 +2290,14 @@ function calculatePopUpAndImageDimensions(img_src) {
var popUpWidth = 900; var popUpWidth = 900;
} }
} }
return {popUpWidth: popUpWidth, displayImgWidth: displayImgWidth};
// vimeo can't be too small, or the design freaks out
if(img.parent('.thumb-container').hasClass('host-vimeo-com') && displayImgWidth < 540) {
displayImgWidth = 540;
displayImgHeight = 305;
}
return {popUpWidth: popUpWidth, displayImgWidth: displayImgWidth, displayImgHeight: displayImgHeight };
} }
// switch to next image when clicking the image in the popup // switch to next image when clicking the image in the popup
@ -2296,15 +2308,23 @@ $('body').on('click','#queet-thumb-popup .attachment-thumb',function (event) {
if(nextImage.length>0) { if(nextImage.length>0) {
// start and stop youtube videos, if any // start and stop youtube videos, if any
$.each($(this).parent('.youtube').children('iframe'),function(){ $.each($(this).parent('.host-youtube-com').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}); });
$.each(nextImage.parent('.youtube').children('iframe'),function(){ $.each(nextImage.parent('.host-youtube-com').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
}); });
// start stop vimeo
$.each($(this).parent('.host-vimeo-com').children('iframe'),function(){
this.contentWindow.postMessage('{"method": "pause"}', '*');
});
$.each(nextImage.parent('.host-vimeo-com').children('iframe'),function(){
this.contentWindow.postMessage('{"method": "play"}', '*');
});
// set dimensions of next image and the popup // set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(nextImage.attr('src')); var calculatedDimensions = calculatePopUpAndImageDimensions(nextImage);
nextImage.width(calculatedDimensions.displayImgWidth); nextImage.width(calculatedDimensions.displayImgWidth);
nextImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth); nextImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
nextImage.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth); nextImage.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth);
@ -2329,15 +2349,23 @@ $('body').on('click','#queet-thumb-popup .prev-thumb',function (event) {
if(prevImage.length>0) { if(prevImage.length>0) {
// start and stop youtube videos, if any // start and stop youtube videos, if any
$.each($(this).parent().find('.display-this-thumb.youtube').children('iframe'),function(){ $.each($(this).parent().find('.display-this-thumb.host-youtube-com').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}); });
$.each(prevImage.parent('.youtube').children('iframe'),function(){ $.each(prevImage.parent('.host-youtube-com').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
}); });
// start stop vimeo
$.each($(this).parent().find('.display-this-thumb.host-vimeo-com').children('iframe'),function(){
this.contentWindow.postMessage('{"method": "pause"}', '*');
});
$.each(prevImage.parent('.host-vimeo-com').children('iframe'),function(){
this.contentWindow.postMessage('{"method": "play"}', '*');
});
// set dimensions of next image and the popup // set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(prevImage.attr('src')); var calculatedDimensions = calculatePopUpAndImageDimensions(prevImage);
prevImage.width(calculatedDimensions.displayImgWidth); prevImage.width(calculatedDimensions.displayImgWidth);
prevImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth); prevImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
prevImage.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth); prevImage.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth);