added drop file UI

src/app/app.component.html

@@ -1,23 +1,34 @@
-<app-media-viewer 
-    id="media-viewer" 
-    *ngIf="openedMediaEvent"
-    [openedMediaEvent]="openedMediaEvent" (closeSubject)="closeMedia()"></app-media-viewer>
-
-<app-left-side-bar>
-</app-left-side-bar>
-
-<!--<app-streams-main-display>
-</app-streams-main-display>-->
-
-<div id="display-zone">
-    <app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
-    <app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
-    <app-notification-hub></app-notification-hub>
-    <router-outlet></router-outlet>     
+<div class="drag-and-drop" *ngIf="drag" (dragleave)="dragleave($event)" (dragover)="dragover($event)"  (drop)="drop($event)"
+    [ngClass]="{'drag-and-drop__on-drag': drag2 === true }">
+    <div class="drag-and-drop__card">
+        <div class="drag-and-drop__border">
+            <div class="drag-and-drop__label">
+                Drag & drop to upload
+            </div>
+        </div>
+    </div>
 </div>
 
-<app-streams-selection-footer>
-</app-streams-selection-footer>
+<app-media-viewer id="media-viewer" *ngIf="openedMediaEvent" [openedMediaEvent]="openedMediaEvent"
+    (closeSubject)="closeMedia()" (dragenter)="dragenter($event)"></app-media-viewer>
+
+<div class="app" (dragenter)="dragenter($event)">
+    <app-left-side-bar>
+    </app-left-side-bar>
+
+    <!--<app-streams-main-display>
+</app-streams-main-display>-->
+
+    <div id="display-zone">
+        <app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
+        <app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
+        <app-notification-hub></app-notification-hub>
+        <router-outlet></router-outlet>
+    </div>
+
+    <app-streams-selection-footer>
+    </app-streams-selection-footer>
+</div>
 
 <!--<div style="text-align:center">
   <h1>

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import"variables";
+
 #display-zone {
     position: absolute;
     top: 0;
@@ -18,7 +20,7 @@
 
 #tutorial {
     position: relative;
-    top: 0; 
+    top: 0;
     left: 0;
     bottom: 0;
     z-index: 1;
@@ -30,7 +32,63 @@
     right: 0;
     left: 0;
     bottom: 0;
+    z-index: 9999999;
+}
+
+.app {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.drag-and-drop {    
+    transition: all .2s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 99999999;
+    background: rgba(black, .8);
+    // opacity: 0.2;
+    &__on-drag {
+        opacity: 1;
+        // background: rgba(black, .7);
+    }
+    &__card {
+        background: $font-link-primary;
+        background: $column-color;
+        max-width: 300px;
+
+        $card-height: 200px;
+        height: $card-height;        
+        position: relative;
+        top: calc(50% - #{$card-height}/2);
+        margin: auto;
+        padding: 10px;
+
+        border-radius: 5px;
+        // transform: perspective(1px) translateY(-50%);
+
+        // margin-top: calc(50%);
+        // transform: translateY(50px);
+    }
+    &__border {
+        border: 3px black dashed;
+        // margin: 50px 50px 0 50px;
+        height: calc(100%);
+    }
+    &__label {
+        font-size: 17px;
+        // font-weight: 400;
+        text-align: center;
+        height: 100px;
+        margin: auto;
+        padding-top: 70px;
+
+    }
 }
 
 app-streams-selection-footer {

src/app/app.component.ts

@@ -49,7 +49,7 @@ export class AppComponent implements OnInit, OnDestroy {
             if (openedMediaEvent) {
                 this.openedMediaEvent = openedMediaEvent;
                 // this.mediaViewerActive = true;
-                
+
             }
         });
     }
@@ -60,9 +60,42 @@ export class AppComponent implements OnInit, OnDestroy {
         this.openMediaSub.unsubscribe();
     }
 
-    closeMedia(){
-        console.warn('closeMedia()');
+    closeMedia() {
         this.openedMediaEvent = null;
     }
 
+    drag: boolean;
+    drag2: boolean;
+    private dragCounter: number = 0;
+
+    dragenter(event): boolean {
+        event.stopPropagation();
+        event.preventDefault();        
+        this.drag = true;
+        return false;
+    }
+    dragleave(event): boolean {
+        event.stopPropagation();
+        event.preventDefault();        
+        this.drag = false;
+        return false;
+    }
+    dragover(event): boolean{
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+    drop(event): boolean {
+        event.stopPropagation();
+        event.preventDefault();        
+        
+        let files = event.dataTransfer.files;
+        for(let file of files){
+            console.warn(file.name);
+            console.warn(file);
+        };
+
+        this.drag = false;
+        return false;
+    }
 }

src/sass/styles.scss

@@ -26,6 +26,7 @@ html, body {
     
     color: $font-color-primary; 
     background-color: $color-primary;
+    overflow: hidden;
   }
    
 //   .invisible {