@flexem/fc-gui 3.0.0-alpha.18 → 3.0.0-alpha.180

package/elements/switch-indicator-light/switch-indicator-light-element.js

@@ -2,7 +2,7 @@ import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import * as d3 from 'd3-selection';
 import { isUndefined } from 'lodash';
 import { IndicatorLightType, SwitchType, State, BitSwitchOperation } from '../../model';
-import { VariableState } from '../../communication';
+import { VariableState, VariableStateEnum } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
 import { TextStateElement } from '../shared/text/text-state-element';
@@ -17,12 +17,15 @@ import { DisplayMode, GlobalSettings } from '../../settings';
 import { VariableUtil } from '../../utils/variable-util';
 import { VariableDefinition } from '../../communication/variable/variable-definition';
 export class SwitchIndicatorLightElement extends ConditionalEnableElement {
-    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
+    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId, textLibraryService, languageService, guiContext) {
         super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;
         this.securityChecker = securityChecker;
+        this.textLibraryService = textLibraryService;
+        this.languageService = languageService;
+        this.guiContext = guiContext;
         this.isBitRestoration = false; // 是否是 位设定且执行设置是复位
         this.isVerifiedForRestoration = false; // 位设定且执行设置是复位情况下，是否已经完成了验证
         this.isWriteRestorationDownValue = false;
@@ -32,7 +35,8 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
         if (this.model.useSwitch) {
             this.initSwitchOperator();
             this.rootElement.style('cursor', 'hand');
-            this.rootElement.on(this.isMobileMode ? 'touchstart' : 'mousedown', () => {
+            const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+            this.rootElement.on(this.isMobileMode && isMobile ? 'touchstart' : 'mousedown', () => {
                 if (!this.isInitialized) {
                     return;
                 }
@@ -59,7 +63,7 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
                         }
                         else {
                             this.checkElementPassword(false);
-                            if (!this.model.useIndicatorLight && !this.isMobileMode) {
+                            if (!this.model.useIndicatorLight) {
                                 this.switchToState(1);
                             }
                         }
@@ -74,7 +78,7 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
                     d3.event.preventDefault();
                 }
             });
-            this.rootElement.on(this.isMobileMode ? 'touchend' : 'mouseup', () => {
+            this.rootElement.on(this.isMobileMode && isMobile ? 'touchend' : 'mouseup', () => {
                 this.handleMouseUp();
                 d3.event.stopPropagation();
             });
@@ -99,7 +103,7 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
         document.removeEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
         this.isVerifiedForRestoration = false;
         this.isWriteRestorationDownValue = false;
-        if (!this.model.useIndicatorLight && !this.isMobileMode) {
+        if (!this.model.useIndicatorLight) {
             this.switchToState(0);
             if (d3.event) {
                 d3.event.preventDefault();
@@ -191,11 +195,21 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
         }
     }
     initIndictorLightOperator() {
+        var _a, _b, _c, _d, _e, _f;
         const settings = this.model.indicatorLightSettings;
         if (settings.settings.variableName) {
             const variable = new VariableDefinition(settings.settings.variableName, settings.settings.variableGroupName, settings.settings.dataSourceCode, settings.settings.variableVersion);
-            this.addElementState(new VariableState(VariableUtil.getConvertedVariableName(this.variableStore, variable), undefined));
+            const convertedName = VariableUtil.getConvertedVariableName(this.variableStore, variable);
+            this.addElementState(new VariableState(convertedName, undefined));
             this.initState();
+            // 模拟模式下优先用后端 GetVariablesForDesigner 查出的有效变量(绑定了 manager)；
+            // 运行模式不填充 validVariableNames，回退到 variableStore.getAllVariableNames()
+            const validNames = (_b = (_a = this.guiContext) === null || _a === void 0 ? void 0 : _a.validVariableNames) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this.guiContext) === null || _c === void 0 ? void 0 : _c.configStore) === null || _d === void 0 ? void 0 : _d.variableStore) === null || _e === void 0 ? void 0 : _e.getAllVariableNames) === null || _f === void 0 ? void 0 : _f.call(_e);
+            if (validNames && !validNames.includes(convertedName)) {
+                this.updateElementStates([new VariableState(convertedName, VariableStateEnum.InvalidMonitor)]);
+                this.switchToState(0);
+                return;
+            }
         }
         switch (settings.type) {
             case IndicatorLightType.Bit:
@@ -207,17 +221,26 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             default:
                 throw new Error(`Unknown switchType:${settings.type}`);
         }
-        this.indicatorLightOperator.currentStateIdChanged.subscribe(statusIdValue => {
+        this.indicatorLightSubscription = this.indicatorLightOperator.currentStateIdChanged.subscribe(statusIdValue => {
             this.currentStateIdChange(statusIdValue);
         });
         this.indicatorLightOperator.requestData(this.signalRAppId);
     }
     currentStateIdChange(statusIdValue) {
-        if (!isUndefined(statusIdValue.value)) {
-            this.switchToState(statusIdValue.value);
-        }
         this.updateElementStates([statusIdValue.state]);
         if (this.state === State.Unbind || this.state === State.Offline) {
+            if (!isUndefined(statusIdValue.value)) {
+                this.switchToState(statusIdValue.value);
+            }
+            else {
+                this.switchToState(0);
+            }
+        }
+        else if (!isUndefined(statusIdValue.value)) {
+            this.switchToState(statusIdValue.value);
+        }
+        else {
+            // 变量值为 null/undefined（含无效变量）时，显示第一个状态样式
             this.switchToState(0);
         }
     }
@@ -237,9 +260,44 @@ export class SwitchIndicatorLightElement extends ConditionalEnableElement {
             this.graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger, this.model.version, this.model.states);
             this.$element.append(this.graphStateElement.Element);
         }
-        this.textStateElement = new TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states);
+        this.textStateElement = new TextStateElement(this.model.states, width, height, this.logger, this.model.version, this.model.states, this.model.textLibrary, this.textLibraryService, this.languageService, this.guiContext, true, this.model.fontStyleCultures);
         this.$element.append(this.textStateElement.Element);
     }
+    /**
+     * 释放资源
+     */
+    dispose() {
+        // 释放文本元素资源（取消语种变化订阅等）
+        if (this.textStateElement) {
+            this.textStateElement.dispose();
+        }
+        // 释放指示灯操作器资源
+        if (this.indicatorLightOperator) {
+            // indicatorLightOperator 可能有自己的dispose方法
+        }
+        // 清除定时器
+        if (this.restorationTimer) {
+            clearTimeout(this.restorationTimer);
+            this.restorationTimer = undefined;
+        }
+        // 移除事件监听
+        if (this.onDocMouseUp) {
+            document.removeEventListener(this.isMobileMode ? 'touchend' : 'mouseup', this.onDocMouseUp);
+        }
+        // 清理 indicatorLightOperator 订阅
+        if (this.indicatorLightSubscription) {
+            this.indicatorLightSubscription.unsubscribe();
+        }
+        // 清理图形元素（释放 SVG 内存）
+        if (this.graphStateElement) {
+            this.graphStateElement.dispose();
+        }
+        // 清理文本元素
+        if (this.textStateElement) {
+            // TextStateElement 可能也需要 dispose，暂时先清理引用
+            this.textStateElement = null;
+        }
+    }
     checkState() {
         if (!this.model.states) {
             throw new Error('The switch indicator light\'s states is undefined.');

package/elements/switch-indicator-light/switch-indicator-light-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":32,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":50,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":51,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":52,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":53,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":54,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":55,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":56,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":57,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":58,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":59,"character":22},{"__symbolic":"reference","name":"string"}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SwitchIndicatorLightElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-enable-element","name":"ConditionalEnableElement","line":33,"character":49},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":52,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":18},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":54,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":55,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":56,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":57,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":58,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":59,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":60,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":61,"character":22},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","module":"../../service","name":"TextLibraryService","line":63,"character":46},{"__symbolic":"reference","module":"../../service","name":"LanguageService","line":64,"character":43},{"__symbolic":"reference","module":"../../gui/gui-context","name":"GuiContext","line":65,"character":38}]}],"handleMouseUp":[{"__symbolic":"method"}],"initOnDocMouseUpEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doSwitchOperator":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"initSwitchOperator":[{"__symbolic":"method"}],"initIndictorLightOperator":[{"__symbolic":"method"}],"currentStateIdChange":[{"__symbolic":"method"}],"switchToState":[{"__symbolic":"method"}],"initGraphAndText":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkState":[{"__symbolic":"method"}]}}}}]

package/elements/switch-indicator-light/word-indicator-light-operator.d.ts

@@ -10,6 +10,7 @@ export declare class WordIndicatorLightOperator implements IndicatorLightOperato
     private readonly variableStore;
     currentStateId?: number;
     currentStateIdChanged: EventEmitter<CurrentStateIdValue>;
+    private valueSubscription;
     private sortedStates;
     get variableName(): string;
     constructor(settings: WordIndicatorLightSettings, states: SwitchIndicatorState[], variableCommunicator: VariableCommunicator, variableStore: VariableStore);

package/elements/switch-indicator-light/word-indicator-light-operator.js

@@ -5,6 +5,7 @@ import { VariableStateEnum, VariableState } from '../../communication';
 import { CurrentStateIdValue } from './current-stateId-value';
 import { VariableUtil } from '../../utils/variable-util';
 import { VariableDefinition } from '../../communication/variable/variable-definition';
+import { GuiFeatureConfig } from '../../config';
 export class WordIndicatorLightOperator {
     constructor(settings, states, variableCommunicator, variableStore) {
         this.settings = settings;
@@ -26,8 +27,11 @@ export class WordIndicatorLightOperator {
                 if (variableValue.state === VariableStateEnum.Normal) {
                     this.requestCurrentSateIdValue(this.variableCommunicator, appId);
                 }
+                else if (GuiFeatureConfig.isOfflineDisplayEnabled && variableValue.state === VariableStateEnum.Offline && !this.valueSubscription) {
+                    this.requestCurrentSateIdValue(this.variableCommunicator, appId);
+                }
                 else {
-                    this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, variableValue.state)));
+                    this.currentStateIdChanged.emit(new CurrentStateIdValue(new VariableState(this.variableName, variableValue.state), this.currentStateId));
                 }
             });
         }
@@ -36,9 +40,12 @@ export class WordIndicatorLightOperator {
         }
     }
     requestCurrentSateIdValue(variableCommunicator, appId = '') {
+        if (this.valueSubscription) {
+            return;
+        }
         // TODO 检查状态id是从0-n连续编号的。
-        variableCommunicator.openVariable(this.variableName, appId).subscribe(value => {
-            if (value.state === VariableStateEnum.DataNormal) {
+        this.valueSubscription = variableCommunicator.openVariable(this.variableName, appId).subscribe(value => {
+            if (value.state === VariableStateEnum.DataNormal || (GuiFeatureConfig.isOfflineDisplayEnabled && value.state === VariableStateEnum.Offline)) {
                 let stateId = 0;
                 for (let index = 0; index < this.sortedStates.length - 1; index++) {
                     const element = this.sortedStates[index];

package/elements/switch-indicator-light/word-indicator-light-operator.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WordIndicatorLightOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"WordIndicatorLightSettings","line":23,"character":43},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../../model","name":"SwitchIndicatorState","line":24,"character":16}]},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":25,"character":47},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":26,"character":40}]}],"requestData":[{"__symbolic":"method"}],"requestCurrentSateIdValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WordIndicatorLightOperator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../model","name":"WordIndicatorLightSettings","line":25,"character":43},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../../model","name":"SwitchIndicatorState","line":26,"character":16}]},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":27,"character":47},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":28,"character":40}]}],"requestData":[{"__symbolic":"method"}],"requestCurrentSateIdValue":[{"__symbolic":"method"}]}}}}]

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

@@ -16,6 +16,12 @@ export declare class VideoElement extends ConditionalDisplayElement {
     private videoId;
     private isShow;
     private videoPlayer;
+    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;
@@ -24,4 +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

@@ -11,8 +11,11 @@ export class VideoElement extends ConditionalDisplayElement {
         this.guiSize = guiSize;
         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() {
@@ -22,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();
@@ -50,12 +57,20 @@ export class VideoElement extends ConditionalDisplayElement {
             .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);
+            this.videoUrl = result.url;
+            this.initVideo(result.url, this.videoId);
         }).catch(() => {
             throw new Error('Failure of the videoService');
         });
     }
-    initVideo(videoUrl, isMobileType, videoId) {
+    initVideo(videoUrl, videoId) {
+        // FLEXCLOUD-4155: 诊断日志，排查"长时间放置后卡死"问题，记录每次重建播放器的时间点
+        console.log(`[FLEXCLOUD-4155] initVideo called at ${new Date().toISOString()}, videoId=${videoId}, videoUrl=${videoUrl}`);
+        // FLEXCLOUD-4155: 强制清理旧的 video 元素，避免残留元素的错误蒙层
+        const oldVideoElement = document.getElementById(videoId);
+        if (oldVideoElement) {
+            oldVideoElement.remove();
+        }
         const patt = /https:.+.m3u8/;
         if (videoUrl.indexOf('http:') !== -1) {
             videoUrl = videoUrl.replace('http:', 'https:');
@@ -68,6 +83,8 @@ export class VideoElement extends ConditionalDisplayElement {
             this.addVideoAddressToolTip(videoToolTip);
             return;
         }
+        const isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        const isIos = !!navigator.userAgent.match(/(Mac)/i);
         const currentRect = this.$element.find('rect#rect' + videoId).first();
         if (!currentRect.length) {
             return;
@@ -77,17 +94,19 @@ export class VideoElement extends ConditionalDisplayElement {
         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);
+        const scareX = this.model.location.x / this.guiSize.width;
+        const scareY = this.model.location.y / this.guiSize.height;
+        if (isIos) {
+            videoUrl = videoUrl + '#t=1';
+        }
+        const preload = isIos ? ' preload=\'metadata\'' : '';
+        let videoHtml = `<video scareX="${scareX}"
+                scareY="${scareY}" id="${videoId}" ${preload} src="${videoUrl}" width="${chartWidth}" height="${chartHeight}"
+                style="position: absolute;top:${top}px;left:${left}px;object-fit:fill;z-index:0;"
+                playsInline webkit-playsinline `;
         if (this.isMobileMode) {
             if (isAndroid) {
-                if (isMobileType) {
-                    videoHtml += ' controls ';
-                }
-                videoHtml += ' autoplay muted></video>';
+                videoHtml += ' muted></video>';
             }
             else {
                 videoHtml += ' controls muted></video>';
@@ -100,10 +119,39 @@ export class VideoElement extends ConditionalDisplayElement {
         if (this.isShow === false) {
             $('#' + this.videoId).hide();
         }
-        this.videoPlayer = new EZUIPlayer(videoId);
-        if (isAndroid && !isMobileType) {
-            this.setAndroidVideo(videoId);
-        }
+        setTimeout(() => {
+            if (isAndroid) {
+                this.setAndroidVideo(videoId);
+            }
+            else if (isIos) {
+                this.setIosVideo(this.videoUrl, videoId);
+            }
+            try {
+                this.videoPlayer = new EZUIPlayer(videoId);
+                if (isAndroid) {
+                    // 确保在 EZUIPlayer 初始化后才调用 play 方法
+                    this.videoPlayer.on('canplay', () => {
+                        this.videoPlayer.play();
+                    });
+                }
+            }
+            catch (err) {
+                // FLEXCLOUD-4155: EZUIPlayer 内部对 opt.width 做 .replace 时可能因类型不是字符串而抛错，
+                // 但此时 hls.js/video 实际播放不受影响，不应因此中断 watchdog 的启动
+                console.error(`[FLEXCLOUD-4155] initVideo setTimeout callback error at ${new Date().toISOString()}, videoId=${videoId}:`, err);
+            }
+            finally {
+                // FLEXCLOUD-4155: 无论 EZUIPlayer 初始化是否抛错，watchdog 都必须启动，
+                // 否则后续真正的播放卡死（currentTime 停止推进）将无法被检测和自愈
+                this.startTimeUpdateWatchdog(videoId);
+                console.log(`[FLEXCLOUD-4155] watchdog started at ${new Date().toISOString()}, videoId=${videoId}`);
+            }
+        }, 1000);
+        const style = document.createElement('style');
+        style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {
+            display: none;
+        }`;
+        document.head.append();
     }
     addVideoAddressToolTip(videoToolTip) {
         const size = this.model.size;
@@ -126,35 +174,105 @@ export class VideoElement extends ConditionalDisplayElement {
         this.$element.append(textElement.Element);
     }
     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');
+        const { StatusBar } = window;
         videoElement.on('click', () => {
-            if (!isFullscreen) {
+            if (!this.isFullscreen) {
+                if (StatusBar) {
+                    StatusBar.hide();
+                }
                 preHeight = videoElement.height();
                 preWidth = videoElement.width();
                 preTop = videoElement.css('top');
                 preLeft = videoElement.css('left');
-                const width = document.body.clientWidth;
-                const height = width * 9 / 16;
+                const width = document.documentElement.clientWidth;
+                const height = document.documentElement.clientHeight;
+                videoElement.css('object-fit', 'contain');
+                videoElement.css('background', '#000000');
                 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;
+                videoElement.css('position', 'fixed');
+                this.isFullscreen = true;
+                try {
+                    screen.orientation.lock(screen.orientation.type);
+                }
+                catch (error) {
+                    console.error(error);
+                }
             }
             else {
+                videoElement.css('object-fit', 'fill');
                 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;
+                videoElement.css('position', 'absolute');
+                this.isFullscreen = false;
+                try {
+                    if (screen.orientation.type.includes('portrait')) {
+                        StatusBar.show();
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+        });
+    }
+    initVisibilityHandler() {
+        this.visibilityChangeHandler = () => {
+            // FLEXCLOUD-4155: 诊断日志，记录每次 visibilitychange 触发时的状态
+            console.log(`[FLEXCLOUD-4155] visibilitychange fired at ${new Date().toISOString()}, hidden=${document.hidden}, videoId=${this.videoId}`);
+            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(() => {
+            const idleMs = Date.now() - this.lastTimeUpdate;
+            if (document.hidden)
+                return;
+            if (idleMs > 30000) {
+                console.warn(`[FLEXCLOUD-4155] watchdog detected stall (idleMs=${idleMs}), triggering initVideo at ${new Date().toISOString()}, videoId=${videoId}`);
+                this.initVideo(this.videoUrl, this.videoId);
+            }
+        }, 30000);
+    }
+    clearTimeUpdateWatchdog() {
+        if (this.timeUpdateWatchdog) {
+            // FLEXCLOUD-4155: 诊断日志，记录 watchdog 何时被清除，排查是否有清除后未重建的空窗期
+            console.log(`[FLEXCLOUD-4155] watchdog cleared at ${new Date().toISOString()}`);
+            clearInterval(this.timeUpdateWatchdog);
+            this.timeUpdateWatchdog = null;
+        }
+    }
+    setIosVideo(videoUrl, videoId) {
+        const video = $('#' + this.videoId);
+        video.on('webkitendfullscreen', () => {
+            video.remove();
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+            this.refreshTimer = setTimeout(() => {
+                this.initVideo(videoUrl, videoId);
+            }, 500);
         });
     }
 }

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":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/elements/view-operation/view-operation.element.d.ts

@@ -3,11 +3,12 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 import { Localization } from '../../localization';
 import { GraphStore, VariableStore } from '../../config';
 import { ViewOperationElementModel } from '../../model';
-import { PermissionChecker, OperationRecordService } from '../../service';
+import { PermissionChecker, OperationRecordService, TextLibraryService, LanguageService } from '../../service';
 import { VariableCommunicator } from '../../communication';
 import { ConditionalEnableElement } from '../base/conditional-enable-element';
 import { PopupViewService } from '../../view/popup-view.service';
 import { SecurityChecker } from '../../security';
+import { GuiContext } from '../../gui/gui-context';
 export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly modalService;
     private readonly graphStore;
@@ -16,13 +17,18 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private readonly popupViewService;
     private readonly hostContainerId;
     private readonly el;
+    private readonly textLibraryService?;
+    private readonly languageService?;
+    private readonly guiContext?;
     protected model: ViewOperationElementModel;
     private readonly logger;
     private readonly viewService;
     private graphStateElement?;
+    private textElementModal?;
+    private languageChangeSubscription?;
     private touchedScreenX;
     private touchedScreenY;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, localization: Localization, popupViewService: PopupViewService, hostContainerId: string, el: ElementRef, signalRAppId: string, textLibraryService?: TextLibraryService, languageService?: LanguageService, guiContext?: GuiContext);
     private initElement;
     private switchToState;
     private initGraph;
@@ -33,4 +39,24 @@ export declare class ViewOperationElement extends ConditionalEnableElement {
     private closeView;
     private moveView;
     private recordViewOperation;
+    /**
+     * 订阅语种变化事件
+     */
+    private subscribeLanguageChange;
+    /**
+     * 获取当前语种的字体样式
+     */
+    private getFontStyle;
+    /**
+     * 更新文本内容（支持文本库和语种切换）
+     */
+    private updateTextContent;
+    /**
+     * 获取显示文本
+     */
+    private getDisplayText;
+    /**
+     * 释放资源
+     */
+    dispose(): void;
 }