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

pull/11/head
Isaac Grynsztein 6 years ago
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>

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

Loading…
Cancel
Save