TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-17 10:10:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Isaac Grynsztein
2020-02-17 00:28:49 -05:00
parent 8e7bb4ba3b
commit d54b2a73c8
3 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/player/player.component.html
View File

@@ -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>