Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Avoid clashes with rick rowing and tours

Browse Source 
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
This commit is contained in:
George Gevoian 2023-03-29 09:45:19 -04:00
parent 58ef8d59b5
commit 5b2fb62627
3 changed files with 79 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/client/components/GristDoc.ts
View File

@ -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) {
try {
if (state.hash.popup) {
await this.openPopup(state.hash);
} else {
// Navigate to an anchor if one is present in the url hash.
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%',
width: '100%',
origin: getMainOrgUrl(),
playerVars: {
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
modestbranding: 1,
},
onPlayerStateChange: (_player, event) => {
if (event.data === PlayerState.Playing) {
this._isRickRowing.set(true);
}
},
}, cssYouTubePlayer.cls(''));
this._showBackgroundVideoPlayer.set(true);
this._waitForView()
.then(() => {
const cursor = document.querySelector('.selected_cursor.active_cursor');
if (cursor) {
this.behavioralPromptsManager.showTip(cursor, 'rickRow', {
forceShow: true,
hideDontShowTips: true,
markAsSeen: false,
showOnMobile: true,
onDispose: () => this.playRickRollVideo(),
});
}
})
.catch(reportError);
}
} catch (e) {
reportError(e);
} finally {
setTimeout(finalizeAnchor, 0);
if (!state.hash) { return; }
try {
if (state.hash.popup) {
await this.openPopup(state.hash);
} else {
// Navigate to an anchor if one is present in the url hash.
const cursorPos = this._getCursorPosFromHash(state.hash);
await this.recursiveMoveToCursorPos(cursorPos, true);
}
const isTourOrTutorialActive = isTourActive() || this.docModel.isTutorial();
if (state.hash.rickRow && !this._isRickRowing.get() && !isTourOrTutorialActive) {
YouTubePlayer.create(this._backgroundVideoPlayerHolder, RICK_ROLL_YOUTUBE_EMBED_ID, {
height: '100%',
width: '100%',
origin: getMainOrgUrl(),
playerVars: {
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
modestbranding: 1,
},
onPlayerStateChange: (_player, event) => {
if (event.data === PlayerState.Playing) {
this._isRickRowing.set(true);
}
},
}, cssYouTubePlayer.cls(''));
this._showBackgroundVideoPlayer.set(true);
this._waitForView()
.then(() => {
const cursor = document.querySelector('.selected_cursor.active_cursor');
if (!cursor) { return; }
this.behavioralPromptsManager.showTip(cursor, 'rickRow', {
forceShow: true,
hideDontShowTips: true,
markAsSeen: false,
showOnMobile: true,
onDispose: () => this.playRickRollVideo(),
});
})
.catch(reportError);
}
} 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;
}

10
test/nbrowser/DocTutorial.ts
View File

@ -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.

9
test/nbrowser/gristUtils.ts
View File

@ -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);