LUSHDigital/lrpi_player#136 LUSHDigital/lrpi_player#68 #37 Tweaked th…

…e end of playlist behaviour to work well on both pod and spa mode. Added a loading spinner to there are no horrid white screens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lrpi_tablet_ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve -o",

src/app/app.component.css

@@ -1,3 +1,7 @@
+html {
+    background-color: black;
+}
+
 .settings-room-name {
     padding: 0.6em 0 0.6em 10vw;
     background-color: black;
@@ -12,7 +16,7 @@
 
 p.slave-prompt {
     padding: 0.6em 0 0.6em 10vw
-}
+}  
 
 .pair-button button {
     margin-left: 0.3em;

src/app/pages/track-control/track-control.component.ts

@@ -133,7 +133,7 @@ export class TrackControlComponent implements OnInit {
         this.now = this.hhmmss(this.ticks += 1);
       } else if (this.ticks >= +this.totalTicks && this.ticks != 0 && this.playing) {
         this.resetProgressBar()
-        this.autoSkip();
+        this.next(undefined);;
       }
       this.i_progress = Math.floor((this.ticks/this.totalTicks)*100)
     }, 1000);
@@ -160,11 +160,6 @@ export class TrackControlComponent implements OnInit {
     this.playing = false;
     this.skipped = false;
     this.duration = 'XX:XX:XX';
-    if (this.hrId === 0) this.started = false;
-  }
-
-  autoSkip() {
-    if (this.endOfPlaylist() === false) this.next(undefined);
   }
 
   play() {
@@ -199,6 +194,7 @@ export class TrackControlComponent implements OnInit {
   next(interval) {
     if(!this.loading) {
       this.hrId = ((++this.hrId) % (this.numTracks));
+      if (this.hrId === 0) this.started = false;
       this.fadeToTrack(
         this.hrId, 
         this.playing ? interval : 0

src/app/pages/track-selector/track-selector.component.html

@@ -1,5 +1,10 @@
 <!-- <router-outlet></router-outlet> -->
-<div *ngIf="serverData != null; else elseBlock">
+<div id="mainBox" [ngStyle]="styleObject()" *ngIf="loading">
+  <h2>Please wait...</h2>
+  <mat-spinner class="white"></mat-spinner>
+</div>
+
+<div *ngIf="serverData != null; else error">
   <div id="mainBox" [ngStyle]="styleObject()">
     <div class="selector-heading">Select treatment:</div>
     <div *ngFor="let item of serverData | async" [ngStyle]="itemStyleObject()">
@@ -18,12 +23,12 @@
               <mat-icon>arrow_right_alt</mat-icon>
             </div>
           </div>
-        </a> 
+        </a>
       </ng-template>
 
     </div>
   </div>
 </div>
-<ng-template #elseBlock>
+<ng-template #error>
   <div class="error">{{ errorResponse.message }}</div>
 </ng-template>

src/app/pages/track-selector/track-selector.component.ts

@@ -21,6 +21,7 @@ export class TrackSelectorComponent implements OnInit {
   folderId = null;
   settings: any;
   roomName: string = '?';
+  loading = true;
 
   constructor(
     private httpClient: HttpClient,
@@ -55,6 +56,7 @@ export class TrackSelectorComponent implements OnInit {
   ngOnInit() {
 
     this.folderId = this.route.snapshot.queryParamMap.get("id");
+    this.loading = true;
 
     this.getTracksService.getStatus().pipe(
       switchMap((status: any) => {
@@ -87,6 +89,7 @@ export class TrackSelectorComponent implements OnInit {
         console.log('In the playlist processor');
 
         let data: any = d;
+        this.loading = false;
 
         console.log('tracks: ', data, ' length: ', data.length);
 

src/styles.css

@@ -32,6 +32,10 @@ a {
     font-weight: bold;
 }
 
+.mat-spinner.white circle {
+    stroke: white;
+}
+
 
 .mat-progress-spinner circle, .mat-spinner circle {
     stroke: black;