diff --git a/src/components/VirtualScrolling.vue b/src/components/VirtualScrolling.vue
index 9450cda98..f53f6b32c 100644
--- a/src/components/VirtualScrolling.vue
+++ b/src/components/VirtualScrolling.vue
@@ -57,7 +57,7 @@ export default {
},
containerElement: {
- type: HTMLElement,
+ type: [HTMLElement, null],
default: null,
},
@@ -87,6 +87,8 @@ export default {
},
},
+ emits: ['need-content'],
+
data() {
return {
scrollPosition: 0,
@@ -301,7 +303,7 @@ export default {
this.container?.addEventListener('scroll', this.updateScrollPosition, { passive: true })
},
- beforeDestroy() {
+ beforeUnmount() {
if (this.useWindow) {
window.removeEventListener('resize', this.updateContainerSize)
}
diff --git a/src/dashboard.ts b/src/dashboard.ts
index cac94f066..84c0050d8 100644
--- a/src/dashboard.ts
+++ b/src/dashboard.ts
@@ -3,20 +3,14 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
import DashboardOnThisDay from './components/Dashboard/DashboardOnThisDay.vue'
import store from './store/index.js'
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
window.addEventListener('DOMContentLoaded', () => {
window.OCA.Dashboard.register('photos-onthisday', (el) => {
- global.PhotosOnThisDay = new Vue({
- el,
- store,
- render: (h) => h(DashboardOnThisDay),
- })
+ const app = createApp(DashboardOnThisDay)
+ app.use(store)
+ app.mount(el)
})
})
diff --git a/src/global.d.ts b/src/global.d.ts
index 93a78cd8e..80974722f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -20,7 +20,7 @@ declare global {
}
}
Viewer: {
- open: ({ fileInfo, list }: { fileInfo: ViewerFileInfo, list: ViewerFileInfo[] }) => void
+ open: ({ fileInfo, list, onClose }: { fileInfo: ViewerFileInfo, list: ViewerFileInfo[], onClose: () => void }) => void
close: () => void
}
}
diff --git a/src/main.ts b/src/main.ts
index e4b6dca93..902d186e0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,9 +4,8 @@
*/
import { registerDavProperty } from '@nextcloud/files/dav'
-import { translate, translatePlural } from '@nextcloud/l10n'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import Vue from 'vue'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
import { sync } from 'vuex-router-sync'
import PhotosApp from './PhotosApp.vue'
import router from './router/index.js'
@@ -14,21 +13,13 @@ import store from './store/index.js'
sync(store, router)
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
registerDavProperty('nc:metadata-photos-size')
registerDavProperty('nc:metadata-files-live-photo')
registerDavProperty('nc:metadata-blurhash')
registerDavProperty('nc:metadata-photos-original_date_time')
-Vue.use(PiniaVuePlugin)
-
-export default new Vue({
- el: '#content',
- name: 'PhotosRoot',
- router,
- store,
- pinia: createPinia(),
- render: (h) => h(PhotosApp),
-})
+const app = createApp(PhotosApp)
+app.use(store)
+app.use(createPinia())
+app.use(router)
+app.mount('#content')
diff --git a/src/mixins/FetchCollectionContentMixin.ts b/src/mixins/FetchCollectionContentMixin.ts
index 4dbb91475..4ba0ab1b7 100644
--- a/src/mixins/FetchCollectionContentMixin.ts
+++ b/src/mixins/FetchCollectionContentMixin.ts
@@ -8,7 +8,7 @@ import type { WebDAVClient } from 'webdav'
import { showError } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { defineComponent, markRaw } from 'vue'
import {
type Collection,
@@ -23,7 +23,7 @@ export default defineComponent({
data() {
return {
- fetchSemaphore: new SemaphoreWithPriority(1),
+ fetchSemaphore: markRaw(new SemaphoreWithPriority(1)),
loadingCollection: false,
loadingCollectionFiles: false,
errorFetchingCollection: null as null | number | Error | unknown,
diff --git a/src/mixins/FetchFilesMixin.ts b/src/mixins/FetchFilesMixin.ts
index 4fb8a7f56..debfdc5e3 100644
--- a/src/mixins/FetchFilesMixin.ts
+++ b/src/mixins/FetchFilesMixin.ts
@@ -7,7 +7,7 @@ import { showError } from '@nextcloud/dialogs'
import { defaultRootPath } from '@nextcloud/files/dav'
import { t } from '@nextcloud/l10n'
import { joinPaths } from '@nextcloud/paths'
-import { defineComponent } from 'vue'
+import { defineComponent, markRaw } from 'vue'
import { davClient } from '../services/DavClient.ts'
import logger from '../services/logger.js'
import getPhotos, { type PhotoSearchOptions } from '../services/PhotoSearch.js'
@@ -25,7 +25,7 @@ export default defineComponent({
errorFetchingFiles: null as null | number | Error | unknown,
loadingFiles: false,
doneFetchingFiles: false,
- fetchSemaphore: new SemaphoreWithPriority(1),
+ fetchSemaphore: markRaw(new SemaphoreWithPriority(1)),
fetchedFileIds: [] as number[],
}
},
diff --git a/src/mixins/FilesSelectionMixin.ts b/src/mixins/FilesSelectionMixin.ts
index fbdc44da7..3be141efd 100644
--- a/src/mixins/FilesSelectionMixin.ts
+++ b/src/mixins/FilesSelectionMixin.ts
@@ -22,11 +22,11 @@ export default defineComponent({
methods: {
onFileSelectToggle({ id, value }): void {
- this.$set(this.selection, id, value)
+ this.selection[id] = value
},
onUncheckFiles(filesIds: string[]): void {
- filesIds.forEach((filesId: string) => this.$set(this.selection, filesId, false))
+ filesIds.forEach((filesId: string) => this.selection[filesId] = false)
},
resetSelection(): void {
diff --git a/src/public.ts b/src/public.ts
index fae3315da..9d10ccdf5 100644
--- a/src/public.ts
+++ b/src/public.ts
@@ -3,8 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
import { sync } from 'vuex-router-sync'
import PhotosAppPublic from './PhotosAppPublic.vue'
import router from './router/index.js'
@@ -12,13 +11,7 @@ import store from './store/index.js'
sync(store, router)
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-export default new Vue({
- el: '#content',
- name: 'PhotosRoot',
- router,
- store,
- render: (h) => h(PhotosAppPublic),
-})
+const app = createApp(PhotosAppPublic)
+app.use(store)
+app.use(router)
+app.mount('#content')
diff --git a/src/router/index.ts b/src/router/index.ts
index e62abfc0d..ff296f63e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,8 +5,7 @@
import { t } from '@nextcloud/l10n'
import { generateUrl } from '@nextcloud/router'
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
import { imageMimes, videoMimes } from '../services/AllowedMimes.js'
import areTagsInstalled from '../services/AreTagsInstalled.js'
import isMapsInstalled from '../services/IsMapsInstalled.js'
@@ -30,8 +29,6 @@ const UnassignedFaces = () => import('../views/UnassignedFaces.vue')
const baseTitle = document.title
-Vue.use(Router)
-
let mapsPath = generateUrl('/apps/maps')
if (!isMapsInstalled) {
mapsPath = generateUrl('/settings/apps/integration/maps')
@@ -43,15 +40,14 @@ if (!isMapsInstalled) {
*
* @param path
*/
-function parsePathParams(path: string | string[]): string {
+function parsePathParams(path: string | string[] = ''): string {
return `/${Array.isArray(path) ? path.join('/') : path || ''}`
}
-const router = new Router({
- mode: 'history',
+const router = createRouter({
// if index.php is in the url AND we got this far, then it's working:
// let's keep using index.php in the url
- base: generateUrl('/apps/photos'),
+ history: createWebHistory(generateUrl('/apps/photos')),
linkActiveClass: 'active',
routes: [
{
@@ -106,7 +102,7 @@ const router = new Router({
},
},
{
- path: '/albums/:albumName*',
+ path: '/albums/:albumName',
component: AlbumContent,
name: 'albumsContent',
props: (route) => ({
@@ -129,7 +125,7 @@ const router = new Router({
},
},
{
- path: '/sharedalbums/:albumName*',
+ path: '/sharedalbums/:albumName',
component: SharedAlbumContent,
name: 'sharedAlbumsContent',
props: (route) => ({
@@ -160,7 +156,7 @@ const router = new Router({
name: 'places',
},
{
- path: '/places/:placeName*',
+ path: '/places/:placeName',
component: PlaceContent,
name: 'placesContent',
props: (route) => ({
@@ -214,39 +210,45 @@ const router = new Router({
},
},
},
- {
- path: '/tags/',
- component: TagsView,
- name: 'tags',
- redirect: !areTagsInstalled ? { name: 'timeline' } : undefined,
- props: (route) => ({
- path: '',
- isRoot: !route.params.path,
- rootTitle: t('photos', 'Tagged photos'),
- }),
- meta: {
- rootTitle: () => {
- return t('photos', 'Tagged photos')
- },
- },
- },
- {
- path: '/tags/:path',
- component: TagContent,
- name: 'tagcontent',
- redirect: !areTagsInstalled ? { name: 'timeline' } : undefined,
- props: (route) => ({
- path: `${route.params.path ? route.params.path : ''}`,
- }),
- meta: {
- rootTitle: (to) => {
- return t('photos', 'Tagged photo {title}', { title: to.params.path })
- },
- },
- },
+ // TODO: ensure paths are redirect to timeline as before.
+ ...(!areTagsInstalled
+ ? []
+ : [
+ {
+ path: '/tags/',
+ component: TagsView,
+ name: 'tags',
+ props: (route) => ({
+ path: '',
+ isRoot: !route.params.path,
+ rootTitle: t('photos', 'Tagged photos'),
+ }),
+ meta: {
+ rootTitle: () => {
+ return t('photos', 'Tagged photos')
+ },
+ },
+ },
+ {
+ path: '/tags/:path',
+ component: TagContent,
+ name: 'tagcontent',
+ props: (route) => ({
+ path: `${route.params.path ? route.params.path : ''}`,
+ }),
+ meta: {
+ rootTitle: (to) => {
+ return t('photos', 'Tagged photo {title}', { title: to.params.path })
+ },
+ },
+ },
+ ]
+ ),
{
path: '/maps',
name: 'maps',
+ // TODO: does not work
+ redirect: {},
// router-link doesn't support external url, let's force the redirect
beforeEnter() {
window.open(mapsPath, '_blank')
diff --git a/src/services/FolderContent.ts b/src/services/FolderContent.ts
index 5b158769b..20888e704 100644
--- a/src/services/FolderContent.ts
+++ b/src/services/FolderContent.ts
@@ -12,6 +12,7 @@ export type FoldersNode = {
basename: string
etag: string
fileid: number
+ id: number
filename: string
source: string
lastmod: number
@@ -36,6 +37,7 @@ export default async function(path: string = '/', options: AxiosRequestConfig &
const list: FoldersNode[] = response.data
.map((data) => ({
...data,
+ id: data.fileid,
filename: `${defaultRootPath}${data.filename}`,
source: decodeURI(defaultRemoteURL + `${defaultRootPath}${data.filename}`),
}))
diff --git a/src/services/GridConfig.ts b/src/services/GridConfig.ts
deleted file mode 100644
index 4dfa53566..000000000
--- a/src/services/GridConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import Vue from 'vue'
-import sizes from '../assets/grid-sizes.js'
-
-export default new Vue({
- data() {
- return {
- gridConfig: sizes.max,
- }
- },
- watch: {
- gridConfig(val) {
- this.$emit('changed', val)
- },
- },
- created() {
- window.addEventListener('resize', this.handleWindowResize)
- this.handleWindowResize()
- },
- beforeDestroy() {
- window.removeEventListener('resize', this.handleWindowResize)
- },
- methods: {
- handleWindowResize() {
- // find the first grid size that fit the current window width
- const currentSize = Object.keys(sizes).map((size) => Number.parseInt(size)).find((size) => size > document.documentElement.clientWidth)
- this.gridConfig = sizes[currentSize as number] || sizes.max
- },
- },
-})
diff --git a/src/services/PhotoSearch.ts b/src/services/PhotoSearch.ts
index 8b9a074ca..e9019f94f 100644
--- a/src/services/PhotoSearch.ts
+++ b/src/services/PhotoSearch.ts
@@ -138,5 +138,10 @@ export default async function(_options: Partial
= {}): Promi
const response = await davClient.search('/', options) as ResponseDataDetailed
- return response.data.results.map((data) => resultToNode(data) as File)
+ return response.data.results
+ .map((data) => {
+ data.filename = data.filename.replace(/^\/remote.php\/dav/, '')
+ return data
+ })
+ .map((data) => resultToNode(data) as File)
}
diff --git a/src/services/PhotosFilters/dateRangeFilter.ts b/src/services/PhotosFilters/dateRangeFilter.ts
index e05cb710c..f04004c7f 100644
--- a/src/services/PhotosFilters/dateRangeFilter.ts
+++ b/src/services/PhotosFilters/dateRangeFilter.ts
@@ -44,9 +44,7 @@ export const dateRangeFilter: PhotosFilter = {
label: t('photos', 'Custom…'),
value: undefined,
async getValue() {
- return new Promise((resolve) => {
- spawnDialog(CustomDateRangePickerDialog, undefined, resolve)
- })
+ return spawnDialog(CustomDateRangePickerDialog)
},
},
]
diff --git a/src/services/downloadFiles.ts b/src/services/downloadFiles.ts
new file mode 100644
index 000000000..7ba9d2db2
--- /dev/null
+++ b/src/services/downloadFiles.ts
@@ -0,0 +1,90 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import {
+ type Node,
+
+ FileType,
+} from '@nextcloud/files'
+
+/**
+ * Trigger downloading a file.
+ *
+ * @param url The url of the asset to download
+ * @param name Optionally the recommended name of the download (browsers might ignore it)
+ */
+async function triggerDownload(url: string, name?: string) {
+ // try to see if the resource is still available
+ await axios.head(url)
+
+ const hiddenElement = document.createElement('a')
+ hiddenElement.download = name ?? ''
+ hiddenElement.href = url
+ hiddenElement.click()
+}
+
+/**
+ * Find the longest common path prefix of both input paths
+ *
+ * @param first The first path
+ * @param second The second path
+ */
+function longestCommonPath(first: string, second: string): string {
+ const firstSegments = first.split('/').filter(Boolean)
+ const secondSegments = second.split('/').filter(Boolean)
+ let base = ''
+ for (const [index, segment] of firstSegments.entries()) {
+ if (index >= second.length) {
+ break
+ }
+ if (segment !== secondSegments[index]) {
+ break
+ }
+ const sep = base === '' ? '' : '/'
+ base = `${base}${sep}${segment}`
+ }
+ return base
+}
+
+/**
+ * Download the given nodes.
+ *
+ * If only one node is given, it will be downloaded directly.
+ * If multiple nodes are given, they will be zipped and downloaded.
+ *
+ * @param nodes The node(s) to download
+ */
+export async function downloadFiles(nodes: Node[]) {
+ let url: URL
+
+ if (nodes.length === 1) {
+ if (nodes[0]!.type === FileType.File) {
+ await triggerDownload(nodes[0]!.encodedSource, nodes[0]!.displayname)
+ return
+ } else {
+ url = new URL(nodes[0]!.encodedSource)
+ url.searchParams.append('accept', 'zip')
+ }
+ } else {
+ url = new URL(nodes[0]!.encodedSource)
+ let base = url.pathname
+ for (const node of nodes.slice(1)) {
+ base = longestCommonPath(base, (new URL(node.encodedSource).pathname))
+ }
+ url.pathname = base
+
+ // The URL contains the path encoded so we need to decode as the query.append will re-encode it
+ const filenames = nodes.map((node) => decodeURIComponent(node.encodedSource.slice(url.href.length + 1)))
+ url.searchParams.append('accept', 'zip')
+ url.searchParams.append('files', JSON.stringify(filenames))
+ }
+
+ if (url.pathname.at(-1) !== '/') {
+ url.pathname = `${url.pathname}/`
+ }
+
+ await triggerDownload(url.href)
+}
diff --git a/src/sidebar.ts b/src/sidebar.ts
index 41f224234..1a05dded5 100644
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@@ -1,14 +1,15 @@
-import InformationOutline from '@mdi/svg/svg/information-outline.svg?raw'
-import { registerDavProperty } from '@nextcloud/files/dav'
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
/**
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import Vue from 'vue'
-Vue.prototype.t = t
-Vue.prototype.n = n
+import type { App, Component, ComponentPublicInstance } from 'vue'
+import type { PhotosTabType } from './views/PhotosTab.vue'
+
+import InformationOutline from '@mdi/svg/svg/information-outline.svg?raw'
+import { registerDavProperty } from '@nextcloud/files/dav'
+import { t } from '@nextcloud/l10n'
+import { createApp } from 'vue'
registerDavProperty('nc:metadata-photos-exif')
registerDavProperty('nc:metadata-photos-ifd0')
@@ -16,37 +17,36 @@ registerDavProperty('nc:metadata-photos-gps')
registerDavProperty('nc:metadata-photos-place')
// Init Photos tab component
-let PhotosTabView = null
-let PhotosTabInstance = null
+let LazyPhotosTab: Component | null = null
+let photosTabApp: App | null = null
+let activityTabInstance: ComponentPublicInstance | null = null
+
const photosTab = new OCA.Files.Sidebar.Tab({
id: 'photos',
name: t('photos', 'Details'),
iconSvg: InformationOutline,
- async mount(el, fileInfo, context) {
+ async mount(el, fileInfo) {
// only load if needed
- if (PhotosTabView === null) {
+ if (LazyPhotosTab === null) {
const { default: PhotosTab } = await import('./views/PhotosTab.vue')
- PhotosTabView = PhotosTabView ?? Vue.extend(PhotosTab)
+ LazyPhotosTab = PhotosTab
}
// destroy previous instance if available
- if (PhotosTabInstance) {
- PhotosTabInstance.$destroy()
+ if (photosTabApp) {
+ photosTabApp.unmount()
}
- PhotosTabInstance = new PhotosTabView({
- // Better integration with vue parent component
- parent: context,
- })
+ photosTabApp = createApp(LazyPhotosTab)
// No need to await this, we will show a loading indicator instead
- PhotosTabInstance.update(fileInfo)
- PhotosTabInstance.$mount(el)
+ activityTabInstance = photosTabApp.mount(el)
+ activityTabInstance.update(fileInfo)
},
update(fileInfo) {
- PhotosTabInstance.update(fileInfo)
+ activityTabInstance!.update(fileInfo)
},
destroy() {
- PhotosTabInstance.$destroy()
- PhotosTabInstance = null
+ photosTabApp?.unmount()
+ photosTabApp = null
},
})
@@ -54,6 +54,6 @@ window.addEventListener('DOMContentLoaded', async function() {
if (window.OCA.Files && window.OCA.Files.Sidebar) {
window.OCA.Files.Sidebar.registerTab(photosTab)
const { default: PhotosTab } = await import(/* webpackPreload: true */ './views/PhotosTab.vue')
- PhotosTabView = PhotosTabView ?? Vue.extend(PhotosTab)
+ LazyPhotosTab = PhotosTab
}
})
diff --git a/src/store/faces.ts b/src/store/faces.ts
index e01a99086..5d3de0c67 100644
--- a/src/store/faces.ts
+++ b/src/store/faces.ts
@@ -9,7 +9,6 @@ import type { PhotosContext } from './index.ts'
import { getCurrentUser } from '@nextcloud/auth'
import { showError } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'
-import Vue from 'vue'
import { davClient } from '../services/DavClient.ts'
import logger from '../services/logger.js'
import Semaphore from '../utils/semaphoreWithPriority.js'
@@ -33,7 +32,7 @@ const mutations = {
*/
addFaces(state: FacesState, { faces }: { faces: Collection[] }) {
for (const face of faces) {
- Vue.set(state.faces, face.basename, face)
+ state.faces[face.basename] = face
}
},
@@ -45,8 +44,8 @@ const mutations = {
* @param root0.faceNames
*/
removeFaces(state: FacesState, { faceNames }: { faceNames: string[] }) {
- faceNames.forEach((faceName) => Vue.delete(state.faces, faceName))
- faceNames.forEach((faceName) => Vue.delete(state.facesFiles, faceName))
+ faceNames.forEach((faceName) => delete state.faces[faceName])
+ faceNames.forEach((faceName) => delete state.facesFiles[faceName])
},
/**
@@ -59,7 +58,7 @@ const mutations = {
*/
addFilesToFace(state: FacesState, { faceName, fileIdsToAdd }: { faceName: string, fileIdsToAdd: string[] }) {
if (!state.facesFiles[faceName]) {
- Vue.set(state.facesFiles, faceName, [])
+ state.facesFiles[faceName] = []
}
const faceFiles = state.facesFiles[faceName]
faceFiles.push(...fileIdsToAdd.filter((fileId) => !faceFiles.includes(fileId))) // Filter to prevent duplicate fileId.
@@ -100,7 +99,7 @@ const mutations = {
* @param root0.fileIdsToRemove
*/
removeFilesFromFace(state: FacesState, { faceName, fileIdsToRemove }: { faceName: string, fileIdsToRemove: string[] }) {
- Vue.set(state.facesFiles, faceName, state.facesFiles[faceName].filter((fileId) => !fileIdsToRemove.includes(fileId)))
+ state.facesFiles[faceName] = state.facesFiles[faceName].filter((fileId) => !fileIdsToRemove.includes(fileId))
},
setUnassignedFilesCount(state: FacesState, count: number) {
diff --git a/src/store/files.ts b/src/store/files.ts
index e09da828c..ac06d4819 100644
--- a/src/store/files.ts
+++ b/src/store/files.ts
@@ -1,3 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
import type { File, Folder } from '@nextcloud/files'
import type { PhotosContext } from './index.ts'
@@ -5,11 +10,6 @@ import { showError } from '@nextcloud/dialogs'
import { defaultRootPath } from '@nextcloud/files/dav'
import { t } from '@nextcloud/l10n'
import moment from '@nextcloud/moment'
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import Vue from 'vue'
import { davClient } from '../services/DavClient.ts'
import logger from '../services/logger.js'
import Semaphore from '../utils/semaphoreWithPriority.js'
@@ -87,7 +87,7 @@ const mutations = {
* @param fileId
*/
deleteFile(state: FilesState, fileId: number) {
- Vue.delete(state.files, fileId)
+ delete state.files[fileId]
},
/**
@@ -99,7 +99,7 @@ const mutations = {
* @param root0.favoriteState
*/
favoriteFile(state: FilesState, { fileId, favoriteState }: { fileId: number, favoriteState: 0 | 1 }) {
- Vue.set(state.files[fileId].attributes, 'favorite', favoriteState)
+ state.files[fileId].attributes.favorite = favoriteState
},
}
diff --git a/src/store/folders.ts b/src/store/folders.ts
index d67220c50..b7023bc05 100644
--- a/src/store/folders.ts
+++ b/src/store/folders.ts
@@ -1,12 +1,12 @@
-import type { FoldersNode } from '../services/FolderContent.ts'
-import type { PhotosContext } from './index.js'
-
-import { defaultRootPath } from '@nextcloud/files/dav'
/**
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import Vue from 'vue'
+
+import type { FoldersNode } from '../services/FolderContent.ts'
+import type { PhotosContext } from './index.js'
+
+import { defaultRootPath } from '@nextcloud/files/dav'
import { sortCompareFileInfo } from '../utils/fileUtils.js'
const state = {
@@ -35,9 +35,9 @@ const mutations = {
.filter((file) => file.fileid >= 0)
// Set folder list
- Vue.set(state.folders, fileid, list.map((file) => file.fileid))
+ state.folders[fileid] = list.map((file) => file.fileid)
} else {
- Vue.set(state.folders, fileid, [])
+ state.folders[fileid] = []
}
},
@@ -84,7 +84,7 @@ const mutations = {
.map((folder) => folder.fileid as number)
// some invalid folders have an id of -1 (ext storage)
.filter((id) => id >= 0)
- Vue.set(state.subFolders, fileid, subfolders)
+ state.subFolders[fileid] = subfolders
}
},
@@ -98,7 +98,7 @@ const mutations = {
*/
addPath(state: FoldersState, { path, fileid }: { path: string, fileid: number }) {
if (fileid >= 0) {
- Vue.set(state.paths, path, fileid)
+ state.paths[path] = fileid
}
},
@@ -117,7 +117,7 @@ const mutations = {
.sort((a, b) => sortCompareFileInfo(a, b, 'lastmod'))
.filter((file) => file.fileid >= 0)
.map((file) => file.fileid)
- Vue.set(state.folders, fileid, [...list, ...state.folders[fileid]])
+ state.folders[fileid] = [...list, ...(state.folders[fileid] ?? [])]
}
},
}
diff --git a/src/store/index.ts b/src/store/index.ts
index 849578204..625247f56 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,8 +6,7 @@
import type { Collection } from '../services/collectionFetcher.ts'
import { getCurrentUser } from '@nextcloud/auth'
-import Vue from 'vue'
-import Vuex, { Store } from 'vuex'
+import { createStore } from 'vuex'
import albums, { type Album } from './albums.ts'
import collections, { type CollectionState } from './collections.ts'
import faces, { type FacesState } from './faces.ts'
@@ -56,6 +55,7 @@ export type PhotosStore = {
tagId(name: string): string
}
}
+
export type PhotosContext = PhotosStore & {
state: T
rootState: PhotosRootSate
@@ -72,8 +72,7 @@ async function initPhotosLocationFolder(store: typeof photosStore, state) {
store.commit('updateUserConfig', { key: 'photosLocationFolder', value: photosLocationFolder })
}
-Vue.use(Vuex)
-const photosStore = new Store({
+const photosStore = createStore({
modules: {
files,
folders,
@@ -102,6 +101,6 @@ const photosStore = new Store({
],
strict: process.env.NODE_ENV !== 'production',
-}) as PhotosStore
+})
export default photosStore
diff --git a/src/store/systemtags.ts b/src/store/systemtags.ts
index 7cc6967e0..9ba1bd6ab 100644
--- a/src/store/systemtags.ts
+++ b/src/store/systemtags.ts
@@ -1,11 +1,11 @@
-import type { File, Folder } from '@nextcloud/files'
-import type { PhotosContext } from './index.js'
-
/**
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
-import Vue from 'vue'
+
+import type { File, Folder } from '@nextcloud/files'
+import type { PhotosContext } from './index.js'
+
import logger from '../services/logger.js'
import getSystemTags from '../services/SystemTags.js'
import getTaggedImages from '../services/TaggedImages.js'
@@ -45,8 +45,8 @@ const mutations = {
// store tag and its index
list.forEach((tag) => {
- Vue.set(state.tags, tag.attributes.id, tag)
- Vue.set(state.names, tag.attributes['display-name'], tag.attributes.id)
+ state.tags[tag.attributes.id] = tag
+ state.names[tag.attributes['display-name']] = tag.attributes.id
})
}
},
@@ -59,8 +59,8 @@ const mutations = {
* @param root0.id
*/
removeTag(state: SystemTagsState, { id }: { id: number }) {
- Vue.delete(state.names, state.tags[id].attributes.displayname)
- Vue.delete(state.tags, id)
+ delete state.names[state.tags[id]?.attributes.displayname]
+ delete state.tags[id]
},
/**
@@ -74,8 +74,8 @@ const mutations = {
updateTag(state: SystemTagsState, { id, files }: { id: number, files: File[] }) {
if (files.length === 0) {
// Remove this tag from the list if there's no files for it
- Vue.delete(state.names, state.tags[id].attributes.displayname)
- Vue.delete(state.tags, id)
+ delete state.names[state.tags[id]?.attributes.displayname]
+ delete state.tags[id]
return
}
@@ -84,7 +84,7 @@ const mutations = {
// overwrite list
logger.debug(`Overwrite list, id: ${id}`, { list })
- Vue.set(state.tagsFiles, id, list.map((file) => file.fileid))
+ state.tagsFiles[id] = list.map((file) => file.fileid).filter((fileid) => fileid !== undefined)
},
}
diff --git a/src/store/userConfig.ts b/src/store/userConfig.ts
index bec409912..82e2b4fba 100644
--- a/src/store/userConfig.ts
+++ b/src/store/userConfig.ts
@@ -1,8 +1,9 @@
-import type { Folder } from '@nextcloud/files'
/**
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
+
+import type { Folder } from '@nextcloud/files'
import type { FileStat, ResponseDataDetailed } from 'webdav'
import axios from '@nextcloud/axios'
diff --git a/src/utils/SassGridConfig.ts b/src/utils/SassGridConfig.ts
deleted file mode 100644
index e7c183db3..000000000
--- a/src/utils/SassGridConfig.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-// sass plugin to implement js configs into scss
-
-import { OrderedMap } from 'immutable'
-import * as sass from 'sass'
-import sizes from '../assets/grid-sizes.js'
-
-const gridConfigKeys = Object.keys(sizes)
-const gridConfigMap = OrderedMap().asMutable()
-
-gridConfigKeys.forEach((size) => {
- const config = sizes[size]
- const configMap = OrderedMap().asMutable()
-
- configMap.set(new sass.SassString('count'), new sass.SassNumber(config.count))
- configMap.set(new sass.SassString('marginTop'), new sass.SassNumber(config.marginTop))
- configMap.set(new sass.SassString('marginW'), new sass.SassNumber(config.marginW))
-
- gridConfigMap.set(new sass.SassString(size), new sass.SassMap(configMap))
-})
-
-export default `$sizes: ${new sass.SassMap(gridConfigMap)};`
diff --git a/src/utils/fileUtils.ts b/src/utils/fileUtils.ts
index a988823f4..81ae817fe 100644
--- a/src/utils/fileUtils.ts
+++ b/src/utils/fileUtils.ts
@@ -1,3 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
import type { FoldersNode } from '../services/FolderContent.ts'
import {
@@ -5,10 +10,6 @@ import {
FileType, Permission,
} from '@nextcloud/files'
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
import { getLanguage } from '@nextcloud/l10n'
import { generateUrl } from '@nextcloud/router'
import { isNumber } from './numberUtils.js'
@@ -130,12 +131,12 @@ export function toViewerFileInfo(file: Node): ViewerFileInfo {
}
return {
- fileid: file.fileid,
+ fileid: file.fileid as number,
basename: file.basename,
filename: file.root + file.path,
mime: file.mime,
- mtime: file.mtime,
- ownerId: file.owner,
+ mtime: new Date(file.mtime ?? 0 * 1000),
+ ownerId: file.owner as string,
source: file.source,
hasPreview: file.attributes.hasPreview,
previewUrl: file.attributes.previewUrl ?? generateUrl(`/apps/photos/api/v1/preview/${file.fileid}?x=2048&y=2048`),
@@ -148,13 +149,15 @@ export function toViewerFileInfo(file: Node): ViewerFileInfo {
*
* @param file
*/
-export function legacyToViewerFileInfo(file: FoldersNode) {
+export function legacyToViewerFileInfo(file: FoldersNode): ViewerFileInfo {
return {
fileid: file.fileid,
+ ownerId: '',
+ previewUrl: generateUrl(`/apps/photos/api/v1/preview/${file.fileid}?x=2048&y=2048`),
basename: file.basename,
filename: file.filename,
mime: file.mime,
- mtime: file.lastmod,
+ mtime: new Date(file.lastmod * 1000),
source: file.source,
hasPreview: file.hasPreview,
etag: file.etag,
diff --git a/src/views/AlbumContent.vue b/src/views/AlbumContent.vue
index c332c341a..3f91e461f 100644
--- a/src/views/AlbumContent.vue
+++ b/src/views/AlbumContent.vue
@@ -11,118 +11,154 @@
:loading="loadingCollection || loadingCollectionFiles"
:error="errorFetchingCollection || errorFetchingCollectionFiles">
-
-
- {{ album.attributes.location }}
-
-
-
-
-
-
-
- {{ t('photos', 'Unselect all') }}
-
-
-
-
-
-
-
-
- {{ t('photos', 'Add photos to this album') }}
-
-
-
-
-
-
-
-
- {{ t('photos', 'Edit album details') }}
-
-
+
+
+
+
+ {{ album.attributes.location }}
+
+
+
+
+
+
+
+
+ {{ t('photos', 'Unselect all') }}
+
+
+
+
+
+
+
+
+ {{ t('photos', 'Add photos to this album') }}
+
+
+
+
+
+
+
+
+
+
+ {{ t('photos', 'Edit album details') }}
+
+
+
+
-
-
- {{ t('photos', 'Delete album') }}
-
-
+
+ {{ t('photos', 'Delete album') }}
+
+
+
+
-
-
+
+
-
-
-
-
- {{ t('photos', 'Remove selection from album') }}
-
-
-
-
-
-
+
+ {{ t('photos', 'Add selection to favorites') }}
+
+
+
+
+
+ {{ t('photos', 'Remove selection from favorites') }}
+
+
+
+
+
+
+ {{ t('photos', 'Remove selection from album') }}
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {{ t('photos', "Add") }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('photos', "Add") }}
+
+
+
+
-
+
import type { Album } from '../store/albums.js'
-import { translate } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
import NcActions from '@nextcloud/vue/components/NcActions'
@@ -182,9 +218,10 @@ import MapMarkerOutline from 'vue-material-design-icons/MapMarkerOutline.vue'
import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import ShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import StarOutline from 'vue-material-design-icons/StarOutline.vue'
import DeleteOutline from 'vue-material-design-icons/TrashCanOutline.vue'
// import ActionDownload from '../components/Actions/ActionDownload.vue'
-import ActionFavorite from '../components/Actions/ActionFavorite.vue'
import AlbumForm from '../components/Albums/AlbumForm.vue'
import CollaboratorsSelectionForm from '../components/Albums/CollaboratorsSelectionForm.vue'
import CollectionContent from '../components/Collection/CollectionContent.vue'
@@ -199,7 +236,6 @@ export default {
name: 'AlbumContent',
components: {
// ActionDownload,
- ActionFavorite,
AlbumForm,
Close,
CollaboratorsSelectionForm,
@@ -222,6 +258,8 @@ export default {
PencilOutline,
Plus,
ShareVariantOutline,
+ Star,
+ StarOutline,
},
mixins: [
@@ -276,6 +314,10 @@ export default {
.filter((file) => file.attributes['photos-album-file-origin'] !== 'filters')
.map((file) => file.fileid.toString())
},
+
+ files() {
+ return this.$store.state.files.files
+ },
},
async mounted() {
@@ -341,7 +383,20 @@ export default {
this.fetchAlbumContent()
},
- t: translate,
+ async favoriteSelection(selectedFileIds: string[]) {
+ await this.$store.dispatch('toggleFavoriteForFiles', { fileIds: selectedFileIds, favoriteState: 1 })
+ },
+
+ async unFavoriteSelection(selectedFileIds: string[]) {
+ await this.$store.dispatch('toggleFavoriteForFiles', { fileIds: selectedFileIds, favoriteState: 0 })
+ },
+
+ shouldFavoriteSelection(selectedFileIds: string[]): boolean {
+ // Favorite all selection if at least one file is not in the favorites.
+ return selectedFileIds.some((fileId) => this.files[fileId].attributes.favorite === 0)
+ },
+
+ t,
},
}
diff --git a/src/views/AlbumsView.vue b/src/views/AlbumsView.vue
index 11aaf9973..08feff6f8 100644
--- a/src/views/AlbumsView.vue
+++ b/src/views/AlbumsView.vue
@@ -34,7 +34,7 @@
:key="collection.basename"
:link="`/albums/${collection.basename}`"
:alt-img="t('photos', 'Cover photo for album {albumName}', { albumName: collection.basename })"
- :cover-url="collection.attributes['last-photo'] | coverUrl">
+ :cover-url="coverUrl(collection.attributes['last-photo'])">
{{ collection.basename }}
@@ -72,7 +72,7 @@
diff --git a/src/views/FaceContent.vue b/src/views/FaceContent.vue
index 12f158126..9db8bb15f 100644
--- a/src/views/FaceContent.vue
+++ b/src/views/FaceContent.vue
@@ -68,7 +68,9 @@
:close-after-click="true"
:aria-label="t('photos', 'Download selected files')"
@click="downloadSelection">
-
+
+
+
{{ t('photos', 'Download selected photos') }}
-
+
+
+
{{ t('photos', 'Favorite') }}
-
+
+
+
{{ t('photos', 'Remove from favorites') }}
-
+
+
+
import type { Collection } from '../services/collectionFetcher.js'
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { n, t } from '@nextcloud/l10n'
+import { nextTick } from 'vue'
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
import NcActions from '@nextcloud/vue/components/NcActions'
import NcButton from '@nextcloud/vue/components/NcButton'
@@ -242,7 +249,7 @@ export default {
directives: {
focus(el) {
- Vue.nextTick(() => el.focus())
+ nextTick(() => el.focus())
},
},
@@ -309,6 +316,7 @@ export default {
window.OCA.Viewer.open({
fileInfo: toViewerFileInfo(this.files[fileId]),
list: this.faceFileIds.map((fileId) => toViewerFileInfo(this.files[fileId])),
+ onClose() { window.OCA.Files.Sidebar.close() },
})
},
diff --git a/src/views/FoldersView.vue b/src/views/FoldersView.vue
index 2e418aa3a..401a13faf 100644
--- a/src/views/FoldersView.vue
+++ b/src/views/FoldersView.vue
@@ -27,11 +27,11 @@
:title="folder?.basename?.toString?.() || rootTitle"
:root-title="rootTitle"
@refresh="onRefresh">
-
+ @uploaded="onUpload" /> -->
@@ -41,38 +41,60 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+