r3-legacy/src/r3-video.js

/**
 * 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.parent,
		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;
    }

    if (this.source) {
        this.instance.setAttribute('src', this.source);
    }

    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.parent),
        this.autoUpdateSize,
        this.width,
        this.height,
        this.offset.toApiObject(),
        this.source
	);
};