creation of media-viewer

src/app/app.component.html

@@ -1,3 +1,6 @@
+<app-media-viewer id="media-viewer" 
+    *ngIf="mediaViewerActive"></app-media-viewer>
+
 <app-left-side-bar>
 </app-left-side-bar>
 

src/app/app.component.scss

@@ -24,6 +24,15 @@
     z-index: 1;
 }
 
+#media-viewer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 99999999;
+}
+
 app-streams-selection-footer {
     position: absolute;
     height: 30px;

src/app/app.component.ts

@@ -13,9 +13,10 @@ import { StreamElement } from './states/streams.state';
 })
 export class AppComponent implements OnInit, OnDestroy {    
     title = 'Sengi';
-
     floatingColumnActive: boolean;
     tutorialActive: boolean;
+    mediaViewerActive: boolean = false;
+
     private columnEditorSub: Subscription;
 
     @Select(state => state.streamsstatemodel.streams) streamElements$: Observable<StreamElement[]>;

src/app/app.module.ts

@@ -48,6 +48,7 @@ import { StreamEditionComponent } from './components/stream/stream-edition/strea
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { NotificationHubComponent } from './components/notification-hub/notification-hub.component';
 import { NotificationService } from "./services/notification.service";
+import { MediaViewerComponent } from './components/media-viewer/media-viewer.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -85,7 +86,8 @@ const routes: Routes = [
     StreamStatusesComponent,
     StreamEditionComponent,
     TutorialComponent,
-    NotificationHubComponent
+    NotificationHubComponent,
+    MediaViewerComponent
   ],
   imports: [
     FontAwesomeModule,

src/app/components/media-viewer/media-viewer.component.html

@@ -0,0 +1,3 @@
+<div class="media-viewer-canvas">
+  media-viewer works!
+</div>

src/app/components/media-viewer/media-viewer.component.scss

@@ -0,0 +1,5 @@
+.media-viewer-canvas {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .6);
+}

src/app/components/media-viewer/media-viewer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaViewerComponent } from './media-viewer.component';
+
+xdescribe('MediaViewerComponent', () => {
+  let component: MediaViewerComponent;
+  let fixture: ComponentFixture<MediaViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MediaViewerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/media-viewer/media-viewer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-media-viewer',
+  templateUrl: './media-viewer.component.html',
+  styleUrls: ['./media-viewer.component.scss']
+})
+export class MediaViewerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}