wamo/Qvitter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no autoplay for animated gifs, better handling of youtube and webm videos

Browse Source 
also solves @moshpirit's issue in #190, but when there's a mix of local
images and videos gnusocial messes up the order...
This commit is contained in:
Hannes Mannerheim 2015-06-17 00:44:18 +02:00
parent 80b9ca7fec
commit fdda2e4e0d
4 changed files with 195 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
QvitterPlugin.php
View File

@ -422,18 +422,42 @@ class QvitterPlugin extends Plugin {
try {
$enclosure_o = $attachment->getEnclosure();
$thumb = $attachment->getThumbnail();
$attachment_url_to_id[$enclosure_o->url]['id'] = $attachment->id;
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
$attachment_url_to_id[$enclosure_o->url]['width'] = $attachment->width;
$attachment_url_to_id[$enclosure_o->url]['height'] = $attachment->height;
// animated gif?
if($attachment->mimetype == 'image/gif') {
$image = ImageFile::fromFileObject($attachment);
if($image->animated == 1) {
$attachment_url_to_id[$enclosure_o->url]['animated'] = true;
}
else {
$attachment_url_to_id[$enclosure_o->url]['animated'] = false;
}
}
} catch (ServerException $e) {
$thumb = File_thumbnail::getKV('file_id', $attachment->id);
if ($thumb instanceof File_thumbnail) {
$attachment_url_to_id[$enclosure_o->url]['id'] = $attachment->id;
$attachment_url_to_id[$enclosure_o->url]['thumb_url'] = $thumb->getUrl();
$attachment_url_to_id[$enclosure_o->url]['width'] = $attachment->width;
$attachment_url_to_id[$enclosure_o->url]['height'] = $attachment->height;
}
$attachment_url_to_id[$enclosure_o->url]['height'] = $attachment->height;
// animated gif?
if($attachment->mimetype == 'image/gif') {
$image = ImageFile::fromFileObject($attachment);
if($image->animated == 1) {
$attachment_url_to_id[$enclosure_o->url]['animated'] = true;
}
else {
$attachment_url_to_id[$enclosure_o->url]['animated'] = false;
}
}
}
}
}
}
@ -445,13 +469,11 @@ class QvitterPlugin extends Plugin {
if (!empty($attachment_url_to_id[$attachment['url']])) {
$attachment['id'] = $attachment_url_to_id[$attachment['url']]['id'];
$attachment['width'] = $attachment_url_to_id[$attachment['url']]['width'];
$attachment['height'] = $attachment_url_to_id[$attachment['url']]['height'];
// if the attachment is other than image, and we have a thumb (e.g. videos),
// we include the default thumbnail url
if(substr($attachment['mimetype'],0,5) != 'image') {
$attachment['thumb_url'] = $attachment_url_to_id[$attachment['url']]['thumb_url'];
}
$attachment['height'] = $attachment_url_to_id[$attachment['url']]['height'];
$attachment['thumb_url'] = $attachment_url_to_id[$attachment['url']]['thumb_url'];
if(isset($attachment_url_to_id[$attachment['url']]['animated'])) {
$attachment['animated'] = $attachment_url_to_id[$attachment['url']]['animated'];
}
}
}
}
@ -554,7 +576,6 @@ class QvitterPlugin extends Plugin {
return true;
}
/**
@ -591,6 +612,7 @@ class QvitterPlugin extends Plugin {
* @return boolean hook flag
*/
function onStartNoticeDistribute($notice) {
assert($notice->id > 0); // since we removed tests below
// don't add notifications for activity type notices
@ -658,6 +680,7 @@ class QvitterPlugin extends Plugin {
return true;
}
/**
* Delete any notifications tied to deleted notices and un-repeats

39
css/qvitter.css
View File

@ -1693,7 +1693,13 @@ body.rtl .queet.rtl .expanded-content {
background-size:100% auto;
}
.queet .thumb-container[href*="://www.youtube.com"]:before {
.queet .queet-thumbs.thumb-num-1 .thumb-container.youtube {
height:250px;
}
.stream-item:not(.expanded) .queet .queet-thumbs.thumb-num-1 .thumb-container.play-button:before,
.queet .queet-thumbs:not(.thumb-num-1) .thumb-container.play-button:before,
.modal-content .queet .thumb-container.play-button:before {
display:block;
position:absolute;
width:100%;
@ -1706,12 +1712,12 @@ body.rtl .queet.rtl .expanded-content {
font-size:100px;
color:rgba(255,255,255,0.65);
}
.queet .thumb-container[href*="://www.youtube.com"] img {
.queet .thumb-container.play-button img {
z-index:2;
position:relative;
}
.queet .queet-thumbs .thumb-container.no-cover .attachment-thumb {
.queet .queet-thumbs.thumb-num-1 .thumb-container.no-cover .attachment-thumb {
min-height:0;
}
.queet .thumb-container:before {
@ -1864,6 +1870,14 @@ body.rtl .queet.rtl .expanded-content {
max-height: 125px;
min-height: 125px;
}
.queet .queet-thumbs.thumb-num-6 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-7 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-8 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-9 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-10 .thumb-container.play-button:before{
line-height: 125px;
font-size:70px;
}
.queet .queet-thumbs.thumb-num-11 .thumb-container,
.queet .queet-thumbs.thumb-num-12 .thumb-container,
.queet .queet-thumbs.thumb-num-13 .thumb-container,
@ -1878,6 +1892,15 @@ body.rtl .queet.rtl .expanded-content {
.queet .queet-thumbs.thumb-num-more-than-fifteen .attachment-thumb {
max-height: 83px;
min-height: 83px;
}
.queet .queet-thumbs.thumb-num-11 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-12 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-13 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-14 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-15 .thumb-container.play-button:before,
.queet .queet-thumbs.thumb-num-more-than-fifteen .thumb-container.play-button:before {
line-height: 83px;
font-size:50px;
}
.stream-item.collapsing > .queet .thumb-container {
@ -4045,6 +4068,14 @@ body.rtl .modal-footer button {
margin: 0 auto;
min-height: 0;
}
#queet-thumb-popup .modal-body .thumb-container.youtube iframe {
position:absolute;
z-index:2;
}
#queet-thumb-popup .modal-body .thumb-container.youtube {
background-image:none !important;
z-index:1;
}
#queet-thumb-popup .modal-body .thumb-container[href$=".svg"],
#queet-thumb-popup .modal-body .thumb-container[href$=".png"] {
background-color:#fff;
@ -4093,7 +4124,7 @@ body.rtl .modal-footer button {
}
#queet-thumb-popup .prev-thumb.disabled,
#queet-thumb-popup .next-thumb.disabled {
color:#aaa;
color:rgba(255,255,255,0.2);
cursor:default;
}
#queet-thumb-popup .prev-thumb:not(.disabled):hover:before,

112
js/dom-functions.js
View File

@ -1001,6 +1001,17 @@ function expand_queet(q,doScrolling) {
// remove some things right away
q.find('.inline-reply-caret').remove();
// "unplay" gif image on collapse if there's only one attachment (switch to thumb)
var gifToUnPlay = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button').children('.attachment-thumb[data-mime-type="image/gif"]');
if(gifToUnPlay.length > 0) {
gifToUnPlay.attr('src',gifToUnPlay.attr('data-thumb-url'));
gifToUnPlay.parent('.thumb-container').css('background-image','url(\'' + gifToUnPlay.attr('data-thumb-url') + '\')');
}
// show thumbs (if hidden) and remove any iframe video immediately
q.children('.queet').find('.queet-thumbs').removeClass('hide-thumbs');
q.children('.queet').find('iframe').remove();
q.addClass('collapsing');
if(q.hasClass('conversation')) {
q.removeClass('expanded');
@ -1097,7 +1108,7 @@ function expand_queet(q,doScrolling) {
}
});
}
// add expanded container
var longdate = parseTwitterLongDate(q.find('.created-at').attr('data-created-at'));
var qurl = q.find('.created-at').find('a').attr('href');
@ -1106,57 +1117,62 @@ function expand_queet(q,doScrolling) {
// show expanded content
q.find('.stream-item-footer').before('<div class="expanded-content"><div class="queet-stats-container"></div><div class="client-and-actions"><span class="metadata">' + metadata + '</span></div></div>');
// maybe show images or videos, look for them in both the text and in the thumbnail container
$.each(q.children('.queet').find('.queet-text, .attachments').find('a'), function() {
var attachment_mimetype = $(this).find('img').attr('data-mime-type');
if(typeof attachment_mimetype == 'undefined') {
attachment_mimetype = '';
// "play" gif image on expand if there's only one attachment (switch to full gif from thumb)
var gifToPlay = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button').children('.attachment-thumb[data-mime-type="image/gif"]');
if(gifToPlay.length > 0) {
gifToPlay.attr('src',gifToPlay.attr('data-full-image-url'));
gifToPlay.parent('.thumb-container').css('background-image','url(\'' + gifToPlay.attr('data-full-image-url') + '\')');
}
var attachment_title = $(this).attr('title');
// attachments in the .attachments container don't have a title, their full url is in the href
if(typeof attachment_title == 'undefined') {
attachment_title = $(this).attr('href');
}
// 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) {
var youtubeId = q.children('.queet').find('.queet-thumbs.thumb-num-1').children('.thumb-container.play-button.youtube').children('.attachment-thumb').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);
if(q.children('.queet').find('.expanded-content').children('.media').children('iframe[src="//www.youtube.com/embed/' + youtubeId + '"]').length < 1) { // not if already showed
// hide video thumbnail if it's the only one
if(q.children('.queet').find('.queet-thumbs').children('.thumb-container').length < 2) {
q.children('.queet').find('.queet-thumbs').addClass('hide-thumbs');
}
// show video
q.children('.queet').find('.expanded-content').prepend('<div class="media"><iframe width="510" height="315" src="//www.youtube.com/embed/' + youtubeId + '" frameborder="0" allowfullscreen></iframe></div>');
}
}
// show certain attachments in expanded content
$.each(q.data('attachments'), function() {
var attachment_mimetype = this.mimetype;
var attachment_title = this.url;
// filename extension
var attachment_title_extension = attachment_title.substr((~-attachment_title.lastIndexOf(".") >>> 0) + 2);
// attachments in the content link to /attachment/etc url and not direct to image/video, link is in title
if(typeof attachment_title != 'undefined') {
// hack to make remote webm-movies load
if(attachment_title_extension == 'webm') {
attachment_mimetype = 'video/webm';
}
// videos
if($.inArray(attachment_mimetype, ['video/mp4', 'video/ogg', 'video/quicktime', 'video/webm']) >= 0) {
if($.inArray(attachment_mimetype, ['video/mp4', 'video/ogg', 'video/quicktime', 'video/webm']) >=0) {
if(q.children('.queet').find('.expanded-content').children('.media').children('video').children('source[href="' + attachment_title + '"]').length < 1) { // not if already showed
// local attachment with a thumbnail
if(typeof $(this).find('img').attr('data-big-thumbnail') != 'undefined') {
var attachment_poster = $(this).find('img').attr('data-big-thumbnail');
var attachment_poster = '';
if(typeof this.thumb_url != 'undefined') {
attachment_poster = ' poster="' + this.thumb_url + '"';
}
if(q.children('.queet').find('.expanded-content').children('.media').length > 0) {
q.children('.queet').find('.media').last().after('<div class="media"><video class="u-video" controls="controls" poster="' + attachment_poster + '"><source type="' + attachment_mimetype + '" src="' + attachment_title + '" /></video></div>');
q.children('.queet').find('.media').last().after('<div class="media"><video class="u-video" controls="controls"' + attachment_poster + '><source type="' + attachment_mimetype + '" src="' + attachment_title + '" /></video></div>');
}
else {
q.children('.queet').find('.expanded-content').prepend('<div class="media"><video class="u-video" controls="controls" poster="' + attachment_poster + '"><source type="' + attachment_mimetype + '" src="' + attachment_title + '" /></video></div>');
q.children('.queet').find('.expanded-content').prepend('<div class="media"><video class="u-video" controls="controls"' + attachment_poster + '><source type="' + attachment_mimetype + '" src="' + attachment_title + '" /></video></div>');
}
}
}
else if(attachment_title.indexOf('youtube.com/watch?v=') > -1 || attachment_title.indexOf('://youtu.be/') > -1) {
var youtubeId = attachment_title.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);
if(q.children('.queet').find('.expanded-content').children('.media').children('iframe[src="//www.youtube.com/embed/' + youtubeId + '"]').length < 1) { // not if already showed
// hide video thumbnail if it's the only one
if(q.children('.queet').find('.queet-thumbs').children('.thumb-container').length < 2) {
q.children('.queet').find('.queet-thumbs').addClass('hide-thumbs');
}
// show video
q.children('.queet').find('.expanded-content').prepend('<div class="media"><iframe width="510" height="315" src="//www.youtube.com/embed/' + youtubeId + '" frameborder="0" allowfullscreen></iframe></div>');
}
}
else {
// other plugins, e.g. gotabulo, can check for other attachment file formats to expand
window.currentlyExpanding = {
@ -1209,7 +1225,6 @@ function cleanUpAfterCollapseQueet(q) {
q.children('.queet').removeAttr('style');
q.children('.queet').find('.queet-thumbs.thumb-num-1').removeAttr('style');
q.children('.queet').find('.queet-thumbs.thumb-num-1 .thumb-container').css('max-height','');
q.children('.queet').find('.queet-thumbs').removeClass('hide-thumbs');
}
@ -1932,7 +1947,7 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
var attachmentNum = 0;
if(typeof obj.attachments != "undefined") {
$.each(obj.attachments, function(){
if(this.id != null) {
if(this.id != null) { // if there's an id we assume this is a image or video
var bigThumbW = 1000;
var bigThumbH = 3000;
if(bigThumbW > window.siteMaxThumbnailSize) {
@ -1947,19 +1962,39 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
if(this.width/this.height > 2) {
noCoverClass=' no-cover';
}
// if thumb_url is set, we use that
if(typeof this.thumb_url != 'undefined') {
var img_url = this.thumb_url;
// play button for videos and animated gifs
var playButtonClass = '';
if(this.url.indexOf('://www.youtube.com') > -1
|| (typeof this.animated != 'undefined' && this.animated === true)) {
var playButtonClass = ' play-button';
}
// youtube class
var youTubeClass = '';
if(this.url.indexOf('://www.youtube.com') > -1) {
youTubeClass = ' youtube';
}
// animated gifs always get default small non-animated thumbnail
if(this.animated === true && typeof this.thumb_url != 'undefined') {
var img_url = this.thumb_url;
}
// if no dimensions are set, go with default thumb
else if(this.width === null && this.height === null && typeof this.thumb_url != 'undefined') {
var img_url = this.thumb_url;
}
// large images get large thumbnail
else if(this.width > 1000) {
var img_url = window.siteAttachmentURLBase + this.id + '/thumbnail?w=' + bigThumbW + '&h=' + bigThumbH;
}
// no thumbnails for small images
else {
var img_url = this.url;
}
attachment_html = attachment_html + '<a style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + '" href="' + this.url + '"><img class="attachment-thumb" data-mime-type="' + this.mimetype + '" src="' + img_url + '"/ data-width="' + this.width + '" data-height="' + this.height + '"></a>';
attachment_html = attachment_html + '<a style="background-image:url(\'' + img_url + '\')" class="thumb-container' + noCoverClass + playButtonClass + youTubeClass + '" 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>';
attachmentNum++;
}
else if (this.mimetype == 'image/svg+xml') {
@ -1988,6 +2023,7 @@ function buildQueetHtml(obj, idInStream, extraClassesThisRun, requeeted_by, isCo
var queetHtml = '<div \
id="' + idPrepend + 'stream-item-' + obj.id + '" \
class="stream-item ' + extraClassesThisRun + ' ' + requeetedClass + ' ' + favoritedClass + '" \
data-attachments=\'' + JSON.stringify(obj.attachments) + '\'\
data-source="' + escape(obj.source) + '" \
data-quitter-id="' + obj.id + '" \
data-conversation-id="' + obj.statusnet_conversation_id + '" \

59
js/qvitter.js
View File

@ -1468,8 +1468,30 @@ $('body').on('click','.stream-item .queet img.attachment-thumb',function (event)
$parentStreamItemClone.find('.queet-thumbs, .expanded-content, .inline-reply-queetbox, .stream-item-footer').remove();
var footerHTML = $parentStreamItemClone.find('.queet').outerHTML();
$queetThumbsClone.find('img.attachment-thumb[src="' + thisAttachmentThumbSrc + '"]').parent().addClass('display-this-thumb');
$thumbToDisplay = $queetThumbsClone.find('img.attachment-thumb[src="' + thisAttachmentThumbSrc + '"]');
$thumbToDisplay.parent().addClass('display-this-thumb');
// "play" all animated gifs and add youtube iframes to all youtube videos
$.each($queetThumbsClone.find('img.attachment-thumb'),function(){
if($(this).attr('data-mime-type') == 'image/gif'
&& $(this).parent().hasClass('play-button')) {
$(this).attr('src',$(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')){
// autoplay a clicked video
var autoplayFlag = '';
if($(this).parent().hasClass('display-this-thumb')) {
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>');
}
});
// navigation buttons
var imgNum = parentStreamItem.children('.queet').find('.attachment-thumb').length;
if(imgNum > 1) {
$queetThumbsClone.find('.queet-thumbs').before('<div class="prev-thumb"></div>');
@ -1478,12 +1500,14 @@ $('body').on('click','.stream-item .queet img.attachment-thumb',function (event)
if(parentStreamItem.hasClass('expanded')) {
var calculatedDimensions = calculatePopUpAndImageDimensions($(this).attr('src'));
var $thisImgInQueetThumbsClone = $queetThumbsClone.find('img[src="' + $(this).attr('src') + '"]');
var calculatedDimensions = calculatePopUpAndImageDimensions($thumbToDisplay.attr('src'));
var $thisImgInQueetThumbsClone = $queetThumbsClone.find('img[src="' + $thumbToDisplay.attr('src') + '"]');
// set dimensions
$thisImgInQueetThumbsClone.width(calculatedDimensions.displayImgWidth);
$thisImgInQueetThumbsClone.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
$thisImgInQueetThumbsClone.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth);
$thisImgInQueetThumbsClone.parent('.thumb-container').children('iframe').attr('height',calculatedDimensions.displayImgHeight);
// open popup
popUpAction('queet-thumb-popup', '', '' + $queetThumbsClone.outerHTML() + '', footerHTML, calculatedDimensions.popUpWidth);
@ -1562,11 +1586,22 @@ $('body').on('click','#queet-thumb-popup .attachment-thumb',function (event) {
var nextImage = $(this).parent().next().children('.attachment-thumb');
if(nextImage.length>0) {
// start and stop youtube videos, if any
$.each($(this).parent('.youtube').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
$.each(nextImage.parent('.youtube').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});
// set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(nextImage.attr('src'));
nextImage.width(calculatedDimensions.displayImgWidth);
nextImage.width(calculatedDimensions.displayImgWidth);
nextImage.parent('.thumb-container').width(calculatedDimensions.displayImgWidth);
$('#queet-thumb-popup .modal-draggable').width(calculatedDimensions.popUpWidth);
nextImage.parent('.thumb-container').children('iframe').attr('width',calculatedDimensions.displayImgWidth);
nextImage.parent('.thumb-container').children('iframe').attr('height',calculatedDimensions.displayImgHeight);
$('#queet-thumb-popup .modal-draggable').width(calculatedDimensions.popUpWidth);
// switch image
$(this).parent().removeClass('display-this-thumb');
@ -1584,10 +1619,21 @@ $('body').on('click','#queet-thumb-popup .next-thumb',function (event) {
$('body').on('click','#queet-thumb-popup .prev-thumb',function (event) {
var prevImage = $(this).parent().find('.display-this-thumb').prev().children('img');
if(prevImage.length>0) {
// start and stop youtube videos, if any
$.each($(this).parent().find('.display-this-thumb.youtube').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
$.each(prevImage.parent('.youtube').children('iframe'),function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});
// set dimensions of next image and the popup
var calculatedDimensions = calculatePopUpAndImageDimensions(prevImage.attr('src'));
prevImage.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('height',calculatedDimensions.displayImgHeight);
$('#queet-thumb-popup .modal-draggable').width(calculatedDimensions.popUpWidth);
// switch image
@ -2341,7 +2387,8 @@ $('body').on('keyup', 'div.queet-box-syntax', function(e) {
// see if anyone we're following matches
var suggestionsToShow = [];
var suggestionsUsernameCount = {};
var suggestionsUsernameCount = {};
suggestionsUsernameCount[window.loggedIn.screen_name] = 1; // any suggestions with the same screen name as mine will get their server url added
$.each(window.following,function(){
var userregex = new RegExp(term);
if(this.username.toLowerCase().match(userregex) || this.name.toLowerCase().match(userregex)) {