Preview for Videos and images / Video resolution selection

diff --git a/src/Model/Item.php b/src/Model/Item.php
index ae67f4854dbde37f9b6d1f486dde83c579073e02..f387a1a7282aeb722a7f0b462c29106bde5d528e 100644 (file)
--- a/src/Model/Item.php
+++ b/src/Model/Item.php
@@ -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,13 +2747,21 @@ 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'],
-                                               'src'    => $the_url,
-                                               'mime'   => $attachment['mimetype'],
+                                               'id'      => $attachment['id'],
+                                               'src'     => $the_url,
+                                               'name'    => $attachment['name'] ?: $attachment['url'],
+                                               'preview' => $preview_url,
+                                               'mime'    => $attachment['mimetype'],
                                        ],
                                ]);
                                if ($item['post-type'] == Item::PT_VIDEO) {
@@ -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,
                                        ],
                                ]);

diff --git a/src/Model/Post/Media.php b/src/Model/Post/Media.php
index 82525dc577a5a17a9039317d2d05c1492ed7a73a..0aa9a74d1c6c47166c6cc4d0fa5e808f1daafbb8 100644 (file)
--- a/src/Model/Post/Media.php
+++ b/src/Model/Post/Media.php
@@ -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,11 +482,31 @@ 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;
+                               $attachments['additional'][] = $medium;
+                       }
+               }
+               if (!empty($selected)) {
+                       $attachments['visual'][] = $video[$selected];
+                       unset($video[$selected]);
+                       foreach ($video as $element) {
+                               $attachments['additional'][] = $element;
                        }
                }
                return $attachments;

diff --git a/src/Protocol/ActivityPub/Receiver.php b/src/Protocol/ActivityPub/Receiver.php
index c98e7014396a5377760f345e53a4f4ce72afcee4..558406ddc7d474c890cea3da358cfecdced3f7c0 100644 (file)
--- a/src/Protocol/ActivityPub/Receiver.php
+++ b/src/Protocol/ActivityPub/Receiver.php
@@ -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');

diff --git a/view/templates/content/audio.tpl b/view/templates/content/audio.tpl
index 0b0467ab242073957cb3c11c359add4c169d1ae3..8f298057718e814686adfb1c13104de7ffa927f5 100644 (file)
--- a/view/templates/content/audio.tpl
+++ b/view/templates/content/audio.tpl
@@ -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>

diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl
index 6251761dc0fefe31ea8a3af065ae263deeffd0ca..2885d869fbd7c0c7cd5e7b4e0f5584c57ff0d98e 100644 (file)
--- a/view/templates/content/image.tpl
+++ b/view/templates/content/image.tpl
@@ -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>

diff --git a/view/templates/video_top.tpl b/view/templates/video_top.tpl
index 132b89807d540c2fb4ef99a2809e32df01c6cb49..3f9d5886a5595f6227fda27c79c3c09e26159acf 100644 (file)
--- a/view/templates/video_top.tpl
+++ b/view/templates/video_top.tpl
@@ -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 }}

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 2d56d74f23808aca4aaa7aa12bd925757cb76592..a06d794f5513dce1a1f2a9b387c61501f2b64dd4 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -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;

diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css
index 0d3728c049ddc1add8a601bf9852e48c632ffa13..e19c7224584925a9fb0ebbf96d1d8e1f8e02d0ba 100644 (file)
--- a/view/theme/frio/scheme/black.css
+++ b/view/theme/frio/scheme/black.css
@@ -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;

diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css
index db585f5bebd6ef0a604d559d29c5703fe8f8d6f5..6f38a5190fb5705ad96c395ba6085006df9fa0cb 100644 (file)
--- a/view/theme/frio/scheme/dark.css
+++ b/view/theme/frio/scheme/dark.css
@@ -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;