Merge pull request #3342 from alfonso-salces/MOBILE-4085

MOBILE-4085 core: Fix change detection

src/core/directives/format-text.ts

@@ -25,6 +25,7 @@ import {
     ViewChild,
     OnDestroy,
     Inject,
+    ChangeDetectorRef,
 } from '@angular/core';
 import { IonContent } from '@ionic/angular';
 
@@ -177,6 +178,9 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncCompo
 
         extContent.ngAfterViewInit();
 
+        const changeDetectorRef = this.viewContainerRef.injector.get(ChangeDetectorRef);
+        changeDetectorRef.markForCheck();
+
         return extContent;
     }
 

src/core/features/course/components/module/core-course-module.html

@@ -17,8 +17,8 @@
                     </core-format-text>
                     <ion-icon name="fas-lock" *ngIf="module.visible === 0 || module.uservisible === false"
                         [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                    <ion-icon [name]="prefetchStatusIcon" *ngIf="prefetchStatusIcon" color="success"
+                    <ion-icon *ngIf="prefetchStatusIcon$ | async as prefetchStatusIcon" [name]="prefetchStatusIcon" color="success"
-                        [attr.aria-label]="prefetchStatusText | translate"></ion-icon>
+                        [attr.aria-label]="((prefetchStatusText$ | async) || '') | translate"></ion-icon>
                 </p>
 
                 <div class="core-module-additional-info">

src/core/features/course/components/module/module.ts

@@ -29,6 +29,7 @@ import {
 } from '@features/course/services/module-prefetch-delegate';
 import { CoreConstants } from '@/core/constants';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
+import { BehaviorSubject } from 'rxjs';
 
 /**
  * Component to display a module entry in a list of modules.
@@ -55,8 +56,8 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     modNameTranslated = '';
     hasInfo = false;
     showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled.
-    prefetchStatusIcon = ''; // Module prefetch status icon.
+    prefetchStatusIcon$ = new BehaviorSubject<string>(''); // Module prefetch status icon.
-    prefetchStatusText = ''; // Module prefetch status text.
+    prefetchStatusText$ = new BehaviorSubject<string>(''); // Module prefetch status text.
     autoCompletionTodo = false;
     moduleHasView = true;
 
@@ -137,16 +138,16 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
 
         switch (prefetchstatus) {
             case CoreConstants.OUTDATED:
-                this.prefetchStatusIcon = CoreConstants.ICON_OUTDATED;
+                this.prefetchStatusIcon$.next(CoreConstants.ICON_OUTDATED);
-                this.prefetchStatusText = 'core.outdated';
+                this.prefetchStatusText$.next('core.outdated');
                 break;
             case CoreConstants.DOWNLOADED:
-                this.prefetchStatusIcon = CoreConstants.ICON_DOWNLOADED;
+                this.prefetchStatusIcon$.next(CoreConstants.ICON_DOWNLOADED);
-                this.prefetchStatusText = 'core.downloaded';
+                this.prefetchStatusText$.next('core.downloaded');
                 break;
             default:
-                this.prefetchStatusIcon = '';
+                this.prefetchStatusIcon$.next('');
-                this.prefetchStatusText = '';
+                this.prefetchStatusText$.next('');
                 break;
         }
 

src/core/features/h5p/components/h5p-player/core-h5p-player.html

@@ -5,7 +5,7 @@
     </ion-button>
 
     <div class="core-h5p-placeholder-download-container">
-        <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="calculating" [canTrustDownload]="true"
+        <core-download-refresh [status]="state" [enabled]="canDownload$ | async" [loading]="calculating$ | async" [canTrustDownload]="true"
             (action)="download()">
         </core-download-refresh>
     </div>

src/core/features/h5p/components/h5p-player/h5p-player.ts

@@ -26,6 +26,7 @@ import { CoreEvents, CoreEventObserver } from '@singletons/events';
 import { CoreLogger } from '@singletons/logger';
 import { CoreH5P } from '@features/h5p/services/h5p';
 import { CoreH5PDisplayOptions } from '../../classes/core';
+import { BehaviorSubject } from 'rxjs';
 
 /**
  * Component to render an H5P package.
@@ -43,8 +44,8 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
 
     showPackage = false;
     state?: string;
-    canDownload = false;
+    canDownload$ = new BehaviorSubject(false);
-    calculating = true;
+    calculating$ = new BehaviorSubject(true);
     displayOptions?: CoreH5PDisplayOptions;
     urlParams?: {[name: string]: string};
 
@@ -93,7 +94,7 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
         this.displayOptions = CoreH5P.h5pPlayer.getDisplayOptionsFromUrlParams(this.urlParams);
         this.showPackage = true;
 
-        if (!this.canDownload || (this.state != CoreConstants.OUTDATED && this.state != CoreConstants.NOT_DOWNLOADED)) {
+        if (!this.canDownload$.getValue() || (this.state != CoreConstants.OUTDATED && this.state != CoreConstants.NOT_DOWNLOADED)) {
             return;
         }
 
@@ -181,8 +182,8 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
             }
 
         } else {
-            this.calculating = false;
+            this.calculating$.next(false);
-            this.canDownload = false;
+            this.canDownload$.next(false);
         }
 
     }
@@ -194,18 +195,18 @@ export class CoreH5PPlayerComponent implements OnInit, OnChanges, OnDestroy {
      * @return Promise resolved when done.
      */
     protected async calculateState(): Promise<void> {
-        this.calculating = true;
+        this.calculating$.next(true);
 
         // Get the status of the file.
         try {
             const state = await CoreFilepool.getFileStateByUrl(this.siteId, this.urlParams!.url);
 
-            this.canDownload = true;
+            this.canDownload$.next(true);
             this.state = state;
         } catch (error) {
-            this.canDownload = false;
+            this.canDownload$.next(false);
         } finally {
-            this.calculating = false;
+            this.calculating$.next(false);
         }
     }