Multi-stream support (in display)

Mamoth/src/app/app.component.css

@@ -6,8 +6,11 @@ app-streams-main-display {
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
+  bottom: 30px;
   left: 50px;
+  overflow-y: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
 app-streams-selection-footer {

Mamoth/src/app/components/stream/stream.component.css

@@ -1,6 +1,6 @@
 #mam-stream-column {
   width: 300px;
-  height: calc(100% - 30px);
+  height: calc(100%);
 
   background-color: aqua;
 

Mamoth/src/app/components/streams-main-display/streams-main-display.component.css

@@ -1,8 +1,19 @@
 #mam-main-display {
   width: calc(100%);
-  height: calc(100%);
+  height: calc(100%); 
   overflow-x: auto;
+  overflow-y: hidden;
 
   background: blue;
   /*outline: 1px dotted red;*/
 }
+
+
+.mam-stream-column {
+  height: calc(100%);
+  display: inline-block;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  white-space: normal;
+  margin-left: 5px;
+}

Mamoth/src/app/components/streams-main-display/streams-main-display.component.html

@@ -1,4 +1,6 @@
 <div id="mam-main-display">
-  <app-stream></app-stream>
+  <div *ngFor="let s of streams" class="mam-stream-column">
+    <app-stream></app-stream>
+  </div>
 
 </div>

Mamoth/src/app/components/streams-main-display/streams-main-display.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Stream } from 'stream';
 
 @Component({
   selector: 'app-streams-main-display',
@@ -6,10 +7,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./streams-main-display.component.css']
 })
 export class StreamsMainDisplayComponent implements OnInit {
+  streams: Stream[] = [];
 
   constructor() { }
 
   ngOnInit() {
+    for (let i = 0; i < 3; i++) {
+      this.streams.push(new Stream());
+    }
   }
 
 }