YoutubeDL-Material/src/app/player/player.component.html

<div style="height: 100%" *ngIf="playlist.length > 0 && show_player">
    <div style="height: 100%" [ngClass]="(type === 'audio') ? null : 'container-video'">
            <div style="max-width: 100%; margin-left: 0px; height: 100%">
                <mat-drawer-container style="height: 100%" class="example-container" autosize>
                    <div style="height: fit-content" [ngClass]="(type === 'audio') ? 'audio-col' : 'video-col'">
                        <vg-player style="height: fit-content; max-height: 75vh" (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 *ngIf="db_file" style="height: fit-content; width: 100%; margin-top: 10px;">
                        <div class="container">
                            <div class="row">
                                <div class="col-2 col-lg-1">
                                    <ng-container *ngIf="db_file">{{db_file['local_view_count'] ? db_file['local_view_count']+1 : 1}}&nbsp;<ng-container i18n="View count label">views</ng-container></ng-container>
                                </div>
                                <div style="white-space: pre-line;" class="col-9 col-lg-10">
                                    <ng-container *ngIf="db_file && db_file['description']">
                                        <p>
                                            <app-see-more [text]="db_file['description']"></app-see-more>
                                        </p>
                                    </ng-container>
                                    <ng-container *ngIf="!db_file || !db_file['description']">
                                        <p style="text-align: center;">
                                            No description available.
                                        </p>
                                    </ng-container>
                                </div>
                                <div class="col-1">
                                    <div *ngIf="db_file && db_file.url.includes('twitch.tv/videos/') && postsService['config']['API']['use_twitch_API']">
                                        <button (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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>
                    </div>
                    <mat-drawer #drawer class="example-sidenav" mode="side" position="end" [opened]="db_file && db_file['chat_exists'] && postsService['config']['API']['use_twitch_API']">
                        <ng-container *ngIf="api_ready && db_file && db_file.url.includes('twitch.tv/videos/')">
                            <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat>
                        </ng-container>
                    </mat-drawer>

                    <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
                        <div class="spinner-div">
                            <mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
                        </div>
                        <button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
                        
                    </div>
                
                    <div *ngIf="playlist.length > 1">
                        <button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
                        <button *ngIf="!id" color="accent" class="favorite-button" color="primary" (click)="namePlaylistDialog()" mat-fab><mat-icon class="save-icon">favorite</mat-icon></button>
                        <button *ngIf="!is_shared && id && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" class="share-button" color="primary" (click)="openShareDialog()" mat-fab><mat-icon class="save-icon">share</mat-icon></button>
                    </div>
                    <div *ngIf="playlist.length === 1">
                        <button class="save-button" color="primary" (click)="downloadFile()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
                        <button *ngIf="!is_shared && uid && uid !== 'false' && type !== 'subscription' && (!postsService.isLoggedIn || postsService.permissions.includes('sharing'))" class="share-button" color="primary" (click)="openShareDialog()" mat-fab><mat-icon class="save-icon">share</mat-icon></button>
                    </div>
                </mat-drawer-container>
            </div>
    </div>
</div>