@galacean/effects-plugin-multimedia 2.2.6 → 2.3.0-alpha.1

package/dist/index.mjs

@@ -3,11 +3,11 @@
  * Description: Galacean Effects player multimedia plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.2.6
+ * Version: v2.3.0-alpha.1
  */
 
 import * as EFFECTS from '@galacean/effects';
-import { isFunction, passRenderLevel, spec, loadVideo, loadBinary, AbstractPlugin, effectsClass, glContext, getImageItemRenderInfo, math, BaseRenderComponent, RendererComponent, registerPlugin, VFXItem, logger } from '@galacean/effects';
+import { isFunction, passRenderLevel, spec, loadVideo, loadBinary, AbstractPlugin, effectsClass, glContext, PLAYER_OPTIONS_ENV_EDITOR, GLSLVersion, getImageItemRenderInfo, math, assertExist, BaseRenderComponent, itemFrag, itemVert, Texture, RendererComponent, registerPlugin, VFXItem, logger } from '@galacean/effects';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -485,26 +485,111 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         var _this;
         _this = BaseRenderComponent.call(this, engine) || this;
         _this.threshold = 0.03;
+        /**
+   * 播放标志位
+   */ _this.played = false;
+        /**
+   * 视频元素是否激活
+   */ _this.isVideoActive = false;
+        /**
+   * 是否为透明视频
+   */ _this.transparent = false;
         _this.name = "MVideo" + seed++;
         _this.geometry = _this.createGeometry(glContext.TRIANGLES);
         return _this;
     }
     var _proto = VideoComponent.prototype;
-    _proto.setTexture = function setTexture(texture) {
-        var oldTexture = this.renderer.texture;
-        var composition = this.item.composition;
-        if (!composition) {
-            return;
-        }
-        composition.textures.forEach(function(cachedTexture, index) {
-            if (cachedTexture === oldTexture) {
-                composition.textures[index] = texture;
+    _proto.setTexture = function setTexture(input) {
+        var _this = this;
+        return _async_to_generator(function() {
+            var oldTexture, composition, texture;
+            return __generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        oldTexture = _this.renderer.texture;
+                        composition = _this.item.composition;
+                        if (!(typeof input === "string")) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            Texture.fromVideo(input, _this.item.engine)
+                        ];
+                    case 1:
+                        texture = _state.sent();
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        texture = input;
+                        _state.label = 3;
+                    case 3:
+                        if (!composition) {
+                            return [
+                                2
+                            ];
+                        }
+                        composition.textures.forEach(function(cachedTexture, index) {
+                            if (cachedTexture === oldTexture) {
+                                composition.textures[index] = texture;
+                            }
+                        });
+                        _this.engine.removeTexture(oldTexture);
+                        _this.renderer.texture = texture;
+                        _this.material.setTexture("_MainTex", texture);
+                        _this.video = texture.source.video;
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    _proto.onAwake = function onAwake() {
+        var _this = this;
+        var _this_item_composition;
+        BaseRenderComponent.prototype.onAwake.call(this);
+        (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("goto", function(option) {
+            if (option.time > 0) {
+                var _this_item = _this.item, endBehavior = _this_item.endBehavior, start = _this_item.start, duration = _this_item.duration;
+                if (endBehavior === spec.EndBehavior.freeze || endBehavior === spec.EndBehavior.restart) {
+                    _this.setCurrentTime((option.time - start) % duration);
+                } else {
+                    if (option.time >= duration) {
+                        _this.onDisable();
+                    } else {
+                        _this.setCurrentTime(option.time - start);
+                    }
+                }
             }
         });
-        this.engine.removeTexture(oldTexture);
-        this.renderer.texture = texture;
-        this.material.setTexture("_MainTex", texture);
-        this.video = texture.source.video;
+    };
+    _proto.getMaterialProps = function getMaterialProps(renderInfo, count) {
+        var _this_engine_renderer;
+        var macros = [
+            [
+                "TRANSPARENT_VIDEO",
+                this.transparent
+            ],
+            [
+                "ENV_EDITOR",
+                ((_this_engine_renderer = this.engine.renderer) == null ? void 0 : _this_engine_renderer.env) === PLAYER_OPTIONS_ENV_EDITOR
+            ]
+        ];
+        var fragment = itemFrag;
+        var vertex = itemVert;
+        var shader = {
+            fragment: fragment,
+            vertex: vertex,
+            glslVersion: count === 1 ? GLSLVersion.GLSL1 : GLSLVersion.GLSL3,
+            macros: macros,
+            shared: true
+        };
+        return {
+            shader: shader
+        };
     };
     _proto.fromData = function fromData(data) {
         BaseRenderComponent.prototype.fromData.call(this, data);
@@ -514,8 +599,9 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
             1,
             1,
             1
-        ] : _options_startColor, _options_playbackRate = options.playbackRate, playbackRate = _options_playbackRate === void 0 ? 1 : _options_playbackRate, _options_volume = options.volume, volume = _options_volume === void 0 ? 1 : _options_volume, _options_muted = options.muted, muted = _options_muted === void 0 ? false : _options_muted;
+        ] : _options_startColor, _options_playbackRate = options.playbackRate, playbackRate = _options_playbackRate === void 0 ? 1 : _options_playbackRate, _options_volume = options.volume, volume = _options_volume === void 0 ? 1 : _options_volume, _options_muted = options.muted, muted = _options_muted === void 0 ? false : _options_muted, _options_transparent = options.transparent, transparent = _options_transparent === void 0 ? false : _options_transparent;
         var renderer = data.renderer;
+        this.transparent = transparent;
         if (!renderer) {
             renderer = {};
         }
@@ -524,7 +610,7 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
             this.setPlaybackRate(playbackRate);
             this.setVolume(volume);
             this.setMuted(muted);
-            var endBehavior = this.item.endBehavior;
+            var endBehavior = this.item.taggedProperties.endBehavior;
             // 如果元素设置为 destroy
             if (endBehavior === spec.EndBehavior.destroy) {
                 this.setLoop(false);
@@ -548,6 +634,9 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         this.renderInfo = getImageItemRenderInfo(this);
         var geometry = this.createGeometry(glContext.TRIANGLES);
         var material = this.createMaterial(this.renderInfo, 2);
+        if (this.transparent) {
+            this.material.enableMacro("TRANSPARENT_VIDEO", this.transparent);
+        }
         this.worldMatrix = math.Matrix4.fromIdentity();
         this.material = material;
         this.geometry = geometry;
@@ -560,27 +649,25 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         ]));
         this.setItem();
     };
-    _proto.onStart = function onStart() {
-        var _this = this;
-        var _this_item_composition;
-        BaseRenderComponent.prototype.onStart.call(this);
-        (_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("goto", function(option) {
-            if (option.time > 0) {
-                _this.setCurrentTime(option.time);
-            }
-        });
-    };
     _proto.onUpdate = function onUpdate(dt) {
-        var _this_item_composition;
         BaseRenderComponent.prototype.onUpdate.call(this, dt);
-        var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior;
+        var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior, composition = _this_item.composition, start = _this_item.start;
+        assertExist(composition);
+        var _composition_rootItem = composition.rootItem, rootEndBehavior = _composition_rootItem.endBehavior, rootDuration = _composition_rootItem.duration;
         if (time > 0) {
             this.setVisible(true);
             this.playVideo();
         }
-        if (time === 0 && ((_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.rootItem.endBehavior) === spec.EndBehavior.freeze) {
-            this.pauseVideo();
-            this.setCurrentTime(0);
+        if (time === 0 || time === rootDuration - start || Math.abs(rootDuration - duration - time) < 1e-10) {
+            if (rootEndBehavior === spec.EndBehavior.freeze) {
+                var _this_video;
+                if (!((_this_video = this.video) == null ? void 0 : _this_video.paused)) {
+                    this.pauseVideo();
+                    this.setCurrentTime(time);
+                }
+            } else {
+                this.setCurrentTime(time);
+            }
         }
         if (Math.abs(time - duration) < this.threshold) {
             if (endBehavior === spec.EndBehavior.freeze) {
@@ -652,15 +739,28 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         }
         this.video.playbackRate = rate;
     };
-    _proto.playVideo = function playVideo() {
+    /**
+   * 播放视频
+   * @since 2.3.0
+   */ _proto.playVideo = function playVideo() {
         var _this = this;
+        if (this.played) {
+            return;
+        }
         if (this.video) {
+            this.played = true;
             this.video.play().catch(function(error) {
                 _this.engine.renderErrors.add(error);
             });
         }
     };
-    _proto.pauseVideo = function pauseVideo() {
+    /**
+   * 暂停视频
+   * @since 2.3.0
+   */ _proto.pauseVideo = function pauseVideo() {
+        if (this.played) {
+            this.played = false;
+        }
         if (this.video && !this.video.paused) {
             this.video.pause();
         }
@@ -674,13 +774,14 @@ var VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         }
     };
     _proto.onDisable = function onDisable() {
-        var _this_video;
         BaseRenderComponent.prototype.onDisable.call(this);
         this.setCurrentTime(0);
-        (_this_video = this.video) == null ? void 0 : _this_video.pause();
+        this.isVideoActive = false;
+        this.pauseVideo();
     };
     _proto.onEnable = function onEnable() {
         BaseRenderComponent.prototype.onEnable.call(this);
+        this.isVideoActive = true;
         this.playVideo();
     };
     return VideoComponent;
@@ -950,7 +1051,7 @@ AudioComponent = __decorate([
 
 /**
  * 插件版本号
- */ var version = "2.2.6";
+ */ var version = "2.3.0-alpha.1";
 registerPlugin("video", VideoLoader, VFXItem, true);
 registerPlugin("audio", AudioLoader, VFXItem, true);
 logger.info("Plugin multimedia version: " + version + ".");