Preview for Videos and images / Video resolution selection

This commit is contained in:
Michael 2021-04-28 19:05:46 +00:00
parent 909e029168
commit 3d64c3031b
9 changed files with 62 additions and 35 deletions

View file

@ -35,13 +35,13 @@ use Friendica\Core\Worker;
use Friendica\Database\DBA;
use Friendica\DI;
use Friendica\Model\Post;
use Friendica\Model\Post\Media;
use Friendica\Protocol\Activity;
use Friendica\Protocol\ActivityPub;
use Friendica\Protocol\Diaspora;
use Friendica\Util\DateTimeFormat;
use Friendica\Util\Map;
use Friendica\Util\Network;
use Friendica\Util\Proxy;
use Friendica\Util\Strings;
use Friendica\Worker\Delivery;
use LanguageDetection\Language;
@ -2667,7 +2667,7 @@ class Item
$shared_item = Post::selectFirst(['uri-id', 'plink'], ['guid' => $shared['guid']]);
$shared_uri_id = $shared_item['uri-id'] ?? 0;
$shared_plink = $shared_item['plink'] ?? '';
$attachments = Post\Media::splitAttachments($shared_uri_id);
$attachments = Post\Media::splitAttachments($shared_uri_id, $shared['guid']);
$s = self::addVisualAttachments($attachments, $item, $s, true);
$s = self::addLinkAttachment($attachments, $item, $s, true, '');
$s = self::addNonVisualAttachments($attachments, $item, $s, true);
@ -2676,7 +2676,7 @@ class Item
$shared_plink = '';
}
$attachments = Post\Media::splitAttachments($item['uri-id']);
$attachments = Post\Media::splitAttachments($item['uri-id'], $item['guid']);
$s = self::addVisualAttachments($attachments, $item, $s, false);
$s = self::addLinkAttachment($attachments, $item, $s, false, $shared_plink);
$s = self::addNonVisualAttachments($attachments, $item, $s, false);
@ -2747,12 +2747,20 @@ class Item
'network' => $item['author-network'], 'url' => $item['author-link']];
$the_url = Contact::magicLinkByContact($author, $attachment['url']);
if (!empty($attachment['preview'])) {
$preview_url = Proxy::proxifyUrl(Contact::magicLinkByContact($author, $attachment['preview']));
} else {
$preview_url = '';
}
if (($attachment['filetype'] == 'video')) {
/// @todo Move the template to /content as well
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('video_top.tpl'), [
'$video' => [
'id' => $item['author-id'],
'id' => $attachment['id'],
'src' => $the_url,
'name' => $attachment['name'] ?: $attachment['url'],
'preview' => $preview_url,
'mime' => $attachment['mimetype'],
],
]);
@ -2764,8 +2772,9 @@ class Item
} elseif ($attachment['filetype'] == 'audio') {
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/audio.tpl'), [
'$audio' => [
'id' => $item['author-id'],
'id' => $attachment['id'],
'src' => $the_url,
'name' => $attachment['name'] ?: $attachment['url'],
'mime' => $attachment['mimetype'],
],
]);
@ -2775,9 +2784,13 @@ class Item
$trailing .= $media;
}
} elseif ($attachment['filetype'] == 'image') {
if (empty($preview_url) && (max($attachment['width'], $attachment['height']) > 600)) {
$preview_url = Proxy::proxifyUrl($the_url, false, ($attachment['width'] > $attachment['height']) ? Proxy::SIZE_MEDIUM : Proxy::SIZE_LARGE);
}
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
'$image' => [
'src' => $the_url,
'src' => Proxy::proxifyUrl($the_url),
'preview' => $preview_url,
'attachment' => $attachment,
],
]);

View file

@ -448,9 +448,10 @@ class Media
* Split the attachment media in the three segments "visual", "link" and "additional"
*
* @param int $uri_id
* @param string $guid
* @return array attachments
*/
public static function splitAttachments(int $uri_id)
public static function splitAttachments(int $uri_id, string $guid = '')
{
$attachments = ['visual' => [], 'link' => [], 'additional' => []];
@ -459,6 +460,9 @@ class Media
return $attachments;
}
$height = 0;
$selected = '';
foreach ($media as $medium) {
$type = explode('/', current(explode(';', $medium['mimetype'])));
if (count($type) < 2) {
@ -478,13 +482,33 @@ class Media
continue;
}
if (in_array($medium['type'], [self::AUDIO, self::VIDEO, self::IMAGE]) ||
in_array($filetype, ['audio', 'video', 'image'])) {
if (in_array($medium['type'], [self::AUDIO, self::IMAGE]) ||
in_array($filetype, ['audio', 'image'])) {
$attachments['visual'][] = $medium;
} elseif (($medium['type'] == self::VIDEO) || ($filetype == 'video')) {
if (strpos($medium['url'], $guid) !== false) {
// Peertube videos are delivered in many different resolutions. We pick a moderate one.
// By checking against the GUID we also ensure to only work this way on Peertube posts.
// This wouldn't be executed when someone for example on Mastodon was sharing multiple videos in a single post.
if (empty($height) || ($height > $medium['height']) && ($medium['height'] >= 480)) {
$height = $medium['height'];
$selected = $medium['url'];
}
$video[$medium['url']] = $medium;
} else {
$attachments['visual'][] = $medium;
}
} else {
$attachments['additional'][] = $medium;
}
}
if (!empty($selected)) {
$attachments['visual'][] = $video[$selected];
unset($video[$selected]);
foreach ($video as $element) {
$attachments['additional'][] = $element;
}
}
return $attachments;
}
}

View file

@ -1268,14 +1268,6 @@ class Receiver
} elseif ($filetype == 'video') {
$height = (int)JsonLD::fetchElement($url, 'as:height', '@value');
$size = (int)JsonLD::fetchElement($url, 'pt:size', '@value');
// We save bandwidth by using a moderate height (alt least 480 pixel height)
// Peertube normally uses these heights: 240, 360, 480, 720, 1080
if (!empty($attachments[$filetype]['height']) &&
($height > $attachments[$filetype]['height']) && ($attachments[$filetype]['height'] >= 480)) {
continue;
}
$attachments[$filetype] = ['type' => $mediatype, 'url' => $href, 'height' => $height, 'size' => $size];
} elseif (in_array($mediatype, ['application/x-bittorrent', 'application/x-bittorrent;x-scheme-handler/magnet'])) {
$height = (int)JsonLD::fetchElement($url, 'as:height', '@value');

View file

@ -1,4 +1,4 @@
<audio src="{{$audio.src}}" controls>
<a href="{{$audio.src}}">{{$audio.src}}</a>
<a href="{{$audio.src}}">{{$audio.name}}</a>
</audio>
<br>

View file

@ -1,2 +1,6 @@
{{if $image.preview}}
<a href="{{$image.attachment.url}}"><img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}"></a>
{{else}}
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
{{/if}}
<br>

View file

@ -1,7 +1,7 @@
<div class="video-top-wrapper lframe" id="video-top-wrapper-{{$video.id}}">
{{* set preloading to none to lessen the load on the server *}}
<video controls preload="none" data-setup="" width="100%" height="auto">
<source src="{{$video.src}}" type="{{$video.mime}}" />
<video src="{{$video.src}}" controls {{if $video.preview}}preload="none" poster="{{$video.preview}}" {else}preload="metadata" {{/if}}width="100%" height="auto">
<a href="{{$video.src}}">{{$video.name}}</a>
</video>
{{if $delete_url }}

View file

@ -1988,8 +1988,7 @@ code > .hl-main {
}
/* Like/Comment/etc buttons */
.wall-item-container .wall-item-links,
.wall-item-container .wall-item-actions button,
.wall-item-container .body-attach > a {
.wall-item-container .wall-item-actions button > a {
opacity: 0.4;
-webkit-transition: all 0.25s ease-in-out;
@ -1999,8 +1998,7 @@ code > .hl-main {
transition: all 0.25s ease-in-out;
}
.wall-item-container:hover .wall-item-links,
.wall-item-container:hover .wall-item-actions button,
.wall-item-container:hover .body-attach > a {
.wall-item-container:hover .wall-item-actions button > a {
opacity: 1;
-webkit-transition: all 0.25s ease-in-out;

View file

@ -261,8 +261,7 @@ input[type="submit"],
@media (min-width: 768px) {
.wall-item-container .wall-item-links,
.wall-item-container .wall-item-actions button,
.wall-item-container .body-attach > a {
.wall-item-container .wall-item-actions button > a {
opacity: 0.5;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
@ -271,8 +270,7 @@ input[type="submit"],
transition: all 0.25s ease-in-out;
}
.wall-item-container:hover .wall-item-links,
.wall-item-container:hover .wall-item-actions button,
.wall-item-container:hover .body-attach > a {
.wall-item-container:hover .wall-item-actions button > a {
opacity: 1;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;

View file

@ -250,8 +250,7 @@ input[type="submit"],
@media (min-width: 768px) {
.wall-item-container .wall-item-links,
.wall-item-container .wall-item-actions button,
.wall-item-container .body-attach > a {
.wall-item-container .wall-item-actions button > a {
opacity: 0.3;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
@ -260,8 +259,7 @@ input[type="submit"],
transition: all 0.25s ease-in-out;
}
.wall-item-container:hover .wall-item-links,
.wall-item-container:hover .wall-item-actions button,
.wall-item-container:hover .body-attach > a {
.wall-item-container:hover .wall-item-actions button > a {
opacity: 1;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;