@galacean/effects-plugin-multimedia 2.2.6 → 2.3.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +137 -36
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +2 -2
- package/dist/index.min.js.map +1 -1
- package/dist/index.mjs +138 -37
- package/dist/index.mjs.map +1 -1
- package/dist/video/video-component.d.ts +31 -6
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: Galacean Effects player multimedia plugin
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 云垣
|
|
6
|
-
* Version: v2.
|
|
6
|
+
* Version: v2.3.0-alpha.1
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
'use strict';
|
|
@@ -508,26 +508,111 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
508
508
|
var _this;
|
|
509
509
|
_this = BaseRenderComponent.call(this, engine) || this;
|
|
510
510
|
_this.threshold = 0.03;
|
|
511
|
+
/**
|
|
512
|
+
* 播放标志位
|
|
513
|
+
*/ _this.played = false;
|
|
514
|
+
/**
|
|
515
|
+
* 视频元素是否激活
|
|
516
|
+
*/ _this.isVideoActive = false;
|
|
517
|
+
/**
|
|
518
|
+
* 是否为透明视频
|
|
519
|
+
*/ _this.transparent = false;
|
|
511
520
|
_this.name = "MVideo" + seed++;
|
|
512
521
|
_this.geometry = _this.createGeometry(EFFECTS.glContext.TRIANGLES);
|
|
513
522
|
return _this;
|
|
514
523
|
}
|
|
515
524
|
var _proto = VideoComponent.prototype;
|
|
516
|
-
_proto.setTexture = function setTexture(
|
|
517
|
-
var
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
return
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
+
_proto.setTexture = function setTexture(input) {
|
|
526
|
+
var _this = this;
|
|
527
|
+
return _async_to_generator(function() {
|
|
528
|
+
var oldTexture, composition, texture;
|
|
529
|
+
return __generator(this, function(_state) {
|
|
530
|
+
switch(_state.label){
|
|
531
|
+
case 0:
|
|
532
|
+
oldTexture = _this.renderer.texture;
|
|
533
|
+
composition = _this.item.composition;
|
|
534
|
+
if (!(typeof input === "string")) return [
|
|
535
|
+
3,
|
|
536
|
+
2
|
|
537
|
+
];
|
|
538
|
+
return [
|
|
539
|
+
4,
|
|
540
|
+
EFFECTS.Texture.fromVideo(input, _this.item.engine)
|
|
541
|
+
];
|
|
542
|
+
case 1:
|
|
543
|
+
texture = _state.sent();
|
|
544
|
+
return [
|
|
545
|
+
3,
|
|
546
|
+
3
|
|
547
|
+
];
|
|
548
|
+
case 2:
|
|
549
|
+
texture = input;
|
|
550
|
+
_state.label = 3;
|
|
551
|
+
case 3:
|
|
552
|
+
if (!composition) {
|
|
553
|
+
return [
|
|
554
|
+
2
|
|
555
|
+
];
|
|
556
|
+
}
|
|
557
|
+
composition.textures.forEach(function(cachedTexture, index) {
|
|
558
|
+
if (cachedTexture === oldTexture) {
|
|
559
|
+
composition.textures[index] = texture;
|
|
560
|
+
}
|
|
561
|
+
});
|
|
562
|
+
_this.engine.removeTexture(oldTexture);
|
|
563
|
+
_this.renderer.texture = texture;
|
|
564
|
+
_this.material.setTexture("_MainTex", texture);
|
|
565
|
+
_this.video = texture.source.video;
|
|
566
|
+
return [
|
|
567
|
+
2
|
|
568
|
+
];
|
|
569
|
+
}
|
|
570
|
+
});
|
|
571
|
+
})();
|
|
572
|
+
};
|
|
573
|
+
_proto.onAwake = function onAwake() {
|
|
574
|
+
var _this = this;
|
|
575
|
+
var _this_item_composition;
|
|
576
|
+
BaseRenderComponent.prototype.onAwake.call(this);
|
|
577
|
+
(_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("goto", function(option) {
|
|
578
|
+
if (option.time > 0) {
|
|
579
|
+
var _this_item = _this.item, endBehavior = _this_item.endBehavior, start = _this_item.start, duration = _this_item.duration;
|
|
580
|
+
if (endBehavior === EFFECTS.spec.EndBehavior.freeze || endBehavior === EFFECTS.spec.EndBehavior.restart) {
|
|
581
|
+
_this.setCurrentTime((option.time - start) % duration);
|
|
582
|
+
} else {
|
|
583
|
+
if (option.time >= duration) {
|
|
584
|
+
_this.onDisable();
|
|
585
|
+
} else {
|
|
586
|
+
_this.setCurrentTime(option.time - start);
|
|
587
|
+
}
|
|
588
|
+
}
|
|
525
589
|
}
|
|
526
590
|
});
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
591
|
+
};
|
|
592
|
+
_proto.getMaterialProps = function getMaterialProps(renderInfo, count) {
|
|
593
|
+
var _this_engine_renderer;
|
|
594
|
+
var macros = [
|
|
595
|
+
[
|
|
596
|
+
"TRANSPARENT_VIDEO",
|
|
597
|
+
this.transparent
|
|
598
|
+
],
|
|
599
|
+
[
|
|
600
|
+
"ENV_EDITOR",
|
|
601
|
+
((_this_engine_renderer = this.engine.renderer) == null ? void 0 : _this_engine_renderer.env) === EFFECTS.PLAYER_OPTIONS_ENV_EDITOR
|
|
602
|
+
]
|
|
603
|
+
];
|
|
604
|
+
var fragment = EFFECTS.itemFrag;
|
|
605
|
+
var vertex = EFFECTS.itemVert;
|
|
606
|
+
var shader = {
|
|
607
|
+
fragment: fragment,
|
|
608
|
+
vertex: vertex,
|
|
609
|
+
glslVersion: count === 1 ? EFFECTS.GLSLVersion.GLSL1 : EFFECTS.GLSLVersion.GLSL3,
|
|
610
|
+
macros: macros,
|
|
611
|
+
shared: true
|
|
612
|
+
};
|
|
613
|
+
return {
|
|
614
|
+
shader: shader
|
|
615
|
+
};
|
|
531
616
|
};
|
|
532
617
|
_proto.fromData = function fromData(data) {
|
|
533
618
|
BaseRenderComponent.prototype.fromData.call(this, data);
|
|
@@ -537,8 +622,9 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
537
622
|
1,
|
|
538
623
|
1,
|
|
539
624
|
1
|
|
540
|
-
] : _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;
|
|
625
|
+
] : _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;
|
|
541
626
|
var renderer = data.renderer;
|
|
627
|
+
this.transparent = transparent;
|
|
542
628
|
if (!renderer) {
|
|
543
629
|
renderer = {};
|
|
544
630
|
}
|
|
@@ -547,7 +633,7 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
547
633
|
this.setPlaybackRate(playbackRate);
|
|
548
634
|
this.setVolume(volume);
|
|
549
635
|
this.setMuted(muted);
|
|
550
|
-
var endBehavior = this.item.endBehavior;
|
|
636
|
+
var endBehavior = this.item.taggedProperties.endBehavior;
|
|
551
637
|
// 如果元素设置为 destroy
|
|
552
638
|
if (endBehavior === EFFECTS.spec.EndBehavior.destroy) {
|
|
553
639
|
this.setLoop(false);
|
|
@@ -571,6 +657,9 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
571
657
|
this.renderInfo = EFFECTS.getImageItemRenderInfo(this);
|
|
572
658
|
var geometry = this.createGeometry(EFFECTS.glContext.TRIANGLES);
|
|
573
659
|
var material = this.createMaterial(this.renderInfo, 2);
|
|
660
|
+
if (this.transparent) {
|
|
661
|
+
this.material.enableMacro("TRANSPARENT_VIDEO", this.transparent);
|
|
662
|
+
}
|
|
574
663
|
this.worldMatrix = EFFECTS.math.Matrix4.fromIdentity();
|
|
575
664
|
this.material = material;
|
|
576
665
|
this.geometry = geometry;
|
|
@@ -583,27 +672,25 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
583
672
|
]));
|
|
584
673
|
this.setItem();
|
|
585
674
|
};
|
|
586
|
-
_proto.onStart = function onStart() {
|
|
587
|
-
var _this = this;
|
|
588
|
-
var _this_item_composition;
|
|
589
|
-
BaseRenderComponent.prototype.onStart.call(this);
|
|
590
|
-
(_this_item_composition = this.item.composition) == null ? void 0 : _this_item_composition.on("goto", function(option) {
|
|
591
|
-
if (option.time > 0) {
|
|
592
|
-
_this.setCurrentTime(option.time);
|
|
593
|
-
}
|
|
594
|
-
});
|
|
595
|
-
};
|
|
596
675
|
_proto.onUpdate = function onUpdate(dt) {
|
|
597
|
-
var _this_item_composition;
|
|
598
676
|
BaseRenderComponent.prototype.onUpdate.call(this, dt);
|
|
599
|
-
var _this_item = this.item, time = _this_item.time, duration = _this_item.duration, endBehavior = _this_item.endBehavior;
|
|
677
|
+
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;
|
|
678
|
+
EFFECTS.assertExist(composition);
|
|
679
|
+
var _composition_rootItem = composition.rootItem, rootEndBehavior = _composition_rootItem.endBehavior, rootDuration = _composition_rootItem.duration;
|
|
600
680
|
if (time > 0) {
|
|
601
681
|
this.setVisible(true);
|
|
602
682
|
this.playVideo();
|
|
603
683
|
}
|
|
604
|
-
if (time === 0
|
|
605
|
-
|
|
606
|
-
|
|
684
|
+
if (time === 0 || time === rootDuration - start || Math.abs(rootDuration - duration - time) < 1e-10) {
|
|
685
|
+
if (rootEndBehavior === EFFECTS.spec.EndBehavior.freeze) {
|
|
686
|
+
var _this_video;
|
|
687
|
+
if (!((_this_video = this.video) == null ? void 0 : _this_video.paused)) {
|
|
688
|
+
this.pauseVideo();
|
|
689
|
+
this.setCurrentTime(time);
|
|
690
|
+
}
|
|
691
|
+
} else {
|
|
692
|
+
this.setCurrentTime(time);
|
|
693
|
+
}
|
|
607
694
|
}
|
|
608
695
|
if (Math.abs(time - duration) < this.threshold) {
|
|
609
696
|
if (endBehavior === EFFECTS.spec.EndBehavior.freeze) {
|
|
@@ -675,15 +762,28 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
675
762
|
}
|
|
676
763
|
this.video.playbackRate = rate;
|
|
677
764
|
};
|
|
678
|
-
|
|
765
|
+
/**
|
|
766
|
+
* 播放视频
|
|
767
|
+
* @since 2.3.0
|
|
768
|
+
*/ _proto.playVideo = function playVideo() {
|
|
679
769
|
var _this = this;
|
|
770
|
+
if (this.played) {
|
|
771
|
+
return;
|
|
772
|
+
}
|
|
680
773
|
if (this.video) {
|
|
774
|
+
this.played = true;
|
|
681
775
|
this.video.play().catch(function(error) {
|
|
682
776
|
_this.engine.renderErrors.add(error);
|
|
683
777
|
});
|
|
684
778
|
}
|
|
685
779
|
};
|
|
686
|
-
|
|
780
|
+
/**
|
|
781
|
+
* 暂停视频
|
|
782
|
+
* @since 2.3.0
|
|
783
|
+
*/ _proto.pauseVideo = function pauseVideo() {
|
|
784
|
+
if (this.played) {
|
|
785
|
+
this.played = false;
|
|
786
|
+
}
|
|
687
787
|
if (this.video && !this.video.paused) {
|
|
688
788
|
this.video.pause();
|
|
689
789
|
}
|
|
@@ -697,13 +797,14 @@ exports.VideoComponent = /*#__PURE__*/ function(BaseRenderComponent) {
|
|
|
697
797
|
}
|
|
698
798
|
};
|
|
699
799
|
_proto.onDisable = function onDisable() {
|
|
700
|
-
var _this_video;
|
|
701
800
|
BaseRenderComponent.prototype.onDisable.call(this);
|
|
702
801
|
this.setCurrentTime(0);
|
|
703
|
-
|
|
802
|
+
this.isVideoActive = false;
|
|
803
|
+
this.pauseVideo();
|
|
704
804
|
};
|
|
705
805
|
_proto.onEnable = function onEnable() {
|
|
706
806
|
BaseRenderComponent.prototype.onEnable.call(this);
|
|
807
|
+
this.isVideoActive = true;
|
|
707
808
|
this.playVideo();
|
|
708
809
|
};
|
|
709
810
|
return VideoComponent;
|
|
@@ -973,7 +1074,7 @@ exports.AudioComponent = __decorate([
|
|
|
973
1074
|
|
|
974
1075
|
/**
|
|
975
1076
|
* 插件版本号
|
|
976
|
-
*/ var version = "2.
|
|
1077
|
+
*/ var version = "2.3.0-alpha.1";
|
|
977
1078
|
EFFECTS.registerPlugin("video", VideoLoader, EFFECTS.VFXItem, true);
|
|
978
1079
|
EFFECTS.registerPlugin("audio", AudioLoader, EFFECTS.VFXItem, true);
|
|
979
1080
|
EFFECTS.logger.info("Plugin multimedia version: " + version + ".");
|