TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-15 14:41:29 +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 { .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;
} }

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

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

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 { VgAPI } from 'videogular2/compiled/core';
import { PostsService } from 'app/posts.services'; import { PostsService } from 'app/posts.services';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@@ -29,8 +29,16 @@ export class PlayerComponent implements OnInit {
baseStreamPath = null; baseStreamPath = null;
audioFolderPath = null; audioFolderPath = null;
videoFolderPath = null; videoFolderPath = null;
innerWidth: number;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
}
ngOnInit(): void { ngOnInit(): void {
this.innerWidth = window.innerWidth;
this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|'); this.fileNames = this.route.snapshot.paramMap.get('fileNames').split('|nvr|');
this.type = this.route.snapshot.paramMap.get('type'); 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++) { for (let i = 0; i < this.fileNames.length; i++) {
const fileName = this.fileNames[i]; const fileName = this.fileNames[i];
const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath; 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 = { const mediaObject: IMedia = {
title: fileName, title: fileName,
src: fullLocation, src: fullLocation,
@@ -64,11 +72,12 @@ export class PlayerComponent implements OnInit {
this.currentItem = this.playlist[this.currentIndex]; this.currentItem = this.playlist[this.currentIndex];
}); });
this.getFileInfos(); // this.getFileInfos();
} }
constructor(private postsService: PostsService, private route: ActivatedRoute) { constructor(private postsService: PostsService, private route: ActivatedRoute) {
} }
onPlayerReady(api: VgAPI) { onPlayerReady(api: VgAPI) {
@@ -100,9 +109,13 @@ export class PlayerComponent implements OnInit {
} }
getFileInfos() { 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);
}
} }