+
+
+
+
Note that your update has no effect on the presentations you would have already published.
+Note that your update has no effect on the presentations you would have already published.
, ]; } @@ -468,7 +463,7 @@ export class AppHome { disabled={this.saving} onIonInput={($event: CustomEventSign in to unleash all features of the editor like adding more slides, uploading and using your own images, using the author template or being able to share your presentation as an app. -
+ , ]; } else { return [Sign in to unleash all features of the editor and to be able to share your presentation as an app.
+Sign in to unleash all features of the editor and to be able to share your presentation as an app.
, ]; } } diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx index 2f240379e..85ca7be78 100644 --- a/studio/src/app/pages/editor/app-editor/app-editor.tsx +++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx @@ -2,8 +2,10 @@ import {Component, Element, h, JSX, Listen, Prop, State} from '@stencil/core'; import {ItemReorderEventDetail, modalController, OverlayEventDetail} from '@ionic/core'; -import {Subscription} from 'rxjs'; -import {filter, take} from 'rxjs/operators'; +import deckStore from '../../../stores/deck.store'; +import busyStore from '../../../stores/busy.store'; +import navStore, {NavDirection} from '../../../stores/nav.store'; +import authStore from '../../../stores/auth.store'; import {debounce, isFullscreen, isIOS, isMobile} from '@deckdeckgo/utils'; @@ -13,7 +15,6 @@ import {generateRandomStyleColors} from '../../../utils/editor/random-palette'; import {AuthUser} from '../../../models/auth/auth.user'; import {SlideTemplate} from '../../../models/data/slide'; -import {Deck} from '../../../models/data/deck'; import {CreateSlidesUtils} from '../../../utils/editor/create-slides.utils'; import {ParseBackgroundUtils} from '../../../utils/editor/parse-background.utils'; @@ -33,9 +34,6 @@ import {SlotUtils} from '../../../utils/editor/slot.utils'; import {AuthService} from '../../../services/auth/auth.service'; import {AnonymousService} from '../../../services/editor/anonymous/anonymous.service'; -import {NavDirection, NavService} from '../../../services/core/nav/nav.service'; -import {DeckEditorService} from '../../../services/editor/deck/deck-editor.service'; -import {BusyService} from '../../../services/editor/busy/busy.service'; import {EnvironmentGoogleConfig} from '../../../services/core/environment/environment-config'; import {EnvironmentConfigService} from '../../../services/core/environment/environment-config.service'; @@ -80,12 +78,6 @@ export class AppEditor { private authService: AuthService; private anonymousService: AnonymousService; - private navService: NavService; - - private deckEditorService: DeckEditorService; - - private busySubscription: Subscription; - private busyService: BusyService; private offlineService: OfflineService; @@ -106,12 +98,11 @@ export class AppEditor { @State() private fullscreen: boolean = false; + private destroyBusyListener; + constructor() { this.authService = AuthService.getInstance(); this.anonymousService = AnonymousService.getInstance(); - this.navService = NavService.getInstance(); - this.deckEditorService = DeckEditorService.getInstance(); - this.busyService = BusyService.getInstance(); this.offlineService = OfflineService.getInstance(); this.fontsService = FontsService.getInstance(); } @@ -136,34 +127,9 @@ export class AppEditor { await this.initOffline(); - // If no user create an anonymous one - this.authService - .watch() - .pipe(take(1)) - .subscribe(async (authUser: AuthUser) => { - if (!authUser) { - await this.authService.signInAnonymous(); - } - }); - - // As soon as we have got a user, an anonymous where the creation started above or an already used anonymous or a logged one, we init - this.authService - .watch() - .pipe( - filter((authUser: AuthUser) => authUser !== null && authUser !== undefined), - take(1) - ) - .subscribe(async (_authUser: AuthUser) => { - if (!this.deckId) { - await this.initSlide(); - } else { - await this.fetchSlides(); - } - - this.slidesFetched = true; - }); + await this.initWithAuth(); - this.busySubscription = this.busyService.watchSlideEditable().subscribe(async (slide: HTMLElement) => { + this.destroyBusyListener = busyStore.onChange('slideEditable', async (slide: HTMLElement | undefined) => { this.slidesEditable = true; await this.contentEditable(slide); @@ -172,6 +138,35 @@ export class AppEditor { this.fullscreen = isFullscreen() && !isIOS(); } + private async initWithAuth() { + if (!authStore.state.authUser) { + // As soon as the anonymous is created, we proceed + const destroyListener = authStore.onChange('authUser', async (authUser: AuthUser | null) => { + if (authUser) { + await this.initOrFetch(); + } + + destroyListener(); + }); + + // If no user create an anonymous one + await this.authService.signInAnonymous(); + } else { + // We have got a user, regardless if anonymous or not, we init + await this.initOrFetch(); + } + } + + private async initOrFetch() { + if (!this.deckId) { + await this.initSlide(); + } else { + await this.fetchSlides(); + } + + this.slidesFetched = true; + } + async initOffline() { // if we are offline we can't create a new deck or edit another one that the one we have marked as currently being edited offline const offline: OfflineDeck = await this.offlineService.status(); @@ -189,11 +184,7 @@ export class AppEditor { await this.remoteEventsHandler.destroy(); - if (this.busySubscription) { - this.busySubscription.unsubscribe(); - } - - this.deckEditorService.next(null); + deckStore.reset(); } async componentDidLoad() { @@ -211,6 +202,10 @@ export class AppEditor { await this.remoteEventsHandler.destroy(); this.removeWindowResize(); + + if (this.destroyBusyListener) { + this.destroyBusyListener(); + } } private updateInlineEditorListener(): PromiseAuthor