Updated player styling

src/app/player/player.component.css

@@ -65,6 +65,13 @@
     padding-right: 0px;
     padding-left: 0.01px;
     height: 100%;
+    width: 100%;
+}
+
+.audio-col {
+    margin: 0 auto;
+    margin-top: 10px;
+    width: 95%;
 }
 
 .save-icon {

src/app/player/player.component.html

@@ -1,13 +1,13 @@
 <div *ngIf="playlist.length > 0 && show_player">
-    <div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
-        <div style="max-width: 100%; margin-left: 0px; height: 70vh" class="row">
-            <div [ngClass]="(type === 'audio') ? 'my-2 px-1' : 'video-col'" class="col">
-                <vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
+    <div [ngClass]="(type === 'audio') ? null : 'container-video'">
+        <div style="max-width: 100%; margin-left: 0px; height: 70vh">
+            <div style="height: fit-content" [ngClass]="(type === 'audio') ? 'audio-col' : 'video-col'">
+                <vg-player style="height: fit-content" (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">
+            <div style="height: fit-content; width: 100%; margin-top: 10px;">
                 <mat-button-toggle-group cdkDropList [cdkDropListSortingDisabled]="!id" (cdkDropListDropped)="drop($event)" style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
                     <mat-button-toggle cdkDrag *ngFor="let playlist_item of playlist; let i = index" [checked]="currentItem.title === playlist_item.title" (click)="onClickPlaylistItem(playlist_item, i)" class="toggle-button" [value]="playlist_item.title">{{playlist_item.label}}</mat-button-toggle>
                 </mat-button-toggle-group>