Commit 1f535d89 authored by limingzhe's avatar limingzhe

add hotZone

parent a4d93283
...@@ -24,6 +24,7 @@ import {BackgroundImagePipe} from "./pipes/background-image.pipe"; ...@@ -24,6 +24,7 @@ import {BackgroundImagePipe} from "./pipes/background-image.pipe";
import {UploadVideoComponent} from "./common/upload-video/upload-video.component"; import {UploadVideoComponent} from "./common/upload-video/upload-video.component";
import {ResourcePipe} from "./pipes/resource.pipe"; import {ResourcePipe} from "./pipes/resource.pipe";
import {TimePipe} from "./pipes/time.pipe"; import {TimePipe} from "./pipes/time.pipe";
import {CustomHotZoneComponent} from "./common/custom-hot-zone/custom-hot-zone.component";
registerLocaleData(zh); registerLocaleData(zh);
@NgModule({ @NgModule({
...@@ -38,6 +39,7 @@ registerLocaleData(zh); ...@@ -38,6 +39,7 @@ registerLocaleData(zh);
ResourcePipe, ResourcePipe,
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
CustomHotZoneComponent,
PlayerContentWrapperComponent PlayerContentWrapperComponent
], ],
......
import TWEEN from '@tweenjs/tween.js';
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;
children = [this];
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.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;
}
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) {
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;
});
}
removeChild(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
this.children.splice(index, 1);
}
}
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 * this.scaleX;
const y = this.y + this._offY * this.scaleY;
const width = this.width * this.scaleX;
const height = this.height * this.scaleY;
return {x, y, width, height};
}
}
export class Item extends MySprite {
baseX;
move(targetY, callBack) {
const self = this;
const tween = new TWEEN.Tween(this)
.to({ y: targetY }, 2500)
.easing(TWEEN.Easing.Quintic.Out)
.onComplete(function() {
self.hide(callBack);
// if (callBack) {
// callBack();
// }
})
.start();
}
show(callBack = null) {
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.
}
hide(callBack = null) {
const tween = new TWEEN.Tween(this)
.to({ alpha: 0 }, 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.
}
shake(id) {
if (!this.baseX) {
this.baseX = this.x;
}
const baseX = this.baseX;
const baseTime = 50;
const sequence = [
{target: {x: baseX + 40 * id}, time: baseTime - 25},
{target: {x: baseX - 20 * id}, time: baseTime},
{target: {x: baseX + 10 * id}, time: baseTime},
{target: {x: baseX - 5 * id}, time: baseTime},
{target: {x: baseX + 2 * id}, time: baseTime},
{target: {x: baseX - 1 * id}, time: baseTime},
{target: {x: baseX}, time: baseTime},
];
const self = this;
function runSequence() {
if (self['shakeTween']) {
self['shakeTween'].stop();
}
const tween = new TWEEN.Tween(self);
if (sequence.length > 0) {
// console.log('sequence.length: ', sequence.length);
const action = sequence.shift();
tween.to(action['target'], action['time']);
tween.onComplete( () => {
runSequence();
});
tween.start();
self['shakeTween'] = tween;
}
}
runSequence();
}
drop(targetY, callBack = null) {
const self = this;
const time = Math.abs(targetY - this.y) * 2.4;
this.alpha = 1;
const tween = new TWEEN.Tween(this)
.to({ y: targetY }, time)
.easing(TWEEN.Easing.Cubic.In)
.onComplete(function() {
// self.hideItem(callBack);
if (callBack) {
callBack();
}
})
.start();
}
}
export class EndSpr extends MySprite {
show(s) {
this.scaleX = this.scaleY = 0;
this.alpha = 0;
const tween = new TWEEN.Tween(this)
.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(); // Start the tween immediately.
}
}
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 HotZoneItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
text;
arrowTop;
arrowRight;
setSize(w, h) {
this.width = w;
this.height = h;
const rect = new ShapeRect(this.ctx);
rect.x = -w / 2;
rect.y = -h / 2;
rect.setSize(w, h);
rect.fillColor = '#ffffff';
rect.alpha = 0.2;
this.addChild(rect);
}
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '40px';
this.label.textAlign = 'center';
this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale();
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
refreshLabelScale() {
if (this.scaleX == this.scaleY) {
this.label.setScaleXY(1);
}
if (this.scaleX > this.scaleY) {
this.label.scaleX = this.scaleY / this.scaleX;
} else {
this.label.scaleY = this.scaleX / this.scaleY;
}
}
showLineDash() {
this.lineDashFlag = true;
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
this.arrowTop = new MySprite(this.ctx);
this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
this.arrowTop.setScaleXY(0.06);
this.arrowRight = new MySprite(this.ctx);
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
this.showLabel();
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
}
}
}
export class EditorItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label:Label;
text;
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '50px';
this.label.textAlign = 'center';
this.addChild(this.label);
this.label.setScaleXY(1 / this.scaleX);
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
showLineDash() {
this.lineDashFlag = true;
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
}
this.showLabel();
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
}
}
}
export class Label extends MySprite {
text:String;
fontSize:String = '40px';
fontName:String = 'Verdana';
textAlign:String = 'left';
constructor(ctx) {
super(ctx);
this.init();
}
drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; }
this.ctx.font = `${this.fontSize} ${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);
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
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 = p2x - p1x;
// const _y = p2y - p1y;
// const tan = _y / _x;
//
// const radina = Math.atan(tan); // 用反三角函数求弧度
// const angle = Math.floor(180 / (Math.PI / radina)); //
//
// console.log('r: ' , angle);
// return angle;
//
const x = Math.abs(px - mx);
const y = Math.abs(py - my);
// const x = Math.abs(mx - px);
// const y = Math.abs(my - py);
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;
}
<div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[picUrl]="bgItem.url"
(imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index" >
<div style=" height: 40px;">
<h5> item-{{i+1}}
<i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)"
nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i>
</h5>
</div>
<!--<div class="img-box-upload">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
<!--&gt;</app-audio-recorder>-->
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
Add hot zone
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()">
<i nz-icon type="save"></i>
Save
</button>
</div>
</div>
.p-image-children-editor {
width: 100%;
height: 100%;
border-radius: 0.5rem;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
.bg-box{
//width: 100%;
margin-bottom: 1rem;
}
.img-box {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img-box-upload{
width: 80%;
}
.add-btn {
margin-top: 1rem;
width: 200px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
}
.save-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.save-btn {
width: 160px;
height: 40px;
//margin-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
h5 {
margin-top: 1rem;
}
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneItem, Label, MySprite} from './Unit';
import TWEEN from '@tweenjs/tween.js';
@Component({
selector: 'app-custom-hot-zone',
templateUrl: './custom-hot-zone.component.html',
styleUrls: ['./custom-hot-zone.component.scss']
})
export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
_bgItem = null;
@Input()
set bgItem(v) {
this._bgItem = v;
this.init();
}
get bgItem() {
return this._bgItem;
}
@Input()
imgItemArr = null;
@Input()
hotZoneItemArr = null;
@Input()
hotZoneArr = null;
@Output()
save = new EventEmitter();
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
@HostListener('window:resize', ['$event'])
canvasWidth = 1280;
canvasHeight = 720;
canvasBaseW = 1280;
canvasBaseH = 720;
mapScale = 1;
ctx;
mx;
my; // 点击坐标
// 资源
// rawImages = new Map(res);
// 声音
bgAudio = new Audio();
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
renderArr;
imgArr = [];
oldPos;
curItem;
bg: MySprite;
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
constructor() {
}
onResize(event) {
this.winResizeEventStream.next();
}
ngOnInit() {
this.initListener();
// this.init();
this.update();
}
ngOnDestroy() {
window.cancelAnimationFrame(this.animationId);
}
ngOnChanges() {
}
onBackgroundUploadSuccess(e) {
console.log('e: ', e);
this.bgItem.url = e.url;
this.refreshBackground();
}
refreshBackground(callBack = null) {
if (!this.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
}
const bg = this.bg;
if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height;
const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
if (callBack) {
callBack();
}
});
}
}
addBtnClick() {
// this.imgArr.push({});
// this.hotZoneArr.push({});
const item = this.getHotZoneItem();
this.hotZoneArr.push(item);
this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url;
this.refreshImage (img);
}
refreshImage(img) {
this.hideAllLineDash();
img.picItem = this.getPicItem(img);
this.refreshImageId();
}
refreshHotZoneId() {
for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) {
this.hotZoneArr[i].text = 'item-' + (i + 1);
}
}
}
refreshImageId() {
for (let i = 0; i < this.imgArr.length; i++) {
this.imgArr[i].id = i;
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.text = 'Image-' + (i + 1);
}
}
}
getHotZoneItem( saveData = null) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneItem(this.ctx);
item.setSize(itemW, itemH);
item.anchorX = 0.5;
item.anchorY = 0.5;
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
if (saveData) {
const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width;
item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
}
item.showLineDash();
return item;
}
getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => {
let maxW, maxH;
if (this.bg) {
maxW = this.bg.width * this.bg.scaleX;
maxH = this.bg.height * this.bg.scaleY;
} else {
maxW = this.canvasWidth;
maxH = this.canvasHeight;
}
let scaleX = maxW / 3 / item.width;
let scaleY = maxH / 3 / item.height;
if (item.height * scaleX < this.canvasHeight) {
item.setScaleXY(scaleX);
} else {
item.setScaleXY(scaleY);
}
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
if (saveData) {
const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
} else {
item.showLineDash();
}
});
return item;
}
onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url;
}
deleteItem(e, i) {
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
}
init() {
this.initData();
this.initCtx();
this.initItem();
}
initItem() {
if (!this.bgItem) {
this.bgItem = {};
} else {
this.refreshBackground(() => {
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
this.initHotZoneArr();
}
});
}
}
initHotZoneArr() {
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
}
let oldBgRect = this.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
const item = this.getHotZoneItem( data);
console.log('item: ', item);
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
// this.refreshImageId();
}
initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
}
let oldBgRect = this.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.imgArr = [];
const arr = this.imgItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
const img = {pic_url: data.pic_url};
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
img['picItem'] = this.getPicItem(img, data);
img['audio_url'] = arr[i].audio_url;
this.imgArr.push(img);
}
this.refreshImageId();
}
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
this.imgArr = [];
this.hotZoneArr = [];
}
initCtx() {
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
}
mapDown(event) {
this.oldPos = {x: this.mx, y: this.my};
const arr = this.hotZoneArr;
for (let i = arr.length - 1; i >= 0 ; i--) {
const item = arr[i];
if (item) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
this.changeItemTopSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item);
} else {
this.changeCurItem(item);
}
return;
}
}
}
// this.hideAllLineDash();
}
mapMove(event) {
if (!this.curItem) { return; }
if (this.changeSizeFlag) {
this.changeSize();
} else if (this.changeTopSizeFlag) {
this.changeTopSize();
} else if (this.changeRightSizeFlag) {
this.changeRightSize();
} else {
const addX = this.mx - this.oldPos.x;
const addY = this.my - this.oldPos.y;
this.curItem.x += addX;
this.curItem.y += addY;
}
this.oldPos = {x: this.mx, y: this.my};
}
mapUp(event) {
this.curItem = null;
this.changeSizeFlag = false;
this.changeTopSizeFlag = false;
this.changeRightSizeFlag = false;
}
changeSize() {
const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20;
let s;
if (lenW < lenH) {
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
} else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
}
// console.log('s: ', s);
this.curItem.setScaleXY(s);
this.curItem.refreshLabelScale();
}
changeTopSize() {
const rect = this.curItem.getBoundingBox();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20;
let s;
// if (lenW < lenH) {
// if (lenW < minLen) {
// lenW = minLen;
// }
// s = lenW / this.curItem.width;
//
// } else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
// }
// console.log('s: ', s);
this.curItem.scaleY = s;
this.curItem.refreshLabelScale();
}
changeRightSize() {
const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let minLen = 20;
let s;
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
this.curItem.scaleX = s;
this.curItem.refreshLabelScale();
}
changeItemSize(item) {
this.curItem = item;
this.changeSizeFlag = true;
}
changeItemTopSize(item) {
this.curItem = item;
this.changeTopSizeFlag = true;
}
changeItemRightSize(item) {
this.curItem = item;
this.changeRightSizeFlag = true;
}
changeCurItem(item) {
this.hideAllLineDash();
this.curItem = item;
this.curItem.showLineDash();
}
hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash();
}
}
}
update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this.updateArr(this.hotZoneArr);
TWEEN.update();
}
updateArr(arr) {
if (arr) {
for (let i = 0; i < arr.length; i++) {
arr[i].update();
}
}
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
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) => {
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.ontouchstart !== undefined) {
return false;
} else {
return true;
}
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
}
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;
}
saveClick() {
const bgItem = this.bgItem;
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
} else {
bgItem['rect'] = {x: 0, y: 0, width: Math.round(this.canvasWidth * 100) / 100, height: Math.round(this.canvasHeight * 100) / 100};
}
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = {
index: hotZoneArr[i].index,
};
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100;
hotZoneItemArr.push(hotZoneItem);
}
console.log('hotZoneItemArr: ', hotZoneItemArr);
this.save.emit({bgItem, hotZoneItemArr});
}
}
...@@ -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