ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug of video player is fixed

Browse Source
This commit is contained in:
richard-loafle 2020-01-30 16:00:26 +09:00
parent 186a99bee9
commit 9069a58627
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
View File

@ -86,14 +86,22 @@
</div> </div>
<div class="ucap-video-viewer-body"> <div class="ucap-video-viewer-body">
<div <div
#videoContainer
class="ucap-video-viewer-video-icon" class="ucap-video-viewer-video-icon"
fxLayout="row" fxLayout="row"
fxLayout.xs="column" fxLayout.xs="column"
fxLayoutAlign="center center" fxLayoutAlign="center center"
> >
<video <video
[src]="fileDownloadUrl"
#audioPlayer #audioPlayer
[src]="fileDownloadUrl"
[style.width]="'auto'"
[style.height]="
videoHeight > videoContainer.clientHeight
? ((videoContainer.clientHeight - 20) / videoHeight) * videoHeight +
'px'
: videoHeight + 'px'
"
(playing)="onPlayingVideo()" (playing)="onPlayingVideo()"
(pause)="onPauseVideo()" (pause)="onPauseVideo()"
(timeupdate)="onTimeUpdateVideo()" (timeupdate)="onTimeUpdateVideo()"
@ -124,7 +132,7 @@
fxLayout.xs="column" fxLayout.xs="column"
> >
<div class="ucap-video-viewer-video-time-current"> <div class="ucap-video-viewer-video-time-current">
{{ currentTime | ucapSecondsToMinutes }} {{ Math.floor(currentTime) | ucapSecondsToMinutes }}
</div> </div>
<span class="ucap-video-viewer-spacer"></span> <span class="ucap-video-viewer-spacer"></span>
<button <button
@ -148,7 +156,7 @@
</button> </button>
<span class="ucap-video-viewer-spacer"></span> <span class="ucap-video-viewer-spacer"></span>
<div class="ucap-video-viewer-video-time-total"> <div class="ucap-video-viewer-video-time-total">
{{ duration | ucapSecondsToMinutes }} {{ Math.floor(duration) | ucapSecondsToMinutes }}
</div> </div>
</div> </div>
</div> </div>

27
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.ts
View File

@ -5,12 +5,14 @@ import {
Output, Output,
EventEmitter, EventEmitter,
ViewChild, ViewChild,
ElementRef ElementRef,
ChangeDetectorRef
} from '@angular/core'; } from '@angular/core';
import { ucapAnimations } from '../../animations'; import { ucapAnimations } from '../../animations';
import { FileEventJson } from '@ucap-webmessenger/protocol-event'; import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { MatSlider, MatSliderChange } from '@angular/material'; import { MatSlider, MatSliderChange } from '@angular/material';
import { FileDownloadItem } from '@ucap-webmessenger/api'; import { FileDownloadItem } from '@ucap-webmessenger/api';
import { NGXLogger } from 'ngx-logger';
@Component({ @Component({
selector: 'ucap-video-viewer', selector: 'ucap-video-viewer',
@ -38,13 +40,21 @@ export class VideoViewerComponent implements OnInit {
timeSlider: MatSlider; timeSlider: MatSlider;
playing = false; playing = false;
duration = 0.01; duration = 0.0;
currentTime = 0; currentTime = 0.0;
volume = 0.1; volume = 0.1;
loading = false; loading = false;
fileDownloadItem: FileDownloadItem; fileDownloadItem: FileDownloadItem;
constructor() {} videoWidth = 0;
videoHeight = 0;
Math = Math;
constructor(
private changeDetectorRef: ChangeDetectorRef,
private logger: NGXLogger
) {}
ngOnInit() {} ngOnInit() {}
@ -74,11 +84,11 @@ export class VideoViewerComponent implements OnInit {
} }
onTimeUpdateVideo(): void { onTimeUpdateVideo(): void {
this.currentTime = Math.floor(this.audioPlayer.nativeElement.currentTime); this.currentTime = this.audioPlayer.nativeElement.currentTime;
} }
onVolumeChangeVideo(): void { onVolumeChangeVideo(): void {
this.volume = Math.floor(this.audioPlayer.nativeElement.volume); this.volume = this.audioPlayer.nativeElement.volume;
} }
onLoadStartVideo(): void { onLoadStartVideo(): void {
@ -87,7 +97,10 @@ export class VideoViewerComponent implements OnInit {
onLoadedDataVideo(): void { onLoadedDataVideo(): void {
this.loading = false; this.loading = false;
this.duration = Math.floor(this.audioPlayer.nativeElement.duration); this.duration = this.audioPlayer.nativeElement.duration;
this.videoWidth = this.audioPlayer.nativeElement.videoWidth;
this.videoHeight = this.audioPlayer.nativeElement.videoHeight;
} }
onClickDownload(): void { onClickDownload(): void {