From e0ca6200bbae279a75f1f089da5c90ccf2b85fde Mon Sep 17 00:00:00 2001
From: Michael Rogers <contact@mhrogers.com>
Date: Thu, 19 Jan 2023 20:45:40 -0600
Subject: [PATCH] Handle pausing of imagery from viewLargeAction - 3647 (#5901)

* get imagery view context and externally set pause and thumbnail index

* Test pause/play state in realtime mode

* Created an onPreviewMode change handler to be invoked from view large

* Add optional chaining to method invocation

* Change onItemClicked to invoke to resolve repeat large view action error
---
 .../imagery/exampleImagery.e2e.spec.js        | 52 +++++++++++++++++++
 src/plugins/imagery/ImageryView.js            | 29 +++++++++++
 .../imagery/components/ImageryView.vue        |  2 +-
 .../viewLargeAction/viewLargeAction.js        |  2 +
 4 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
index d8ecbf9624..1311597f0a 100644
--- a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
+++ b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
@@ -207,6 +207,58 @@ test.describe('Example Imagery in Display Layout', () => {
         await page.goto(displayLayout.url);
     });
 
+    test('View Large action pauses imagery when in realtime and returns to realtime', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/3647'
+        });
+
+        // Click time conductor mode button
+        await page.locator('.c-mode-button').click();
+
+        // set realtime mode
+        await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
+
+        // pause/play button
+        const pausePlayButton = await page.locator('.c-button.pause-play');
+
+        await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+
+        // Open context menu and click view large menu item
+        await page.locator('button[title="View menu items"]').click();
+        await page.locator('li[title="View Large"]').click();
+        await expect(pausePlayButton).toHaveClass(/is-paused/);
+
+        await page.locator('[aria-label="Close"]').click();
+        await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+    });
+
+    test('View Large action leaves keeps realtime mode paused', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/3647'
+        });
+
+        // Click time conductor mode button
+        await page.locator('.c-mode-button').click();
+
+        // set realtime mode
+        await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
+
+        // pause/play button
+        const pausePlayButton = await page.locator('.c-button.pause-play');
+        await pausePlayButton.click();
+        await expect.soft(pausePlayButton).toHaveClass(/is-paused/);
+
+        // Open context menu and click view large menu item
+        await page.locator('button[title="View menu items"]').click();
+        await page.locator('li[title="View Large"]').click();
+        await expect(pausePlayButton).toHaveClass(/is-paused/);
+
+        await page.locator('[aria-label="Close"]').click();
+        await expect.soft(pausePlayButton).toHaveClass(/is-paused/);
+    });
+
     test('Imagery View operations @unstable', async ({ page }) => {
         test.info().annotations.push({
             type: 'issue',
diff --git a/src/plugins/imagery/ImageryView.js b/src/plugins/imagery/ImageryView.js
index 391cd86df9..801ccb5950 100644
--- a/src/plugins/imagery/ImageryView.js
+++ b/src/plugins/imagery/ImageryView.js
@@ -45,6 +45,35 @@ export default class ImageryView {
         });
     }
 
+    getViewContext() {
+        if (!this.component) {
+            return {};
+        }
+
+        return this.component.$refs.ImageryContainer;
+    }
+
+    pause() {
+        const imageContext = this.getViewContext();
+        // persist previous pause value to return to after unpausing
+        this.previouslyPaused = imageContext.isPaused;
+        imageContext.thumbnailClicked(imageContext.focusedImageIndex);
+    }
+    unpause() {
+        const pausedStateBefore = this.previouslyPaused;
+        this.previouslyPaused = undefined; // clear value
+        const imageContext = this.getViewContext();
+        imageContext.paused(pausedStateBefore);
+    }
+
+    onPreviewModeChange({ isPreviewing } = {}) {
+        if (isPreviewing) {
+            this.pause();
+        } else {
+            this.unpause();
+        }
+    }
+
     destroy() {
         this.component.$destroy();
         this.component = undefined;
diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue
index 8095898699..db13f8f3f5 100644
--- a/src/plugins/imagery/components/ImageryView.vue
+++ b/src/plugins/imagery/components/ImageryView.vue
@@ -721,7 +721,7 @@ export default {
                 && visibleActions.find(action => action.key === 'large.view');
 
             if (viewLargeAction && viewLargeAction.appliesTo(this.objectPath, this.currentView)) {
-                viewLargeAction.onItemClicked();
+                viewLargeAction.invoke(this.objectPath, this.currentView);
             }
         },
         async initializeRelatedTelemetry() {
diff --git a/src/plugins/viewLargeAction/viewLargeAction.js b/src/plugins/viewLargeAction/viewLargeAction.js
index 9d5891fff1..c3e3852cc6 100644
--- a/src/plugins/viewLargeAction/viewLargeAction.js
+++ b/src/plugins/viewLargeAction/viewLargeAction.js
@@ -58,6 +58,7 @@ export default class ViewLargeAction {
 
     _expand(objectPath, view) {
         const element = this._getPreview(objectPath, view);
+        view.onPreviewModeChange?.({ isPreviewing: true });
 
         this.overlay = this.openmct.overlays.overlay({
             element,
@@ -67,6 +68,7 @@ export default class ViewLargeAction {
                 this.preview.$destroy();
                 this.preview = undefined;
                 delete this.preview;
+                view.onPreviewModeChange?.();
             }
         });
     }