Merge pull request #626 from StCyr/stCyr_showAttachments

show post attachments

appinfo/routes.php

@@ -45,6 +45,8 @@ return [
 		],
 		['name' => 'Navigation#documentGet', 'url' => '/document/get', 'verb' => 'GET'],
 		['name' => 'Navigation#documentGetPublic', 'url' => '/document/public', 'verb' => 'GET'],
+		['name' => 'Navigation#resizedGet', 'url' => '/document/get/resized', 'verb' => 'GET'],
+		['name' => 'Navigation#resizedGetPublic', 'url' => '/document/public/resized', 'verb' => 'GET'],
 
 		['name' => 'ActivityPub#actor', 'url' => '/users/{username}', 'verb' => 'GET'],
 		['name' => 'ActivityPub#actorAlias', 'url' => '/@{username}/', 'verb' => 'GET'],
@@ -69,6 +71,8 @@ return [
 		['name' => 'Local#streamLiked', 'url' => '/api/v1/stream/liked', 'verb' => 'GET'],
 		['name' => 'Local#streamAccount', 'url' => '/api/v1/account/{username}/stream', 'verb' => 'GET'],
 
+		['name' => 'Local#postData', 'url' => '/local/v1/post', 'verb' => 'GET'],
+
 		['name' => 'Local#postCreate', 'url' => '/api/v1/post', 'verb' => 'POST'],
 		['name' => 'Local#postDelete', 'url' => '/api/v1/post', 'verb' => 'DELETE'],
 

composer.json

@@ -16,6 +16,7 @@
   },
   "require": {
     "daita/my-small-php-tools": "dev-master",
+    "gumlet/php-image-resize": "1.9.*",
     "friendica/json-ld": "^1.0"
   },
   "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "d711d18021f3044f1dbf97c6a423d2ac",
+    "content-hash": "f93a783c86bad53b0b8486db3fc61380",
     "packages": [
         {
             "name": "daita/my-small-php-tools",
@@ -12,12 +12,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/daita/my-small-php-tools.git",
-                "reference": "45a543b86ad93ea36845e5bc32ca03320b6cfa9c"
+                "reference": "6ba571ffa6bda6f32fcc6529a474ccc777eb1fb2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/daita/my-small-php-tools/zipball/45a543b86ad93ea36845e5bc32ca03320b6cfa9c",
-                "reference": "45a543b86ad93ea36845e5bc32ca03320b6cfa9c",
+                "url": "https://api.github.com/repos/daita/my-small-php-tools/zipball/6ba571ffa6bda6f32fcc6529a474ccc777eb1fb2",
+                "reference": "6ba571ffa6bda6f32fcc6529a474ccc777eb1fb2",
                 "shasum": ""
             },
             "require": {
@@ -40,7 +40,7 @@
                 }
             ],
             "description": "My small PHP Tools",
-            "time": "2019-06-21T16:40:45+00:00"
+            "time": "2019-07-12T20:21:51+00:00"
         },
         {
             "name": "friendica/json-ld",
@@ -85,6 +85,61 @@
                 "jsonld"
             ],
             "time": "2018-10-08T20:41:00+00:00"
+        },
+        {
+            "name": "gumlet/php-image-resize",
+            "version": "1.9.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/gumlet/php-image-resize.git",
+                "reference": "06339a9c1b167acd58173db226f57957a6617547"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/gumlet/php-image-resize/zipball/06339a9c1b167acd58173db226f57957a6617547",
+                "reference": "06339a9c1b167acd58173db226f57957a6617547",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "ext-gd": "*",
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "apigen/apigen": "^4.1",
+                "ext-exif": "*",
+                "ext-gd": "*",
+                "php-coveralls/php-coveralls": "^2.1",
+                "phpunit/phpunit": "^4.8"
+            },
+            "suggest": {
+                "ext-exif": "Auto-rotate jpeg files"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Gumlet\\": "lib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Aditya Patadia",
+                    "homepage": "http://aditya.patadia.org/"
+                }
+            ],
+            "description": "PHP class to re-size and scale images",
+            "homepage": "https://github.com/gumlet/php-image-resize",
+            "keywords": [
+                "image",
+                "php",
+                "resize",
+                "scale"
+            ],
+            "time": "2019-01-01T13:53:00+00:00"
         }
     ],
     "packages-dev": [

lib/Controller/LocalController.php

@@ -182,6 +182,26 @@ class LocalController extends Controller {
 	}
 
 
+	/**
+	 * get info about a post (limited to viewer rights).
+	 *
+	 * @NoAdminRequired
+	 *
+	 * @param string $id
+	 *
+	 * @return DataResponse
+	 */
+	public function postData(string $id): DataResponse {
+		try {
+			$this->initViewer(true);
+
+			return $this->directSuccess($this->noteService->getNoteById($id, true));
+		} catch (Exception $e) {
+			return $this->fail($e);
+		}
+	}
+
+
 	/**
 	 * Delete your own post.
 	 *
@@ -703,9 +723,10 @@ class LocalController extends Controller {
 			$actor = $this->cacheActorService->getFromId($id);
 			if ($actor->gotIcon()) {
 				$avatar = $actor->getIcon();
-				$document = $this->documentService->getFromCache($avatar->getId());
+				$document = $this->documentService->getFromCache($avatar->getId(), $mime);
 
-				$response = new FileDisplayResponse($document);
+				$response =
+					new FileDisplayResponse($document, Http::STATUS_OK, ['Content-Type' => $mime]);
 				$response->cacheFor(86400);
 
 				return $response;

lib/Controller/NavigationController.php

@@ -34,6 +34,7 @@ use daita\MySmallPhpTools\Traits\Nextcloud\TNCDataResponse;
 use daita\MySmallPhpTools\Traits\TArrayTools;
 use Exception;
 use OC;
+use OC\AppFramework\Http;
 use OC\User\NoUserException;
 use OCA\Social\AppInfo\Application;
 use OCA\Social\Exceptions\AccountAlreadyExistsException;
@@ -139,7 +140,7 @@ class NavigationController extends Controller {
 				'firstrun' => false,
 				'setup'    => false,
 				'isAdmin'  => OC::$server->getGroupManager()
-										  ->isAdmin($this->userId),
+										 ->isAdmin($this->userId),
 				'cliUrl'   => $this->getCliUrl()
 			]
 		];
@@ -282,17 +283,61 @@ class NavigationController extends Controller {
 
 	/**
 	 * @NoAdminRequired
+	 * @NoCSRFRequired
 	 *
 	 * @param string $id
 	 *
 	 * @return Response
 	 */
 	public function documentGet(string $id): Response {
+		try {
+			$mime = '';
+			$file = $this->documentService->getFromCache($id, $mime);
+
+			return new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $mime]);
+
+		} catch (Exception $e) {
+			return $this->fail($e);
+		}
+	}
+
+	/**
+	 *
+	 * @PublicPage
+	 * @NoCSRFRequired
+	 *
+	 * @param string $id
+	 *
+	 * @return Response
+	 */
+	public function documentGetPublic(string $id): Response {
 
 		try {
-			$file = $this->documentService->getFromCache($id);
+			$mime = '';
+			$file = $this->documentService->getFromCache($id, $mime, true);
 
-			return new FileDisplayResponse($file);
+			return new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $mime]);
+		} catch (Exception $e) {
+			return $this->fail($e);
+		}
+	}
+
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @param string $id
+	 *
+	 * @return Response
+	 */
+	public function resizedGet(string $id): Response {
+
+		try {
+			$mime = '';
+			$file = $this->documentService->getResizedFromCache($id, $mime);
+
+			return new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $mime]);
 		} catch (Exception $e) {
 			return $this->fail($e);
 		}
@@ -307,15 +352,17 @@ class NavigationController extends Controller {
 	 *
 	 * @return Response
 	 */
-	public function documentGetPublic(string $id): Response {
+	public function resizedGetPublic(string $id): Response {
 
 		try {
-			$file = $this->documentService->getFromCache($id, true);
+			$mime = '';
+			$file = $this->documentService->getResizedFromCache($id, $mime, true);
 
-			return new FileDisplayResponse($file);
+			return new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $mime]);
 		} catch (Exception $e) {
 			return $this->fail($e);
 		}
 	}
 
 }
+

lib/Db/CacheDocumentsRequest.php

@@ -56,6 +56,7 @@ class CacheDocumentsRequest extends CacheDocumentsRequestBuilder {
 		   ->setValue('mime_type', $qb->createNamedParameter($document->getMimeType()))
 		   ->setValue('error', $qb->createNamedParameter($document->getError()))
 		   ->setValue('local_copy', $qb->createNamedParameter($document->getLocalCopy()))
+		   ->setValue('resized_copy', $qb->createNamedParameter($document->getResizedCopy()))
 		   ->setValue('parent_id', $qb->createNamedParameter($document->getParentId()))
 		   ->setValue('public', $qb->createNamedParameter(($document->isPublic()) ? '1' : '0'));
 
@@ -86,6 +87,7 @@ class CacheDocumentsRequest extends CacheDocumentsRequestBuilder {
 		   ->set('mime_type', $qb->createNamedParameter($document->getMimeType()))
 		   ->set('error', $qb->createNamedParameter($document->getError()))
 		   ->set('local_copy', $qb->createNamedParameter($document->getLocalCopy()))
+		   ->set('resized_copy', $qb->createNamedParameter($document->getResizedCopy()))
 		   ->set('parent_id', $qb->createNamedParameter($document->getParentId()))
 		   ->set('public', $qb->createNamedParameter(($document->isPublic()) ? '1' : '0'));
 
@@ -127,6 +129,7 @@ class CacheDocumentsRequest extends CacheDocumentsRequestBuilder {
 		$qb = $this->getCacheDocumentsUpdateSql();
 		$this->limitToIdString($qb, $document->getId());
 		$qb->set('local_copy', $qb->createNamedParameter($document->getLocalCopy()));
+		$qb->set('resized_copy', $qb->createNamedParameter($document->getResizedCopy()));
 		$qb->set('error', $qb->createNamedParameter($document->getError()));
 
 		$qb->execute();

lib/Db/CacheDocumentsRequestBuilder.php

@@ -77,7 +77,7 @@ class CacheDocumentsRequestBuilder extends CoreRequestBuilder {
 		/** @noinspection PhpMethodParametersCountMismatchInspection */
 		$qb->select(
 			'cd.id', 'cd.type', 'cd.parent_id', 'cd.media_type', 'cd.mime_type', 'cd.url',
-			'cd.local_copy', 'cd.public', 'cd.error', 'cd.creation', 'cd.caching'
+			'cd.local_copy', 'cd.public', 'cd.error', 'cd.creation', 'cd.caching', 'cd.resized_copy'
 		)
 		   ->from(self::TABLE_CACHE_DOCUMENTS, 'cd');
 

lib/Migration/Version0002Date20190717000001.php

@@ -0,0 +1,105 @@
+<?php
+declare(strict_types=1);
+
+
+/**
+ * Nextcloud - Social Support
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Maxence Lange <maxence@artificial-owl.com>
+ * @copyright 2018, Maxence Lange <maxence@artificial-owl.com>
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+
+namespace OCA\Social\Migration;
+
+
+use Closure;
+use Doctrine\DBAL\Schema\SchemaException;
+use Doctrine\DBAL\Types\Type;
+use Exception;
+use OCP\DB\ISchemaWrapper;
+use OCP\IDBConnection;
+use OCP\Migration\IOutput;
+use OCP\Migration\SimpleMigrationStep;
+
+
+/**
+ * Class Version0002Date20190717000001
+ *
+ * @package OCA\Social\Migration
+ */
+class Version0002Date20190717000001 extends SimpleMigrationStep {
+
+
+	/** @var IDBConnection */
+	private $connection;
+
+
+	/**
+	 * @param IDBConnection $connection
+	 */
+	public function __construct(IDBConnection $connection) {
+		$this->connection = $connection;
+	}
+
+
+	/**
+	 * @param IOutput $output
+	 * @param Closure $schemaClosure The `\Closure` returns a `ISchemaWrapper`
+	 * @param array $options
+	 *
+	 * @return ISchemaWrapper
+	 * @throws SchemaException
+	 */
+	public function changeSchema(IOutput $output, Closure $schemaClosure, array $options
+	): ISchemaWrapper {
+		/** @var ISchemaWrapper $schema */
+		$schema = $schemaClosure();
+		if (!$schema->hasTable('social_a2_cache_documts')) {
+			return $schema;
+		}
+
+		$table = $schema->getTable('social_a2_cache_documts');
+		if (!$table->hasColumn('resized_copy')) {
+			$table->addColumn(
+				'resized_copy', Type::TEXT,
+				[
+					'notnull' => true
+				]
+			);
+		}
+
+		return $schema;
+	}
+
+
+	/**
+	 * @param IOutput $output
+	 * @param Closure $schemaClosure The `\Closure` returns a `ISchemaWrapper`
+	 * @param array $options
+	 *
+	 * @throws Exception
+	 */
+	public function postSchemaChange(IOutput $output, Closure $schemaClosure, array $options) {
+	}
+
+}
+

lib/Model/ActivityPub/Object/Document.php

@@ -59,6 +59,9 @@ class Document extends ACore implements JsonSerializable {
 	/** @var string */
 	private $localCopy = '';
 
+	/** @var string */
+	private $resizedCopy = '';
+
 	/** @var int */
 	private $caching = 0;
 
@@ -140,6 +143,25 @@ class Document extends ACore implements JsonSerializable {
 	}
 
 
+	/**
+	 * @return string
+	 */
+	public function getResizedCopy(): string {
+		return $this->resizedCopy;
+	}
+
+	/**
+	 * @param string $resizedCopy
+	 *
+	 * @return Document
+	 */
+	public function setResizedCopy(string $resizedCopy): Document {
+		$this->resizedCopy = $resizedCopy;
+
+		return $this;
+	}
+
+
 	/**
 	 * @return bool
 	 */
@@ -244,6 +266,7 @@ class Document extends ACore implements JsonSerializable {
 		$this->setPublic(($this->getInt('public', $data, 0) === 1) ? true : false);
 		$this->setError($this->getInt('error', $data, 0));
 		$this->setLocalCopy($this->get('local_copy', $data, ''));
+		$this->setResizedCopy($this->get('resized_copy', $data, ''));
 		$this->setMediaType($this->get('media_type', $data, ''));
 		$this->setMimeType($this->get('mime_type', $data, ''));
 		$this->setParentId($this->get('parent_id', $data, ''));
@@ -266,9 +289,10 @@ class Document extends ACore implements JsonSerializable {
 		$result = array_merge(
 			parent::jsonSerialize(),
 			[
-				'mediaType' => $this->getMediaType(),
-				'mimeType'  => $this->getMimeType(),
-				'localCopy' => $this->getLocalCopy()
+				'mediaType'   => $this->getMediaType(),
+				'mimeType'    => $this->getMimeType(),
+				'localCopy'   => $this->getLocalCopy(),
+				'resizedCopy' => $this->getResizedCopy()
 			]
 		);
 

lib/Service/CacheDocumentService.php

@@ -35,6 +35,8 @@ use daita\MySmallPhpTools\Model\Request;
 use daita\MySmallPhpTools\Traits\TArrayTools;
 use daita\MySmallPhpTools\Traits\TStringTools;
 use Exception;
+use Gumlet\ImageResize;
+use Gumlet\ImageResizeException;
 use OCA\Social\Exceptions\CacheContentException;
 use OCA\Social\Exceptions\CacheContentMimeTypeException;
 use OCA\Social\Exceptions\CacheDocumentDoesNotExistException;
@@ -45,6 +47,7 @@ use OCA\Social\Exceptions\RequestResultSizeException;
 use OCA\Social\Exceptions\RequestServerException;
 use OCA\Social\Exceptions\SocialAppConfigException;
 use OCA\Social\Exceptions\UnauthorizedFediverseException;
+use OCA\Social\Model\ActivityPub\Object\Document;
 use OCP\Files\IAppData;
 use OCP\Files\NotFoundException;
 use OCP\Files\NotPermittedException;
@@ -58,6 +61,9 @@ class CacheDocumentService {
 	use TStringTools;
 
 
+	const RESIZED_WIDTH = 280;
+	const RESIZED_HEIGHT = 180;
+
 	/** @var IAppData */
 	private $appData;
 
@@ -91,11 +97,9 @@ class CacheDocumentService {
 
 
 	/**
-	 * @param string $url
-	 *
+	 * @param Document $document
 	 * @param string $mime
 	 *
-	 * @return string
 	 * @throws CacheContentMimeTypeException
 	 * @throws MalformedArrayException
 	 * @throws NotFoundException
@@ -108,20 +112,8 @@ class CacheDocumentService {
 	 * @throws SocialAppConfigException
 	 * @throws UnauthorizedFediverseException
 	 */
-	public function saveRemoteFileToCache(string $url, &$mime = '') {
-
-		$filename = $this->uuid();
-
-		// creating a path aa/bb/cc/dd/ from the filename aabbccdd-0123-[...]
-		$path = chunk_split(substr($filename, 0, 8), 2, '/');
-
-		try {
-			$folder = $this->appData->getFolder($path);
-		} catch (NotFoundException $e) {
-			$folder = $this->appData->newFolder($path);
-		}
-
-		$content = $this->retrieveContent($url);
+	public function saveRemoteFileToCache(Document $document, &$mime = '') {
+		$content = $this->retrieveContent($document->getUrl());
 
 		// To get the mime type, we create a temp file
 		$tmpFile = tmpfile();
@@ -132,6 +124,33 @@ class CacheDocumentService {
 
 		$this->filterMimeTypes($mime);
 
+		$filename = $this->saveContentToCache($content);
+		$document->setLocalCopy($filename);
+		$this->resizeImage($content);
+		$resized = $this->saveContentToCache($content);
+		$document->setResizedCopy($resized);
+	}
+
+
+	/**
+	 * @param string $content
+	 *
+	 * @return string
+	 * @throws NotPermittedException
+	 * @throws NotFoundException
+	 */
+	private function saveContentToCache(string $content): string {
+
+		$filename = $this->uuid();
+		// creating a path aa/bb/cc/dd/ from the filename aabbccdd-0123-[...]
+		$path = chunk_split(substr($filename, 0, 8), 2, '/');
+
+		try {
+			$folder = $this->appData->getFolder($path);
+		} catch (NotFoundException $e) {
+			$folder = $this->appData->newFolder($path);
+		}
+
 		$cache = $folder->newFile($filename);
 		$cache->putContent($content);
 
@@ -160,6 +179,23 @@ class CacheDocumentService {
 		throw new CacheContentMimeTypeException();
 	}
 
+
+	/**
+	 * @param $content
+	 */
+	private function resizeImage(&$content) {
+		try {
+			$image = ImageResize::createFromString($content);
+			$image->quality_jpg = 100;
+			$image->quality_png = 9;
+
+			$image->resizeToBestFit(self::RESIZED_WIDTH, self::RESIZED_HEIGHT);
+			$content = $image->getImageAsString();
+		} catch (ImageResizeException $e) {
+		}
+	}
+
+
 	/**
 	 * @param string $path
 	 *
@@ -167,7 +203,7 @@ class CacheDocumentService {
 	 * @throws CacheContentException
 	 * @throws CacheDocumentDoesNotExistException
 	 */
-	public function getContentFromCache(string $path) {
+	public function getContentFromCache(string $path): ISimpleFile {
 		if ($path === '') {
 			throw new CacheDocumentDoesNotExistException();
 		}

lib/Service/DocumentService.php

@@ -143,9 +143,7 @@ class DocumentService {
 		$this->cacheDocumentsRequest->initCaching($document);
 
 		try {
-			$localCopy = $this->cacheService->saveRemoteFileToCache($document->getUrl(), $mime);
-			$document->setMimeType($mime);
-			$document->setLocalCopy($localCopy);
+			$this->cacheService->saveRemoteFileToCache($document, $mime);
 			$this->cacheDocumentsRequest->endCaching($document);
 
 			$this->streamRequest->updateAttachments($document);
@@ -192,7 +190,7 @@ class DocumentService {
 
 	/**
 	 * @param string $id
-	 *
+	 * @param string $mime
 	 * @param bool $public
 	 *
 	 * @return ISimpleFile
@@ -202,8 +200,29 @@ class DocumentService {
 	 * @throws RequestResultNotJsonException
 	 * @throws SocialAppConfigException
 	 */
-	public function getFromCache(string $id, bool $public = false) {
+	public function getResizedFromCache(string $id, string &$mime = '', bool $public = false) {
 		$document = $this->cacheRemoteDocument($id, $public);
+		$mime = $document->getMimeType();
+
+		return $this->cacheService->getContentFromCache($document->getResizedCopy());
+	}
+
+
+	/**
+	 * @param string $id
+	 * @param bool $public
+	 * @param string $mimeType
+	 *
+	 * @return ISimpleFile
+	 * @throws CacheContentException
+	 * @throws CacheDocumentDoesNotExistException
+	 * @throws MalformedArrayException
+	 * @throws RequestResultNotJsonException
+	 * @throws SocialAppConfigException
+	 */
+	public function getFromCache(string $id, string &$mimeType = '', bool $public = false) {
+		$document = $this->cacheRemoteDocument($id, $public);
+		$mimeType = $document->getMimeType();
 
 		return $this->cacheService->getContentFromCache($document->getLocalCopy());
 	}

package.json

@@ -27,6 +27,7 @@
 		"test:coverage": "jest --coverage"
 	},
 	"dependencies": {
+		"vue-masonry-css": "^1.0.3",
 		"linkifyjs": "^2.1.8",
 		"nextcloud-axios": "^0.2.0",
 		"nextcloud-vue": "^0.11.4",

src/components/PostAttachment.vue

@@ -0,0 +1,78 @@
+<template>
+	<masonry>
+		<div v-for="(item, index) in attachments" :key="index">
+			<img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" @click="showModal(index)">
+		</div>
+		<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
+			size="full" @close="closeModal" @previous="showPrevious"
+			@next="showNext">
+			<div class="modal__content">
+				<canvas ref="modalCanvas" />
+			</div>
+		</modal>
+	</masonry>
+</template>
+
+<script>
+
+import Modal from 'nextcloud-vue/dist/Components/Modal'
+
+export default {
+	name: 'PostAttachment',
+	components: {
+		Modal
+	},
+	mixins: [],
+	props: {
+		attachments: {
+			type: Array,
+			default: Array
+		}
+	},
+	data() {
+		return {
+			modal: false,
+			current: ''
+		}
+	},
+	methods: {
+		displayResizedImage() {
+			var canvas = this.$refs.modalCanvas
+			var ctx = canvas.getContext('2d')
+			var img = new Image()
+			img.onload = function() {
+				var width = img.width
+				var height = img.height
+				if (width > window.innerWidth) {
+					height = height * (window.innerWidth / width)
+					width = window.innerWidth
+				}
+				if (height > window.innerHeight) {
+					width = width * (window.innerHeight / height)
+					height = window.innerHeight
+				}
+				canvas.width = width
+				canvas.height = height
+				ctx.drawImage(img, 0, 0, width, height)
+			}
+			img.src = OC.generateUrl('/apps/social/document/get?id=' + this.attachments[this.current].id)
+		},
+		showModal(idx) {
+			this.current = idx
+			this.displayResizedImage()
+			this.modal = true
+		},
+		closeModal() {
+			this.modal = false
+		},
+		showPrevious() {
+			this.current--
+			this.displayResizedImage()
+		},
+		showNext() {
+			this.current++
+			this.displayResizedImage()
+		}
+	}
+}
+</script>

src/components/TimelinePost.vue

@@ -24,6 +24,9 @@
 			</div>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<div class="post-message" v-html="formatedMessage" />
+			<div v-if="hasAttachments" class="post-attachments">
+				<post-attachment :attachments="item.attachment" />
+			</div>
 			<div v-click-outside="hidePopoverMenu" class="post-actions">
 				<a v-tooltip.bottom="t('social', 'Reply')" class="icon-reply" @click.prevent="reply" />
 				<a v-if="item.actor_info.account !== cloudId" v-tooltip.bottom="t('social', 'Boost')"
@@ -54,6 +57,7 @@ import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
 import popoverMenu from './../mixins/popoverMenu'
 import currentUser from './../mixins/currentUserMixin'
+import PostAttachment from './PostAttachment'
 
 pluginTag(linkify)
 pluginMention(linkify)
@@ -61,7 +65,8 @@ pluginMention(linkify)
 export default {
 	name: 'TimelinePost',
 	components: {
-		Avatar
+		Avatar,
+		PostAttachment
 	},
 	mixins: [popoverMenu, currentUser],
 	props: {
@@ -118,6 +123,9 @@ export default {
 		avatarUrl() {
 			return OC.generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo)
 		},
+		hasAttachments() {
+			return (typeof this.item.attachment !== 'undefined')
+		},
 		isBoosted() {
 			if (typeof this.item.action === 'undefined') {
 				return false

src/main.js

@@ -30,6 +30,7 @@ import vuetwemoji from 'vue-twemoji'
 import contenteditableDirective from 'vue-contenteditable-directive'
 import ClickOutside from 'vue-click-outside'
 import VTooltip from 'nextcloud-vue/dist/Directives/Tooltip'
+import VueMasonry from 'vue-masonry-css'
 
 sync(store, router)
 
@@ -56,6 +57,7 @@ Vue.use(vuetwemoji, {
 	className: 'emoji', // custom className for image output
 	size: 'twemoji' // image size
 })
+Vue.use(VueMasonry)
 
 /* eslint-disable-next-line no-new */
 new Vue({