2018-05-06 17:18:37 +02:00
|
|
|
/**
|
|
|
|
* Video object
|
|
|
|
* @param graphics
|
|
|
|
* @param apiVideo
|
|
|
|
* @returns {R3.Video}
|
|
|
|
* @constructor
|
|
|
|
*/
|
|
|
|
R3.Video = function(
|
|
|
|
graphics,
|
|
|
|
apiVideo
|
|
|
|
) {
|
|
|
|
this.graphics = graphics;
|
|
|
|
|
|
|
|
if (R3.Utils.UndefinedOrNull(apiVideo)) {
|
|
|
|
apiVideo = {};
|
|
|
|
}
|
|
|
|
|
|
|
|
R3.API.Video.call(
|
|
|
|
this,
|
|
|
|
apiVideo.id,
|
|
|
|
apiVideo.name,
|
|
|
|
apiVideo.parentEntity,
|
|
|
|
apiVideo.autoUpdateSize,
|
|
|
|
apiVideo.width,
|
|
|
|
apiVideo.height,
|
|
|
|
apiVideo.offset,
|
|
|
|
apiVideo.source
|
|
|
|
);
|
|
|
|
|
|
|
|
this.offset = new R3.Vector2(
|
|
|
|
this.graphics,
|
|
|
|
this.offset,
|
|
|
|
this
|
|
|
|
);
|
|
|
|
|
|
|
|
R3.Component.call(this);
|
|
|
|
};
|
|
|
|
|
|
|
|
R3.Video.prototype = Object.create(R3.Component.prototype);
|
|
|
|
R3.Video.prototype.constructor = R3.Video;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Creates a light instance
|
|
|
|
* @returns {*}
|
|
|
|
*/
|
|
|
|
R3.Video.prototype.createInstance = function() {
|
|
|
|
|
|
|
|
this.instance = document.createElement('video');
|
|
|
|
|
|
|
|
this.instance.setAttribute('id', this.id);
|
|
|
|
|
|
|
|
this.instance.setAttribute('width', this.width);
|
|
|
|
|
|
|
|
this.instance.setAttribute('height', this.height);
|
|
|
|
|
|
|
|
this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px');
|
|
|
|
|
|
|
|
this.instance.setAttribute('loop', '');
|
|
|
|
|
|
|
|
this.instance.setAttribute('controls', '');
|
|
|
|
|
|
|
|
this.instance.setAttribute('autoplay', '');
|
|
|
|
|
|
|
|
this.instance.setAttribute('webkit-playsinline', '');
|
|
|
|
|
|
|
|
if (this.autoUpdateSize) {
|
|
|
|
/**
|
|
|
|
* Update our size from the instance size
|
|
|
|
*/
|
|
|
|
this.width = this.instance.width;
|
|
|
|
this.height = this.instance.height;
|
|
|
|
} else {
|
|
|
|
/**
|
|
|
|
* Update our instance with our size
|
|
|
|
*/
|
|
|
|
this.instance.width = this.width;
|
|
|
|
this.instance.height = this.height;
|
|
|
|
}
|
|
|
|
|
2018-05-06 19:57:07 +02:00
|
|
|
if (this.source) {
|
|
|
|
this.instance.setAttribute('src', this.source);
|
|
|
|
}
|
2018-05-06 17:18:37 +02:00
|
|
|
|
|
|
|
R3.Component.prototype.createInstance.call(this);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Updates the instance with the current state
|
|
|
|
*/
|
|
|
|
R3.Video.prototype.updateInstance = function(property) {
|
|
|
|
|
|
|
|
if (R3.Utils.UndefinedOrNull(property)) {
|
|
|
|
console.warn('unknown property update for Video: ' + property);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (property === 'id') {
|
|
|
|
this.instance.setAttribute('id', this.id);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (property === 'offset') {
|
|
|
|
this.instance.style.left = this.offset.x + 'px';
|
|
|
|
this.instance.style.top = this.offset.y + 'px';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
property === 'autoUpdateSize' ||
|
|
|
|
property === 'width' ||
|
|
|
|
property === 'height'
|
|
|
|
) {
|
|
|
|
/**
|
|
|
|
* We cannot control everything about the canvas - this is dependent on where the canvas lives and its
|
|
|
|
* dimensions can also be controlled via CSS -
|
|
|
|
*
|
|
|
|
* This means - autoUpdateSize works a little different for this component - instead of getting our size and
|
|
|
|
* applying it, it gets our canvas size and applies it, or applies our size to the canvas - of course
|
|
|
|
* the user settings override this.
|
|
|
|
*/
|
|
|
|
if (this.autoUpdateSize) {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update from our canvas size
|
|
|
|
*/
|
|
|
|
this.width = this.instance.width;
|
|
|
|
this.height = this.instance.height;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Command our canvas to take a size - this is not guaranteed however - CSS wins
|
|
|
|
*/
|
|
|
|
this.instance.width = this.width;
|
|
|
|
this.instance.height = this.height;
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (property === 'source') {
|
|
|
|
this.instance.src = this.source;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
R3.Component.prototype.updateInstance.call(this, property);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Converts a R3.Video to a R3.API.Video
|
|
|
|
* @returns {R3.API.Video}
|
|
|
|
*/
|
|
|
|
R3.Video.prototype.toApiObject = function() {
|
|
|
|
return new R3.API.Video(
|
|
|
|
this.id,
|
|
|
|
this.name,
|
|
|
|
R3.Utils.IdOrNull(this.parentEntity),
|
|
|
|
this.autoUpdateSize,
|
|
|
|
this.width,
|
|
|
|
this.height,
|
|
|
|
this.offset.toApiObject(),
|
|
|
|
this.source
|
|
|
|
);
|
|
|
|
};
|