Proper mimes, initialstate and video loading placeholder

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

15 files changed, 110 insertions, 22 deletions

diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 97ab98b4..8125d4d5 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -30,6 +30,22 @@ class Application extends App {
 
 	const APP_ID = 'photos';
 
+	const MIMES = [
+		// 'image/png',			// too rarely used for photos
+		'image/jpeg',
+		// 'image/gif',			// too rarely used for photos
+		// 'image/x-xbitmap',	// too rarely used for photos
+		// 'image/bmp',			// too rarely used for photos
+		// 'image/svg+xml',		// too rarely used for photos
+		// 'video/mpeg',		// too rarely used for photos
+		// 'video/ogg',			// too rarely used for photos
+		// 'video/webm',		// too rarely used for photos
+		'video/mp4',
+		// 'video/x-m4v',		// too rarely used for photos
+		'video/quicktime',
+		// 'video/x-matroska'	// too rarely used for photos
+	];
+
 	public function __construct() {
 		parent::__construct(self::APP_ID);
 	}
diff --git a/lib/Controller/AlbumsController.php b/lib/Controller/AlbumsController.php
index 9b412ee8..4a475dca 100644
--- a/lib/Controller/AlbumsController.php
+++ b/lib/Controller/AlbumsController.php
@@ -25,6 +25,7 @@ declare(strict_types=1);
 namespace OCA\Photos\Controller;
 
 use OCA\Files_Sharing\SharedStorage;
+use OCA\Photos\AppInfo\Application;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\JSONResponse;
@@ -125,7 +126,7 @@ class AlbumsController extends Controller {
 	}
 
 	private function validFile(File $file, bool $shared): bool {
-		if ($file->getMimePart() === 'image' && $this->isShared($file) === $shared) {
+		if (in_array($file->getMimeType(), Application::MIMES) && $this->isShared($file) === $shared) {
 			return true;
 		}
 
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 8529441e..593f7c1b 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -25,10 +25,12 @@ declare(strict_types=1);
 namespace OCA\Photos\Controller;
 
 use OCA\Files\Event\LoadSidebar;
+use OCA\Photos\AppInfo\Application;
 use OCA\Viewer\Event\LoadViewer;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IInitialStateService;
 use OCP\IRequest;
 use OCP\Util;
 
@@ -39,13 +41,19 @@ class PageController extends Controller {
 	/** @var IEventDispatcher */
 	private $eventDispatcher;
 
+	/** @var IInitialStateService */
+	private $initialStateService;
+
 	public function __construct($appName,
 								IRequest $request,
-								IEventDispatcher $eventDispatcher) {
+								IEventDispatcher $eventDispatcher,
+								IInitialStateService $initialStateService) {
 		parent::__construct($appName, $request);
 
 		$this->appName = $appName;
 		$this->eventDispatcher = $eventDispatcher;
+		$this->initialStateService = $initialStateService;
+
 	}
 
 	/**
@@ -59,9 +67,10 @@ class PageController extends Controller {
 		$this->eventDispatcher->dispatch(LoadSidebar::class, new LoadSidebar());
 		$this->eventDispatcher->dispatch(LoadViewer::class, new LoadViewer());
 
+		$this->initialStateService->provideInitialState($this->appName, 'mimes', Application::MIMES);
 
-		Util::addScript('photos', 'photos');
-		Util::addStyle('photos', 'icons');
+		Util::addScript($this->appName, 'photos');
+		Util::addStyle($this->appName, 'icons');
 
 		$response = new TemplateResponse($this->appName, 'main');
 		return $response;
diff --git a/package-lock.json b/package-lock.json
index 7a8031b8..6ab34224 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -848,6 +848,21 @@
 				"core-js": "^3.1.4"
 			}
 		},
+		"@nextcloud/initial-state": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-0.2.0.tgz",
+			"integrity": "sha512-aFkEXxEchawyn1HWn/nStX25324/4+RcOHiHJ1gW/vVH6bPRW8suj9V1Rsi380mMRM7sjkICyeNPxOZ8f+WZrA==",
+			"requires": {
+				"core-js": "3.1.4"
+			},
+			"dependencies": {
+				"core-js": {
+					"version": "3.1.4",
+					"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.1.4.tgz",
+					"integrity": "sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ=="
+				}
+			}
+		},
 		"@nextcloud/l10n": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/@nextcloud/l10n/-/l10n-0.2.1.tgz",
@@ -1894,7 +1909,7 @@
 			"version": "git+https://github.com/nextcloud/cdav-library.git#1b7fee781c511d94e84e8041b67404606bcc6aa8",
 			"from": "git+https://github.com/nextcloud/cdav-library.git",
 			"requires": {
-				"@babel/polyfill": "^7.6.0"
+				"@babel/polyfill": "^7.7.0"
 			}
 		},
 		"chalk": {
diff --git a/package.json b/package.json
index 4ee8bf4a..23632c7c 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@nextcloud/auth": "^0.3.1",
 		"@nextcloud/axios": "^0.5.0",
+		"@nextcloud/initial-state": "^0.2.0",
 		"@nextcloud/l10n": "^0.2.1",
 		"@nextcloud/router": "^0.1.0",
 		"@nextcloud/vue": "^1.1.0",
diff --git a/src/Photos.vue b/src/Photos.vue
index 49b83e13..ed97f787 100644
--- a/src/Photos.vue
+++ b/src/Photos.vue
@@ -38,6 +38,8 @@
 
 			<!-- svg img loading placeholder (linked to the File component) -->
 			<span class="hidden-visually" role="none" v-html="svgplaceholder" />
+			<span class="hidden-visually" role="none" v-html="imgplaceholder" />
+			<span class="hidden-visually" role="none" v-html="videoplaceholder" />
 		</AppContent>
 	</Content>
 </template>
@@ -47,7 +49,9 @@ import Content from '@nextcloud/vue/dist/Components/Content'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import svgplaceholder from './assets/img-placeholder.svg'
+import svgplaceholder from './assets/file-placeholder.svg'
+import imgplaceholder from './assets/image.svg'
+import videoplaceholder from './assets/video.svg'
 
 export default {
 	name: 'Photos',
@@ -61,6 +65,8 @@ export default {
 		return {
 			loading: true,
 			svgplaceholder,
+			imgplaceholder,
+			videoplaceholder,
 		}
 	},
 }
diff --git a/src/assets/file-placeholder.svg b/src/assets/file-placeholder.svg
new file mode 100644
index 00000000..f946228f
--- /dev/null
+++ b/src/assets/file-placeholder.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+	<defs>
+		<linearGradient id="placeholder__gradient">
+			<stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color" values="#ededed; #ededed; #cccccc; #cccccc; #ededed" dur="2s" repeatCount="indefinite"/></stop>
+			<stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color" values="#cccccc; #ededed; #ededed; #cccccc; #cccccc" dur="2s" repeatCount="indefinite"/></stop>
+		</linearGradient>
+	</defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/image.svg b/src/assets/image.svg
new file mode 100644
index 00000000..72b9310b
--- /dev/null
+++ b/src/assets/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1" id="placeholder--img"><path d="M2.8 4a1.3 1.3 0 00-1.3 1.3v22.4c0 .6.7 1.3 1.3 1.3h26.4c.6 0 1.3-.7 1.3-1.3V5.3c0-.6-.7-1.3-1.3-1.3zm.7 2h25v19h-25z"/><circle cx="8.5" cy="11.2" r="3"/><path d="M26.4 14.5l-4.7 6.2L20 23l-1.6-1.8-4.5-4.6-6 5.7-4.7 4.3h26.2v-8.7z"/></svg>
\ No newline at end of file
diff --git a/src/assets/img-placeholder.svg b/src/assets/img-placeholder.svg
deleted file mode 100644
index 479b693a..00000000
--- a/src/assets/img-placeholder.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="url(#img-placeholder__gradient)">
-	<defs>
-		<linearGradient id="img-placeholder__gradient">
-			<stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color" values="#ededed; #ededed; #cccccc; #cccccc; #ededed" dur="2s" repeatCount="indefinite"/></stop>
-			<stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color" values="#cccccc; #ededed; #ededed; #cccccc; #cccccc" dur="2s" repeatCount="indefinite"/></stop>
-		</linearGradient>
-		<path id="img-placeholder" d="M8.36 10a1.12 1.12 0 00-.86 1.1v27.81c0 .58.53 1.09 1.1 1.09h32.81c.57 0 1.09-.53 1.09-1.09V11.53c0-.84-.66-1.53-1.29-1.53zM10 12.5h30V25l-2.5-2.5-7.5 10-7.5-7.5-10 10H10zm6.25 2.5a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5z"/>
-	</defs>
-</svg>
\ No newline at end of file
diff --git a/src/assets/video.svg b/src/assets/video.svg
new file mode 100644
index 00000000..6cc307b8
--- /dev/null
+++ b/src/assets/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1" id="placeholder--video"><path d="M2.8 4c-.7 0-1.3.6-1.3 1.3v22.4c0 .6.7 1.3 1.3 1.3h26.4c.7 0 1.3-.6 1.3-1.3V5.3c0-.6-.7-1.3-1.3-1.3zm.7 2h25v21h-25V6z"/><path d="M10.5 10v12l12-6z"/></svg>
\ No newline at end of file
diff --git a/src/components/File.vue b/src/components/File.vue
index c5726184..efb85602 100644
--- a/src/components/File.vue
+++ b/src/components/File.vue
@@ -36,9 +36,10 @@
 		</transition>
 		<svg v-if="!loaded"
 			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 50 50"
-			fill="url(#img-placeholder__gradient)">
-			<use xlink:href="#img-placeholder" />
+			viewBox="0 0 32 32"
+			fill="url(#placeholder__gradient)">
+			<use v-if="isImage" xlink:href="#placeholder--img" />
+			<use v-else xlink:href="#placeholder--video" />
 		</svg>
 
 		<!-- image name and cover -->
@@ -72,6 +73,10 @@ export default {
 			type: Number,
 			required: true,
 		},
+		mime: {
+			type: String,
+			required: true,
+		},
 	},
 
 	data() {
@@ -92,6 +97,9 @@ export default {
 		ariaLabel() {
 			return t('photos', 'Open the full size "{name}" image', { name: this.basename })
 		},
+		isImage() {
+			return this.mime.startsWith('image')
+		},
 	},
 
 	created() {
diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index 7a283acd..cd19d6ed 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -146,7 +146,7 @@ export default {
 
 		try {
 			// get data
-			const { folder, folders, files } = await request(this.filename, {shared: this.showShared})
+			const { folder, folders, files } = await request(this.filename, { shared: this.showShared })
 			this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 			this.$store.dispatch('updateFiles', { folder, files, folders })
 		} catch (error) {
diff --git a/src/services/AlbumContent.js b/src/services/AlbumContent.js
index f753163f..3bcc74b8 100644
--- a/src/services/AlbumContent.js
+++ b/src/services/AlbumContent.js
@@ -23,6 +23,7 @@
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { genFileInfo } from '../utils/fileUtils'
+import allowedMimes from './AllowedMimes'
 
 /**
  * List files from a folder and filter out unwanted mimes
@@ -44,13 +45,14 @@ export default async function(path = '/', options = {}) {
 	let folder = {}
 	const folders = []
 	const files = []
+	console.info(allowedMimes)
 	for (const entry of list) {
 		// is this the current provided path ?
 		if (entry.filename === path) {
 			folder = entry
 		} else if (entry.type !== 'file') {
 			folders.push(entry)
-		} else if (entry.mime === 'image/jpeg') {
+		} else if (allowedMimes.indexOf(entry.mime) > -1) {
 			files.push(entry)
 		}
 	}
diff --git a/src/services/AllowedMimes.js b/src/services/AllowedMimes.js
new file mode 100644
index 00000000..a1bbd026
--- /dev/null
+++ b/src/services/AllowedMimes.js
@@ -0,0 +1,26 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+
+const mimes = loadState('photos', 'mimes')
+export default mimes
diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 95f64bd3..536f2352 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -35,7 +35,10 @@
 	<!-- Folder content -->
 	<Grid v-else>
 		<Navigation v-if="folder" key="navigation" v-bind="folder" />
-		<Folder v-for="dir in folderList" :key="dir.fileid" v-bind="dir" :showShared="showShared" />
+		<Folder v-for="dir in folderList"
+			:key="dir.fileid"
+			v-bind="dir"
+			:show-shared="showShared" />
 		<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
 	</Grid>
 </template>
@@ -170,7 +173,7 @@ export default {
 
 			try {
 				// get content and current folder info
-				const { folder, folders, files } = await request(this.path, {shared: this.showShared})
+				const { folder, folders, files } = await request(this.path, { shared: this.showShared })
 				this.$store.dispatch('addPath', { path: this.path, fileid: folder.fileid })
 				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 				this.$store.dispatch('updateFiles', { folder, files, folders })