diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-11-18 18:09:46 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-11-18 18:09:46 +0300 |
commit | bae4efe62f566c43a9703242bdf46051a345a4f9 (patch) | |
tree | b697da518e2df9a3bfa9ab40be69c9c627058d9d /src | |
parent | 2d3f8950fbf0029557d61bcba2eff331f1c67b2a (diff) |
Proper mimes, initialstate and video loading placeholder
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/Photos.vue | 8 | ||||
-rw-r--r-- | src/assets/file-placeholder.svg | 8 | ||||
-rw-r--r-- | src/assets/image.svg | 1 | ||||
-rw-r--r-- | src/assets/img-placeholder.svg | 9 | ||||
-rw-r--r-- | src/assets/video.svg | 1 | ||||
-rw-r--r-- | src/components/File.vue | 14 | ||||
-rw-r--r-- | src/components/Folder.vue | 2 | ||||
-rw-r--r-- | src/services/AlbumContent.js | 4 | ||||
-rw-r--r-- | src/services/AllowedMimes.js | 26 | ||||
-rw-r--r-- | src/views/Albums.vue | 7 |
10 files changed, 63 insertions, 17 deletions
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 }) |