@flexem/fc-gui 3.0.0-alpha.141 → 3.0.0-alpha.142

package/elements/scroll-alarm/scroll-alarm-element.js

@@ -268,7 +268,7 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         this.container = document.createElement('div');
         this.container.style.cssText = `
             height: ${elementHeight}px;
-            width: 100%;
+            width: ${elementWidth}px;
             background-color: ${((_a = this.model.generalSetting) === null || _a === void 0 ? void 0 : _a.headerFillColor) || '#ffffff'};
             display: flex;
             align-items: center;
@@ -279,11 +279,11 @@ export class ScrollAlarmElement extends ConditionalDynamicDisplayElement {
         `;
         this.element.appendChild(this.container);
         // 创建一个大容器来包含所有告警项，初始位置在容器右侧（从右边开始滚入）
+        // 使用 position: relative 而非 absolute，避免 iOS Safari foreignObject 内 absolute 定位逃逸到页面左上角的 bug
         this.allAlarmsContainer = document.createElement('div');
         this.allAlarmsContainer.style.cssText = `
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
+            position: relative;
+            flex-shrink: 0;
             display: flex;
             align-items: center;
             gap: 80px;

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

@@ -19,6 +19,9 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private refreshTimer;
     private isFullscreen;
     private videoUrl;
+    private visibilityChangeHandler;
+    private timeUpdateWatchdog;
+    private lastTimeUpdate;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, videoService: VideoService, guiSize: Size, svgRootClass: string, signalRAppId: string);
     dispose(): void;
     hide(): void;
@@ -27,5 +30,8 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private initVideo;
     private addVideoAddressToolTip;
     private setAndroidVideo;
+    private initVisibilityHandler;
+    private startTimeUpdateWatchdog;
+    private clearTimeUpdateWatchdog;
     private setIosVideo;
 }

package/elements/video/video-element.js

@@ -12,8 +12,10 @@ export class VideoElement extends ConditionalDisplayElement {
         this.svgRootClass = svgRootClass;
         this.videoId = '';
         this.isFullscreen = false;
+        this.lastTimeUpdate = 0;
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         this.localization = injector.get(LOCALIZATION);
+        this.initVisibilityHandler();
         this.init();
     }
     dispose() {
@@ -23,6 +25,10 @@ export class VideoElement extends ConditionalDisplayElement {
         $('div.' + this.svgRootClass + ' video').each(function () {
             $(this).remove();
         });
+        if (this.visibilityChangeHandler) {
+            document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+        }
+        this.clearTimeUpdateWatchdog();
     }
     hide() {
         super.hide();
@@ -121,6 +127,7 @@ export class VideoElement extends ConditionalDisplayElement {
                         this.videoPlayer.play();
                     });
                 }
+                this.startTimeUpdateWatchdog(videoId);
             }
             catch (err) {
                 console.log(err);
@@ -206,6 +213,37 @@ export class VideoElement extends ConditionalDisplayElement {
             }
         });
     }
+    initVisibilityHandler() {
+        this.visibilityChangeHandler = () => {
+            if (!document.hidden && this.videoUrl && this.videoId) {
+                this.initVideo(this.videoUrl, this.videoId);
+            }
+        };
+        document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+    }
+    startTimeUpdateWatchdog(videoId) {
+        this.clearTimeUpdateWatchdog();
+        this.lastTimeUpdate = Date.now();
+        const videoEl = document.getElementById(videoId);
+        if (videoEl && videoEl.tagName === 'VIDEO') {
+            videoEl.addEventListener('timeupdate', () => {
+                this.lastTimeUpdate = Date.now();
+            });
+        }
+        this.timeUpdateWatchdog = setInterval(() => {
+            if (document.hidden)
+                return;
+            if (Date.now() - this.lastTimeUpdate > 30000) {
+                this.initVideo(this.videoUrl, this.videoId);
+            }
+        }, 30000);
+    }
+    clearTimeUpdateWatchdog() {
+        if (this.timeUpdateWatchdog) {
+            clearInterval(this.timeUpdateWatchdog);
+            this.timeUpdateWatchdog = null;
+        }
+    }
     setIosVideo(videoUrl, videoId) {
         const video = $('#' + this.videoId);
         video.on('webkitendfullscreen', () => {

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":27,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":29,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":31,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":32,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":33,"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"}],"setIosVideo":[{"__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":30,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":31,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":33,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":34,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":35,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":36,"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"}],"initVisibilityHandler":[{"__symbolic":"method"}],"startTimeUpdateWatchdog":[{"__symbolic":"method"}],"clearTimeUpdateWatchdog":[{"__symbolic":"method"}],"setIosVideo":[{"__symbolic":"method"}]}}}}]

package/package.json

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