Fix sidebar open

cypress/integration/images-custom-list-loadmore.spec.js

@@ -58,7 +58,7 @@ describe('Open images in viewer', function() {
 		// make sure we only loadMore once
 		let loaded = false
 
-		// get the two files fileids
+		// get the files fileids
 		cy.getFileId('image1.jpg').then(fileID1 => {
 			cy.getFileId('image2.jpg').then(fileID2 => {
 				cy.getFileId('image3.jpg').then(fileID3 => {

cypress/integration/sidebar.spec.js

@@ -0,0 +1,107 @@
+/**
+ * @copyright Copyright (c) 2019 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 { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Open the sidebar', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('image1.jpg', 'image/jpeg')
+		cy.uploadFile('image2.jpg', 'image/jpeg')
+		cy.uploadFile('image3.jpg', 'image/jpeg')
+		cy.uploadFile('image4.jpg', 'image/jpeg')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(1000)
+	})
+	after(function() {
+		cy.logout()
+	})
+
+	it('See images in the list', function() {
+		cy.get('#fileList tr[data-file="image1.jpg"]', { timeout: 10000 })
+			.should('contain', 'image1.jpg')
+		cy.get('#fileList tr[data-file="image2.jpg"]', { timeout: 10000 })
+			.should('contain', 'image2.jpg')
+		cy.get('#fileList tr[data-file="image3.jpg"]', { timeout: 10000 })
+			.should('contain', 'image3.jpg')
+		cy.get('#fileList tr[data-file="image4.jpg"]', { timeout: 10000 })
+			.should('contain', 'image4.jpg')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('image1.jpg')
+		cy.get('#viewer-content').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('#viewer-content', { timeout: 4000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('See the menu icon and title on the viewer header', function() {
+		cy.get('#viewer-content .modal-title').should('contain', 'image1.jpg')
+		cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
+		cy.get('#viewer-content .modal-header button.icon-close').should('be.visible')
+	})
+
+	it('Does not have any visual regression 1', function() {
+		cy.matchImageSnapshot()
+	})
+
+	it('Open the sidebar', function() {
+		cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').click()
+		cy.get('aside#app-sidebar').should('be.visible')
+		// we hide the sidebar button if opened
+		cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('not.be.visible')
+		// check the sidebar is opened for the correct file
+		cy.get('aside#app-sidebar .app-sidebar-header .app-sidebar-header__title').should('contain', 'image1.jpg')
+		// check we indeed have a preview
+		cy.get('aside#app-sidebar .app-sidebar-header').should('have.class', 'app-sidebar-header--with-figure')
+		cy.getFileId('image1.jpg').then(fileID1 => {
+			cy.get('aside#app-sidebar .app-sidebar-header .app-sidebar-header__figure').should('have.attr', 'style').should('contain', fileID1)
+		})
+
+	})
+
+	it('Does not have any visual regression 2', function() {
+		cy.matchImageSnapshot()
+	})
+
+	it('Close the sidebar', function() {
+		cy.get('aside#app-sidebar .app-sidebar-header .app-sidebar__close').click()
+		cy.get('aside#app-sidebar').should('not.be.visible')
+		cy.get('#viewer-content .modal-header button.icon-menu-sidebar-white-forced').should('be.visible')
+	})
+
+	it('Does not have any visual regression 3', function() {
+		cy.matchImageSnapshot()
+	})
+})

src/components/Videos.vue

@@ -74,12 +74,6 @@ export default {
 		livePhoto() {
 			return this.fileList.find(file => {
 				// if same filename and extension is allowed
-				console.info(
-					file.filename,
-					file.filename !== this.filename,
-					file.basename.startsWith(this.basename),
-					liveExtRegex.exec(file.basename)
-				)
 				return file.filename !== this.filename
 					&& file.basename.startsWith(this.name)
 					&& liveExtRegex.test(file.basename)
@@ -98,7 +92,6 @@ export default {
 
 			// the item was playing before and is now hidden
 			} else if (val === false && old === true) {
-				console.info(val)
 				this.$el.pause()
 			}
 		},

src/views/Viewer.vue

@@ -41,7 +41,7 @@
 		<!-- ACTIONS -->
 		<template #actions>
 			<ActionButton
-				v-if="OCA.Files && OCA.Files.Sidebar"
+				v-if="Sidebar && !isSidebarShown"
 				icon="icon-menu-sidebar-white-forced"
 				@click="showSidebar">
 				{{ t('viewer', 'Open sidebar') }}
@@ -127,7 +127,9 @@ export default {
 	mixins: [isMobile, isFullscreen],
 
 	data: () => ({
+		// reactivity bindings
 		Viewer: OCA.Viewer.state,
+		Sidebar: null,
 		handlers: OCA.Viewer.availableHandlers,
 
 		components: {},
@@ -177,6 +179,10 @@ export default {
 		isEndOfList() {
 			return this.currentIndex === this.fileList.length - 1
 		},
+		// Current opened file in the sidebar if available
+		sidebarFile() {
+			return this.Sidebar && this.Sidebar.file
+		},
 	},
 
 	watch: {
@@ -236,6 +242,13 @@ export default {
 				}
 			}
 		},
+
+		sidebarFile: function(file) {
+			// TODO: implement sidebar event bus
+			if (file === '') {
+				this.hideAppsSidebar()
+			}
+		},
 	},
 
 	beforeMount() {
@@ -245,18 +258,24 @@ export default {
 			this.handlers.forEach(handler => {
 				this.registerHandler(handler)
 			})
+
 			// then register aliases. We need to have the components
 			// first so we can bind the alias to them.
 			this.handlers.forEach(handler => {
 				this.registerHandlerAlias(handler)
 			})
 			this.isLoaded = true
+
+			// bind Sidebar if available
+			if (OCA.Files && OCA.Files.Sidebar) {
+				this.Sidebar = OCA.Files.Sidebar.state
+			}
 		})
 
 		window.addEventListener('resize', this.onResize)
 
 		if (this.standalone) {
-			console.debug('No OCA.Files found, viewer is now in standalone mode')
+			console.debug('No OCA.Files app found, viewer is now in standalone mode')
 		}
 	},
 
@@ -598,25 +617,19 @@ export default {
 
 		showSidebar() {
 			// Open the sidebar sharing tab
-			OCA.Files.App.fileList.showDetailsView(this.currentFile.basename)
+			OCA.Files.Sidebar.open(this.currentFile.filename)
 			this.showAppsSidebar()
 		},
 
 		showAppsSidebar() {
 			this.isSidebarShown = true
-			const sidebar = document.getElementById('app-sidebar')
-			if (sidebar) {
-				sidebar.classList.add('app-sidebar--full')
-			}
-
-			// overriding closing function
-			const origHideAppsSidebar = OC.Apps.hideAppSidebar
-			OC.Apps.hideAppSidebar = ($el) => {
-				this.hideAppsSidebar()
-				origHideAppsSidebar($el)
-			}
-
-			this.sidebarWidth = sidebar.offsetWidth
+			setTimeout(() => {
+				const sidebar = document.getElementById('app-sidebar')
+				if (sidebar) {
+					sidebar.classList.add('app-sidebar--full')
+					this.sidebarWidth = sidebar.offsetWidth
+				}
+			}, 200)
 		},
 
 		hideAppsSidebar() {