Album header and cleanup

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

src/components/AlbumCover.vue

@@ -22,7 +22,10 @@
 
 <template>
 	<router-link class="album-cover" :to="`/albums/${baseName}`">
-		<img v-if="album.lastPhoto !== 0" class="album-cover__image" :src="coverUrl">
+		<img v-if="album.lastPhoto !== 0"
+			class="album-cover__image"
+			:src="coverUrl"
+			:alt="altImg">
 		<div v-else class="album-cover__image album-cover__image--placeholder">
 			<ImageMultiple :size="128" />
 		</div>
@@ -87,6 +90,10 @@ export default {
 		coverUrl() {
 			return generateUrl(`/core/preview?fileId=${this.album.lastPhoto}&x=${512}&y=${512}&forceIcon=0&a=1`)
 		},
+
+		altImg() {
+			return t('photos', 'Photo cover for the "{albumName}" album.', { albumName: this.baseName })
+		},
 	},
 }
 </script>

src/components/FilesListViewer.vue

@@ -94,7 +94,7 @@ export default {
 		// Whether we should display a loading indicator.
 		loading: {
 			type: Boolean,
-			required: true,
+			default: false,
 		},
 		// Message to display when there is no files.
 		emptyMessage: {

src/components/HeaderNavigation.vue

@@ -43,6 +43,10 @@
 		</div>
 
 		<NcLoadingIcon v-if="loading" class="photos-navigation__loader" />
+
+		<div class="photos-navigation__content-right">
+			<slot name="right" />
+		</div>
 	</div>
 </template>
 
@@ -79,6 +83,11 @@ export default {
 			type: String,
 			default: t('photos', 'Photos'),
 		},
+		// The route params
+		params: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	computed: {
@@ -131,7 +140,7 @@ export default {
 
 			// apply to current route
 			const { name, params } = Object.assign({}, this.$route, {
-				params: { path },
+				params: this.params || { path },
 			})
 
 			// return the full object as we don't care about
@@ -172,16 +181,19 @@ export default {
 
 // Properly position the navigation toggle button
 button.app-navigation-toggle {
+	// App-navigation have a 4px margin top
+	top: 0 !important;
 	right: calc(var(--photos-navigation-height) * -1) !important;
 	margin: var(--photos-navigation-spacing) !important;
 }
+
 </style>
 
 <style lang="scss" scoped>
 .photos-navigation {
 	position: sticky;
 	z-index: 20;
-	top: var(--header-height);
+	top: 0;
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -209,6 +221,13 @@ button.app-navigation-toggle {
 	&__loader {
 		margin-left: 32px;
 	}
+
+	&__content-right {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: auto;
+	}
 }
 
 </style>

src/mixins/FetchAlbumsMixin.js

@@ -29,7 +29,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
 import { genFileInfo } from '../utils/fileUtils.js'
-import AbortControllerMixin from './AbortControllerMixin'
+import AbortControllerMixin from './AbortControllerMixin.js'
 
 export default {
 	name: 'FetchAlbumsMixin',
@@ -49,10 +49,6 @@ export default {
 		this.fetchAlbums()
 	},
 
-	beforeDestroy() {
-		this.cancelAlbumsRequest('Changed view')
-	},
-
 	computed: {
 		...mapGetters([
 			'albums',

src/router/index.js

@@ -93,7 +93,7 @@ const router = new Router({
 		{
 			path: '/albums/:albumName*',
 			component: AlbumContent,
-			name: 'albumContent',
+			name: 'albums',
 			props: route => ({
 				albumName: route.params.albumName,
 			}),

src/views/AlbumContent.vue

@@ -28,6 +28,7 @@
 		</template>
 		{{ t('photos', 'This album does not exist') }}
 	</NcEmptyContent>
+
 	<NcEmptyContent v-else-if="errorFetchingFiles || errorFetchingAlbums">
 		<template #icon>
 			<AlertCircle />
@@ -36,20 +37,25 @@
 	</NcEmptyContent>
 
 	<div v-else class="album">
-		<div class="album__header">
-			<div class="album__header__left">
-				<div class="album__header__title">
-					<h2 v-if="album !== undefined" class="album__name">
-						{{ album.basename }}
-					</h2>
-					<div v-if="album !== undefined && album.location !== ''" class="album__location">
-						<MapMarker />{{ album.location }}
-					</div>
-				</div>
-
-				<NcLoadingIcon v-if="loadingCount > 0" class="album__header__loader" />
+		<HeaderNavigation key="navigation"
+			:loading="loadingFiles"
+			:params="{ albumName }"
+			:path="'/' + albumName"
+			:title="albumName"
+			@refresh="fetchAlbumContent">
+			<!-- <UploadPicker :accept="allowedMimes"
+				:destination="folder.filename"
+				:multiple="true"
+				@uploaded="onUpload" /> -->
+			<div v-if="album.location !== ''" class="album__location">
+				<MapMarker />{{ album.location }}
 			</div>
-			<div v-if="album !== undefined" class="album__header__actions">
+
+			<template #right>
+				<!-- <UploadPicker :accept="allowedMimes"
+					:destination="folder.filename"
+					:multiple="true"
+					@uploaded="onUpload" /> -->
 				<NcButton v-if="album.nbItems !== 0"
 					type="tertiary"
 					:aria-label="t('photos', 'Add photos to this album')"
@@ -58,11 +64,6 @@
 						<Plus />
 					</template>
 				</NcButton>
-				<!-- <NcButton type="tertiary" :aria-label="t('photos', 'Share this album')" @click="showShareModal = true">
-					<template #icon>
-						<ShareVariant />
-					</template>
-				</NcButton> -->
 				<NcActions :force-menu="true">
 					<NcActionButton :close-after-click="true"
 						:aria-label="t('photos', 'Edit album details')"
@@ -112,10 +113,10 @@
 						<Delete slot="icon" />
 					</NcActionButton>
 				</NcActions>
-			</div>
-		</div>
+			</template>
+		</HeaderNavigation>
 
-		<div v-if="album !== undefined && album.nbItems === 0 && !(loadingFiles || loadingAlbums)" class="album__empty">
+		<div v-if="album.nbItems === 0 && !(loadingFiles || loadingAlbums)" class="album__empty">
 			<NcEmptyContent>
 				<template #icon>
 					<ImagePlus />
@@ -136,11 +137,10 @@
 			</Button>
 		</div>
 
-		<FilesListViewer v-if="album !== undefined"
+		<FilesListViewer v-else
 			class="album__photos"
 			:file-ids="albumFileIds"
-			:base-height="isMobile ? 120 : 200"
-			:loading="loadingFiles || loadingAlbums">
+			:base-height="isMobile ? 120 : 200">
 			<File slot-scope="{file, visibility}"
 				:file="files[file.id]"
 				:allow-selection="true"
@@ -177,8 +177,11 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, isMobile } from '@nextcloud/vue'
+import { getCurrentUser } from '@nextcloud/auth'
+import { UploadPicker } from '@nextcloud/upload'
+
 import MapMarker from 'vue-material-design-icons/MapMarker'
-// import ShareVariant from 'vue-material-design-icons/ShareVariant'
 import Plus from 'vue-material-design-icons/Plus'
 import Pencil from 'vue-material-design-icons/Pencil'
 import Delete from 'vue-material-design-icons/Delete'
@@ -189,56 +192,56 @@ import Close from 'vue-material-design-icons/Close'
 import Download from 'vue-material-design-icons/Download'
 import DownloadMultiple from 'vue-material-design-icons/DownloadMultiple'
 
-import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcLoadingIcon, isMobile } from '@nextcloud/vue'
-import { getCurrentUser } from '@nextcloud/auth'
-
+import { genFileInfo } from '../utils/fileUtils.js'
+import AbortControllerMixin from '../mixins/AbortControllerMixin.js'
 import FetchAlbumsMixin from '../mixins/FetchAlbumsMixin.js'
 import FetchFilesMixin from '../mixins/FetchFilesMixin.js'
 import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
-import FilesListViewer from '../components/FilesListViewer.vue'
+
+import client from '../services/DavClient.js'
+import DavRequest from '../services/DavRequest.js'
+import FolderIllustration from '../assets/Illustrations/folder.svg'
+import logger from '../services/logger.js'
+
+import AlbumForm from '../components/AlbumForm.vue'
 import File from '../components/File.vue'
+import FilesListViewer from '../components/FilesListViewer.vue'
 import FilesPicker from '../components/FilesPicker.vue'
+import HeaderNavigation from '../components/HeaderNavigation.vue'
 import ShareAlbumForm from '../components/ShareAlbumForm.vue'
-import AlbumForm from '../components/AlbumForm.vue'
-import FolderIllustration from '../assets/Illustrations/folder.svg'
-import logger from '../services/logger.js'
-import client from '../services/DavClient.js'
-import DavRequest from '../services/DavRequest.js'
-import { genFileInfo } from '../utils/fileUtils.js'
-import AbortControllerMixin from '../mixins/AbortControllerMixin.js'
 
 export default {
 	name: 'AlbumContent',
 	components: {
-		MapMarker,
-		// ShareVariant,
-		Plus,
-		Pencil,
-		Star,
+		AlbumForm,
+		AlertCircle,
 		Close,
+		Delete,
 		Download,
 		DownloadMultiple,
-		Delete,
+		File,
+		FilesListViewer,
+		FilesPicker,
+		HeaderNavigation,
 		ImagePlus,
-		AlertCircle,
-		NcEmptyContent,
-		NcActions,
+		MapMarker,
 		NcActionButton,
+		NcActions,
 		NcButton,
+		NcEmptyContent,
 		NcModal,
-		NcLoadingIcon,
-		FilesListViewer,
-		File,
-		AlbumForm,
-		FilesPicker,
+		Pencil,
+		Plus,
 		ShareAlbumForm,
+		Star,
+		UploadPicker,
 	},
 
 	mixins: [
+		AbortControllerMixin,
 		FetchAlbumsMixin,
 		FetchFilesMixin,
 		FilesSelectionMixin,
-		AbortControllerMixin,
 		isMobile,
 	],
 
@@ -270,7 +273,7 @@ export default {
 		 * @return {string[]} The album information for the current albumName.
 		 */
 		album() {
-			return this.albums[this.albumName]
+			return this.albums[this.albumName] || {}
 		},
 
 		/**
@@ -350,7 +353,8 @@ export default {
 				}
 
 				// cancelled request, moving on...
-				logger.error('Error fetching album files', error)
+				logger.error('Error fetching album files')
+				console.error(error)
 			} finally {
 				this.loadingFiles = false
 				this.semaphore.release(semaphoreSymbol)
@@ -363,7 +367,7 @@ export default {
 		openViewer(fileId) {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
-				path: file.filename,
+				fileInfo: file,
 				list: this.albumFileIds.map(fileId => this.files[fileId]).filter(file => !file.sectionHeader),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
@@ -374,7 +378,12 @@ export default {
 			this.showEditAlbumForm = false
 
 			if (this.album.basename !== album.basename) {
-				this.$router.push(`/albums/${album.basename}`)
+				this.$router.push({
+					name: 'albums',
+					params: {
+						path: album.basename,
+					},
+				})
 			}
 		},