Commit 3747dd67 authored by limingzhe's avatar limingzhe

first commit

parent a4d93283
<div class="courseware-container d-flex"> <div class="courseware-container d-flex row" #videoContainer>
<div class="col-8">
<div class="gutter" style="width: 100%;"> <!--crossorigin="anonymous"-->
<app-lesson-title-config <video class="courseware-video"
(titleUpdated)="updateTitleObjSuccess($event)" crossorigin="anonymous"
[withIcon]="false" *ngIf="item.contentObj.video_url "
[titleObj]="titleObj"> [src]="item.contentObj.video_url | resource" controls
</app-lesson-title-config> (loadeddata)="videoLoaded($event,item)"
(error)="videoError($event)"
(seeked)="videoSeeked($event, false)"
<nz-divider></nz-divider> #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>
<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> </div>
@import '../style/common_mixin'; .p-video-box{
bottom: 0;
.tw{ border: 2px dashed #ddd;
display: flex; border-radius: 0.5rem;
.t{ background-color: #fafafa;
flex: 1 1 auto; text-align: center;
margin-right: 2rem; color: #aaa;
} padding-top: 56.25%;
.a{ font-size: 4rem;
.p-upload-icon{
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50% ,-50%);
} }
} }
.aud-w{ .courseware-container{
width: 100%; .courseware-video{
display: flex; //position: absolute;
justify-content: center; width: 95%;
margin-top: 1.5rem; max-height: calc(100vh - 5rem);
}
} }
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core'; import {
import * as _ from 'lodash'; ApplicationRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
ViewChild
} from '@angular/core';
import {NzMessageDataFilled, NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
// providers:[UploadImageWithPreviewComponent ],
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'] 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 = { KEY = 'dfzx_03';
audio_url: '',
content: '',
icons: [],
type: ''
};
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() { 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) { videoLoaded(evt, item) {
this.titleObj = titleObj; // console.log(111, 'video loaded', item);
this.save(); 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.coverComponent.customUpload(img);
this.titleObj.audio_url = res.url; /*
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(); this.save();
} }
save() { save() {
(<any>window).courseware.setData(this.titleObj); (<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
} }
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
} }
<div
class="p-courseware-video"
<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}"> [style.background-image]="hasVideo ? '' : 'url(assets/default/video-not-upload.jpg)'"
<app-player-content-wrapper> >
<div [innerHTML]="data.contentObj.titleObj.content" style="
position: absolute;z-index:99; <video *ngIf="hasVideo"
display: inline-block; [src]="data.contentObj.video_url"
left: 55px; width="100%" height="100%"
top: 20px; #videoNode (click)="playVideo()">
cursor: pointer" (click)="playTitleAudio()"></div> </video>
<div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex; <div class="video-cover" *ngIf="initCover && !isPlaying">
justify-content: center; <!--<img crossOrigin="anonymous" *ngIf="initCover" [src]="initCover | resource: sid"-->
align-items: flex-end;'> <!--style="width:100%;height:100%;"/>-->
<div class="letter-box"> <img *ngIf="initCover" [src]="initCover"
<div class="letters" > style="width:100%;height:100%;"/>
<div class="letter" *ngFor="let a of letters; let i = index" </div>
[ngStyle]="{top: row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}">
<div class="l-box" (click)="clickItem($event, a)"> <div class="bg-mask" *ngIf="!isPlaying && hasVideo" >
<img [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
<div style="display: none"> </div>
<audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto"> </audio>
</div> <div class="k-play-btn" *ngIf="!isPlaying && hasVideo" (click)="playVideo()"
</div> style="background: none;width:100%;height:100%;">
<img [src]="playBtnImg" style="width: 12%; height: auto">
</div> <!--<i class="anticon anticon-play-circle-o"></i>-->
</div> </div>
</div>
<div class="show-item-content" <div class="k-video-control" *ngIf="hasVideo">
*ngIf="showDetailFlag" <div class="k-video-control-bg"></div>
(click)="clickBg()"> <div class="k-video-control-time-past">{{currentTime | time}}</div>
<div #videoProgress class="k-video-control-progress"
<div style="width: 50%; height: 80%; margin-top: 2rem"> (mousedown)="onProgressMouseDown($event)"
<img [src]="curItemUrl" style="height: 100%; width: auto;" (mousemove)="onProgressMouseMove($event)"
(click)="clickBigItem($event)"> (mouseup)="onProgressMouseUp($event)">
</div> <div class="i-bg"></div>
<div class="i-before-progress" [style.width]="progress + '%'"></div>
<div class="i-cursor" [style.left]="progress + '%'"></div>
</div>
</div> </div>
</app-player-content-wrapper> <div class="k-video-control-time-total">{{duration | time}}</div>
</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> </div>
@import '../style/common_mixin'; @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%; width: 100%;
height: 100%; height: 100%;
background-color: white; position: absolute;
.lesson-header{ top: 0;
width: 100%; 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; position: absolute;
top: 0; //width: 100%;
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{
height: 100%; height: 100%;
position: relative; background-color: #333;
.a, .b{ opacity: 0.5;
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
} }
.letter-box { &-time-past {
//height: 100%; width: 3.5rem;
}
&-progress {
position: relative; position: relative;
display: inline-block; flex: 1;
width: 100%;
height: 100%; height: 100%;
//margin-top: 5%; display: flex;
//margin-left: 8%; align-items: center;
//margin-right: 8%; margin: 0 3%;
img{ & > * {
max-width: 100%; pointer-events: none; // Ken video seek
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
} }
.letters{ .i-bg {
position: absolute; position: absolute;
background-color: #aaa;
width: 100%; width: 100%;
height: 100%; height: 10%;
top: 0; border-radius: 1rem;
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;
}
} }
.i-before-progress {
} position: absolute;
.l-box{ height: 10%;
cursor: pointer; background-color: white;
width: 100%; border-radius: 1rem;
height: 100%; }
display: flex; .i-cursor {
flex-direction: column-reverse; position: absolute;
font-weight: 900; width: 1.5vh;
img{ height: 1.5vh;
max-width: 100%; border-radius: 50%;
max-height: 100%; background-color: white;
width: 100%;
height: auto;
} }
} }
&-time-total {
margin-right: 3vh;
.show-item-content { }
position: absolute; &-tool {
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
display: flex; display: flex;
align-items: center; .i-tool-btn {
justify-content:center; 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 { import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
Component,
Input,
OnDestroy,
OnChanges,
OnInit,
AfterViewInit, ElementRef, ViewChild,
ApplicationRef
} from '@angular/core';
import * as _ from 'lodash';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
styleUrls: ['./play.component.scss'] styleUrls: ['./play.component.scss']
// encapsulation: ViewEncapsulation.None,
}) })
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { export class PlayComponent implements AfterViewInit, OnInit, OnDestroy {
@Input() data;
@ViewChild('audioElement') @Input() sid;
audioElement: ElementRef; @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 = { console.log('data:' , data);
contentObj:{titleObj:{ if (!this.data.contentObj) {
audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3', this.data.contentObj = {};
content: 'what is this?&nbsp;', this.data.contentObj.video_url = 'assets/default/demo.mp4';
icons: [], // this.initDefaultData();
type: 'a' }
}}
};
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';
} }, this.KEY);
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));
} }
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() { 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;
});
} }
ngOnDestroy() {
clickItem(e, a) {
this.curEvt = e;
this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
this.showDetailFlag = true;
} }
clickBg() { onTimeUpdate(event) {
const player = event.target;
this.showDetailFlag = false; this.currentTime = player.currentTime;
this.progress = Math.floor((player.currentTime / player.duration) * 100);
} }
clickBigItem(e) { onBtnQuickSeek(delta: number) {
this.player.currentTime += delta;
e.cancelBubble = true;
this.playLetterAudio(this.curEvt);
} }
onProgressMouseDown(event) {
this.player.pause();
caseFolder(c) { this.touchSeeking = true;
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();
} }
fromCharCode(c) {
return String.fromCharCode(c).toLowerCase();
}
allLetters() {
} onProgressMouseMove(event) {
playTitleAudio() { if (this.touchSeeking) {
this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null; const {target, offsetX} = event;
if (!this.titleAudio) { this.progress = Math.floor(offsetX / target.clientWidth * 100);
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)
});
} }
} }
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 @@ ...@@ -5103,7 +5103,7 @@
* Silence a Promise-like object. * Silence a Promise-like object.
* *
* This is useful for avoiding non-harmful, but potentially confusing "uncaught * This is useful for avoiding non-harmful, but potentially confusing "uncaught
* play promise" rejection error messages. * playOld promise" rejection error messages.
* *
* @param {Object} value * @param {Object} value
* An object that may or may not be `Promise`-like. * An object that may or may not be `Promise`-like.
...@@ -10856,8 +10856,8 @@ ...@@ -10856,8 +10856,8 @@
/** /**
* Boolean indicating whether the `Tech` supports changing the speed at which the video * Boolean indicating whether the `Tech` supports changing the speed at which the video
* plays. Examples: * plays. Examples:
* - Set player to play 2x (twice) as fast * - Set player to playOld 2x (twice) as fast
* - Set player to play 0.5x (half) as fast * - Set player to playOld 0.5x (half) as fast
* *
* @type {boolean} * @type {boolean}
* @default * @default
...@@ -12492,11 +12492,11 @@ ...@@ -12492,11 +12492,11 @@
Component.registerComponent('Button', Button); 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. * `BigPlayButton` get done via CSS and `Player` states.
* *
* @extends Button * @extends Button
...@@ -12520,12 +12520,12 @@ ...@@ -12520,12 +12520,12 @@
* Builds the default DOM `className`. * Builds the default DOM `className`.
* *
* @return {string} * @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() { BigPlayButton.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-big-play-button'; return 'vjs-big-playOld-button';
}; };
/** /**
...@@ -12674,11 +12674,11 @@ ...@@ -12674,11 +12674,11 @@
Component.registerComponent('CloseButton', CloseButton); 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 * @extends Button
*/ */
...@@ -12715,7 +12715,7 @@ ...@@ -12715,7 +12715,7 @@
PlayToggle.prototype.buildCSSClass = function buildCSSClass() { 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 @@ ...@@ -12741,7 +12741,7 @@
/** /**
* This gets called once after the video has ended and the user seeks so that * 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] * @param {EventTarget~Event} [event]
* The event that caused this function to run. * The event that caused this function to run.
...@@ -14131,7 +14131,7 @@ ...@@ -14131,7 +14131,7 @@
Component.registerComponent('TimeTooltip', TimeTooltip); Component.registerComponent('TimeTooltip', TimeTooltip);
/** /**
* @file play-progress-bar.js * @file playOld-progress-bar.js
*/ */
/** /**
...@@ -14157,7 +14157,7 @@ ...@@ -14157,7 +14157,7 @@
*/ */
PlayProgressBar.prototype.createEl = function createEl() { PlayProgressBar.prototype.createEl = function createEl() {
return _Component.prototype.createEl.call(this, 'div', { 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>' innerHTML: '<span class="vjs-control-text"><span>' + this.localize('Progress') + '</span>: 0%</span>'
}); });
}; };
...@@ -14365,7 +14365,7 @@ ...@@ -14365,7 +14365,7 @@
this.on(this.player_, 'timeupdate', this.update); this.on(this.player_, 'timeupdate', this.update);
this.on(this.player_, 'ended', this.handleEnded); 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 // via an interval
this.updateInterval = null; this.updateInterval = null;
...@@ -14403,7 +14403,7 @@ ...@@ -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. * attributes to whatever is passed in.
* *
* @param {number} currentTime * @param {number} currentTime
...@@ -14694,7 +14694,7 @@ ...@@ -14694,7 +14694,7 @@
/** /**
* The Progress Control component contains the seek bar, load progress, * The Progress Control component contains the seek bar, load progress,
* and play progress. * and playOld progress.
* *
* @extends Component * @extends Component
*/ */
...@@ -20000,7 +20000,7 @@ ...@@ -20000,7 +20000,7 @@
this.el_.play(); this.el_.play();
// playing and pausing synchronously during the transition to fullscreen // 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 () { this.setTimeout(function () {
video.pause(); video.pause();
video.webkitEnterFullScreen(); video.webkitEnterFullScreen();
...@@ -20432,8 +20432,8 @@ ...@@ -20432,8 +20432,8 @@
/** /**
* Boolean indicating whether the `Tech` supports changing the speed at which the media * Boolean indicating whether the `Tech` supports changing the speed at which the media
* plays. Examples: * plays. Examples:
* - Set player to play 2x (twice) as fast * - Set player to playOld 2x (twice) as fast
* - Set player to play 0.5x (half) as fast * - Set player to playOld 0.5x (half) as fast
* *
* @type {boolean} * @type {boolean}
* @default {@link Html5.canControlPlaybackRate} * @default {@link Html5.canControlPlaybackRate}
...@@ -20516,7 +20516,7 @@ ...@@ -20516,7 +20516,7 @@
Html5.patchCanPlayType = function () { 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 // Firefox and Chrome report correctly
if (ANDROID_VERSION >= 4.0 && !IS_FIREFOX && !IS_CHROME) { if (ANDROID_VERSION >= 4.0 && !IS_FIREFOX && !IS_CHROME) {
Html5.TEST_VID.constructor.prototype.canPlayType = function (type) { Html5.TEST_VID.constructor.prototype.canPlayType = function (type) {
...@@ -20635,7 +20635,7 @@ ...@@ -20635,7 +20635,7 @@
/** /**
* Get the value of `autoplay` from the media element. `autoplay` indicates * 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 * @method Html5#autoplay
* @return {boolean} * @return {boolean}
...@@ -20686,8 +20686,8 @@ ...@@ -20686,8 +20686,8 @@
* @method Html5#playsinline * @method Html5#playsinline
* @return {boolean} * @return {boolean}
* - The value of `playsinline` from the media element. * - The value of `playsinline` from the media element.
* - True indicates that the media should play inline. * - True indicates that the media should playOld inline.
* - False indicates that the media should not play inline. * - False indicates that the media should not playOld inline.
* *
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline} * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/ */
...@@ -20730,7 +20730,7 @@ ...@@ -20730,7 +20730,7 @@
/** /**
* Set the value of `autoplay` on the media element. `autoplay` indicates * 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 * @method Html5#setAutoplay
* @param {boolean} autoplay * @param {boolean} autoplay
...@@ -20764,8 +20764,8 @@ ...@@ -20764,8 +20764,8 @@
* *
* @method Html5#setPlaysinline * @method Html5#setPlaysinline
* @param {boolean} playsinline * @param {boolean} playsinline
* - True indicates that the media should play inline. * - True indicates that the media should playOld inline.
* - False indicates that the media should not play inline. * - False indicates that the media should not playOld inline.
* *
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline} * @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/ */
...@@ -20927,8 +20927,8 @@ ...@@ -20927,8 +20927,8 @@
/** /**
* Get the value of `playbackRate` from the media element. `playbackRate` indicates * Get the value of `playbackRate` from the media element. `playbackRate` indicates
* the rate at which the media is currently playing back. Examples: * 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 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast. * - if playbackRate is set to 0.5, media will playOld half as fast.
* *
* @method Html5#playbackRate * @method Html5#playbackRate
* @return {number} * @return {number}
...@@ -20945,8 +20945,8 @@ ...@@ -20945,8 +20945,8 @@
* `playbackRate` after playback has started, use {@link Html5#playbackRate} for that. * `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
* *
* Examples: * Examples:
* - if defaultPlaybackRate is set to 2, media will play twice as fast. * - if defaultPlaybackRate is set to 2, media will playOld twice as fast.
* - if defaultPlaybackRate is set to 0.5, media will play half as fast. * - if defaultPlaybackRate is set to 0.5, media will playOld half as fast.
* *
* @method Html5.prototype.defaultPlaybackRate * @method Html5.prototype.defaultPlaybackRate
* @return {number} * @return {number}
...@@ -21100,9 +21100,9 @@ ...@@ -21100,9 +21100,9 @@
/** /**
* Set the value of `playbackRate` on the media element. `playbackRate` indicates * Set the value of `playbackRate` on the media element. `playbackRate` indicates
* the rate at which the media should play back. Examples: * the rate at which the media should playOld back. Examples:
* - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast. * - if playbackRate is set to 0.5, media will playOld half as fast.
* *
* @method Html5#setPlaybackRate * @method Html5#setPlaybackRate
* @return {number} * @return {number}
...@@ -21115,12 +21115,12 @@ ...@@ -21115,12 +21115,12 @@
/** /**
* Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates * 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}. * after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
* *
* Example Values: * Example Values:
* - if playbackRate is set to 2, media will play twice as fast. * - if playbackRate is set to 2, media will playOld twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast. * - if playbackRate is set to 0.5, media will playOld half as fast.
* *
* @method Html5.prototype.setDefaultPlaybackRate * @method Html5.prototype.setDefaultPlaybackRate
* @return {number} * @return {number}
...@@ -21137,7 +21137,7 @@ ...@@ -21137,7 +21137,7 @@
// wrap native functions with a function // wrap native functions with a function
// The list is as follows: // The list is as follows:
// pause, load, play // pause, load, playOld
[ [
/** /**
* A wrapper around the media elements `pause` function. This will call the `HTML5` * A wrapper around the media elements `pause` function. This will call the `HTML5`
...@@ -21158,10 +21158,10 @@ ...@@ -21158,10 +21158,10 @@
'load', 'load',
/** /**
* A wrapper around the media elements `play` function. This will call the `HTML5`s * A wrapper around the media elements `playOld` function. This will call the `HTML5`s
* media element `play` function. * 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} * @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
*/ */
'play'].forEach(function (prop) { 'play'].forEach(function (prop) {
...@@ -21184,7 +21184,7 @@ ...@@ -21184,7 +21184,7 @@
Html5.nativeSourceHandler = {}; 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 * @param {string} type
* The mimetype to check * The mimetype to check
...@@ -22409,7 +22409,7 @@ ...@@ -22409,7 +22409,7 @@
this.error(null); this.error(null);
// If it's already playing we want to trigger a firstplay event now. // 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 // which can happen in any order for a new source
if (!this.paused()) { if (!this.paused()) {
/** /**
...@@ -22614,7 +22614,7 @@ ...@@ -22614,7 +22614,7 @@
this.removeClass('vjs-paused'); this.removeClass('vjs-paused');
this.addClass('vjs-playing'); this.addClass('vjs-playing');
// hide the poster when the user hits play // hide the poster when the user hits playOld
this.hasStarted(true); this.hasStarted(true);
/** /**
* Triggered whenever an {@link Tech#play} event happens. Indicates that * Triggered whenever an {@link Tech#play} event happens. Indicates that
...@@ -22806,7 +22806,7 @@ ...@@ -22806,7 +22806,7 @@
/** /**
* Fired the first time a video is played. Not part of the HLS spec, and this is * 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 * 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 * @event Player#firstplay
* @deprecated As of 6.0 firstplay event is deprecated. * @deprecated As of 6.0 firstplay event is deprecated.
...@@ -22876,7 +22876,7 @@ ...@@ -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 * @param {EventTarget~Event} event
* the event that caused this function to trigger * the event that caused this function to trigger
...@@ -23165,13 +23165,13 @@ ...@@ -23165,13 +23165,13 @@
Player.prototype.play = function play() { Player.prototype.play = function play() {
var _this6 = this; 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. // that listener to avoid getting in a potentially bad state.
if (this.playOnLoadstart_) { if (this.playOnLoadstart_) {
this.off('loadstart', 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 // when it is. This will loop back into this method for another attempt at
// playback when the tech is ready. // playback when the tech is ready.
if (!this.isReady_) { if (!this.isReady_) {
...@@ -23195,7 +23195,7 @@ ...@@ -23195,7 +23195,7 @@
// for both the `ready` and a `loadstart` when the source is finally // for both the `ready` and a `loadstart` when the source is finally
// resolved by middleware and set on the player. // 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. // one has been set on the player.
} else { } else {
...@@ -23221,7 +23221,7 @@ ...@@ -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} * @return {boolean}
* - false: if the media is currently playing * - false: if the media is currently playing
...@@ -23752,7 +23752,7 @@ ...@@ -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 * @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
* *
...@@ -23958,7 +23958,7 @@ ...@@ -23958,7 +23958,7 @@
/** /**
* Set the source object on the tech, returns a boolean that indicates whether * 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 * @param {Tech~SourceObject} source
* The source object to set on the Tech * The source object to set on the Tech
...@@ -24136,7 +24136,7 @@ ...@@ -24136,7 +24136,7 @@
* Playsinline tells the browser that non-fullscreen playback is preferred. * Playsinline tells the browser that non-fullscreen playback is preferred.
* *
* @param {boolean} [value] * @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, * - false means that we should use the browser's default playback mode,
* which in most cases is inline. iOS Safari is a notable exception * which in most cases is inline. iOS Safari is a notable exception
* and plays fullscreen by default. * and plays fullscreen by default.
...@@ -24229,7 +24229,7 @@ ...@@ -24229,7 +24229,7 @@
* Some techs (e.g. YouTube) can provide a poster source in an * Some techs (e.g. YouTube) can provide a poster source in an
* asynchronous way. We want the poster component to use this * asynchronous way. We want the poster component to use this
* poster source so that it covers up the tech's controls. * 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 * source if the player user hasn't set a poster through
* the normal APIs. * the normal APIs.
* *
...@@ -31635,7 +31635,7 @@ ...@@ -31635,7 +31635,7 @@
if (!playlist.attributes) { if (!playlist.attributes) {
// Although the spec states an #EXT-X-STREAM-INF tag MUST have a // 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 // formatted master playlist may not have an attribute list. An attributes
// property is added here to prevent undefined references when we encounter // property is added here to prevent undefined references when we encounter
// this scenario. // this scenario.
...@@ -40693,7 +40693,7 @@ ...@@ -40693,7 +40693,7 @@
/** /**
* Calculates the MIME type strings for a working configuration of * 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 * there is no possible working configuration, an empty array will be
* returned. * returned.
* *
...@@ -41255,7 +41255,7 @@ ...@@ -41255,7 +41255,7 @@
// If we have a seekable range use that as the limit for what can be removed safely // If we have a seekable range use that as the limit for what can be removed safely
removeToTime = seekable$$1.start(0); removeToTime = seekable$$1.start(0);
} else { } 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; removeToTime = currentTime - 30;
} }
...@@ -45656,10 +45656,10 @@ ...@@ -45656,10 +45656,10 @@
var media = this.masterPlaylistLoader_.media(); 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 // If 1) there is no active media
// 2) the player is paused // 2) the player is paused
// 3) the first play has already been setup // 3) the first playOld has already been setup
// then exit early // then exit early
if (!media || this.tech_.paused() || this.hasPlayed_()) { if (!media || this.tech_.paused() || this.hasPlayed_()) {
return false; return false;
...@@ -45722,12 +45722,12 @@ ...@@ -45722,12 +45722,12 @@
} }
// if autoplay is enabled, begin playback. This is duplicative of // 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. // *after* the media source has opened.
if (this.tech_.autoplay()) { if (this.tech_.autoplay()) {
var playPromise = this.tech_.play(); 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 // on browsers which return a promise
if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') { if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
playPromise.then(null, function (e) { playPromise.then(null, function (e) {
...@@ -46805,9 +46805,9 @@ ...@@ -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 * @private
*/ */
var setSource = function setSource(sourceObj) { 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