@flexem/fc-gui 3.0.0-alpha.87 → 3.0.0-alpha.89

package/CHANGELOG.md

@@ -388,7 +388,17 @@
 #### Bug Fix
     1. FLEXCLOUD-2612 组态元件写值超时
 
-## 3.0.0-alpha.8(2023-05-31)
+## 3.0.0-alpha.87(2023-05-31)
 ### Web端
 #### Bug Fix
-    1. FLEXCLOUD-2698 【app-ios】视频元件放大后缩小不应占满整个组态
+    1. FLEXCLOUD-2698 【app-ios】视频元件放大后缩小不应占满整个组态
+
+## 3.0.0-alpha.88(2023-06-01)
+### Web端
+#### Bug Fix
+    1. FLEXCLOUD-2699、FLEXCLOUD-2700 将视频元件还原为在组态外渲染，并且在弹窗时隐藏视频
+
+## 3.0.0-alpha.89(2023-06-01)
+### Web端
+#### Bug Fix
+    1. FLEXCLOUD-2699、FLEXCLOUD-2700 修改视频元件，优化视频显示逻辑

package/bundles/@flexem/fc-gui.umd.js

@@ -39313,6 +39313,9 @@ class view_operation_element_ViewOperationElement extends conditional_enable_ele
         const viewIndex = this.model.viewIndex;
         if (null != viewIndex) {
             this.popupViewService.popView(viewIndex, this.hostContainerId, this.el).subscribe(() => this.recordViewOperation(), error => this.logger.error(`ToggleView(${viewIndex}) failed. ${error}`));
+            $(`#${this.hostContainerId} video`)
+                .addClass('video-hidden')
+                .css('visibility', 'hidden');
         }
         else {
             this.logger.error('[GUI]Toggle View:invalid view index');
@@ -39320,6 +39323,11 @@ class view_operation_element_ViewOperationElement extends conditional_enable_ele
     }
     closeView() {
         this.popupViewService.closeView();
+        if ($(`#${this.hostContainerId} svg`).length === 1) {
+            $(`#${this.hostContainerId} .video-hidden`)
+                .removeClass('video-hidden')
+                .css('visibility', 'visible');
+        }
         this.recordViewOperation();
     }
     moveView(movementX, movementY) {
@@ -39501,88 +39509,64 @@ class video_element_VideoElement extends conditional_display_element_Conditional
             return;
         }
         this.videoId = guid["a" /* Guid */].newGuid().toString('n');
+        this.rootElement.append('rect').attr('id', 'rect' + this.videoId).attr('fill', 'transparent')
+            .attr('width', this.model.size.width)
+            .attr('height', this.model.size.height);
         this.videoService.getVideoUrl(this.model.videoTag).then(result => {
-            this.isMobileType = result.isMobileType;
-            const isAndroid = !!navigator.userAgent.match(/(Android)/i);
-            const isIos = !!navigator.userAgent.match(/(Mac)/i);
-            let videoUrl = result.url;
-            const patt = /https:.+.m3u8/;
-            if (videoUrl.indexOf('http:') !== -1) {
-                videoUrl = videoUrl.replace('http:', 'https:');
-            }
-            if (!patt.test(videoUrl)) {
-                let videoToolTip = this.localization.invalidVideoAddress;
-                if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
-                    videoToolTip = this.localization.unconfiguredVideoAddress;
-                }
-                this.addVideoAddressToolTip(videoToolTip);
-                return;
+            this.initVideo(result.url, result.isMobileType, this.videoId);
+        }).catch(() => {
+            throw new Error('Failure of the videoService');
+        });
+    }
+    initVideo(videoUrl, isMobileType, videoId) {
+        const patt = /https:.+.m3u8/;
+        if (videoUrl.indexOf('http:') !== -1) {
+            videoUrl = videoUrl.replace('http:', 'https:');
+        }
+        if (!patt.test(videoUrl)) {
+            let videoToolTip = this.localization.invalidVideoAddress;
+            if (Object(lodash["isNil"])(videoUrl) || videoUrl === '') {
+                videoToolTip = this.localization.unconfiguredVideoAddress;
             }
-            this.rootElement.attr('id', this.videoId + '-box');
-            const video = this.rootElement.append('foreignObject')
-                .attr('x', 0)
-                .attr('y', 0)
-                .attr('width', this.model.size.width)
-                .attr('height', this.model.size.height)
-                .append('xhtml:video')
-                .attr('id', this.videoId)
-                .attr('class', 'element-video')
-                .attr('scareX', this.model.location.x / this.guiSize.width)
-                .attr('scareY', this.model.location.y / this.guiSize.height)
-                .attr('src', videoUrl)
-                .style('width', '100%')
-                .style('height', '100%')
-                .style('object-fit', 'fill')
-                .attr('playsInline', true)
-                .attr('webkit-playsinline', true)
-                .attr('controls', true)
-                .attr('muted', true);
-            if (this.isMobileMode) {
-                if (isAndroid) {
-                    video.attr('autoplay', true);
+            this.addVideoAddressToolTip(videoToolTip);
+            return;
+        }
+        const currentRect = this.$element.find('rect#rect' + videoId).first();
+        if (!currentRect.length) {
+            return;
+        }
+        const clientRect = currentRect[0].getBoundingClientRect();
+        const chartWidth = clientRect.width;
+        const chartHeight = clientRect.height;
+        const left = this.model.location.x / this.guiSize.width * $('.' + this.svgRootClass).find('.svg-content').width();
+        const top = this.model.location.y / this.guiSize.height * $('.' + this.svgRootClass).find('.svg-content').height();
+        let videoHtml = `<video scareX="${this.model.location.x / this.guiSize.width}"
+    scareY="${this.model.location.y / this.guiSize.height}" id="${videoId}" src="${videoUrl}" style="
+    position: absolute;top:${top}px;left:${left}px;width:${chartWidth}px;height:${chartHeight}px;object-fit:fill;z-index:0"
+    playsInline webkit-playsinline `;
+        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        if (this.isMobileMode) {
+            if (isAndroid) {
+                if (isMobileType) {
+                    videoHtml += ' controls ';
                 }
+                videoHtml += ' autoplay muted></video>';
             }
             else {
-                video.attr('autoplay', true);
-            }
-            if (this.isShow === false) {
-                $('#' + this.videoId).hide();
-            }
-            if (isIos) {
-                const gElement = document.getElementById(this.videoId + '-box');
-                this.clientRect = this.clientRect || gElement.getBoundingClientRect();
-                const svgElement = document.querySelector('.svg-content > svg');
-                const svgClientRect = svgElement.getBoundingClientRect();
-                svgElement.style.overflow = 'visible';
-                const x = svgElement.clientWidth / this.clientRect.width;
-                const y = svgElement.clientHeight / this.clientRect.height;
-                this.rootElement.style('transform', `scale(${x}, ${y})`);
-                this.rootElement.style('transform-origin', 'left top');
-                video.style('z-index', 0);
-                setTimeout(() => {
-                    this.videoClientRect = document.getElementById(this.videoId).getBoundingClientRect();
-                    video.style('position', 'absolute');
-                    video.style('left', this.clientRect.left + 'px');
-                    video.style('top', this.clientRect.top - svgClientRect.top + 'px');
-                    video.style('transform', `scale(${this.clientRect.width / this.videoClientRect.width}, ${this.clientRect.height / this.videoClientRect.height})`);
-                    video.style('transform-origin', 'left top');
-                }, 300);
-                $('#' + this.videoId).bind('webkitendfullscreen', () => {
-                    setTimeout(() => {
-                        video.style('width', this.videoClientRect.width + 'px');
-                        video.style('height', this.videoClientRect.height + 'px');
-                    }, 1000);
-                });
-            }
-            this.videoPlayer = new EZUIPlayer(this.videoId);
-            if (isAndroid) {
-                setTimeout(() => {
-                    this.setAndroidVideo();
-                }, 500);
+                videoHtml += ' controls muted></video>';
             }
-        }).catch(() => {
-            throw new Error('Failure of the videoService');
-        });
+        }
+        else {
+            videoHtml += ' controls autoplay muted></video>';
+        }
+        $('.' + this.svgRootClass).find('.svg-content').append(videoHtml);
+        if (this.isShow === false) {
+            $('#' + this.videoId).hide();
+        }
+        this.videoPlayer = new EZUIPlayer(videoId);
+        if (isAndroid && !isMobileType) {
+            this.setAndroidVideo(videoId);
+        }
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -39604,50 +39588,35 @@ class video_element_VideoElement extends conditional_display_element_Conditional
         const textElement = new text_element_TextElementModal(videoToolTip, font, size.width, size.height);
         this.$element.append(textElement.Element);
     }
-    setAndroidVideo() {
-        const { StatusBar } = window;
-        this.bindFullscreenEvent();
-        window.addEventListener('orientationchange', () => {
-            StatusBar.show();
-            this.hide();
-            clearTimeout(this.refreshTimer);
-            this.refreshTimer = null;
-            this.refreshTimer = setTimeout(() => {
-                this.init();
-                this.show();
-            }, 1000);
-        });
-    }
-    bindFullscreenEvent() {
-        const that = this;
-        const { StatusBar } = window;
-        $('#' + this.videoId).bind('webkitfullscreenchange', () => {
-            if (document.webkitIsFullScreen) {
-                $('#' + that.videoId).css({
-                    'object-fit': 'contain',
-                    'z-index': 99
-                });
-                StatusBar.hide();
+    setAndroidVideo(videoId) {
+        let isFullscreen = false;
+        const videoElement = $('#' + videoId);
+        let preHeight = videoElement.height();
+        let preWidth = videoElement.width();
+        let preTop = videoElement.css('top');
+        let preLeft = videoElement.css('left');
+        videoElement.on('click', () => {
+            if (!isFullscreen) {
+                preHeight = videoElement.height();
+                preWidth = videoElement.width();
+                preTop = videoElement.css('top');
+                preLeft = videoElement.css('left');
+                const width = document.body.clientWidth;
+                const height = width * 9 / 16;
+                videoElement.css('width', width + 'px');
+                videoElement.css('height', height + 'px');
+                videoElement.css('left', '0px');
+                videoElement.css('top', '0px');
+                videoElement.css('z-index', '99');
+                isFullscreen = true;
             }
             else {
-                StatusBar.show();
-                if (that.isMobileType) {
-                    $('#' + this.videoId).css('object-fit', document.webkitIsFullScreen ? 'contain' : 'fill');
-                }
-                else {
-                    clearTimeout(this.resetTimer);
-                    this.resetTimer = null;
-                    $('#' + this.videoId).css('display', 'none');
-                    this.resetTimer = setTimeout(() => {
-                        $('#' + this.videoId).css({
-                            'width': '100%',
-                            'height': '100%',
-                            'display': 'block',
-                            'z-index': 0,
-                            'object-fit': document.webkitIsFullScreen ? 'contain' : 'fill'
-                        });
-                    }, 1000);
-                }
+                videoElement.css('width', preWidth + 'px');
+                videoElement.css('height', preHeight + 'px');
+                videoElement.css('left', preLeft);
+                videoElement.css('top', preTop);
+                videoElement.css('z-index', '0');
+                isFullscreen = false;
             }
         });
     }