125 lines
3.0 KiB
JavaScript
125 lines
3.0 KiB
JavaScript
/**
|
|
* R3.Video
|
|
* @param apiComponent
|
|
*
|
|
* @property autoUpdateSize
|
|
* @property width
|
|
* @property height
|
|
* @property offset
|
|
* @property source
|
|
*
|
|
* @constructor
|
|
*/
|
|
R3.Video = function(
|
|
apiComponent
|
|
) {
|
|
__RUNTIME_COMPONENT__;
|
|
|
|
__UPGRADE_TO_RUNTIME__;
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
if (this.source) {
|
|
this.instance.setAttribute('src', this.source);
|
|
}
|
|
|
|
__CREATE_INSTANCE__;
|
|
|
|
};
|
|
|
|
/**
|
|
* Updates the instance with the current state
|
|
*/
|
|
R3.Video.prototype.updateInstance = function(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;
|
|
}
|
|
|
|
__UPDATE_INSTANCE__;
|
|
};
|