Make sure show image actionhandler is only called once (#146)

* Make sure show image actionhandler is only called once

* Fix #143
* showImage was called multiple time
* Close listener was therefore also registered multiple times and stopped working

Signed-off-by: Robin Windey <ro.windey@gmail.com>

* Adjust Playwright tests to be NC28 compatible

Signed-off-by: Robin Windey <ro.windey@gmail.com>

---------

Signed-off-by: Robin Windey <ro.windey@gmail.com>

js/fileAction.js.LICENSE.txt

@@ -6,7 +6,7 @@
  * MIT Licensed
  */
 
-/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
+/*! @license DOMPurify 3.1.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.5/LICENSE */
 
 /**
  * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>

js/init.js.LICENSE.txt

@@ -6,7 +6,7 @@
  * MIT Licensed
  */
 
-/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
+/*! @license DOMPurify 3.1.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.5/LICENSE */
 
 /**
  * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>

src/fileAction.js

@@ -42,6 +42,12 @@ import { registerFileAction, FileAction, DefaultType, Permission } from '@nextcl
 
         _onClose: null,
 
+        // FIXME :: showImage is called multiple times because of the
+        // route-call in the actionhandler. This is a workaround to prevent
+        // the close handler from being registered multiple times.
+        // #143
+        _showImageCalled: false,
+
         /**
          * Actionhandler for image-click
          * @param {Node} node The file to open
@@ -169,6 +175,12 @@ import { registerFileAction, FileAction, DefaultType, Permission } from '@nextcl
          * to the photosphere app
          */
         _showImage: function (node, view, dir, fileName, xmpResultModel) {
+            if (this._showImageCalled) {
+                return;
+            }
+
+            this._showImageCalled = true;
+
             var imageUrl = node.source;
             var urlParams = {
                 url: imageUrl,
@@ -324,6 +336,7 @@ import { registerFileAction, FileAction, DefaultType, Permission } from '@nextcl
                 }
             }
             this._frameShowing = false;
+            this._showImageCalled = false;
         },
 
         _getFileObject: function (filename, context) {

tests/E2E/tests/common.ts

@@ -6,8 +6,8 @@ export async function loginAndSwitchToPPVTestFiles(page) {
     await page.locator('#user').press('Tab');
     await page.locator('#password').fill(process.env.E2E_PASSWORD ?? 'admin');
     await page.locator('#password').press('Enter');
-    await page.getByRole('link', { name: 'Files' }).click();
+    await page.getByLabel('Files', { exact: true }).click();
-    await page.getByRole('link', { name: 'ppv-testfiles' }).click();
+    await page.getByRole('button', { name: 'ppv-testfiles' }).click();
 };
 
 export const frameId = '#photo-sphere-viewer-frame';

tests/E2E/tests/directory-share.spec.ts

@@ -28,8 +28,8 @@ async function removeDirectoryShare(page) {
 
 async function unshare(page) {
   await page.goto(baseUrl);
-  await page.getByRole('link', { name: 'Files' }).click();
+  await page.getByLabel('Files', { exact: true }).click();
-  await page.getByRole('link', { name: 'ppv-testfiles' }).click();
+  await page.getByRole('button', { name: 'ppv-testfiles' }).click();
   await page.locator('.files-list__header-share-button').click();
   await page.getByLabel('Actions for "Share link"').click();
   await page.getByRole('menuitem', { name: 'Unshare' }).click();

tests/E2E/tests/regular-fileview.spec.ts

@@ -68,7 +68,7 @@ test('PPV should not show', async ({ page }) => {
 
 test('360 video should show on context menu click', async ({ page }) => {
   // Note :: this test needs to run on Chrome because Chromium lacks support for 360 video codecs
-  await page.getByRole('row', { name: 'Select the row for 360-video' }).getByLabel('Actions').click();
+  await page.getByRole('row', { name: 'Toggle selection for file "360-video.mp4" 360-video .mp4 Show sharing options' }).getByLabel('Actions').click();
   await page.getByRole('menuitem', { name: 'View in 360° viewer' }).click();
 
   await expect(page.frameLocator('#photo-sphere-viewer-frame').locator('#pano div').nth(1)).toBeVisible({ timeout: 1000 });

tests/E2E/tests/single-fileshare.spec.ts

@@ -31,8 +31,8 @@ async function removeExistingSingleFileShare(page) {
 
 async function unshare(page) {
   await page.goto(baseUrl);
-  await page.getByRole('link', { name: 'Files' }).click();
+  await page.getByLabel('Files', { exact: true }).click();
-  await page.getByRole('link', { name: 'ppv-testfiles' }).click();
+  await page.getByRole('button', { name: 'ppv-testfiles' }).click();
   await page.locator("[data-cy-files-list-row-name='" + fileName + "'] .files-list__row-mtime").click();
   await page.getByRole('tab', { name: 'Sharing' }).click();
   await page.getByRole('button', { name: 'Actions for "Share link"' }).click();