[RFC] merge viewer app into server repository

.gitignore

@@ -46,6 +46,7 @@ node_modules/
 !/apps/theming
 !/apps/twofactor_backupcodes
 !/apps/user_status
+!/apps/viewer
 !/apps/weather_status
 !/apps/webhook_listeners
 !/apps/workflowengine

.tx/config

@@ -182,6 +182,12 @@ source_file = translationfiles/templates/user_status.pot
 source_lang = en
 type        = PO
 
+[o:nextcloud:p:nextcloud:r:viewer]
+file_filter = translationfiles/<lang>/viewer.po
+source_file = translationfiles/templates/viewer.pot
+source_lang = en
+type        = PO
+
 [o:nextcloud:p:nextcloud:r:weather_status]
 file_filter = translationfiles/<lang>/weather_status.po
 source_file = translationfiles/templates/weather_status.pot

REUSE.toml

@@ -178,7 +178,7 @@ SPDX-FileCopyrightText = "2020 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
 
 [[annotations]]
-path = ["cypress/tsconfig.json", "cypress/fixtures/appstore/apps.json", "dist/*.css"]
+path = ["dist/*.css"]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "2022 Nextcloud GmbH and Nextcloud contributors"
 SPDX-License-Identifier = "AGPL-3.0-or-later"
@@ -381,12 +381,6 @@ precedence = "aggregate"
 SPDX-FileCopyrightText = "2016 Andrew Nayenko <relan@airpost.net>"
 SPDX-License-Identifier = "CC-BY-SA-3.0 OR GPL-3.0-or-later"
 
-[[annotations]]
-path = "cypress/fixtures/image.jpg"
-precedence = "aggregate"
-SPDX-FileCopyrightText = "2019 Tom Gainor <https://unsplash.com/@its_tgain> <https://unsplash.com/photos/mountain-cliff-under-starry-night-KidY3t8O4PE>"
-SPDX-License-Identifier = "LicenseRef-Unsplash"
-
 [[annotations]]
 path = "apps/settings/tests/UserMigration/assets/account-complex.jpg"
 precedence = "aggregate"

apps/viewer/README.md

@@ -0,0 +1,220 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+# Files viewer for nextcloud
+
+Show your latest holiday photos and videos like in the movies. Show a glimpse of your latest novel directly from your nextcloud. Choose the best GIF of your collection thanks to the direct view of your favorites files!
+
+![viewer](https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Viewer/viewer.png?v=2)
+
+## 📋 Current support
+- Images
+- Videos
+
+## API
+
+### Add the viewer to your app
+In php, on your page, emit the LoadViewer event.
+Check the documentation/tutorial for more info on this type of page controller sample.
+``` php
+use OCA\Viewer\Event\LoadViewer;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IRequest;
+
+class PageController extends Controller {
+	protected $appName;
+
+	/** @var IEventDispatcher */
+	private $eventDispatcher;
+
+	public function __construct($appName,
+								IRequest $request,
+								IEventDispatcher $eventDispatcher) {
+		parent::__construct($appName, $request);
+
+		$this->appName = $appName;
+		$this->eventDispatcher = $eventDispatcher;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 * Render default index template
+	 *
+	 * @return TemplateResponse
+	 */
+	public function index(): TemplateResponse {
+		$this->eventDispatcher->dispatch(LoadViewer::class, new LoadViewer());
+		$response = new TemplateResponse($this->appName, 'main');
+		return $response;
+	}
+}
+```
+This will load all the necessary scripts and make the Viewer accessible trough javascript at `OCA.Viewer`
+
+### Open a file
+1. Open a file on WebDAV and let the viewer fetch the folder data
+  ```js
+  OCA.Viewer.open({path: '/path/to/file.jpg'})
+  ```
+2. Open a file on WebDAV and provide a list of files
+  ```js
+  OCA.Viewer.open({
+		path: '/path/to/file.jpg',
+		list: [
+			{
+				basename: 'file.jpg',
+				filename: '/path/to/file.jpg',
+				...
+			},
+			...
+		],
+  })
+  // Alternative: pass known file info so it doesn't need to be fetched
+  const fileInfo = {
+	filename: '/path/to/file.jpg',
+	basename: 'file.jpg',
+	mime: 'image/jpeg',
+	etag: 'xyz987',
+	hasPreview: true,
+	fileid: 13579,
+  }
+  OCA.Viewer.open({
+	fileinfo: fileInfo,
+	list: [fileInfo],
+  })
+  ```
+  The list parameter requires an array of fileinfo. You can check how we generate a fileinfo object [here](https://github.com/nextcloud/viewer/blob/master/src/utils/fileUtils.js#L97) from a dav PROPFIND request data. There is currently no dedicated package for it, but this is coming. You can check the [photos](https://github.com/nextcloud/photos) repository where we also use it.
+
+3. Open a file from an app's route
+  ```js
+  const fileInfo1 = {
+	filename: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',
+	basename: 'pineapple.jpg',
+	source: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',
+	mime: 'image/jpeg',
+	etag: 'abc123',
+	hasPreview: false,
+	fileid: 12345,
+  }
+  const fileInfo2 = {
+	filename: 'https://next.cloud/apps/pizza/topping/garlic.jpg',
+	basename: 'garlic.jpg',
+	source: 'https://next.cloud/apps/pizza/topping/garlic.jpg',
+	mime: 'image/jpeg',
+	etag: 'def456',
+	hasPreview: false,
+	fileid: 67890,
+  }
+  OCA.Viewer.open({
+	fileInfo: fileInfo1,
+	list: [fileInfo1, fileInfo2],
+  })
+  ```
+
+In order to open a shared file you will need to provide the share token
+so the Viewer can use it to authenticate the requests to the server.
+See the `files_sharing` app
+[controller](https://github.com/nextcloud/server/blob/master/apps/files_sharing/lib/Controller/ShareController.php#L404)
+and
+[template](https://github.com/nextcloud/server/blob/master/apps/files_sharing/templates/public.php#L18)
+for an example.
+
+### Close the viewer
+```js
+OCA.Viewer.close()
+```
+
+### 🔍 Add you own file view
+
+If you want to make your app compatible with this app, you can use the methods provided by the [`@nextcloud/viewer`](https://www.npmjs.com/package/@nextcloud/viewer) npm.js package:
+1. Create a vue component which use the `path` and `mime` props (they will be automatically passed by the viewer)
+2. Register your mime viewer with the following:
+   ``` js
+    import { registerHandler } from '@nextcloud/viewer'
+    import VideoView from 'VideoView.vue'
+
+    registerHandler({
+        // unique id
+        id: 'video',
+
+       // optional, it will group every view of this group and
+       // use the proper view when building the file list
+       // of the slideshow.
+       // e.g. you open an image/jpeg that have the `media` group
+       // you will be able to see the video/mpeg from the `video` handler
+       // files that also have the `media` group set.
+       group: 'media',
+
+       // the list of mimes your component is able to display
+       mimes: [
+            'video/mpeg',
+            'video/ogg',
+            'video/webm',
+            'video/mp4'
+        ],
+
+        // your vue component view
+        component: VideoView,
+
+        // optional: callback to be called before download
+        // useful for saving unsaved changes, validation, logging, etc.
+        // if not provided, defaults to an empty function
+        downloadCallback: async (fileInfo) => {
+            // perform any pre-download operations
+            // e.g., save current editor state
+            await saveCurrentDocument(fileInfo)
+        }
+    })
+   ```
+3. Make sure your script is loaded with `\OCP\Util::addInitScript` so that the handler is registered **before** the viewer is loaded.
+4. if you feel like your mime should be integrated on this repo, you can also create a pull request with your object on the `models` directory and the view on the `components` directory. Please have a look at what's already here and take example of it. 🙇‍♀️
+
+
+### Legacy handler registration
+> [!CAUTION]
+> Using OCA.Viewer for registering your handlers is not recommended as this might break depending on the script loading order
+
+If you want to make your app compatible with this app, you can use the `OCA.Viewer` methods
+1. Create a vue component which use the `path` and `mime` props (they will be automatically passed by the viewer)
+2. Register your mime viewer with the following:
+   ``` js
+    import VideoView from 'VideoView.vue'
+
+    OCA.Viewer.registerHandler({
+        // unique id
+        id: 'video',
+
+       // optional, it will group every view of this group and
+       // use the proper view when building the file list
+       // of the slideshow.
+       // e.g. you open an image/jpeg that have the `media` group
+       // you will be able to see the video/mpeg from the `video` handler
+       // files that also have the `media` group set.
+       group: 'media',
+
+       // the list of mimes your component is able to display
+       mimes: [
+            'video/mpeg',
+            'video/ogg',
+            'video/webm',
+            'video/mp4'
+        ],
+
+        // your vue component view
+        component: VideoView,
+
+        // optional: callback to be called before download
+        // useful for saving unsaved changes, validation, logging, etc.
+        // if not provided, defaults to an empty function
+        downloadCallback: async (fileInfo) => {
+            // perform any pre-download operations
+            // e.g., save current editor state
+            await saveCurrentDocument(fileInfo)
+        }
+    })
+   ```
+3. Make sure your script is loaded with `\OCP\Util::addScript` (in contrast to using the API package)!

apps/viewer/REUSE.toml

@@ -0,0 +1,24 @@
+# SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: AGPL-3.0-or-later
+version = 1
+SPDX-PackageName = "viewer"
+SPDX-PackageSupplier = "2024 Nextcloud GmbH and Nextcloud contributors"
+SPDX-PackageDownloadLocation = "https://github.com/nextcloud/server"
+
+[[annotations]]
+path = ["l10n/*.json", "l10n/*.js"]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2019 Nextcloud Translators"
+SPDX-License-Identifier = "AGPL-3.0-or-later"
+
+[[annotations]]
+path = ["src/assets/menu-sidebar-white.svg", "img/blank.mp4"]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2023 Nextcloud GmbH and Nextcloud contributors"
+SPDX-License-Identifier = "AGPL-3.0-or-later"
+
+[[annotations]]
+path = ["img/app.svg"]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "2018-2024 Google LLC"
+SPDX-License-Identifier = "Apache-2.0"

apps/viewer/appinfo/info.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<info xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"
+	  xsi:noNamespaceSchemaLocation="https://apps.nextcloud.com/schema/apps/info.xsd">
+	<id>viewer</id>
+	<name>Viewer</name>
+	<summary>Simple file viewer with slideshow for media</summary>
+	<description><![CDATA[Show your latest holiday photos and videos like in the movies, show a glimpse of your latest novel directly from your Nextcloud, choose the best GIF of your collection thanks to the direct preview of your favorites files and many more!]]></description>
+	<version>8.0.0-dev.0</version>
+	<licence>AGPL-3.0-or-later</licence>
+	<author>Nextcloud GmbH and Nextcloud contributors</author>
+	<namespace>Viewer</namespace>
+	<category>tools</category>
+	<bugs>https://github.com/nextcloud/server/issues</bugs>
+	<screenshot>https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Viewer/viewer.png</screenshot>
+	<dependencies>
+		<nextcloud min-version="35" max-version="35" />
+	</dependencies>
+</info>

apps/viewer/composer/autoload.php

@@ -0,0 +1,22 @@
+<?php
+
+// autoload.php @generated by Composer
+
+if (PHP_VERSION_ID < 50600) {
+    if (!headers_sent()) {
+        header('HTTP/1.1 500 Internal Server Error');
+    }
+    $err = 'Composer 2.3.0 dropped support for autoloading on PHP <5.6 and you are running '.PHP_VERSION.', please upgrade PHP or use Composer 2.2 LTS via "composer self-update --2.2". Aborting.'.PHP_EOL;
+    if (!ini_get('display_errors')) {
+        if (PHP_SAPI === 'cli' || PHP_SAPI === 'phpdbg') {
+            fwrite(STDERR, $err);
+        } elseif (!headers_sent()) {
+            echo $err;
+        }
+    }
+    throw new RuntimeException($err);
+}
+
+require_once __DIR__ . '/composer/autoload_real.php';
+
+return ComposerAutoloaderInitViewer::getLoader();

apps/viewer/composer/composer.json

@@ -0,0 +1,13 @@
+{
+	"config" : {
+		"vendor-dir": ".",
+		"optimize-autoloader": true,
+		"classmap-authoritative": true,
+		"autoloader-suffix": "Viewer"
+	},
+	"autoload" : {
+		"psr-4": {
+			"OCA\\Viewer\\": "../lib/"
+		}
+	}
+}