[U] huddle load the stories users

src/app/huddle/huddle.component.html

@@ -1,22 +1,21 @@
 <div *ngIf="standup" class="row">
-    <div class="col-12 col-sm-9">
+    <div class="col-12 col-sm-9 order-1 order-sm-0">
         <legend #name contenteditable="true" (click)="dataUpdated=true">{{ standup.name }}</legend>
         <p #desc contenteditable="true" (click)="dataUpdated=true">{{ standup.description }}</p>
     </div>
-    <div class="col-12 col-sm-3">
+    <div class="col-12 col-sm-3 order-0 oder-sm-1">
         <div class="float-right">
             <button class="btn btn-primary ml-1 mr-1" [disabled]="!dataUpdated" (click)="updateStandUp(name.innerText, desc.innerText)">Save</button>
             <button class="btn btn-danger ml-1 mr-1" (click)="deleteStandUp()">Delete</button>
         </div>
     </div>
-    <div class="col-12">
+    <div class="col-12 order-2">
         <ah-recorder (recordingEnded)="uploadStory($event)"></ah-recorder>
     </div>
-    <div *ngFor="let story of stories" class="col p-3">
+    <div *ngFor="let story of stories" class="col p-3 order-3">
         <div class="text-center" (click)="playStory(story)">
-            <div class="storyImage" style="background-image: url('https://placeimg.com/640/480/people')"
+            <div class="storyImage" style="background-image: url({{'https://dummyimage.com/256x256/000/fff&text='+(story.user ? story.user.username: '...')}})" [ngClass]="{'hasStory': story.id && story.src}"></div>
-                [ngClass]="{'hasStory': story.id && story.src}"></div>
+            <p class="mt-2 mb-0"><strong>{{story.user ? story.user.username : '...'}}</strong></p>
-            <p class="mt-2 mb-0"><strong>{{story.user_id}}</strong></p>
             <p><small>{{story.created_at | date :'dd.MM. HH:mm' }}</small></p>
         </div>
     </div>
@@ -46,7 +45,7 @@
             </button>
         </div>
         <p class="text-center m-0">
-            <strong>{{selectedStory.user_id}} - <small>{{selectedStory.created_at | date :'dd.MM. HH:mm' }}</small></strong>
+            <strong>{{selectedStory.user ? selectedStory.user.username : '...'}} - <small>{{selectedStory.created_at | date :'dd.MM. HH:mm' }}</small></strong>
         </p>
         <video [src]="base64ToSafeURL(selectedStory.src)" (ended)="nextUser(modal)" autoplay>
         </video>

src/app/huddle/huddle.component.scss

@@ -28,7 +28,7 @@
 }
 
 .modal-body {
-    height: 90vh;
+    max-height: 90vh;
 }
 
 .modal-body video {

src/app/huddle/huddle.component.ts

@@ -4,12 +4,13 @@ import { ActivatedRoute } from '@angular/router';
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { SupabaseAuthUser } from '@supabase/supabase-js';
 import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { take, takeUntil, map } from 'rxjs/operators';
 import { StandUp } from '../api/supabase/standup';
 import { StandupService } from '../api/supabase/standup.service';
 import { Story } from '../api/supabase/story';
 import { StoryService } from '../api/supabase/story.service';
 import { SupaService } from '../api/supabase/supa.service';
+import { UserService } from '../api/supabase/user.service';
 @Component({
   selector: 'app-huddle',
   templateUrl: './huddle.component.html',
@@ -30,12 +31,12 @@ export class HuddleComponent implements OnInit, OnDestroy {
     private supaService: SupaService,
     private route: ActivatedRoute,
     private sanitizer: DomSanitizer,
+    private userService: UserService,
   ) {}
 
   ngOnInit() {
     this.route.params.subscribe(
       params => {
-        console.warn('PARAMS', params)
         this.reset();
         if (params.id) {
           this.standupService.getOne(params.id).subscribe(
@@ -43,7 +44,6 @@ export class HuddleComponent implements OnInit, OnDestroy {
               console.log(data);
               this.standup = data;
               this.loadStories(data.id).subscribe(stories => {
-                console.log('GOT STORIES', stories);
                 this.stories = stories;
               });
             },
@@ -54,11 +54,9 @@ export class HuddleComponent implements OnInit, OnDestroy {
         }
       }
     )
-    this.unsubscribe.subscribe(data => console.warn('UNSUBSCRIBE'))
   }
 
   ngOnDestroy() {
-    console.error('HUDDLE COMP DESTROYED')
     this.unsubscribe.next(true);
     this.unsubscribe.complete();
   }
@@ -153,7 +151,15 @@ export class HuddleComponent implements OnInit, OnDestroy {
   }
   
   loadStories(id: number) {
-    return this.storyService.getStories(id).pipe(takeUntil(this.unsubscribe.asObservable()));
+    return this.storyService.getStories(id).pipe(
+      takeUntil(this.unsubscribe.asObservable()),
+      map(stories => {
+        stories.forEach(story => {
+          this.userService.getOne(story.user_id).subscribe(user => story.user = user)
+        })
+        return stories;
+      })
+    );
   }
 
   base64ToSafeURL(b64Data: string, contentType: string ='video/webm', sliceSize: number=512): SafeUrl {