Merge pull request #39 from LUSHDigital/pod_no_loop

Pod no loop

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

@@ -62,7 +62,6 @@ export class TrackControlComponent implements OnInit {
     private route: ActivatedRoute,
     private getTracksService: GetTracksService,
     private getStylesService: GetStylesService,
-    private _location: Location,
     private router: Router
   ) {}
 
@@ -129,20 +128,12 @@ export class TrackControlComponent implements OnInit {
       }  
     }
 
-    setInterval(() => { 
+    setInterval(() => {
       if (this.playing && (this.ticks < +this.totalTicks)) {
-        this.now = this.hhmmss(this.ticks += 1); 
+        this.now = this.hhmmss(this.ticks += 1);
       } else if (this.ticks >= +this.totalTicks && this.ticks != 0 && this.playing) {
-        this.now = '00:00:00' 
-        this.ticks = 0; 
-        // Play the next track in the playlist
-        // automatically
-        this.playing = false;
-        this.skipped = false;
-        this.duration = 'XX:XX:XX';
-        // TODO: needs to loop on LOOP tracks?
-        // Skip only on command
-        this.next(undefined);
+        this.resetProgressBar()
+        this.next(undefined);;
       }
       this.i_progress = Math.floor((this.ticks/this.totalTicks)*100)
     }, 1000);
@@ -153,6 +144,24 @@ export class TrackControlComponent implements OnInit {
 
   }
 
+  // Used in the skip function to avoid looping an entire playlist
+  // Beware! if there is only one track in the playlist this will always
+  // return true
+
+  endOfPlaylist() {
+    return this.hrId + 1 === this.playlist.length;
+  }
+
+  resetProgressBar() {
+    this.now = '00:00:00';
+    this.ticks = 0;
+    // Play the next track in the playlist
+    // automatically
+    this.playing = false;
+    this.skipped = false;
+    this.duration = 'XX:XX:XX';
+  }
+
   play() {
     this.loading = true;
     if (!this.started) {
@@ -170,7 +179,7 @@ export class TrackControlComponent implements OnInit {
         this.playing = true;
         this.duration = this.hhmmss(data)
         console.log(data);
-      });  
+      });
     }
   }
 
@@ -185,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/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  hostname: 'lushroom-dev-master.local'
+  hostname: '192.168.0.56'
 };
 
 /*

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;