Commit 16a0ae2a authored by limingzhe's avatar limingzhe

first

parent 1f535d89
......@@ -44,7 +44,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
@HostListener('window:resize', ['$event'])
// @HostListener('window:resize', ['$event'])
canvasWidth = 1280;
canvasHeight = 720;
......@@ -68,7 +68,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
// winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
......@@ -95,7 +95,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onResize(event) {
this.winResizeEventStream.next();
// this.winResizeEventStream.next();
}
......@@ -655,11 +655,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
if (this.IsPC()) {
......
<div class="courseware-container d-flex">
<div class="gutter" style="width: 100%;">
<app-lesson-title-config
(titleUpdated)="updateTitleObjSuccess($event)"
[withIcon]="false"
[titleObj]="titleObj">
</app-lesson-title-config>
<nz-divider></nz-divider>
<div class="courseware-container d-flex row" #videoContainer>
<div class="col-8">
<!--crossorigin="anonymous"-->
<video class="courseware-video"
crossorigin="anonymous"
*ngIf="item.contentObj.video_url "
[src]="item.contentObj.video_url | resource" controls
(loadeddata)="videoLoaded($event,item)"
(error)="videoError($event)"
(seeked)="videoSeeked($event)"
#videoNode ></video>
<!--&& item.contentObj.video_url.constructor.name === 'String'-->
<div *ngIf="!item.contentObj.video_url">
<div class="p-video-box d-flex align-items-center">
<div class="p-upload-icon">
<!--<i class="anticon anticon-caret-right"></i>-->
<i nz-icon type="caret-right" theme="outline"></i>
<div class="m-3"></div>
</div>
</div>
</div>
</div>
<div class="col-4">
<app-upload-video
(videoUploaded)="onVideoUploadSuccess($event)"
[item]="item"
[videoUrl]="item.contentObj.video_url"></app-upload-video>
</div>
</div>
<div class="row" style="margin-top: 1rem"
*ngIf="item.contentObj.video_id && item.contentObj.video_url && item.contentObj.video_url.constructor.name === 'String'">
<div class="col-8">
<button nz-button nzType="primary"
style="margin-bottom: 1rem"
(click)="setVideoCover()">
Set Video Cover
</button>
<!--crossOrigin="anonymous"-->
<img *ngIf="item.contentObj.pic_id"
[src]="item.contentObj.pic_id | resource"
style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;"/>
<app-upload-image-with-preview
[picUrl]="item.contentObj.video_cover_url"
(imageUploaded)="onCoverUploadSuccess($event)"
[picItem]="coverImg"
[disableUpload]="true"
[TIP]="' '"
[iconSize]="0"
style="width:100%;overflow: hidden;box-shadow: 0 0 20px 0px #444;">
</app-upload-image-with-preview>
</div>
</div>
@import '../style/common_mixin';
.tw{
display: flex;
.t{
flex: 1 1 auto;
margin-right: 2rem;
}
.a{
.p-video-box{
bottom: 0;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
padding-top: 56.25%;
font-size: 4rem;
.p-upload-icon{
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50% ,-50%);
}
}
.aud-w{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.5rem;
.courseware-container{
.courseware-video{
//position: absolute;
width: 95%;
max-height: calc(100vh - 5rem);
}
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import * as _ from 'lodash';
import {
ApplicationRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {NzMessageDataFilled, NzMessageService} from 'ng-zorro-antd';
@Component({
// providers:[UploadImageWithPreviewComponent ],
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
export class FormComponent implements OnInit, OnChanges {
// @Input()
item;
@ViewChild('videoContainer')
videoContainer: ElementRef;
@ViewChild('videoNode')
videoNode: ElementRef;
@Output()
update = new EventEmitter();
newVideoCover = true;
coverImg: any = null;
// titleObj = {
// audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
// content: 'what is this?&nbsp;',
// icons: [],
// type: 'a'
// };
titleObj = {
audio_url: '',
content: '',
icons: [],
type: ''
};
KEY = 'hw_002';
teststr = "";
private tooBigError: NzMessageDataFilled = null;
constructor(private appRef: ApplicationRef) {
}
constructor(private nzMessageService: NzMessageService,
private appRef: ApplicationRef) {
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.titleObj = data;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
}
}
safeVideoUrl(url) {
if (url && url.constructor.name === 'SafeUrlImpl') {
this.videoNode && this.videoNode.nativeElement.removeAttribute('crossorigin');
return url;
}
this.videoNode && this.videoNode.nativeElement.setAttribute('crossorigin', 'anonymous');
// console.log('safeVideoUrl', url)
return `${url}?t=${Math.random()}`;
// const d = this.sanitization.bypassSecurityTrustResourceUrl(url);
return `${url}`; // ?t=${Math.random() //this.sanitization.bypassSecurityTrustHtml(url);
}
ngOnChanges() {
console.log(1, 'ngOnChanges');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
}
ngOnInit() {
console.log(2, 'ngOnInit');
// if (typeof this.item.contentObj.video_url !== 'string') {
// // this.item.contentObj.video_url = '';
// setTimeout(() => {
// this.item.contentObj.video_url = '';
// });
// }
this.item = {};
this.item.contentObj = {};
ngOnDestroy() {
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data) {
this.item = data;
} else {
this.item = {};
this.item.contentObj = {};
}
console.log('data:', data);
// this.init();
// this.refresh();
}, this.KEY);
}
updateTitleObjSuccess(titleObj) {
this.titleObj = titleObj;
this.save();
videoLoaded(evt, item) {
// console.log(111, 'video loaded', item);
const video = evt.target;
if (video.src.startsWith('blob:') && video.videoWidth > 1280 && video.videoHeight > 720) {
this.tooBigError = this.nzMessageService.error('视频分辨率过大,请调整分辨率后上传,建议 1280x720', {nzDuration: 10 * 1000});
// video.src = null;
return ;
} else {
if (this.tooBigError && this.tooBigError.messageId) {
this.nzMessageService.remove(this.tooBigError.messageId);
this.tooBigError = null;
}
}
if (video.src && video.src.startsWith('blob:')) {
return;
}
if ( item.contentObj.origin_video_url && item.contentObj.origin_video_url.startsWith('http') ) {
item.video_preview_thumb = null;
return;
}
// item.video_preview_thumb = null;
this.newVideoCover = true;
video.currentTime = .1;
// setTimeout(() => {
// this.setVideoCover();
// }, 1500);
// this.videoSeeked(evt, item);
}
videoError(evt) {
this.nzMessageService.error('video error');
}
videoSeeked(evt) {
const video = evt.target;
if (video.src && video.src.startsWith('blob:')) {
return;
}
if (!this.item.contentObj.video_cover_url) {
this.setVideoCover();
this.newVideoCover = false;
}
}
setVideoCover() {
// console.log(111)
// (seeked)="videoSeeked($event, item)"
// if (!item.video_preview_thumb) {
if (!this.videoNode) {
return;
}
const video = this.videoNode.nativeElement;
if (!video.src) { return; }
// console.log(222, video.currentTime)
const canvas = document.createElement('canvas');
canvas.setAttribute('crossorigin', "anonymous");
canvas.width = video.videoWidth ;
canvas.height = video.videoHeight ;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// item.video_preview_thumb = canvas.toDataURL();
const video_preview_thumb = canvas.toDataURL();
// console.log(video_preview_thumb.substr(0, 100));
// console.log('%c ', `font-size: 100px; background: url(${video_preview_thumb}) no-repeat;`);
canvas.remove();
// video.currentTime = 0;
// }
const img: any = this.convertImageToBlob(video_preview_thumb);
img.name = `video_${this.item.sid}_${Date.now()}_cover.png`;
this.coverImg = img;
onTitleAudioUploadSuccess(res) {
this.titleObj.audio_url = res.url;
// this.coverComponent.customUpload(img);
/*
const formData = new FormData();
formData.append('file', img);
this.coursewareService.uploadResource(formData).then(res => {
// console.log(res);
// console.log(1, this.item.contentObj.video_url);
this.item.contentObj.pic_id = res.res_id;
// const ndata = JSON.parse(JSON.stringify(this.item)); // Object.assign({}, this.item);
// if (typeof ndata.contentObj.video_url !== 'string') {
// delete ndata.contentObj.video_url;
// }
//
// console.log(2, ndata.contentObj.video_url);
// console.log(3, this.item.contentObj.video_url);
this.update.emit(this.item);
});
*/
}
onCoverUploadSuccess(e) {
this.coverImg = null;
this.item.contentObj.video_cover_id = e.res_id;
this.item.contentObj.video_cover_url = e.url;
this.update.emit(this.item);
}
convertImageToBlob(data) {
const imgType = data.substring(data.indexOf(':') + 1, data.indexOf(';'));
const binary = atob(data.split(',')[1]);
const array = [];
let i = 0;
while (i < binary.length) {
array.push (binary.charCodeAt(i));
i++;
}
return new Blob([ new Uint8Array(array) ], {type: imgType});
}
onVideoUploadSuccess(e) {
this.item.contentObj.video_url = e.url;
this.save();
}
save() {
(<any>window).courseware.setData(this.titleObj);
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}">
<app-player-content-wrapper>
<div [innerHTML]="data.contentObj.titleObj.content" style="
position: absolute;z-index:99;
display: inline-block;
left: 55px;
top: 20px;
cursor: pointer" (click)="playTitleAudio()"></div>
<div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex;
justify-content: center;
align-items: flex-end;'>
<div class="letter-box">
<div class="letters" >
<div class="letter" *ngFor="let a of letters; let i = index"
[ngStyle]="{top: row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}">
<div class="l-box" (click)="clickItem($event, a)">
<img [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
<div style="display: none">
<audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto"> </audio>
</div>
</div>
</div>
</div>
</div>
<div class="show-item-content"
*ngIf="showDetailFlag"
(click)="clickBg()">
<div style="width: 50%; height: 80%; margin-top: 2rem">
<img [src]="curItemUrl" style="height: 100%; width: auto;"
(click)="clickBigItem($event)">
</div>
</div>
<!--<div>-->
<!--<h1>{{aaa.a}}</h1>-->
<div
class="p-courseware-video"
[style.background-image]="hasVideo ? '' : 'url(assets/default/video-not-upload.jpg)'"
>
<!--<h1 style="color: #ffffff">{{aaa.a}}</h1>-->
<video *ngIf="hasVideo"
[src]="data.contentObj.video_url"
width="100%" height="100%"
#videoNode (click)="playVideo()">
</video>
<div class="video-cover" *ngIf="initCover && !isPlaying">
<!--<img crossOrigin="anonymous" *ngIf="initCover" [src]="initCover | resource: sid"-->
<!--style="width:100%;height:100%;"/>-->
<img *ngIf="initCover" [src]="initCover"
style="width:100%;height:100%;"/>
</div>
<div class="bg-mask" *ngIf="!isPlaying && hasVideo" >
</div>
<div class="k-play-btn" *ngIf="!isPlaying && hasVideo" (click)="playVideo()"
style="background: none;width:100%;height:100%;">
<img [src]="playBtnImg" style="width: 8%; height: auto">
<!--<i class="anticon anticon-play-circle-o"></i>-->
</div>
<div class="k-video-control" *ngIf="hasVideo">
<div class="k-video-control-bg"></div>
<div class="k-video-control-time-past">{{currentTime | time}}</div>
<div #videoProgress class="k-video-control-progress"
(mousedown)="onProgressMouseDown($event)"
(mousemove)="onProgressMouseMove($event)"
(mouseup)="onProgressMouseUp($event)">
<div class="i-bg"></div>
<div class="i-before-progress" [style.width]="progress + '%'"></div>
<div class="i-cursor" [style.left]="progress + '%'"></div>
</div>
</app-player-content-wrapper>
</div>
<div class="k-video-control-time-total">{{duration | time}}</div>
<div style="display: none">
<audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
[src]="data.contentObj?.titleObj?.audio_url" preload="auto"> </audio>
</div>
</div>
</div>
@import '../style/common_mixin';
.p-courseware-video {
height: 100%;
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
background-color: #333;
@include k-img-bg();
.video-cover{
//position: absolute;
//left: 0;
//right: 0;
//top: 0;
//bottom: 0;
//width: 100%;
//height: 100%;
}
video {
width: 100%;
height: 100%;
}
}
.player-preview-content {
.k-play-btn {
position: absolute;
//width: 12%;
top: 80%;
left: 88%;
font-size: 12vh;
color: #444;
background-color: white;
border-radius: 50%;
}
.bg-mask {
width: 100%;
height: 100%;
background-color: white;
.lesson-header{
width: 100%;
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.65);
}
.k-video-control {
position: absolute;
bottom: 1vh;
left: 0;
width: 100%;
height: 7.5%;
display: flex;
color: white;
padding: 0 8vh;
align-items: center;
&-bg {
position: absolute;
top: 0;
img{
width: 100%;
height: auto;
}
.title{
font-family: 'BerlinSansFBDemi-Bold';
color: #f5d11f;
font-size: 4vw;
font-weight: 900;
width: 15%;
height: 70%;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 4vw;
}
}
.left-box{text-align: right;padding-right: 1rem}
.right-box{text-align: left;padding-left: 1rem}
.left-box, .right-box{
//width: 100%;
height: 100%;
position: relative;
.a, .b{
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
background-color: #333;
opacity: 0.5;
}
.letter-box {
//height: 100%;
&-time-past {
width: 3.5rem;
}
&-progress {
position: relative;
display: inline-block;
width: 100%;
flex: 1;
height: 100%;
//margin-top: 5%;
//margin-left: 8%;
//margin-right: 8%;
img{
max-width: 100%;
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
display: flex;
align-items: center;
margin: 0 3%;
& > * {
pointer-events: none; // Ken video seek
}
.letters{
.i-bg {
position: absolute;
background-color: #aaa;
width: 100%;
height: 100%;
top: 0;
left: 0;
.letter{
position: absolute;
font-weight: 600;
//width: calc(100% / 13);
text-align: center;
--cw: calc(100% / 13);
width: var(--cw);
line-height: calc( var(--cw) * 13);
font-family: LiQiangXingShu;
padding: 0 1rem;
height: 20%;
font-size: 7vmin;
}
height: 10%;
border-radius: 1rem;
}
}
.l-box{
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
font-weight: 900;
img{
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
.i-before-progress {
position: absolute;
height: 10%;
background-color: white;
border-radius: 1rem;
}
.i-cursor {
position: absolute;
width: 1.5vh;
height: 1.5vh;
border-radius: 50%;
background-color: white;
}
}
.show-item-content {
position: absolute;
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
&-time-total {
margin-right: 3vh;
}
&-tool {
display: flex;
align-items: center;
justify-content:center;
.i-tool-btn {
width: 4vh;
height: 4vh;
background-color: white;
border-radius: 50%;
margin: 0 1vh;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.8vh;
font-weight: bold;
}
}
}
.anticon {
vertical-align: 0.25em !important;
}
import {
Component,
Input,
OnDestroy,
OnChanges,
OnInit,
AfterViewInit, ElementRef, ViewChild,
ApplicationRef
} from '@angular/core';
import * as _ from 'lodash';
import {AfterViewInit, ApplicationRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
styleUrls: ['./play.component.scss']
// encapsulation: ViewEncapsulation.None,
})
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
@ViewChild('audioElement')
audioElement: ElementRef;
data = {
contentObj:{titleObj:{
audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
content: 'what is this?&nbsp;',
icons: [],
type: 'a'
}}
};
letters = [];
lettersAscii = {};
titleAudio = null;
showDetailFlag = false;
curItemUrl = '';
curEvt;
export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
@Input() data;
@Input() sid;
@ViewChild('videoNode')
videoNodeRef: ElementRef;
@ViewChild('videoProgress')
videoProgressRef: ElementRef;
player: any;
progress = 0;
currentTime = 0;
duration = 0;
isPlaying = false;
hasVideo = false;
touchSeeking = false;
initCover = false;
KEY = 'hw_002';
playBtnImg = '';
// aaa;
constructor(private appRef: ApplicationRef) {
constructor(private appRef: ApplicationRef) {
}
range(start, end) {
return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
}
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.data.contentObj.titleObj.content = data.content;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
// const letters = _.shuffle( [...this.range(97, 122), ...this.range(65, 90)]);
[...this.range(97, 122), ...this.range(65, 90)].forEach(c => {
this.lettersAscii[c] = String.fromCharCode(c);
});
this.letters = _.shuffle(Object.keys(this.lettersAscii));
}
ngOnInit() {
// console.log(this.data.contentObj)
// this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
ngOnDestroy() {
this.data = {};
this.data.contentObj = {};
}
const getData = (<any> window).courseware.getData;
getData((data) => {
ngOnChanges(data) {
if (data && typeof data == 'object') {
this.data = data;
} else {
this.data = {};
}
}
console.log('data:' , this.data);
if (!this.data.contentObj) {
this.data.contentObj = {};
}
ngAfterViewInit() {
this.initDefaultData();
console.log('this.data.contentObj.video_url: ', this.data.contentObj.video_url);
}
this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
clickItem(e, a) {
console.log('hasVideo: ', this.hasVideo);
this.playBtnImg = 'assets/play/btn-play.png';
this.curEvt = e;
this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
this.showDetailFlag = true;
}
clickBg() {
this.showDetailFlag = false;
}
clickBigItem(e) {
this.refresh();
e.cancelBubble = true;
this.playLetterAudio(this.curEvt);
}
}, this.KEY);
// this.aaa = {a: 1};
// setInterval(() => {
// this.aaa.a ++;
// }, 1000);
caseFolder(c) {
let folder = 'upper';
if (c.toLowerCase() === c) {
folder = 'lower';
}
return `${folder}/${c}.png`;
setInterval(() => {
this.refresh();
}, 1000);
}
row(i) {
const r = Math.floor(i / 13);
let y = (r * 20);
switch (r) {
case 0:
case 1:
y += 13;
break;
case 2:
case 3:
y += 15;
break;
initDefaultData() {
if (!this.data.contentObj.video_url) {
this.data.contentObj.video_url = 'assets/default/demo.mp4';
}
return y ;
}
lower(c) {
return c.toLowerCase();
}
fromCharCode(c) {
return String.fromCharCode(c).toLowerCase();
}
allLetters() {
}
playTitleAudio() {
this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null;
if (!this.titleAudio) {
playVideo() {
// console.log(333333)
if (!this.videoNodeRef) {
return;
}
this.titleAudio.pause();
this.titleAudio.currentTime = 0;
this.titleAudio.play();
}
playLetterAudio(evt) {
const audios = document.querySelectorAll('audio');
for (let i = 0; i < audios.length; i++) {
audios[i].pause();
audios[i].currentTime = 0;
if (!this.player) {
this.ngAfterViewInit();
}
if (!this.player) {
console.log(' player not exist');
return;
}
const a = evt.target.parentNode.querySelector('audio');
// a.play();
const playPromise = a.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
console.log(1, _)
})
this.initCover = false;
if (this.player.paused) {
const playPromise = this.player.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
console.log('play', _);
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
console.log(2, error)
console.log('error', error);
});
}
this.playBtnImg = 'assets/play/btn-play.png';
} else {
this.player.pause();
}
this.refresh();
}
ngAfterViewInit() {
console.log(' in ngAfterViewInit');
if (!this.videoNodeRef) {
return;
}
this.player = this.videoNodeRef.nativeElement;
this.player.ontimeupdate = (event) => {
this.onTimeUpdate(event);
};
this.player.onloadedmetadata = () => {
this.currentTime = 0;
this.duration = this.player.duration;
};
this.player.onseeking = () => {
this.player.pause();
};
this.player.onseeked = () => {
this.player.play();
this.touchSeeking = false;
};
this.player.onplay = () => {
this.isPlaying = true;
};
this.player.onpause = () => {
this.isPlaying = false;
};
this.player.addEventListener("ended", () => {
this.playBtnImg = 'assets/play/btn-replay.png';
this.refresh();
})
setTimeout(() => {
this.initCover = this.data.contentObj.video_cover_url;
});
}
ngOnDestroy() {
}
onTimeUpdate(event) {
const player = event.target;
this.currentTime = player.currentTime;
this.progress = Math.floor((player.currentTime / player.duration) * 100);
}
onBtnQuickSeek(delta: number) {
this.player.currentTime += delta;
}
onProgressMouseDown(event) {
this.player.pause();
this.touchSeeking = true;
}
onProgressMouseMove(event) {
if (this.touchSeeking) {
const {target, offsetX} = event;
this.progress = Math.floor(offsetX / target.clientWidth * 100);
}
}
onProgressMouseUp(event) {
const {target, offsetX} = event;
this.player.currentTime = this.player.duration * offsetX / target.clientWidth;
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment