(core) Avoid clashes with rick rowing and tours

Summary:
In certain scenarios, it's possible for a Grist tour and a tip that kicks off
an easter egg to be shown on screen at the same time. To deconflict, we
now check for the presence of one or the other and avoid showing both.

Test Plan: Browser tests.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3840

app/client/components/GristDoc.ts

@@ -197,6 +197,7 @@ export class GristDoc extends DisposableWithEvents {
   private _isRickRowing: Observable<boolean> = Observable.create(this, false);
   private _showBackgroundVideoPlayer: Observable<boolean> = Observable.create(this, false);
   private _backgroundVideoPlayerHolder: Holder<YouTubePlayer> = Holder.create(this);
+  private _disableAutoStartingTours: boolean = false;
 
 
   constructor(
@@ -278,54 +279,56 @@ export class GristDoc extends DisposableWithEvents {
 
     // Subscribe to URL state, and navigate to anchor or open a popup if necessary.
     this.autoDispose(subscribe(urlState().state, async (use, state) => {
-      if (state.hash) {
+      if (!state.hash) { return; }
-        try {
+
-          if (state.hash.popup) {
+      try {
-            await this.openPopup(state.hash);
+        if (state.hash.popup) {
-          } else {
+          await this.openPopup(state.hash);
-            // Navigate to an anchor if one is present in the url hash.
+        } else {
-            const cursorPos = this._getCursorPosFromHash(state.hash);
+          // Navigate to an anchor if one is present in the url hash.
-            await this.recursiveMoveToCursorPos(cursorPos, true);
+          const cursorPos = this._getCursorPosFromHash(state.hash);
-          }
+          await this.recursiveMoveToCursorPos(cursorPos, true);
-          if (state.hash.rickRow && !this._isRickRowing.get()) {
+        }
-            YouTubePlayer.create(this._backgroundVideoPlayerHolder, RICK_ROLL_YOUTUBE_EMBED_ID, {
+
-              height: '100%',
+        const isTourOrTutorialActive = isTourActive() || this.docModel.isTutorial();
-              width: '100%',
+        if (state.hash.rickRow && !this._isRickRowing.get() && !isTourOrTutorialActive) {
-              origin: getMainOrgUrl(),
+          YouTubePlayer.create(this._backgroundVideoPlayerHolder, RICK_ROLL_YOUTUBE_EMBED_ID, {
-              playerVars: {
+            height: '100%',
-                controls: 0,
+            width: '100%',
-                disablekb: 1,
+            origin: getMainOrgUrl(),
-                fs: 0,
+            playerVars: {
-                iv_load_policy: 3,
+              controls: 0,
-                modestbranding: 1,
+              disablekb: 1,
-              },
+              fs: 0,
-              onPlayerStateChange: (_player, event) => {
+              iv_load_policy: 3,
-                if (event.data === PlayerState.Playing) {
+              modestbranding: 1,
-                  this._isRickRowing.set(true);
+            },
-                }
+            onPlayerStateChange: (_player, event) => {
-              },
+              if (event.data === PlayerState.Playing) {
-            }, cssYouTubePlayer.cls(''));
+                this._isRickRowing.set(true);
-            this._showBackgroundVideoPlayer.set(true);
+              }
-            this._waitForView()
+            },
-              .then(() => {
+          }, cssYouTubePlayer.cls(''));
-                const cursor = document.querySelector('.selected_cursor.active_cursor');
+          this._showBackgroundVideoPlayer.set(true);
-                if (cursor) {
+          this._waitForView()
-                  this.behavioralPromptsManager.showTip(cursor, 'rickRow', {
+            .then(() => {
-                    forceShow: true,
+              const cursor = document.querySelector('.selected_cursor.active_cursor');
-                    hideDontShowTips: true,
+              if (!cursor) { return; }
-                    markAsSeen: false,
+
-                    showOnMobile: true,
+              this.behavioralPromptsManager.showTip(cursor, 'rickRow', {
-                    onDispose: () => this.playRickRollVideo(),
+                forceShow: true,
-                  });
+                hideDontShowTips: true,
-                }
+                markAsSeen: false,
-              })
+                showOnMobile: true,
-              .catch(reportError);
+                onDispose: () => this.playRickRollVideo(),
-          }
+              });
-        } catch (e) {
+            })
-          reportError(e);
+            .catch(reportError);
-        } finally {
-          setTimeout(finalizeAnchor, 0);
         }
+      } catch (e) {
+        reportError(e);
+      } finally {
+        setTimeout(finalizeAnchor, 0);
       }
     }));
 
@@ -337,12 +340,17 @@ export class GristDoc extends DisposableWithEvents {
         return;
       }
 
-      const shouldStartTutorial = this.docModel.isTutorial();
+      const isTutorial = this.docModel.isTutorial();
       // Onboarding tours were not designed with mobile support in mind. Disable until fixed.
-      if (isNarrowScreen() && !shouldStartTutorial) {
+      if (isNarrowScreen() && !isTutorial) {
         return;
       }
 
+      // Onboarding tours can conflict with rick rowing.
+      if (state.hash?.rickRow) {
+        this._disableAutoStartingTours = true;
+      }
+
       // If we have an active tour or tutorial (or are in the process of starting one), don't start
       // a new one.
       const hasActiveTourOrTutorial = isTourActive() || !this._docTutorialHolder.isEmpty();
@@ -350,6 +358,7 @@ export class GristDoc extends DisposableWithEvents {
         return;
       }
 
+      const shouldStartTutorial = isTutorial;
       const shouldStartDocTour = state.docTour || this._shouldAutoStartDocTour();
       const shouldStartWelcomeTour = state.welcomeTour || this._shouldAutoStartWelcomeTour();
       if (shouldStartTutorial || shouldStartDocTour || shouldStartWelcomeTour) {
@@ -1438,7 +1447,7 @@ export class GristDoc extends DisposableWithEvents {
    * seen the tour before.
    */
   private _shouldAutoStartDocTour(): boolean {
-    if (this.docModel.isTutorial()) {
+    if (this._disableAutoStartingTours || this.docModel.isTutorial()) {
       return false;
     }
 
@@ -1454,7 +1463,7 @@ export class GristDoc extends DisposableWithEvents {
   private _shouldAutoStartWelcomeTour(): boolean {
     // If a doc tutorial or tour are available, leave the welcome tour for another
     // doc (e.g. a new one).
-    if (this.docModel.isTutorial() || this.docModel.hasDocTour()) {
+    if (this._disableAutoStartingTours || this.docModel.isTutorial() || this.docModel.hasDocTour()) {
       return false;
     }
 

test/nbrowser/DocTutorial.ts

@@ -224,6 +224,16 @@ describe('DocTutorial', function () {
       assert.isTrue(await driver.find('.test-doc-tutorial-popup-footer').isDisplayed());
     });
 
+    it('does not play an easter egg when opening an anchor link encoded with rr', async function() {
+      await gu.getCell({rowNum: 1, col: 0}).click();
+      const link = await gu.getAnchor();
+      const easterEggLink = link.replace('r1', 'rr1');
+      await driver.get(easterEggLink);
+      await gu.waitForAnchor();
+      assert.isFalse(await driver.find('.test-behavioral-prompt').isPresent());
+      await gu.assertIsRickRowing(false);
+    });
+
     it('remembers the last slide the user had open', async function() {
       await driver.find('.test-doc-tutorial-popup-slide-3').click();
       // There's a 1000ms debounce in place for updates to the last slide.

test/nbrowser/gristUtils.ts

@@ -3012,6 +3012,15 @@ export async function skipWelcomeQuestions() {
   }
 }
 
+/**
+ * Asserts whether a video of Never Gonna Give You Up is playing in the background.
+ */
+export async function assertIsRickRowing(expected: boolean) {
+  assert.equal(await driver.find('.test-gristdoc-stop-rick-rowing').isPresent(), expected);
+  assert.equal(await driver.find('.test-gristdoc-background-video').isPresent(), expected);
+  assert.equal(await driver.find('iframe#youtube-player-dQw4w9WgXcQ').isPresent(), expected);
+}
+
 } // end of namespace gristUtils
 
 stackWrapOwnMethods(gristUtils);