@flexem/fc-gui 3.0.0-alpha.59 → 3.0.0-alpha.60

package/elements/video/video-element.d.ts

@@ -21,7 +21,6 @@ export declare class VideoElement extends ConditionalDisplayElement {
     hide(): void;
     show(): void;
     private init;
-    private initVideo;
     private addVideoAddressToolTip;
     private setAndroidVideo;
 }

package/elements/video/video-element.js

@@ -46,64 +46,63 @@ export class VideoElement extends ConditionalDisplayElement {
             return;
         }
         this.videoId = 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.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 (isNil(videoUrl) || videoUrl === '') {
-                videoToolTip = this.localization.unconfiguredVideoAddress;
+            const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+            let videoUrl = result.url;
+            const patt = /https:.+.m3u8/;
+            if (videoUrl.indexOf('http:') !== -1) {
+                videoUrl = videoUrl.replace('http:', 'https:');
             }
-            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 ';
+            if (!patt.test(videoUrl)) {
+                let videoToolTip = this.localization.invalidVideoAddress;
+                if (isNil(videoUrl) || videoUrl === '') {
+                    videoToolTip = this.localization.unconfiguredVideoAddress;
+                }
+                this.addVideoAddressToolTip(videoToolTip);
+                return;
+            }
+            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('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%')
+                .attr('playsInline', true)
+                .attr('webkit-playsinline', true);
+            if (this.isMobileMode) {
+                if (isAndroid) {
+                    if (result.isMobileType) {
+                        video.attr('controls', true);
+                    }
+                    video.attr('autoplay', true);
+                    video.attr('muted', true);
+                }
+                else {
+                    video.attr('controls', true);
+                    video.attr('muted', true);
                 }
-                videoHtml += ' autoplay muted></video>';
             }
             else {
-                videoHtml += ' controls muted></video>';
+                video.attr('controls', true);
+                video.attr('autoplay', true);
+                video.attr('muted', true);
             }
-        }
-        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);
-        }
+            if (this.isShow === false) {
+                $('#' + this.videoId).hide();
+            }
+            this.videoPlayer = new EZUIPlayer(this.videoId);
+            if (isAndroid && !result.isMobileType) {
+                this.setAndroidVideo(this.videoId);
+            }
+        }).catch(() => {
+            throw new Error('Failure of the videoService');
+        });
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;

package/elements/video/video-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":28,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":29,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initVideo":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"VideoElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":15,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":24,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":25,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":27,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":28,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":29,"character":34},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"addVideoAddressToolTip":[{"__symbolic":"method"}],"setAndroidVideo":[{"__symbolic":"method"}]}}}}]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.59",
+	"version": "3.0.0-alpha.60",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",