mirror of https://github.com/nextcloud/photos
Proper mimes, initialstate and video loading placeholder
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
2d3f8950fb
commit
bae4efe62f
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 500 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 345 B |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 800 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 264 B |
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 })
|
||||
|
|
|
|||
Loading…
Reference in New Issue