Commit 20da4385 authored by limingzhe's avatar limingzhe

update

parent a4d93283
<div class="courseware-container d-flex"> <div class="courseware-container ">
<div style="padding: 10px">
<div style="display: flex; justify-items: center; padding-top: 20px;">
<span style="padding-right: 20px">单元:</span>
<input style="width: 200px" type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.unit" (blur)="save()">
</div>
<div style="display: flex; justify-items: center; padding-top: 20px;">
<span style="padding-right: 20px">标题:</span>
<input style="width: 200px" type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.title" (blur)="save()">
</div>
<div style="width: 500px; padding-top: 20px;">
<span style="padding-right: 20px">图标:</span>
<app-upload-image-with-preview
[picUrl]="item.contentObj.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, item.contentObj)"
></app-upload-image-with-preview>
</div>
<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> </div>
<!--<div class="col-8">-->
<!--&lt;!&ndash;crossorigin="anonymous"&ndash;&gt;-->
<!--<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>-->
<!--&lt;!&ndash;&& item.contentObj.video_url.constructor.name === 'String'&ndash;&gt;-->
<!--<div *ngIf="!item.contentObj.video_url">-->
<!--<div class="p-video-box d-flex align-items-center">-->
<!--<div class="p-upload-icon">-->
<!--&lt;!&ndash;<i class="anticon anticon-caret-right"></i>&ndash;&gt;-->
<!--<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>-->
<!--&lt;!&ndash;crossOrigin="anonymous"&ndash;&gt;-->
<!--<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';
.tw{
display: flex;
.t{
flex: 1 1 auto;
margin-right: 2rem;
}
.a{
.courseware-container{
.courseware-video{
//position: absolute;
width: 95%;
max-height: calc(100vh - 5rem);
} }
}
.aud-w{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.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_04';
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 = '';
// });
// }
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);
}
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);
ngOnDestroy() { // 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;
// 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();
}
updateTitleObjSuccess(titleObj) {
this.titleObj = titleObj; onImageUploadSuccessByItem(e, it) {
// console.log('e:', e);
it.pic_url = e.url;
this.save(); this.save();
} }
onTitleAudioUploadSuccess(res) { onAudioUploadSuccessByItem(e, it) {
this.titleObj.audio_url = res.url; it.audio_url = e.url;
this.save(); 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);
}
} }
import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
class Sprite {
x = 0;
y = 0;
color = '';
radius = 0;
alive = false;
margin = 0;
angle = 0;
ctx;
constructor(ctx) {
this.ctx = ctx;
}
update($event) {
this.draw();
}
draw() {
}
}
export class MySprite extends Sprite {
_width = 0;
_height = 0;
_anchorX = 0;
_anchorY = 0;
_offX = 0;
_offY = 0;
scaleX = 1;
scaleY = 1;
_alpha = 1;
rotation = 0;
visible = true;
skewX = 0;
skewY = 0;
children = [this];
childDepandVisible = true;
childDepandAlpha = false;
img;
_z = 0;
init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
}
this.draw();
}
draw() {
this.ctx.save();
this.drawInit();
this.updateChildren();
this.ctx.restore();
}
drawInit() {
this.ctx.translate(this.x, this.y);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.scale(this.scaleX, this.scaleY);
this.ctx.globalAlpha = this.alpha;
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
}
drawSelf() {
if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
updateChildren() {
if (this.children.length <= 0) { return; }
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] === this) {
if (this.visible) {
this.drawSelf();
}
} else {
this.children[i].update();
}
}
}
load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
}).then(img => {
this.init(img, anchorX, anchorY);
return img;
});
}
addChild(child, z = 1) {
if (this.children.indexOf(child) === -1) {
this.children.push(child);
child._z = z;
child.parent = this;
}
this.children.sort((a, b) => {
return a._z - b._z;
});
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
this.children.splice(index, 1);
}
}
_changeChildAlpha(alpha) {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] != this) {
this.children[i].alpha = alpha;
}
}
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
refreshAnchorOff() {
this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY;
}
setScaleXY(value) {
this.scaleX = this.scaleY = value;
}
getBoundingBox() {
const x = this.x + this._offX * Math.abs(this.scaleX);
const y = this.y + this._offY * Math.abs(this.scaleY);
const width = this.width * Math.abs(this.scaleX);
const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height};
}
}
export class ColorSpr extends MySprite {
r = 0;
g = 0;
b = 0;
createGSCanvas(){
if (!this.img) {
return;
}
const rect = this.getBoundingBox();
if (rect.width <= 1 || rect.height <= 1) {
return;
}
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for( let i = 0; i < c.height; i++){
for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
c.data[x] = this.r;
c.data[x + 1] = this.g;
c.data[x + 2] = this.b;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
}
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
}
drawSelf() {
super.drawSelf();
this.createGSCanvas();
}
}
export class GrayscaleSpr extends MySprite {
grayScale = 120;
createGSCanvas(){
if (!this.img) {
return;
}
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for( let i = 0; i < c.height; i++){
for( let j = 0; j < c.width; j++){
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
// const a = c.data[x + 3];
c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
// c.data[x + 3] = 255;
}
}
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
}
drawSelf() {
super.drawSelf();
this.createGSCanvas();
}
}
export class BitMapLabel extends MySprite {
labelArr;
baseUrl;
setText(data, text) {
this.labelArr = [];
const labelArr = [];
const tmpArr = text.split('');
let totalW = 0;
let h = 0;
for (let i = 0; i < tmpArr.length; i++) {
const label = new MySprite(this.ctx);
label.init(data[tmpArr[i]], 0);
this.addChild(label);
labelArr.push(label);
totalW += label.width;
h = label.height;
}
this.width = totalW;
this.height = h;
let offX = -totalW / 2;
for (let i = 0; i < labelArr.length; i++) {
labelArr[i].x = offX;
offX += labelArr[i].width;
}
this.labelArr = labelArr;
}
}
export class Label extends MySprite {
text: String;
// fontSize:String = '40px';
fontName: String = 'Verdana';
textAlign: String = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
maxWidth;
outline = 0;
outlineColor = '#ffffff';
_shadowFlag = false;
_shadowColor;
_shadowOffsetX;
_shadowOffsetY;
_shadowBlur;
_outlineFlag = false;
_outLineWidth;
_outLineColor;
constructor(ctx) {
super(ctx);
this.init();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
this._width = this.ctx.measureText(this.text).width;
this._height = this.fontSize;
this.refreshAnchorOff();
this.ctx.restore();
}
setMaxSize(w) {
this.maxWidth = w;
this.refreshSize();
if (this.width >= w) {
this.scaleX *= w / this.width;
this.scaleY *= w / this.width;
}
}
show(callBack = null) {
this.visible = true;
if (this.alpha >= 1) {
return;
}
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
this._shadowFlag = true;
this._shadowColor = color;
// 将阴影向右移动15px,向上移动10px
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
// 轻微模糊阴影
this._shadowBlur = blur;
}
setOutline(width = 5, color = '#ffffff') {
this._outlineFlag = true;
this._outLineWidth = width;
this._outLineColor = color;
}
drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; }
if (this._shadowFlag) {
this.ctx.shadowColor = this._shadowColor;
// 将阴影向右移动15px,向上移动10px
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
// 轻微模糊阴影
this.ctx.shadowBlur = this._shadowBlur;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
this.ctx.strokeText(this.text, 0, 0);
}
this.ctx.fillStyle = this.fontColor;
if (this.outline > 0) {
this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(this.text, 0, 0);
}
this.ctx.fillText(this.text, 0, 0);
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichText extends Label {
textArr = [];
fontSizeNum = 40;
setText(text:string, words) {
let newText = text;
for (let i = 0; i < words.length; i++) {
const word = words[i];
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`);
}
this.textArr = newText.split('#');
this.text = newText;
// this.setSize();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSizeNum}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = 900;
let curX = 0;
for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(this.textArr[i]).width;
curX += w;
}
this.width = curX;
this.height = this.fontSizeNum;
this.refreshAnchorOff();
this.ctx.restore();
}
show(callBack = null) {
// console.log(' in show ');
this.visible = true;
// this.alpha = 0;
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; }
this.ctx.font = `${this.fontSizeNum}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = 900;
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = '#ffffff';
// this.ctx.strokeText(this.text, 0, 0);
this.ctx.fillStyle = '#000000';
// this.ctx.fillText(this.text, 0, 0);
let curX = 0;
for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(this.textArr[i]).width;
if ((i + 1) % 2 == 0) {
this.ctx.fillStyle = '#c8171e';
} else {
this.ctx.fillStyle = '#000000';
}
this.ctx.fillText(this.textArr[i], curX, 0);
curX += w;
}
}
}
export class RichTextLemon extends Label {
dataArr;
maxW = 0;
disH = 30;
constructor(ctx) {
super(ctx);
// this.dataArr = dataArr;
}
drawText() {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
// this.ctx.font = '25px RoundedBold';
// this.ctx.textAlign = 'center';
// this.ctx.textBaseline = 'middle';
// this.ctx.fontWeight = 900;
// this.ctx.strokeStyle = '#ff7600';
// this.ctx.lineWidth = '10';
// this.ctx.strokeText(this.text, 0, 0);
//
//
// this.ctx.font = '50px RoundedBold';
// this.ctx.textAlign = 'center';
// this.ctx.textBaseline = 'middle';
// this.ctx.fontWeight = 900;
// this.ctx.fillStyle = '#8b572a';
// this.ctx.fillText(this.text, 0, 0);
// const totalW = this.ctx.measureText(this.text).width;
// if (totalW < this.width) {
// this.ctx.fillText(this.text, 0, 0);
// return;
// }
const selfW = this.width * this.scaleX;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY;
for (let a = 0; a < chr.length; a++) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (chr[a])).width <= w) {
temp += ' ' + chr[a];
} else {
row.push(temp);
temp = chr[a];
}
}
row.push(temp);
const x = 0;
const y = -row.length * disH / 2;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
}
}
// changeColorAnima(t = 0.8) {
//
// for (let i = 0; i < this.dataArr.length; i++) {
//
// const num1 = parseInt(this.dataArr[i].color.substr(0, 2), 16);
// const num2 = parseInt(this.dataArr[i].color.substr(2, 2), 16);
// const num3 = parseInt(this.dataArr[i].color.substr(4, 2), 16);
//
// // console.log('num1: ', num1);
// // console.log('num2: ', num2);
// // console.log('num3: ', num3);
//
//
// const data = this.dataArr[i];
// const color = {num1, num2, num3};
//
// const tween = new TWEEN.Tween(color)
// .to({num1: 255, num2: 255, num3: 255}, t * 1000)
// // .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// // data.color = color.num1.toString(16) + color.num2.toString(16) + color.num3.toString(16);
// })
// .onUpdate(() => {
//
// this.dataArr[i].color = Math.floor(color.num1).toString(16)
// + Math.floor(color.num2).toString(16)
// + Math.floor(color.num3).toString(16);
// // data.color = color.num1.toString(16) + color.num2.toString(16) + color.num3.toString(16);
// })
// .start(); // Start the tween immediately.
// }
// }
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class ShapeRect extends MySprite {
fillColor = '#FF0000';
setSize(w, h) {
this.width = w;
this.height = h;
console.log('w:', w);
console.log('h:', h);
}
drawShape() {
this.ctx.fillStyle = this.fillColor;
this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
radius = 0;
setRadius(r) {
this.anchorX = this.anchorY = 0.5;
this.radius = r;
this.width = r * 2;
this.height = r * 2;
}
drawShape() {
this.ctx.beginPath();
this.ctx.fillStyle = this.fillColor;
this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
this.ctx.fill();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class MyAnimation extends MySprite {
frameArr = [];
frameIndex = 0;
playFlag = false;
lastDateTime;
curDelay = 0;
loop = false;
playEndFunc;
delayPerUnit = 1;
restartFlag = false;
reverseFlag = false;
addFrameByImg(img) {
const spr = new MySprite(this.ctx);
spr.init(img);
this._refreshSize(img);
spr.visible = false;
this.addChild(spr);
this.frameArr.push(spr);
this.frameArr[this.frameIndex].visible = true;
}
addFrameByUrl(url) {
const spr = new MySprite(this.ctx);
spr.load(url).then(img => {
this._refreshSize(img);
});
spr.visible = false;
this.addChild(spr);
this.frameArr.push(spr);
this.frameArr[this.frameIndex].visible = true;
}
_refreshSize(img) {
if (this.width < img['width']) {
this.width = img['width'];
}
if (this.height < img['height']) {
this.height = img['height'];
}
}
play() {
this.playFlag = true;
this.lastDateTime = new Date().getTime();
}
stop() {
this.playFlag = false;
}
replay() {
this.restartFlag = true;
this.play();
}
reverse() {
this.reverseFlag = !this.reverseFlag;
this.frameArr.reverse();
this.frameIndex = 0;
}
showAllFrame() {
for (let i = 0; i < this.frameArr.length; i++) {
this.frameArr[i].alpha = 1;
}
}
hideAllFrame() {
for (let i = 0; i < this.frameArr.length; i++) {
this.frameArr[i].alpha = 0;
}
}
playEnd() {
this.playFlag = false;
this.curDelay = 0;
this.frameArr[this.frameIndex].visible = true;
if (this.playEndFunc) {
this.playEndFunc();
this.playEndFunc = null;
}
}
updateFrame() {
if (this.frameArr[this.frameIndex]) {
this.frameArr[this.frameIndex].visible = false;
}
this.frameIndex ++;
if (this.frameIndex >= this.frameArr.length) {
if (this.loop) {
this.frameIndex = 0;
} else if (this.restartFlag) {
this.restartFlag = false;
this.frameIndex = 0;
} else {
this.frameIndex -- ;
this.playEnd();
return;
}
}
this.frameArr[this.frameIndex].visible = true;
}
_updateDelay(delay) {
this.curDelay += delay;
if (this.curDelay < this.delayPerUnit) {
return;
}
this.curDelay -= this.delayPerUnit;
this.updateFrame();
}
_updateLastDate() {
if (!this.playFlag) { return; }
let delay = 0;
if (this.lastDateTime) {
delay = (new Date().getTime() - this.lastDateTime) / 1000;
}
this.lastDateTime = new Date().getTime();
this._updateDelay(delay);
}
update($event: any = null) {
super.update($event);
this._updateLastDate();
}
}
// --------=========== util func =============-------------
export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
if (update) {
tween.onUpdate( () =>{
update();
});
}
tween.start();
}
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.start();
return tween;
}
export function endShow(item, s = 1) {
item.scaleX = item.scaleY = 0;
item.alpha = 0;
const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(function() {
})
.start();
}
export function hideItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha == 0) {
return;
}
const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function () {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha == 1) {
return;
}
item.visible = true;
const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function () {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: alpha}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function () {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(function () {
if (callBack) {
callBack();
}
});
if (easing) {
tween.easing(easing);
}
tween.start();
}
export function randomSortByArr(arr) {
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() );
newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1);
}
return newArr;
}
export function radianToAngle(radian) {
return radian * 180 / Math.PI;
// 角度 = 弧度 * 180 / Math.PI;
}
export function angleToRadian(angle) {
return angle * Math.PI / 180;
// 弧度= 角度 * Math.PI / 180;
}
export function getPosByAngle(angle, len) {
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
}
export function getAngleByPos(px, py, mx, my) {
const x = Math.abs(px - mx);
const y = Math.abs(py - my);
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
const cos = y / z;
const radina = Math.acos(cos); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
if(mx > px && my > py) {// 鼠标在第四象限
angle = 180 - angle;
}
if(mx === px && my > py) {// 鼠标在y轴负方向上
angle = 180;
}
if(mx > px && my === py) {// 鼠标在x轴正方向上
angle = 90;
}
if(mx < px && my > py) {// 鼠标在第三象限
angle = 180 + angle;
}
if(mx < px && my === py) {// 鼠标在x轴负方向
angle = 270;
}
if(mx < px && my < py) {// 鼠标在第二象限
angle = 360 - angle;
}
// console.log('angle: ', angle);
return angle;
}
export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item);
if (index != -1) {
arr.splice(index, 1);
}
}
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null){
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
item._circleAngle = a;
const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
if (callBack) {
tween.onComplete(() => {
callBack();
});
}
if (easing) {
tween.easing(easing);
}
tween.onUpdate( (item, progress) => {
// console.log(item._circleAngle);
const r = obj.r;
const a = item._circleAngle;
const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
const y = y0 + r * yPer * Math.sin(a * Math.PI / 180);
item.x = x;
item.y = y;
// obj.a ++;
});
tween.start();
}
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
// --------------- custom class --------------------
export function downAnima(item, _y, time = 0.8, callBack = null, easing = null) {
// const y2 = item.y + (_y - item.y) * 0.8;
// const y3 = item.y + (_y - item.y) * 0.95;
// const pyArr = [y2, y3];
//
// let downFlag = true;
//
//
//
//
// const animaStart = (callback) => {
//
// let targetY ;
// if (downFlag) {
// targetY = _y;
// }
//
const tmpY = _y * 0.8;
moveItem(item, item.x, tmpY, 0.8, () => {
moveItem(item, item.x, _y, 0.07, callBack, TWEEN.Easing.Cubic.In);
}, TWEEN.Easing.Cubic.Out);
// const tween = new TWEEN.Tween(item)
// .to({y: _y}, time * 1000)
// .onComplete(function () {
// if (callBack) {
// callBack();
// }
// })
// .easing(TWEEN.Easing.Bounce.Out);
//
// tween.start();
//
// };
}
export function shoutAnima(item, s, time = 1.4, callback = null, easing = null) {
const subTime = time / 7;
const changeS = 0.95;
let sy = s * (2 - changeS);
let sx = s * changeS;
tweenChange(item, {'scaleY': sy}, subTime, () => {
tweenChange(item, {'scaleY': s, 'scaleX': s}, subTime * 6, () => {
if (callback) {
callback();
}
}, TWEEN.Easing.Elastic.Out);
}, TWEEN.Easing.Cubic.In);
tweenChange(item, {'scaleX': sx}, subTime, () => {
}, TWEEN.Easing.Cubic.In);
}
export function leaveAnima(item, x, time = 0.8, callback = null, easing = null) {
moveItem(item, x, item.y, time, () => {
}, TWEEN.Easing.Back.In);
// moveItem(item, item.x - item.width / 4 * item.scaleX, item.y, 0.4, () => {
//
// const time = 0.6;
// moveItem(item, x, item.y, time, () => {
//
// if (callback) {
// callback();
// }
// }, TWEEN.Easing.Cubic.In);
//
//
// // tweenChange(item, {'skewY': 0.2}, time / 2, () => {
// // tweenChange(item, {'skewY': 0}, time / 2), null, TWEEN.Easing.Cubic.In;
// // });
//
//
// }, TWEEN.Easing.Cubic.Out);
}
<div class="game-container" #wrap >
<canvas id="canvas" #canvas></canvas>
<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>
</app-player-content-wrapper>
</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'; .game-container {
.player-preview-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: white; //background-image: url("assets/play/bg.jpg");
.lesson-header{ //background: #ffffff;
width: 100%; background-repeat: no-repeat;
position: absolute; background-size: cover;
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{
height: 100%;
position: relative;
.a, .b{
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
}
.letter-box {
//height: 100%;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
//margin-top: 5%;
//margin-left: 8%;
//margin-right: 8%;
img{
max-width: 100%;
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
}
.letters{
position: absolute;
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;
}
}
} #canvas {
.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;
}
}
}
.show-item-content {
position: absolute;
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content:center;
}
@font-face
{
font-family: 'BRLNSDB_1';
src: url("/assets/font/BRLNSDB_1.TTF") format("opentype");
}
@font-face
{
font-family: 'CooperBlackStd';
src: url("/assets/font/CooperBlackStd.otf") format("opentype");
} }
import { import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
Component,
Input, import {
OnDestroy, getAngleByPos,
OnChanges, MySprite,
OnInit, getPosByAngle,
AfterViewInit, ElementRef, ViewChild, Label,
ApplicationRef MyAnimation,
} from '@angular/core'; moveItem, randomSortByArr, scaleItem, rotateItem, tweenChange, hideItem, showItem, BitMapLabel, ShapeRect, RichTextLemon
} from './Unit';
import res from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import * as _ from 'lodash'; import * as _ from 'lodash';
import TWEEN from '@tweenjs/tween.js';
import {del} from "selenium-webdriver/http";
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
styleUrls: ['./play.component.scss'] styleUrls: ['./play.component.scss']
}) })
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { export class PlayComponent implements OnInit, OnDestroy {
// 数据
@ViewChild('audioElement') data;
audioElement: ElementRef;
data = {
contentObj:{titleObj:{
audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3', @ViewChild('canvas') canvas: ElementRef;
content: 'what is this?&nbsp;', @ViewChild('wrap') wrap: ElementRef;
icons: [], canvasWidth = 1280;
type: 'a' canvasHeight = 720;
}}
}; canvasBaseW = 1280;
canvasBaseH = 720;
letters = [];
lettersAscii = {}; ctx;
titleAudio = null; fps = 0;
showDetailFlag = false; frametime = 0; // 上一帧动画的时间, 两帧时间差
curItemUrl = '';
curEvt;
mx;
constructor(private appRef: ApplicationRef) { my; // 点击坐标
}
range(start, end) {
return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start); // 资源
} rawImages = new Map(res);
ngOnInit() {
// 声音
let _this = this;
(<any>window).courseware.getData(function(data){ bgAudio = new Audio();
if(data){ successAudio = new Audio();
_this.data.contentObj.titleObj.content = data.content; wrongAudio = new Audio();
setTimeout(() => { flyAudio = new Audio();
_this.appRef.tick();
}, 1);
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
audioObj = {};
renderArr;
mapScale = 1;
canvasLeft;
canvasTop;
// ------
KEY = 'dfzx_04';
bottomArr = [];
canTouch = true;
picArr = [];
craneArr = [];
posArr = [
[163, 502],
[238, 244],
[492, 159],
[573, 587],
[723, 378],
[830, 120],
[1053, 254],
[1105, 555],
];
maskLayer;
paper;
closeBtn;
randomPicArr;
randomPicIndex = 0;
sprArr = [];
topArr = [];
curData;
firstTouch;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
}
ngOnInit() {
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
this.data = data;
} else {
this.data = {};
} }
});
console.log('data:' , data);
// const letters = _.shuffle( [...this.range(97, 122), ...this.range(65, 90)]); if (!this.data.contentObj) {
[...this.range(97, 122), ...this.range(65, 90)].forEach(c => { this.data.contentObj = {};
this.lettersAscii[c] = String.fromCharCode(c); }
});
this.letters = _.shuffle(Object.keys(this.lettersAscii)); this.initDefaultData();
// this.initAudio();
this.initImg();
this.initListener();
}, this.KEY);
} }
ngOnDestroy() { ngOnDestroy() {
window.cancelAnimationFrame(this.animationId);
for (let key in this.audioObj) {
if (this.audioObj[key]) {
this.audioObj[key].pause();
}
}
} }
ngOnChanges(data) { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
// this.mapScale = this.canvasHeight / this.canvasBaseH;
this.renderArr = [];
console.log(' in initData', this.data);
this.canTouch = true;
// this.craneArr = [];
// this.picArr = this.data.contentObj.picArr;
// if (!this.picArr) {
// this.picArr = [];
// } else {
//
// for (let i = 0; i < this.picArr.length; i++) {
// this.picArr[i].id = i;
// }
// }
//
// this.firstTouch = true;
// // this.boxPicArr = this.picArr.concat();
// // this.batPicArr = this.picArr.concat();
// this.boxPicArr = [];
// this.batPicArr = [];
// this.lightIndexArr = [];
// this.initBoxPicArr();
} }
ngAfterViewInit() {
initAudio() {
const contentObj = this.data.contentObj;
if (!contentObj) { return; }
// const addAudio = (key) => {
// const audioUrl = contentObj[key];
// if (audioUrl) {
// const audio = new Audio();
// audio.src = audioUrl;
// audio.load();
// this.audioObj[key] = audio;
// }
// }
//
// for (let i = 0; i < 4; i ++) {
// const key = i + '_audio_url';
// addAudio(key);
// }
//
// addAudio('audio_url');
//
const picArr = contentObj.picArr;
if (picArr) {
for (let i = 0; i < picArr.length; i++) {
const audioUrl = picArr[i].audio_url;
if (audioUrl) {
const audio = new Audio();
audio.src = audioUrl;
audio.load();
this.audioObj[audioUrl] = audio;
}
}
}
// this.flyAudio.src = 'assets/bat-mail/music/fly.mp3';
// this.flyAudio.load();
// this.flyAudio.loop = true;
// this.flyAudio.volume = 0.5;
//
// this.bgAudio.src = 'assets/bat-mail/music/bg.mp3';
// this.bgAudio.load();
// this.bgAudio.loop = true;
// this.bgAudio.volume = 0.5;
// //
// this.wrongAudio.src = 'assets/common/music/wrong.mp3';
// this.wrongAudio.load();
//
// this.successAudio.src = 'assets/bat-mail/music/success.mp3';
// this.successAudio.load();
//
} }
initImg() {
const contentObj = this.data.contentObj;
if (!contentObj) { return; }
const picUrl = this.data.contentObj.pic_url;
if (picUrl) {
this.rawImages.set(picUrl, picUrl);
}
// const picArr = this.data.contentObj.picArr;
// if (picArr) {
//
// for (let i = 0; i < picArr.length; i++) {
//
// const picUrl = picArr[i].pic_url;
// if (picUrl) {
// this.rawImages.set(picUrl, picUrl);
// }
//
// }
// }
clickItem(e, a) {
this.curEvt = e;
this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
this.showDetailFlag = true;
// 预加载资源
this.loadResources().then(() => {
this.init();
this.update();
});
}
initDefaultData() {
if (!this.data.contentObj.unit) {
this.data.contentObj.unit = 'unit 1';
}
if (!this.data.contentObj.title) {
this.data.contentObj.title = 'Hello';
}
if (!this.data.contentObj.pic_url) {
this.data.contentObj.pic_url = 'assets/default/logo.png';
}
}
init() {
this.initData();
this.initCtx();
this.initView();
}
initCtx() {
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
// console.log('this.ctx.canvas w: ', this.ctx.canvas.width);
// console.log('this.ctx.canvas h: ', this.ctx.canvas.height);
}
initView() {
this.initBg();
this.initUnit();
this.initTitle();
this.initLogo();
// this.initItem();
}
initBg() {
this.bottomArr = [];
const bg = new MySprite(this.ctx);
bg.init(this.images.get('bg'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(s);
this.bottomArr.push(bg);
}
initUnit() {
if (!this.data.contentObj.unit) {
return;
}
const y = 50;
const labelBg = new Label(this.ctx);
labelBg.text = this.data.contentObj.unit;
labelBg.setScaleXY(this.mapScale);
labelBg.fontSize = 55;
labelBg.fontColor = '#c37800';
labelBg.fontName = 'BRLNSDB_1';
labelBg.textAlign = 'center';
labelBg.x = this.canvasWidth / 2;
labelBg.y = (y + 5) * this.mapScale;
labelBg.setShadow(0, 3, 2, 'rgba(0, 0, 0, 0.35)');
const label = new Label(this.ctx);
label.text = this.data.contentObj.unit;
label.setScaleXY(this.mapScale);
label.fontSize = 55;
label.fontColor = '#ffd300';
label.fontName = 'BRLNSDB_1';
label.textAlign = 'center';
label.x = this.canvasWidth / 2;
label.y = y * this.mapScale;
this.renderArr.push(labelBg);
this.renderArr.push(label);
} }
clickBg() {
this.showDetailFlag = false; initTitle() {
if (!this.data.contentObj.title) {
return;
}
const label = new Label(this.ctx);
label.text = this.data.contentObj.title;
label.setScaleXY(this.mapScale);
label.fontSize = 220;
label.fontColor = '#ffffff';
label.fontName = 'CooperBlackStd';
label.textAlign = 'center';
label.x = this.canvasWidth / 2;
label.y = this.canvasHeight / 2 - 20 * this.mapScale;
label.setOutline(20, '#ff7600');
// this.renderArr.push(label);
const titleText = new RichTextLemon(this.ctx);
titleText.init();
titleText.fontSize = 125 * this.mapScale;
titleText.disH = (10) * this.mapScale;
titleText.fontColor = '#ffffff';
titleText.fontName = 'CooperBlackStd';
titleText.textAlign = 'center';
titleText.text = this.data.contentObj.title;
titleText.y = this.canvasHeight / 2 - titleText.fontSize / 2 - this.canvasHeight / 15; // * this.mapScale - titleText.fontSize * this.mapScale; // - titleText.textH - titleText.fontSize;
// titleText.setScaleXY(this.mapScale);
titleText.width = this.canvasWidth / 1.6;
titleText.setOutline(20, '#ff7600');
titleText.x = this.canvasWidth / 2; // - titleText.width * titleText.scaleX / 2;
// this.titleText = titleText;
this.renderArr.push(titleText);
} }
clickBigItem(e) {
e.cancelBubble = true; initLogo() {
this.playLetterAudio(this.curEvt);
const picUrl = this.data.contentObj.pic_url;
if (!picUrl) {
return;
}
const logoW = 320;
const logoH = 220;
const offSet = 20 * this.mapScale;
const logo = new MySprite(this.ctx);
logo.init(this.images.get(picUrl));
logo.setScaleXY(this.mapScale);
logo.x = this.canvasWidth - logoW / 2 - offSet;
logo.y = this.canvasHeight - logoH / 2 - offSet;
const sx = logoW / logo.width;
const sy = logoH / logo.height;
const s = Math.min(sx, sy);
logo.setScaleXY(s);
this.renderArr.push(logo);
}
initItem() {
this.initPaper();
this.initCrane();
// this.showStartAnima();
} }
initCrane() {
this.craneArr = [];
this.sprArr = [];
this.randomPicArr = randomSortByArr(this.picArr);
for (let i = 0; i < this.posArr.length; i++) {
const crane = this.getCrane();
crane.x = this.posArr[i][0] * this.mapScale;
crane.y = this.posArr[i][1] * this.mapScale;
crane['baseX'] = crane.x;
crane['baseY'] = crane.y;
caseFolder(c) { crane.y -= this.canvasHeight;
let folder = 'upper';
if (c.toLowerCase() === c) { crane['data'] = this.getCraneData();
folder = 'lower'; this.craneArr.push(crane);
} }
return `${folder}/${c}.png`;
} }
row(i) {
const r = Math.floor(i / 13); showStartAnima() {
let y = (r * 20);
switch (r) { const arr = this.craneArr;
case 0: const moveTime = 2;
case 1: const maxDelayTime = 0.7;
y += 13; let delayTime;
break; for (let i = 0; i < arr.length; i++) {
case 2: const crane = arr[i];
case 3: // crane.baseY = crane.y;
y += 15; // crane.y -= this.canvasHeight;
break;
delayTime = Math.random() * maxDelayTime;
setTimeout(() => {
moveItem(crane, crane.x, crane.baseY, moveTime, null, TWEEN.Easing.Elastic.Out);
}, delayTime * 1000);
} }
return y ;
this.canTouch = false;
setTimeout(() => {
this.canTouch = true;
}, (moveTime + maxDelayTime) * 1000);
} }
lower(c) {
return c.toLowerCase();
getCrane() {
const crane = new MySprite(this.ctx);
const randomId = Math.ceil( Math.random() * 5 );
crane.init(this.images.get('crane-' + randomId));
crane.x = this.canvasWidth / 2;
crane.y = this.canvasHeight / 2;
crane.setScaleXY(this.mapScale);
this.renderArr.push(crane);
return crane;
} }
fromCharCode(c) {
return String.fromCharCode(c).toLowerCase(); getCraneData() {
const picData = this.randomPicArr[this.randomPicIndex];
const data = {};
const spr = new MySprite(this.ctx);
spr.init(this.images.get(picData.pic_url));
this.sprArr.push(spr);
spr.visible = false;
spr.x = this.canvasWidth / 2;
spr.y = this.canvasHeight / 2 - 8 * this.mapScale;
const sx = (this.paper.width - 100) * this.mapScale / spr.width;
const sy = (this.paper.height - 100) * this.mapScale / spr.height;
const s = Math.min(sx, sy);
spr.setScaleXY(s);
data['spr'] = spr;
const audio = this.audioObj[picData.audio_url];
data['audio'] = audio;
this.randomPicIndex ++;
if (this.randomPicIndex >= this.randomPicArr.length) {
this.randomPicIndex = 0;
}
return data;
} }
allLetters() {
initPaper() {
this.topArr = [];
const maskLayer = new ShapeRect(this.ctx);
maskLayer.setSize(this.canvasWidth, this.canvasHeight);
maskLayer.fillColor = '#000000';
maskLayer.alpha = 0.5;
this.maskLayer = maskLayer;
this.topArr.push(maskLayer);
const paper = new MySprite(this.ctx);
paper.init(this.images.get('white-bg'));
paper.x = this.canvasWidth / 2;
paper.y = this.canvasHeight / 2;
paper.setScaleXY(this.mapScale);
this.paper = paper;
this.topArr.push(paper);
const offX = 35;
const offY = 35;
const closeBtn = new MySprite(this.ctx);
closeBtn.init(this.images.get('close-btn'));
closeBtn.setScaleXY(this.mapScale);
closeBtn.x = this.paper.x + (this.paper.width / 2 - offX) * this.paper.scaleX;
closeBtn.y = this.paper.y - (this.paper.height / 2 - offY) * this.paper.scaleY;
this.closeBtn = closeBtn;
// this.topArr.push(closeBtn);
maskLayer.visible = paper.visible = this.closeBtn.visible = false;
} }
playTitleAudio() {
this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null;
if (!this.titleAudio) {
mapDown(event) {
// if (this.startMusicFlag) {
// this.bgAudio.play();
// this.startMusicFlag = false;
// }
if (!this.canTouch) {
return;
}
if (this.firstTouch) {
this.firstTouch = false;
this.showStartAnima();
return; return;
} }
this.titleAudio.pause();
this.titleAudio.currentTime = 0; if (this.maskLayer.visible) {
this.titleAudio.play();
} if (this.checkClickTarget(this.closeBtn)) {
playLetterAudio(evt) { this.hidePic();
const audios = document.querySelectorAll('audio'); return;
for (let i = 0; i < audios.length; i++) { }
audios[i].pause();
audios[i].currentTime = 0; if (this.checkClickTarget(this.paper)) {
} this.showPicSound();
const a = evt.target.parentNode.querySelector('audio'); } else {
// a.play(); this.hidePic();
const playPromise = a.play(); }
if (playPromise !== undefined) { return;
playPromise.then(_ => {
// Automatic playback started! }
// Show playing UI.
console.log(1, _)
}) for (let i = 0; i < this.craneArr.length; i++) {
.catch(error => { if (this.checkClickTarget(this.craneArr[i])) {
// Auto-play was prevented this.clickedCrane(this.craneArr[i]);
// Show paused UI. return;
console.log(2, error) }
});
} }
} }
mapMove(event) {
}
mapUp(event) {
}
addCrane() {
const crane = this.getCrane();
crane.x = this.mx;
crane.y = this.my;
console.log('_x: ', this.mx / this.mapScale);
console.log('_y: ', this.my / this.mapScale);
}
clickedCrane(crane) {
this.showPic(crane);
}
showPic(crane) {
const data = crane.data;
this.curData = data;
const spr = data.spr;
const audio = data.audio;
if (audio) {
// if (this.firstAudio) {
// this.firstAudio = true;
// setTimeout(() => {
// audio.play();
// }, 1000);
// } else {
audio.play();
// }
}
spr.visible = true;
this.maskLayer.visible = this.paper.visible = this.closeBtn.visible = true;
}
hidePic() {
this.curData.spr.visible = false;
this.maskLayer.visible = this.paper.visible = this.closeBtn.visible = false;
}
showPicSound() {
if (this.curData && this.curData.audio) {
this.curData.audio.play();
}
}
update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
TWEEN.update();
this.updateArr(this.bottomArr);
this.updateArr(this.renderArr);
// this.updateArr(this.topArr);
// this.updateArr(this.sprArr);
// this.closeBtn.update(this);
}
updateArr(arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].update(this);
}
}
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('mousemove', (event) => {
setMxMyByMouse(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('mouseup', (event) => {
setMxMyByMouse(event);
this.mapUp(event);
});
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
} else {
this.canvas.nativeElement.addEventListener('touchstart', (event) => {
setMxMyByTouch(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
const setMxMyByTouch = (event) => {
// console.log('in setMxMyByTouch', event);
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
}
}
IsPC() {
if (window['ELECTRON']) {
return false; // 封装客户端标记
}
if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) {
return false;
} else {
return true;
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value)
.then(img => this.images.set(key, img))
.catch(err => console.log(err));
pr.push(p);
});
return Promise.all(pr);
}
preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
}
getWorlRect(target) {
let rect = target.getBoundingBox();
if (target.parent) {
const pRect = this.getWorlRect(target.parent);
rect.x += pRect.x;
rect.y += pRect.y;
}
return rect;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
getPosByAngle(angle, len) {
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
}
getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
return len;
}
} }
const res = [
['bg', "assets/play/bg.jpg"],
['logo', "assets/default/logo.png"],
];
export default res;
...@@ -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