Commit 3747dd67 authored by limingzhe's avatar limingzhe

first commit

parent a4d93283
<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, false)"
#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 = 'dfzx_03';
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 = '';
// });
// }
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
class="p-courseware-video"
[style.background-image]="hasVideo ? '' : 'url(assets/default/video-not-upload.jpg)'"
>
<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: 12%; 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 class="k-video-control-tool">-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(-10)">-10</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(-5)">-5</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(5)">+5</div>-->
<!--<div class="i-tool-btn" (tap)="onBtnQuickSeek(10)">+10</div>-->
<!--</div>-->
</div>
<div style="display: none">
<audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
[src]="data.contentObj?.titleObj?.audio_url" preload="auto"> </audio>
</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: 35%;
left: 44%;
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, 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;
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 = 'dfzx_03';
playBtnImg = '';
constructor() {
}
ngOnInit() {
// console.log(this.data.contentObj)
// this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
this.data = data;
} else {
this.data = {};
}
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'
}}
};
console.log('data:' , data);
if (!this.data.contentObj) {
this.data.contentObj = {};
this.data.contentObj.video_url = 'assets/default/demo.mp4';
// this.initDefaultData();
}
letters = [];
lettersAscii = {};
titleAudio = null;
showDetailFlag = false;
curItemUrl = '';
curEvt;
constructor(private appRef: ApplicationRef) {
this.hasVideo = !!this.data.contentObj.video_url && typeof this.data.contentObj.video_url === 'string';
this.playBtnImg = 'assets/play/btn-play.png';
}
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));
}, this.KEY);
}
ngOnDestroy() {
}
playVideo() {
// console.log(333333)
if (!this.videoNodeRef) {
return;
}
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('error', error);
});
}
ngOnChanges(data) {
this.playBtnImg = 'assets/play/btn-play.png';
} else {
this.player.pause();
}
}
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';
})
setTimeout(() => {
this.initCover = this.data.contentObj.video_cover_url;
});
}
clickItem(e, a) {
this.curEvt = e;
this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
this.showDetailFlag = true;
ngOnDestroy() {
}
clickBg() {
this.showDetailFlag = false;
onTimeUpdate(event) {
const player = event.target;
this.currentTime = player.currentTime;
this.progress = Math.floor((player.currentTime / player.duration) * 100);
}
clickBigItem(e) {
e.cancelBubble = true;
this.playLetterAudio(this.curEvt);
onBtnQuickSeek(delta: number) {
this.player.currentTime += delta;
}
caseFolder(c) {
let folder = 'upper';
if (c.toLowerCase() === c) {
folder = 'lower';
}
return `${folder}/${c}.png`;
}
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;
}
return y ;
}
lower(c) {
return c.toLowerCase();
onProgressMouseDown(event) {
this.player.pause();
this.touchSeeking = true;
}
fromCharCode(c) {
return String.fromCharCode(c).toLowerCase();
}
allLetters() {
}
playTitleAudio() {
this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null;
if (!this.titleAudio) {
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;
}
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, _)
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
console.log(2, error)
});
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;
}
}
import { TestBed } from '@angular/core/testing';
import { ConfigService } from './config.service';
describe('ConfigService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ConfigService = TestBed.get(ConfigService);
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
@Injectable({
providedIn: 'root'
})
export class ConfigService {
configUrl = 'proxy.conf.json';
constructor( private http: HttpClient ) { }
getConfig() {
return this.http.get(this.configUrl)
.pipe(
);
}
showConfig() {
this.getConfig()
.subscribe((data) => {
console.log('data:', data);
});
}
test(data) {
// return new Promise<any> {
// return new Promise((resolve, reject) => {
// this.http.get(url).subscribe((res) => {
// resolve(res);
// }, reject);
// });
//
return this.get('/api/login');
// return this.http.post('/login', data);
}
get(url: string): Promise<any> {
return new Promise((resolve, reject) => {
this.http.get(url).subscribe((res) => {
resolve(res);
}, reject);
});
}
// login(user): Observable<any> {
//
//
// return this.http.post('/login', user).pipe(
// tap((data => {
// console.log('login', data)
// localStorage.setItem('token', _.get(data, 'token'));
// delete data['token'];
// localStorage.setItem('info', JSON.stringify(data));
// this.getInfoPromise = this.load('/user/getInfo');
// }))
// );
// }
}
......@@ -5103,7 +5103,7 @@
* Silence a Promise-like object.
*
* This is useful for avoiding non-harmful, but potentially confusing "uncaught
* play promise" rejection error messages.
* playOld promise" rejection error messages.
*
* @param {Object} value
* An object that may or may not be `Promise`-like.
......@@ -10856,8 +10856,8 @@
/**
* Boolean indicating whether the `Tech` supports changing the speed at which the video
* plays. Examples:
* - Set player to play 2x (twice) as fast
* - Set player to play 0.5x (half) as fast
* - Set player to playOld 2x (twice) as fast
* - Set player to playOld 0.5x (half) as fast
*
* @type {boolean}
* @default
......@@ -12492,11 +12492,11 @@
Component.registerComponent('Button', Button);
/**
* @file big-play-button.js
* @file big-playOld-button.js
*/
/**
* The initial play button that shows before the video has played. The hiding of the
* The initial playOld button that shows before the video has played. The hiding of the
* `BigPlayButton` get done via CSS and `Player` states.
*
* @extends Button
......@@ -12520,12 +12520,12 @@
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object. Always returns 'vjs-big-play-button'.
* The DOM `className` for this object. Always returns 'vjs-big-playOld-button'.
*/
BigPlayButton.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-big-play-button';
return 'vjs-big-playOld-button';
};
/**
......@@ -12674,11 +12674,11 @@
Component.registerComponent('CloseButton', CloseButton);
/**
* @file play-toggle.js
* @file playOld-toggle.js
*/
/**
* Button to toggle between play and pause.
* Button to toggle between playOld and pause.
*
* @extends Button
*/
......@@ -12715,7 +12715,7 @@
PlayToggle.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-play-control ' + _Button.prototype.buildCSSClass.call(this);
return 'vjs-playOld-control ' + _Button.prototype.buildCSSClass.call(this);
};
/**
......@@ -12741,7 +12741,7 @@
/**
* This gets called once after the video has ended and the user seeks so that
* we can change the replay button back to a play button.
* we can change the replay button back to a playOld button.
*
* @param {EventTarget~Event} [event]
* The event that caused this function to run.
......@@ -14131,7 +14131,7 @@
Component.registerComponent('TimeTooltip', TimeTooltip);
/**
* @file play-progress-bar.js
* @file playOld-progress-bar.js
*/
/**
......@@ -14157,7 +14157,7 @@
*/
PlayProgressBar.prototype.createEl = function createEl() {
return _Component.prototype.createEl.call(this, 'div', {
className: 'vjs-play-progress vjs-slider-bar',
className: 'vjs-playOld-progress vjs-slider-bar',
innerHTML: '<span class="vjs-control-text"><span>' + this.localize('Progress') + '</span>: 0%</span>'
});
};
......@@ -14365,7 +14365,7 @@
this.on(this.player_, 'timeupdate', this.update);
this.on(this.player_, 'ended', this.handleEnded);
// when playing, let's ensure we smoothly update the play progress bar
// when playing, let's ensure we smoothly update the playOld progress bar
// via an interval
this.updateInterval = null;
......@@ -14403,7 +14403,7 @@
};
/**
* This function updates the play progress bar and accessibility
* This function updates the playOld progress bar and accessibility
* attributes to whatever is passed in.
*
* @param {number} currentTime
......@@ -14694,7 +14694,7 @@
/**
* The Progress Control component contains the seek bar, load progress,
* and play progress.
* and playOld progress.
*
* @extends Component
*/
......@@ -20000,7 +20000,7 @@
this.el_.play();
// playing and pausing synchronously during the transition to fullscreen
// can get iOS ~6.1 devices into a play/pause loop
// can get iOS ~6.1 devices into a playOld/pause loop
this.setTimeout(function () {
video.pause();
video.webkitEnterFullScreen();
......@@ -20432,8 +20432,8 @@
/**
* Boolean indicating whether the `Tech` supports changing the speed at which the media
* plays. Examples:
* - Set player to play 2x (twice) as fast
* - Set player to play 0.5x (half) as fast
* - Set player to playOld 2x (twice) as fast
* - Set player to playOld 0.5x (half) as fast
*
* @type {boolean}
* @default {@link Html5.canControlPlaybackRate}
......@@ -20516,7 +20516,7 @@
Html5.patchCanPlayType = function () {
// Android 4.0 and above can play HLS to some extent but it reports being unable to do so
// Android 4.0 and above can playOld HLS to some extent but it reports being unable to do so
// Firefox and Chrome report correctly
if (ANDROID_VERSION >= 4.0 && !IS_FIREFOX && !IS_CHROME) {
Html5.TEST_VID.constructor.prototype.canPlayType = function (type) {
......@@ -20635,7 +20635,7 @@
/**
* Get the value of `autoplay` from the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
* that the media should start to playOld as soon as the page is ready.
*
* @method Html5#autoplay
* @return {boolean}
......@@ -20686,8 +20686,8 @@
* @method Html5#playsinline
* @return {boolean}
* - The value of `playsinline` from the media element.
* - True indicates that the media should play inline.
* - False indicates that the media should not play inline.
* - True indicates that the media should playOld inline.
* - False indicates that the media should not playOld inline.
*
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/
......@@ -20730,7 +20730,7 @@
/**
* Set the value of `autoplay` on the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
* that the media should start to playOld as soon as the page is ready.
*
* @method Html5#setAutoplay
* @param {boolean} autoplay
......@@ -20764,8 +20764,8 @@
*
* @method Html5#setPlaysinline
* @param {boolean} playsinline
* - True indicates that the media should play inline.
* - False indicates that the media should not play inline.
* - True indicates that the media should playOld inline.
* - False indicates that the media should not playOld inline.
*
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/
......@@ -20927,8 +20927,8 @@
/**
* Get the value of `playbackRate` from the media element. `playbackRate` indicates
* the rate at which the media is currently playing back. Examples:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* - if playbackRate is set to 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will playOld half as fast.
*
* @method Html5#playbackRate
* @return {number}
......@@ -20945,8 +20945,8 @@
* `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
*
* Examples:
* - if defaultPlaybackRate is set to 2, media will play twice as fast.
* - if defaultPlaybackRate is set to 0.5, media will play half as fast.
* - if defaultPlaybackRate is set to 2, media will playOld twice as fast.
* - if defaultPlaybackRate is set to 0.5, media will playOld half as fast.
*
* @method Html5.prototype.defaultPlaybackRate
* @return {number}
......@@ -21100,9 +21100,9 @@
/**
* Set the value of `playbackRate` on the media element. `playbackRate` indicates
* the rate at which the media should play back. Examples:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* the rate at which the media should playOld back. Examples:
* - if playbackRate is set to 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will playOld half as fast.
*
* @method Html5#setPlaybackRate
* @return {number}
......@@ -21115,12 +21115,12 @@
/**
* Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
* the rate at which the media should play back upon initial startup. Changing this value
* the rate at which the media should playOld back upon initial startup. Changing this value
* after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
*
* Example Values:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* - if playbackRate is set to 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will playOld half as fast.
*
* @method Html5.prototype.setDefaultPlaybackRate
* @return {number}
......@@ -21137,7 +21137,7 @@
// wrap native functions with a function
// The list is as follows:
// pause, load, play
// pause, load, playOld
[
/**
* A wrapper around the media elements `pause` function. This will call the `HTML5`
......@@ -21158,10 +21158,10 @@
'load',
/**
* A wrapper around the media elements `play` function. This will call the `HTML5`s
* media element `play` function.
* A wrapper around the media elements `playOld` function. This will call the `HTML5`s
* media element `playOld` function.
*
* @method Html5#play
* @method Html5#playOld
* @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
*/
'play'].forEach(function (prop) {
......@@ -21184,7 +21184,7 @@
Html5.nativeSourceHandler = {};
/**
* Check if the media element can play the given mime type.
* Check if the media element can playOld the given mime type.
*
* @param {string} type
* The mimetype to check
......@@ -22409,7 +22409,7 @@
this.error(null);
// If it's already playing we want to trigger a firstplay event now.
// The firstplay event relies on both the play and loadstart events
// The firstplay event relies on both the playOld and loadstart events
// which can happen in any order for a new source
if (!this.paused()) {
/**
......@@ -22614,7 +22614,7 @@
this.removeClass('vjs-paused');
this.addClass('vjs-playing');
// hide the poster when the user hits play
// hide the poster when the user hits playOld
this.hasStarted(true);
/**
* Triggered whenever an {@link Tech#play} event happens. Indicates that
......@@ -22806,7 +22806,7 @@
/**
* Fired the first time a video is played. Not part of the HLS spec, and this is
* probably not the best implementation yet, so use sparingly. If you don't have a
* reason to prevent playback, use `myPlayer.one('play');` instead.
* reason to prevent playback, use `myPlayer.one('playOld');` instead.
*
* @event Player#firstplay
* @deprecated As of 6.0 firstplay event is deprecated.
......@@ -22876,7 +22876,7 @@
};
/**
* Handle a click on the media element to play/pause
* Handle a click on the media element to playOld/pause
*
* @param {EventTarget~Event} event
* the event that caused this function to trigger
......@@ -23165,13 +23165,13 @@
Player.prototype.play = function play() {
var _this6 = this;
// If this is called while we have a play queued up on a loadstart, remove
// If this is called while we have a playOld queued up on a loadstart, remove
// that listener to avoid getting in a potentially bad state.
if (this.playOnLoadstart_) {
this.off('loadstart', this.playOnLoadstart_);
}
// If the player/tech is not ready, queue up another call to `play()` for
// If the player/tech is not ready, queue up another call to `playOld()` for
// when it is. This will loop back into this method for another attempt at
// playback when the tech is ready.
if (!this.isReady_) {
......@@ -23195,7 +23195,7 @@
// for both the `ready` and a `loadstart` when the source is finally
// resolved by middleware and set on the player.
//
// This can happen if `play()` is called while changing sources or before
// This can happen if `playOld()` is called while changing sources or before
// one has been set on the player.
} else {
......@@ -23221,7 +23221,7 @@
};
/**
* Check if the player is paused or has yet to play
* Check if the player is paused or has yet to playOld
*
* @return {boolean}
* - false: if the media is currently playing
......@@ -23752,7 +23752,7 @@
};
/**
* Check whether the player can play a given mimetype
* Check whether the player can playOld a given mimetype
*
* @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
*
......@@ -23958,7 +23958,7 @@
/**
* Set the source object on the tech, returns a boolean that indicates whether
* there is a tech that can play the source or not
* there is a tech that can playOld the source or not
*
* @param {Tech~SourceObject} source
* The source object to set on the Tech
......@@ -24136,7 +24136,7 @@
* Playsinline tells the browser that non-fullscreen playback is preferred.
*
* @param {boolean} [value]
* - true means that we should try to play inline by default
* - true means that we should try to playOld inline by default
* - false means that we should use the browser's default playback mode,
* which in most cases is inline. iOS Safari is a notable exception
* and plays fullscreen by default.
......@@ -24229,7 +24229,7 @@
* Some techs (e.g. YouTube) can provide a poster source in an
* asynchronous way. We want the poster component to use this
* poster source so that it covers up the tech's controls.
* (YouTube's play button). However we only want to use this
* (YouTube's playOld button). However we only want to use this
* source if the player user hasn't set a poster through
* the normal APIs.
*
......@@ -31635,7 +31635,7 @@
if (!playlist.attributes) {
// Although the spec states an #EXT-X-STREAM-INF tag MUST have a
// BANDWIDTH attribute, we can play the stream without it. This means a poorly
// BANDWIDTH attribute, we can playOld the stream without it. This means a poorly
// formatted master playlist may not have an attribute list. An attributes
// property is added here to prevent undefined references when we encounter
// this scenario.
......@@ -40693,7 +40693,7 @@
/**
* Calculates the MIME type strings for a working configuration of
* SourceBuffers to play variant streams in a master playlist. If
* SourceBuffers to playOld variant streams in a master playlist. If
* there is no possible working configuration, an empty array will be
* returned.
*
......@@ -41255,7 +41255,7 @@
// If we have a seekable range use that as the limit for what can be removed safely
removeToTime = seekable$$1.start(0);
} else {
// otherwise remove anything older than 30 seconds before the current play head
// otherwise remove anything older than 30 seconds before the current playOld head
removeToTime = currentTime - 30;
}
......@@ -45656,10 +45656,10 @@
var media = this.masterPlaylistLoader_.media();
// Check that everything is ready to begin buffering for the first call to play
// Check that everything is ready to begin buffering for the first call to playOld
// If 1) there is no active media
// 2) the player is paused
// 3) the first play has already been setup
// 3) the first playOld has already been setup
// then exit early
if (!media || this.tech_.paused() || this.hasPlayed_()) {
return false;
......@@ -45722,12 +45722,12 @@
}
// if autoplay is enabled, begin playback. This is duplicative of
// code in video.js but is required because play() must be invoked
// code in video.js but is required because playOld() must be invoked
// *after* the media source has opened.
if (this.tech_.autoplay()) {
var playPromise = this.tech_.play();
// Catch/silence error when a pause interrupts a play request
// Catch/silence error when a pause interrupts a playOld request
// on browsers which return a promise
if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
playPromise.then(null, function (e) {
......@@ -46805,9 +46805,9 @@
};
/**
* Set the source on the player element, play, and seek if necessary
* Set the source on the player element, playOld, and seek if necessary
*
* @param {Object} sourceObj An object specifying the source url and mime-type to play
* @param {Object} sourceObj An object specifying the source url and mime-type to playOld
* @private
*/
var setSource = function setSource(sourceObj) {
This source diff could not be displayed because it is too large. You can view the blob instead.
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