Merge pull request #477 from nextcloud/feature/implement-video-tab

Implement "your videos" tab

appinfo/routes.php

@@ -24,6 +24,7 @@
 return [
 	'routes' => [
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		['name' => 'page#index', 'url' => '/videos', 'verb' => 'GET', 'postfix' => 'videos'],
 		['name' => 'page#index', 'url' => '/favorites', 'verb' => 'GET', 'postfix' => 'favorites'],
 		['name' => 'page#index', 'url' => '/albums/{path}', 'verb' => 'GET', 'postfix' => 'albums',
 			'requirements' => [

lib/AppInfo/Application.php

@@ -33,14 +33,17 @@
 class Application extends App implements IBootstrap {
 	public const APP_ID = 'photos';
 
-	public const MIMES = [
+	public const IMAGE_MIMES = [
 		'image/png',
 		'image/jpeg',
 		'image/heic',
 		// '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
+	];
+
+	public const VIDEO_MIMES = [
 		// 'video/mpeg',		// too rarely used for photos
 		// 'video/ogg',			// too rarely used for photos
 		// 'video/webm',		// too rarely used for photos

lib/Controller/AlbumsController.php

@@ -127,7 +127,8 @@ private function scanCurrentFolder(Folder $folder, bool $shared): iterable {
 	}
 
 	private function validFile(File $file, bool $shared): bool {
-		if (in_array($file->getMimeType(), Application::MIMES) && $this->isShared($file) === $shared) {
+		$allowed_mimes = array_merge(Application::IMAGE_MIMES, Application::VIDEO_MIMES);
+		if (in_array($file->getMimeType(), $allowed_mimes) && $this->isShared($file) === $shared) {
 			return true;
 		}
 

lib/Controller/PageController.php

@@ -75,7 +75,8 @@ public function index(): TemplateResponse {
 		$this->eventDispatcher->dispatch(LoadSidebar::class, new LoadSidebar());
 		$this->eventDispatcher->dispatch(LoadViewer::class, new LoadViewer());
 
-		$this->initialStateService->provideInitialState($this->appName, 'mimes', Application::MIMES);
+		$this->initialStateService->provideInitialState($this->appName, 'image-mimes', Application::IMAGE_MIMES);
+		$this->initialStateService->provideInitialState($this->appName, 'video-mimes', Application::VIDEO_MIMES);
 		$this->initialStateService->provideInitialState($this->appName, 'maps', $this->appManager->isEnabledForUser('maps') === true);
 
 		Util::addScript($this->appName, 'photos-main');

src/Photos.vue

@@ -29,6 +29,7 @@
 					:title="t('photos', 'Your photos')"
 					icon="icon-yourphotos"
 					exact />
+				<AppNavigationItem to="/videos" :title="t('photos', 'Your videos')" icon="icon-video" />
 				<AppNavigationItem to="/favorites" :title="t('photos', 'Favorites')" icon="icon-favorite" />
 				<AppNavigationItem :to="{name: 'albums'}" :title="t('photos', 'Your albums')" icon="icon-files-dark" />
 				<AppNavigationItem :to="{name: 'shared'}" :title="t('photos', 'Shared albums')" icon="icon-share" />

src/router/index.js

@@ -25,6 +25,7 @@ import Router from 'vue-router'
 import Vue from 'vue'
 
 import isMapsInstalled from '../services/IsMapsInstalled'
+import { videoMimes } from '../services/AllowedMimes'
 
 const Albums = () => import('../views/Albums')
 const Tags = () => import('../views/Tags')
@@ -77,6 +78,15 @@ export default new Router({
 				showShared: true,
 			}),
 		},
+		{
+			path: '/videos',
+			component: Timeline,
+			name: 'videos',
+			props: route => ({
+				rootTitle: t('photos', 'Your videos'),
+				mimesType: videoMimes,
+			}),
+		},
 		{
 			path: '/favorites',
 			component: Timeline,

src/services/AllowedMimes.js

@@ -22,5 +22,8 @@
 
 import { loadState } from '@nextcloud/initial-state'
 
-const mimes = loadState('photos', 'mimes')
-export default mimes
+const imageMimes = loadState('photos', 'image-mimes')
+const videoMimes = loadState('photos', 'video-mimes')
+const allMimes = [...imageMimes, ...videoMimes]
+
+export { allMimes as default, allMimes, imageMimes, videoMimes }

src/services/PhotoSearch.js

@@ -22,7 +22,7 @@
 
 import { genFileInfo } from '../utils/fileUtils'
 import { getCurrentUser } from '@nextcloud/auth'
-import allowedMimes from './AllowedMimes'
+import { allMimes } from './AllowedMimes'
 import client from './DavClient'
 import { props } from './DavRequest'
 import { sizes } from '../assets/grid-sizes'
@@ -38,17 +38,19 @@ import { sizes } from '../assets/grid-sizes'
  * @returns {Array} the file list
  */
 export default async function(onlyFavorites = false, options = {}) {
+
 	// default function options
 	options = Object.assign({}, {
 		page: 0, // start at the first page
 		perPage: sizes.max.count * 10, // ten rows of the max width
+		mimesType: allMimes, // all mimes types
 	}, options)
 
 	const prefixPath = `/files/${getCurrentUser().uid}`
 
 	// generating the search or condition
 	// based on the allowed mimetypes
-	const orMime = allowedMimes.reduce((str, mime) => `${str}
+	const orMime = options.mimesType.reduce((str, mime) => `${str}
 		<d:eq>
 			<d:prop>
 				<d:getcontenttype/>

src/views/Timeline.vue

@@ -71,6 +71,7 @@ import Loader from '../components/Loader'
 
 import cancelableRequest from '../utils/CancelableRequest'
 import GridConfigMixin from '../mixins/GridConfig'
+import { allMimes } from '../services/AllowedMimes'
 
 export default {
 	name: 'Timeline',
@@ -89,6 +90,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		mimesType: {
+			type: Array,
+			default: () => allMimes,
+		},
 		rootTitle: {
 			type: String,
 			required: true,
@@ -180,6 +185,11 @@ export default {
 			this.resetState()
 			this.getContent()
 		},
+		async mimesType() {
+			// reset component
+			this.resetState()
+			this.getContent()
+		},
 	},
 
 	beforeMount() {
@@ -224,6 +234,7 @@ export default {
 				const files = await request(this.onlyFavorites, {
 					page: this.page,
 					perPage: numberOfImagesPerBatch,
+					mimesType: this.mimesType,
 				})
 
 				// If we get less files than requested that means we got to the end
@@ -271,6 +282,7 @@ export default {
 			this.done = false
 			this.error = null
 			this.page = 0
+			this.lastSection = ''
 			this.$emit('update:loading', true)
 			this.$refs.virtualgrid.resetGrid()
 		},