TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-20 03:30:55 +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

10
src/app/player/player.component.css
View File

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

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>

21
src/app/player/player.component.ts
View File

@@ -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);
}
}