@needle-tools/engine 3.27.5-beta → 3.28.0-beta

package/src/engine-components/dist/VideoPlayer.js

@@ -1,888 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-exports.__esModule = true;
-exports.VideoPlayer = exports.VideoRenderMode = exports.VideoAudioOutputMode = exports.VideoSource = exports.AspectMode = void 0;
-var Component_js_1 = require("./Component.js");
-var engine_serialization_decorator_js_1 = require("../engine/engine_serialization_decorator.js");
-var three_1 = require("three");
-var engine_input_utils_js_1 = require("../engine/engine_input_utils.js");
-var engine_utils_js_1 = require("../engine/engine_utils.js");
-var Renderer_js_1 = require("./Renderer.js");
-var engine_three_utils_js_1 = require("../engine/engine_three_utils.js");
-var engine_create_objects_js_1 = require("../engine/engine_create_objects.js");
-var index_js_1 = require("../engine/debug/index.js");
-var debug = engine_utils_js_1.getParam("debugvideo");
-var AspectMode;
-(function (AspectMode) {
-    AspectMode[AspectMode["None"] = 0] = "None";
-    AspectMode[AspectMode["AdjustHeight"] = 1] = "AdjustHeight";
-    AspectMode[AspectMode["AdjustWidth"] = 2] = "AdjustWidth";
-})(AspectMode = exports.AspectMode || (exports.AspectMode = {}));
-var VideoSource;
-(function (VideoSource) {
-    /// <summary>
-    ///   <para>Use the current clip as the video content source.</para>
-    /// </summary>
-    VideoSource[VideoSource["VideoClip"] = 0] = "VideoClip";
-    /// <summary>
-    ///   <para>Use the current URL as the video content source.</para>
-    /// </summary>
-    VideoSource[VideoSource["Url"] = 1] = "Url";
-})(VideoSource = exports.VideoSource || (exports.VideoSource = {}));
-var VideoAudioOutputMode;
-(function (VideoAudioOutputMode) {
-    VideoAudioOutputMode[VideoAudioOutputMode["None"] = 0] = "None";
-    VideoAudioOutputMode[VideoAudioOutputMode["AudioSource"] = 1] = "AudioSource";
-    VideoAudioOutputMode[VideoAudioOutputMode["Direct"] = 2] = "Direct";
-    VideoAudioOutputMode[VideoAudioOutputMode["APIOnly"] = 3] = "APIOnly";
-})(VideoAudioOutputMode = exports.VideoAudioOutputMode || (exports.VideoAudioOutputMode = {}));
-var VideoRenderMode;
-(function (VideoRenderMode) {
-    VideoRenderMode[VideoRenderMode["CameraFarPlane"] = 0] = "CameraFarPlane";
-    VideoRenderMode[VideoRenderMode["CameraNearPlane"] = 1] = "CameraNearPlane";
-    VideoRenderMode[VideoRenderMode["RenderTexture"] = 2] = "RenderTexture";
-    VideoRenderMode[VideoRenderMode["MaterialOverride"] = 3] = "MaterialOverride";
-})(VideoRenderMode = exports.VideoRenderMode || (exports.VideoRenderMode = {}));
-var VideoPlayer = /** @class */ (function (_super) {
-    __extends(VideoPlayer, _super);
-    function VideoPlayer() {
-        var _this = _super.call(this) || this;
-        _this.playOnAwake = true;
-        _this.aspectMode = AspectMode.None;
-        _this.clip = null;
-        _this.time = 0;
-        _this._playbackSpeed = 1;
-        _this._isLooping = false;
-        _this._muted = false;
-        _this._audioOutputMode = VideoAudioOutputMode.Direct;
-        /** Set this to false to pause video playback while the tab is not active */
-        _this.playInBackground = true;
-        _this._crossOrigin = "anonymous";
-        // set a default src, this should not be undefined
-        _this.source = VideoSource.Url;
-        _this.url = null;
-        _this._videoElement = null;
-        _this._videoTexture = null;
-        _this._videoMaterial = null;
-        _this._isPlaying = false;
-        _this.wasPlaying = false;
-        _this.visibilityChanged = function (_) {
-            switch (document.visibilityState) {
-                case "hidden":
-                    if (!_this.playInBackground) {
-                        _this.wasPlaying = _this._isPlaying;
-                        _this.pause();
-                    }
-                    break;
-                case "visible":
-                    if (_this.wasPlaying && !_this._isPlaying)
-                        _this.play();
-                    break;
-            }
-        };
-        _this._receivedInput = false;
-        _this._overlay = null;
-        _this._updateAspectRoutineId = -1;
-        engine_input_utils_js_1.awaitInput(function () {
-            _this._receivedInput = true;
-            _this.updateVideoElementSettings();
-        });
-        _this._targetObjects = [];
-        if (engine_utils_js_1.getParam("videoscreenspace")) {
-            window.addEventListener("keydown", function (evt) {
-                if (evt.key === "f") {
-                    _this.screenspace = !_this.screenspace;
-                }
-            });
-        }
-        return _this;
-    }
-    Object.defineProperty(VideoPlayer.prototype, "playbackSpeed", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.playbackRate) !== null && _b !== void 0 ? _b : this._playbackSpeed;
-        },
-        set: function (val) {
-            this._playbackSpeed = val;
-            if (this._videoElement)
-                this._videoElement.playbackRate = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "isLooping", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.loop) !== null && _b !== void 0 ? _b : this._isLooping;
-        },
-        set: function (val) {
-            this._isLooping = val;
-            if (this._videoElement)
-                this._videoElement.loop = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "currentTime", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : this.time;
-        },
-        set: function (val) {
-            if (this._videoElement) {
-                this._videoElement.currentTime = val;
-            }
-            else
-                this.time = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "isPlaying", {
-        get: function () {
-            var video = this._videoElement;
-            if (video) {
-                if (video.currentTime > 0 && !video.paused && !video.ended
-                    && video.readyState > video.HAVE_CURRENT_DATA)
-                    return true;
-                else if (video.srcObject) {
-                    var stream = video.srcObject;
-                    if (stream.active)
-                        return true;
-                }
-            }
-            return false;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "crossOrigin", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.crossOrigin) !== null && _b !== void 0 ? _b : this._crossOrigin;
-        },
-        set: function (val) {
-            this._crossOrigin = val;
-            if (this._videoElement) {
-                if (val !== null)
-                    this._videoElement.setAttribute("crossorigin", val);
-                else
-                    this._videoElement.removeAttribute("crossorigin");
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "videoMaterial", {
-        get: function () {
-            return this._videoMaterial;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "videoTexture", {
-        get: function () {
-            return this._videoTexture;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "videoElement", {
-        get: function () {
-            return this._videoElement;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "muted", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.muted) !== null && _b !== void 0 ? _b : this._muted;
-        },
-        set: function (val) {
-            this._muted = val;
-            if (this._videoElement)
-                this._videoElement.muted = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(VideoPlayer.prototype, "audioOutputMode", {
-        get: function () { return this._audioOutputMode; },
-        set: function (mode) {
-            if (mode !== this._audioOutputMode) {
-                if (mode === VideoAudioOutputMode.AudioSource && index_js_1.isDevEnvironment())
-                    console.warn("VideoAudioOutputMode.AudioSource is not yet implemented");
-                this._audioOutputMode = mode;
-                this.updateVideoElementSettings();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VideoPlayer.prototype.setVideo = function (video) {
-        this.clip = video;
-        this.source = VideoSource.VideoClip;
-        if (!this._videoElement)
-            this.create(true);
-        else {
-            // TODO: how to prevent interruption error when another video is already playing
-            this._videoElement.srcObject = video;
-            if (this._isPlaying)
-                this.play();
-            this.updateAspect();
-        }
-    };
-    VideoPlayer.prototype.setClipURL = function (url) {
-        if (this.url === url)
-            return;
-        // console.log("SET URL", url);
-        this.url = url;
-        this.source = VideoSource.Url;
-        if (debug)
-            console.log("set url", url);
-        if (!this._videoElement)
-            this.create(true);
-        else {
-            this._videoElement.src = url;
-            if (this._isPlaying) {
-                this.stop();
-                this.play();
-            }
-        }
-    };
-    VideoPlayer.prototype.onEnable = function () {
-        var _a, _b;
-        if (debug)
-            console.log("VideoPlayer.onEnable", this);
-        window.addEventListener('visibilitychange', this.visibilityChanged);
-        if (this.playOnAwake === true) {
-            this.create(true);
-        }
-        if (this.screenspace) {
-            (_a = this._overlay) === null || _a === void 0 ? void 0 : _a.start();
-        }
-        else
-            (_b = this._overlay) === null || _b === void 0 ? void 0 : _b.stop();
-    };
-    VideoPlayer.prototype.onDisable = function () {
-        var _a;
-        window.removeEventListener('visibilitychange', this.visibilityChanged);
-        (_a = this._overlay) === null || _a === void 0 ? void 0 : _a.stop();
-        this.pause();
-    };
-    VideoPlayer.prototype.onDestroy = function () {
-        var _a;
-        if (this._videoElement) {
-            (_a = this._videoElement.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._videoElement);
-            this._videoElement = null;
-        }
-        if (this._videoTexture) {
-            this._videoTexture.dispose();
-            this._videoTexture = null;
-        }
-    };
-    VideoPlayer.prototype.play = function () {
-        var _this = this;
-        var _a, _b;
-        if (!this._videoElement)
-            this.create(false);
-        if (!this._videoElement)
-            return;
-        if (this._isPlaying && !((_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.ended) && !((_b = this._videoElement) === null || _b === void 0 ? void 0 : _b.paused))
-            return;
-        this._isPlaying = true;
-        if (!this._receivedInput)
-            this._videoElement.muted = true;
-        this.updateVideoElementSettings();
-        this._videoElement.currentTime = this.time;
-        this._videoElement.play()["catch"](function (err) {
-            var _a;
-            console.log(err);
-            // https://developer.chrome.com/blog/play-request-was-interrupted/
-            if (debug)
-                console.error("Error playing video", err, "CODE=" + err.code, (_a = _this.videoElement) === null || _a === void 0 ? void 0 : _a.src, _this);
-            setTimeout(function () {
-                if (_this._isPlaying && !_this.destroyed && _this.activeAndEnabled)
-                    _this.play();
-            }, 1000);
-        });
-        if (debug)
-            console.log("play", this._videoElement, this.time);
-    };
-    VideoPlayer.prototype.stop = function () {
-        this._isPlaying = false;
-        this.time = 0;
-        if (!this._videoElement)
-            return;
-        this._videoElement.currentTime = 0;
-        this._videoElement.pause();
-        if (debug)
-            console.log("STOP", this);
-    };
-    VideoPlayer.prototype.pause = function () {
-        var _a, _b, _c;
-        this.time = (_b = (_a = this._videoElement) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0;
-        this._isPlaying = false;
-        (_c = this._videoElement) === null || _c === void 0 ? void 0 : _c.pause();
-        if (debug)
-            console.log("PAUSE", this, this.currentTime);
-    };
-    VideoPlayer.prototype.create = function (playAutomatically) {
-        var _a;
-        var src;
-        switch (this.source) {
-            case VideoSource.VideoClip:
-                src = this.clip;
-                break;
-            case VideoSource.Url:
-                src = this.url;
-                if (!(src === null || src === void 0 ? void 0 : src.length) && typeof this.clip === "string")
-                    src = this.clip;
-                break;
-        }
-        if (!src) {
-            if (debug)
-                console.warn("No video source set", this);
-            return;
-        }
-        if (!this._videoElement) {
-            if (debug)
-                console.warn("Create VideoElement", this);
-            this._videoElement = this.createVideoElement();
-            (_a = this.context.domElement) === null || _a === void 0 ? void 0 : _a.prepend(this._videoElement);
-            // hide it because otherwise it would overlay the website with default css
-            this.updateVideoElementStyles();
-        }
-        if (typeof src === "string") {
-            if (debug)
-                console.log("Set Video src", src);
-            this._videoElement.src = src;
-            // Nor sure why we did this here, but with this code the video does not restart when being paused / enable toggled
-            // const str = this._videoElement["captureStream"]?.call(this._videoElement);
-            // this.clip = str;
-        }
-        else {
-            if (debug)
-                console.log("Set Video srcObject", src);
-            this._videoElement.srcObject = src;
-        }
-        if (!this._videoTexture)
-            this._videoTexture = new three_1.VideoTexture(this._videoElement);
-        this._videoTexture.flipY = false;
-        this._videoTexture.colorSpace = three_1.SRGBColorSpace;
-        this.handleBeginPlaying(playAutomatically);
-        if (debug)
-            console.log(this, playAutomatically);
-    };
-    VideoPlayer.prototype.updateAspect = function () {
-        if (this.aspectMode === AspectMode.None)
-            return;
-        this.startCoroutine(this.updateAspectImpl());
-    };
-    Object.defineProperty(VideoPlayer.prototype, "screenspace", {
-        get: function () {
-            var _a, _b;
-            return (_b = (_a = this._overlay) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
-        },
-        set: function (val) {
-            var _a;
-            if (val) {
-                if (!this._videoTexture)
-                    return;
-                if (!this._overlay)
-                    this._overlay = new VideoOverlay(this.context);
-                this._overlay.add(this._videoTexture);
-            }
-            else
-                (_a = this._overlay) === null || _a === void 0 ? void 0 : _a.remove(this._videoTexture);
-            if (this._overlay)
-                this._overlay.enabled = val;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VideoPlayer.prototype.createVideoElement = function () {
-        var video = document.createElement("video");
-        if (this._crossOrigin)
-            video.setAttribute("crossorigin", this._crossOrigin);
-        if (debug)
-            console.log("created video element", video);
-        return video;
-    };
-    VideoPlayer.prototype.handleBeginPlaying = function (playAutomatically) {
-        var _a, _b;
-        if (!this.enabled)
-            return;
-        if (!this._videoElement)
-            return;
-        this._targetObjects.length = 0;
-        var target = this.gameObject;
-        switch (this.renderMode) {
-            case VideoRenderMode.MaterialOverride:
-                target = (_a = this.targetMaterialRenderer) === null || _a === void 0 ? void 0 : _a.gameObject;
-                if (!target)
-                    target = (_b = Component_js_1.GameObject.getComponent(this.gameObject, Renderer_js_1.Renderer)) === null || _b === void 0 ? void 0 : _b.gameObject;
-                break;
-            case VideoRenderMode.RenderTexture:
-                console.error("VideoPlayer renderTexture not implemented yet. Please use material override instead");
-                return;
-        }
-        if (!target) {
-            console.error("Missing target for video material renderer", this.name, VideoRenderMode[this.renderMode], this);
-            return;
-        }
-        var mat = target["material"];
-        if (mat) {
-            this._targetObjects.push(target);
-            if (mat !== this._videoMaterial) {
-                this._videoMaterial = mat.clone();
-                target["material"] = this._videoMaterial;
-            }
-            var fieldName = "map";
-            var videoMaterial = this._videoMaterial;
-            if (!this.targetMaterialProperty) {
-                videoMaterial[fieldName] = this._videoTexture;
-            }
-            else {
-                switch (this.targetMaterialProperty) {
-                    default:
-                        videoMaterial[fieldName] = this._videoTexture;
-                        break;
-                    // doesnt render:
-                    // case "emissiveTexture":
-                    //     console.log(this.videoMaterial);
-                    //     // (this.videoMaterial as any).map = this.videoTexture;
-                    //     (this.videoMaterial as any).emissive?.set(1,1,1);// = this.videoTexture;
-                    //     (this.videoMaterial as any).emissiveMap = this.videoTexture;
-                    //     break;
-                }
-            }
-        }
-        else {
-            console.warn("Can not play video, no material found, this might be a multimaterial case which is not supported yet");
-            return;
-        }
-        this.updateVideoElementSettings();
-        this.updateVideoElementStyles();
-        if (playAutomatically)
-            this.play();
-    };
-    VideoPlayer.prototype.updateVideoElementSettings = function () {
-        if (!this._videoElement)
-            return;
-        this._videoElement.loop = this._isLooping;
-        this._videoElement.currentTime = this.currentTime;
-        this._videoElement.playbackRate = this._playbackSpeed;
-        // dont open in fullscreen on ios
-        this._videoElement.playsInline = true;
-        var muted = !this._receivedInput || this.audioOutputMode === VideoAudioOutputMode.None;
-        if (!muted && this._muted)
-            muted = true;
-        this._videoElement.muted = muted;
-        if (this.playOnAwake)
-            this._videoElement.autoplay = true;
-    };
-    VideoPlayer.prototype.updateVideoElementStyles = function () {
-        if (!this._videoElement)
-            return;
-        // set style here so preview frame is rendered
-        // set display and selectable because otherwise is interfers with input/focus e.g. breaks orbit control
-        this._videoElement.style.userSelect = "none";
-        this._videoElement.style.visibility = "hidden";
-        this._videoElement.style.display = "none";
-        this.updateAspect();
-    };
-    VideoPlayer.prototype.updateAspectImpl = function () {
-        var id, lastAspect, stream, aspect, _i, _a, track, settings, i, _b, _c, obj, worldAspect, parentScale, i;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    id = ++this._updateAspectRoutineId;
-                    lastAspect = undefined;
-                    stream = this.clip;
-                    _d.label = 1;
-                case 1:
-                    if (!(id === this._updateAspectRoutineId && this.aspectMode !== AspectMode.None && this.clip && stream === this.clip && this._isPlaying)) return [3 /*break*/, 13];
-                    if (!stream || typeof stream === "string") {
-                        return [2 /*return*/];
-                    }
-                    aspect = undefined;
-                    for (_i = 0, _a = stream.getVideoTracks(); _i < _a.length; _i++) {
-                        track = _a[_i];
-                        settings = track.getSettings();
-                        if (settings && settings.width && settings.height) {
-                            aspect = settings.width / settings.height;
-                            break;
-                        }
-                        // on firefox capture canvas stream works but looks like 
-                        // the canvas stream track doesnt contain settings?!!?
-                        else {
-                            aspect = this.context.renderer.domElement.clientWidth / this.context.renderer.domElement.clientHeight;
-                        }
-                    }
-                    if (!(aspect === undefined)) return [3 /*break*/, 6];
-                    i = 0;
-                    _d.label = 2;
-                case 2:
-                    if (!(i < 10)) return [3 /*break*/, 5];
-                    return [4 /*yield*/];
-                case 3:
-                    _d.sent();
-                    _d.label = 4;
-                case 4:
-                    i++;
-                    return [3 /*break*/, 2];
-                case 5:
-                    if (!this.isPlaying)
-                        return [3 /*break*/, 13];
-                    return [3 /*break*/, 1];
-                case 6:
-                    if (!(lastAspect === aspect)) return [3 /*break*/, 8];
-                    return [4 /*yield*/];
-                case 7:
-                    _d.sent();
-                    return [3 /*break*/, 1];
-                case 8:
-                    for (_b = 0, _c = this._targetObjects; _b < _c.length; _b++) {
-                        obj = _c[_b];
-                        worldAspect = 1;
-                        if (obj.parent) {
-                            parentScale = engine_three_utils_js_1.getWorldScale(obj.parent);
-                            worldAspect = parentScale.x / parentScale.y;
-                        }
-                        switch (this.aspectMode) {
-                            case AspectMode.AdjustHeight:
-                                obj.scale.y = 1 / aspect * obj.scale.x * worldAspect;
-                                break;
-                            case AspectMode.AdjustWidth:
-                                obj.scale.x = aspect * obj.scale.y * worldAspect;
-                                break;
-                        }
-                    }
-                    i = 0;
-                    _d.label = 9;
-                case 9:
-                    if (!(i < 3)) return [3 /*break*/, 12];
-                    return [4 /*yield*/];
-                case 10:
-                    _d.sent();
-                    _d.label = 11;
-                case 11:
-                    i++;
-                    return [3 /*break*/, 9];
-                case 12: return [3 /*break*/, 1];
-                case 13: return [2 /*return*/];
-            }
-        });
-    };
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "playOnAwake");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "aspectMode");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable(URL)
-    ], VideoPlayer.prototype, "clip");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "renderMode");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "targetMaterialProperty");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable(Renderer_js_1.Renderer)
-    ], VideoPlayer.prototype, "targetMaterialRenderer");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable(three_1.Texture)
-    ], VideoPlayer.prototype, "targetTexture");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "time");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "playbackSpeed");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "isLooping");
-    __decorate([
-        engine_serialization_decorator_js_1.serializable()
-    ], VideoPlayer.prototype, "audioOutputMode");
-    return VideoPlayer;
-}(Component_js_1.Behaviour));
-exports.VideoPlayer = VideoPlayer;
-var VideoOverlay = /** @class */ (function () {
-    function VideoOverlay(context) {
-        this._videos = [];
-        this._isInScreenspaceMode = false;
-        this.context = context;
-        this._input = new VideoOverlayInput(this);
-    }
-    Object.defineProperty(VideoOverlay.prototype, "enabled", {
-        get: function () {
-            return this._isInScreenspaceMode;
-        },
-        set: function (val) {
-            if (val)
-                this.start();
-            else
-                this.stop();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    VideoOverlay.prototype.add = function (video) {
-        if (this._videos.indexOf(video) === -1) {
-            this._videos.push(video);
-        }
-    };
-    VideoOverlay.prototype.remove = function (video) {
-        if (!video)
-            return;
-        var index = this._videos.indexOf(video);
-        if (index >= 0) {
-            this._videos.splice(index, 1);
-        }
-    };
-    VideoOverlay.prototype.start = function () {
-        var _a;
-        if (this._isInScreenspaceMode)
-            return;
-        if (this._videos.length < 0)
-            return;
-        var texture = this._videos[this._videos.length - 1];
-        if (!texture)
-            return;
-        this._isInScreenspaceMode = true;
-        if (!this._screenspaceModeQuad) {
-            this._screenspaceModeQuad = engine_create_objects_js_1.ObjectUtils.createPrimitive(engine_create_objects_js_1.PrimitiveType.Quad, {
-                material: new ScreenspaceTexture(texture)
-            });
-            if (!this._screenspaceModeQuad)
-                return;
-            this._screenspaceModeQuad.geometry.scale(2, 2, 2);
-        }
-        var quad = this._screenspaceModeQuad;
-        this.context.scene.add(quad);
-        this.updateScreenspaceMaterialUniforms();
-        var mat = quad.material;
-        mat === null || mat === void 0 ? void 0 : mat.reset();
-        (_a = this._input) === null || _a === void 0 ? void 0 : _a.enable(mat);
-    };
-    VideoOverlay.prototype.stop = function () {
-        var _a;
-        this._isInScreenspaceMode = false;
-        if (this._screenspaceModeQuad) {
-            (_a = this._input) === null || _a === void 0 ? void 0 : _a.disable();
-            this._screenspaceModeQuad.removeFromParent();
-        }
-    };
-    VideoOverlay.prototype.updateScreenspaceMaterialUniforms = function () {
-        var _a;
-        var mat = (_a = this._screenspaceModeQuad) === null || _a === void 0 ? void 0 : _a.material;
-        if (!mat)
-            return;
-        // mat.videoAspect = this.videoTexture?.image?.width / this.videoTexture?.image?.height;
-        mat.screenAspect = this.context.domElement.clientWidth / this.context.domElement.clientHeight;
-    };
-    return VideoOverlay;
-}());
-var VideoOverlayInput = /** @class */ (function () {
-    function VideoOverlayInput(overlay) {
-        this._isPinching = false;
-        this._lastPinch = 0;
-        this.overlay = overlay;
-        this.context = overlay.context;
-    }
-    VideoOverlayInput.prototype.enable = function (mat) {
-        var _this = this;
-        this._material = mat;
-        window.addEventListener("resize", this._onResizeScreenFn = function () {
-            _this.overlay.updateScreenspaceMaterialUniforms();
-        });
-        window.addEventListener("keyup", this._onKeyUpFn = function (args) {
-            if (args.key === "Escape")
-                _this.overlay.stop();
-        });
-        window.addEventListener("wheel", this._onMouseWheelFn = function (args) {
-            if (_this.overlay.enabled) {
-                mat.zoom += args.deltaY * .0005;
-                args.preventDefault();
-            }
-        }, { passive: false });
-        var delta = new three_1.Vector2();
-        window.addEventListener("mousemove", function (args) {
-            if (_this.overlay.enabled && _this.context.input.getPointerPressed(0)) {
-                var normalizedMovement = new three_1.Vector2(args.movementX, args.movementY);
-                normalizedMovement.x /= _this.context.domElement.clientWidth;
-                normalizedMovement.y /= _this.context.domElement.clientHeight;
-                delta.set(normalizedMovement.x, normalizedMovement.y);
-                delta.multiplyScalar(mat.zoom / -_this.context.time.deltaTime * .01);
-                mat.offset = mat.offset.add(delta);
-            }
-        });
-        window.addEventListener("pointermove", function (args) {
-            if (_this.overlay.enabled && _this.context.input.getPointerPressed(0)) {
-                var count = _this.context.input.getTouchesPressedCount();
-                if (count === 1) {
-                    delta.set(args.movementX, args.movementY);
-                    delta.multiplyScalar(mat.zoom * -_this.context.time.deltaTime * .05);
-                    mat.offset = mat.offset.add(delta);
-                }
-            }
-        });
-        var lastTouchStartTime = 0;
-        window.addEventListener("touchstart", function (e) {
-            if (e.touches.length < 2) {
-                if (_this.context.time.time - lastTouchStartTime < .3) {
-                    _this.overlay.stop();
-                }
-                lastTouchStartTime = _this.context.time.time;
-                return;
-            }
-            _this._isPinching = true;
-            _this._lastPinch = 0;
-        });
-        window.addEventListener("touchmove", function (e) {
-            if (!_this._isPinching || !_this._material)
-                return;
-            var touch1 = e.touches[0];
-            var touch2 = e.touches[1];
-            var dx = touch1.clientX - touch2.clientX;
-            var dy = touch1.clientY - touch2.clientY;
-            var distance = Math.sqrt(dx * dx + dy * dy);
-            if (_this._lastPinch !== 0) {
-                var delta_1 = distance - _this._lastPinch;
-                _this._material.zoom -= delta_1 * .004;
-            }
-            _this._lastPinch = distance;
-        });
-        window.addEventListener("touchend", function () {
-            _this._isPinching = false;
-        });
-    };
-    VideoOverlayInput.prototype.disable = function () {
-        if (this._onResizeScreenFn) {
-            window.removeEventListener("resize", this._onResizeScreenFn);
-            this._onResizeScreenFn = undefined;
-        }
-        if (this._onKeyUpFn) {
-            window.removeEventListener("keyup", this._onKeyUpFn);
-            this._onKeyUpFn = undefined;
-        }
-        if (this._onMouseWheelFn) {
-            window.removeEventListener("wheel", this._onMouseWheelFn);
-            this._onMouseWheelFn = undefined;
-        }
-    };
-    return VideoOverlayInput;
-}());
-var ScreenspaceTexture = /** @class */ (function (_super) {
-    __extends(ScreenspaceTexture, _super);
-    // maxZoom : number = 10
-    function ScreenspaceTexture(tex) {
-        var _this = _super.call(this) || this;
-        _this._offset = new three_1.Vector2();
-        _this.uniforms = {
-            map: { value: tex },
-            screenAspect: { value: 1 },
-            offsetScale: { value: new three_1.Vector4(0, 0, 1, 1) }
-        };
-        _this.vertexShader = "\n        uniform sampler2D map;\n        uniform float screenAspect;\n        uniform vec4 offsetScale;\n        varying vec2 vUv;\n\n        void main() {\n\n            gl_Position = vec4( position , 1.0 );\n            vUv = uv;\n            vUv.y = 1. - vUv.y;\n\n            // fit into screen\n            ivec2 res = textureSize(map, 0);\n            float videoAspect = float(res.x) / float(res.y);\n            float aspect = videoAspect / screenAspect;\n            if(aspect >= 1.0) \n            {\n                vUv.y = vUv.y * aspect;\n                float offset = (1. - aspect) * .5;\n                vUv.y = vUv.y + offset;\n            }\n            else\n            {\n                vUv.x = vUv.x / aspect;\n                float offset = (1. - 1. / aspect) * .5;\n                vUv.x = vUv.x + offset;\n            }\n\n            vUv.x -= .5;\n            vUv.y -= .5;\n\n            vUv.x *= offsetScale.z;\n            vUv.y *= offsetScale.z;\n            vUv.x += offsetScale.x;\n            vUv.y += offsetScale.y;\n\n            vUv.x += .5;\n            vUv.y += .5;\n        }\n\n        ";
-        _this.fragmentShader = "\n        uniform sampler2D map;\n        varying vec2 vUv;\n        void main() {\n            if(vUv.x < 0. || vUv.x > 1. || vUv.y < 0. || vUv.y > 1.)\n                gl_FragColor = vec4(0., 0., 0., 1.);\n            else\n            {\n                vec4 texcolor = texture2D(map, vUv);\n                texcolor = LinearTosRGB(texcolor);\n                gl_FragColor = texcolor;\n            }\n        }\n        ";
-        return _this;
-    }
-    Object.defineProperty(ScreenspaceTexture.prototype, "screenAspect", {
-        set: function (val) {
-            this.uniforms["screenAspect"].value = val;
-            this.needsUpdate = true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScreenspaceTexture.prototype, "offset", {
-        get: function () {
-            var val = this.uniforms["offsetScale"].value;
-            this._offset.set(val.x, val.y);
-            return this._offset;
-        },
-        set: function (vec) {
-            var val = this.uniforms["offsetScale"].value;
-            val.x = vec.x;
-            val.y = vec.y;
-            // console.log(val);
-            this.uniforms["offsetScale"].value = val;
-            this.needsUpdate = true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScreenspaceTexture.prototype, "zoom", {
-        get: function () {
-            return this.uniforms["offsetScale"].value.z; // * this.maxZoom;
-        },
-        set: function (val) {
-            var zoom = this.uniforms["offsetScale"].value;
-            if (val < .001)
-                val = .001;
-            zoom.z = val;
-            // zoom.z = this.maxZoom - val;
-            // zoom.z /= this.maxZoom;
-            this.needsUpdate = true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ScreenspaceTexture.prototype.reset = function () {
-        this.offset = this.offset.set(0, 0);
-        this.zoom = 1;
-        this.needsUpdate = true;
-    };
-    return ScreenspaceTexture;
-}(three_1.ShaderMaterial));