Updated view of player to be more responsive. Window width is now recorded for eventual use for responsiveness optimization
parent
8e7bb4ba3b
commit
d54b2a73c8
@ -1,19 +1,25 @@
|
|||||||
.video-player {
|
.video-player {
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-styles {
|
.audio-styles {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-styles {
|
.video-styles {
|
||||||
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-button-toggle-label-content {
|
::ng-deep .mat-button-toggle-label-content {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-video {
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
}
|
}
|
@ -1,14 +1,17 @@
|
|||||||
<div *ngIf="playlist.length > 0; else loading">
|
<div *ngIf="playlist.length > 0; else loading">
|
||||||
<vg-player (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
|
<div [ngClass]="(type === 'audio') ? null : 'container-video'" class="container">
|
||||||
<video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
|
<div class="row">
|
||||||
</video>
|
<div [ngClass]="(type === 'audio') ? 'my-2 px-1' : null" class="col px-1">
|
||||||
</vg-player>
|
<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>
|
||||||
<br/>
|
</video>
|
||||||
|
</vg-player>
|
||||||
<div style="width: 100%;">
|
</div>
|
||||||
<mat-button-toggle-group style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
|
<div class="col-12 my-2">
|
||||||
<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 style="width: 80%; left: 9%" vertical name="videoSelect" aria-label="Video Select" #group="matButtonToggleGroup">
|
||||||
</mat-button-toggle-group>
|
<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>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue