Updated view of player to be more responsive. Window width is now recorded for eventual use for responsiveness optimization

src/app/player/player.component.css

@@ -1,19 +1,25 @@
 .video-player {
-    width: 100%;
     margin: 0 auto;
 }
 
 .audio-styles {
     height: 50px;
     background-color: transparent;
+    width: 100%;
 }
 
 .video-styles {
-
+    width: 80%;
 }
 
 ::ng-deep .mat-button-toggle-label-content {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+}
+
+.container-video {
+    max-width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
 }

src/app/player/player.component.html

@@ -1,14 +1,17 @@
 <div *ngIf="playlist.length > 0; else loading">
-    <vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
-        <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
-        </video>
-    </vg-player>
-
-    <br/>
-
-    <div style="width: 100%;">
-        <mat-button-toggle-group style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
-            <mat-button-toggle *ngFor="let name of fileNames; let i = index" [checked]="currentItem.title === name" (click)="onClickPlaylistItem(playlist[i], i)" class="toggle-button" [value]="name">{{name}}</mat-button-toggle>
-        </mat-button-toggle-group>
+    <div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
+        <div class="row">
+            <div [ngClass]="(type === 'audio') ? 'my-2 px-1' : null" class="col px-1">
+                <vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
+                    <video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
+                    </video>
+                </vg-player>
+            </div>
+            <div class="col-12 my-2">
+                <mat-button-toggle-group style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
+                    <mat-button-toggle *ngFor="let name of fileNames; let i = index" [checked]="currentItem.title === name" (click)="onClickPlaylistItem(playlist[i], i)" class="toggle-button" [value]="name">{{decodeURI(name)}}</mat-button-toggle>
+                </mat-button-toggle-group>
+            </div>
+        </div>
     </div>
 </div>

src/app/player/player.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { VgAPI } from 'videogular2/compiled/core';
 import { PostsService } from 'app/posts.services';
 import { ActivatedRoute } from '@angular/router';
@@ -29,8 +29,16 @@ export class PlayerComponent implements OnInit {
   baseStreamPath = null;
   audioFolderPath = null;
   videoFolderPath = null;
+  innerWidth: number;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.innerWidth = window.innerWidth;
+  }
 
   ngOnInit(): void {
+    this.innerWidth = window.innerWidth;
+
     this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|');
     this.type = this.route.snapshot.paramMap.get('type');
 
@@ -52,7 +60,7 @@ export class PlayerComponent implements OnInit {
       for (let i = 0; i < this.fileNames.length; i++) {
         const fileName = this.fileNames[i];
         const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath;
-        const fullLocation = this.baseStreamPath + baseLocation + fileName + (this.type === 'audio' ? '.mp3' : '.mp4');
+        const fullLocation = this.baseStreamPath + baseLocation + fileName; // + (this.type === 'audio' ? '.mp3' : '.mp4');
         const mediaObject: IMedia = {
           title: fileName,
           src: fullLocation,
@@ -64,11 +72,12 @@ export class PlayerComponent implements OnInit {
       this.currentItem = this.playlist[this.currentIndex];
     });
 
-    this.getFileInfos();
+    // this.getFileInfos();
 
   }
 
   constructor(private postsService: PostsService, private route: ActivatedRoute) {
+
   }
 
   onPlayerReady(api: VgAPI) {
@@ -100,9 +109,13 @@ export class PlayerComponent implements OnInit {
   }
 
   getFileInfos() {
-    this.postsService.getFileInfo(this.fileNames, this.type).subscribe(res => {
+    this.postsService.getFileInfo(this.fileNames, this.type, false).subscribe(res => {
 
     });
   }
 
+  decodeURI(string) {
+    return decodeURI(string);
+  }
+
 }