@flexem/fc-gui 3.0.0-alpha.86 → 3.0.0-alpha.87
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/CHANGELOG.md +6 -1
- package/bundles/@flexem/fc-gui.umd.js +28 -0
- package/bundles/@flexem/fc-gui.umd.js.map +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js +1 -1
- package/bundles/@flexem/fc-gui.umd.min.js.map +1 -1
- package/elements/video/video-element.d.ts +2 -0
- package/elements/video/video-element.js +28 -0
- package/elements/video/video-element.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -19,6 +19,8 @@ export declare class VideoElement extends ConditionalDisplayElement {
|
|
|
19
19
|
private resetTimer;
|
|
20
20
|
private refreshTimer;
|
|
21
21
|
private isMobileType;
|
|
22
|
+
private clientRect;
|
|
23
|
+
private videoClientRect;
|
|
22
24
|
constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, videoService: VideoService, guiSize: Size, svgRootClass: string, signalRAppId: string);
|
|
23
25
|
dispose(): void;
|
|
24
26
|
hide(): void;
|
|
@@ -49,6 +49,7 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
49
49
|
this.videoService.getVideoUrl(this.model.videoTag).then(result => {
|
|
50
50
|
this.isMobileType = result.isMobileType;
|
|
51
51
|
const isAndroid = !!navigator.userAgent.match(/(Android)/i);
|
|
52
|
+
const isIos = !!navigator.userAgent.match(/(Mac)/i);
|
|
52
53
|
let videoUrl = result.url;
|
|
53
54
|
const patt = /https:.+.m3u8/;
|
|
54
55
|
if (videoUrl.indexOf('http:') !== -1) {
|
|
@@ -62,6 +63,7 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
62
63
|
this.addVideoAddressToolTip(videoToolTip);
|
|
63
64
|
return;
|
|
64
65
|
}
|
|
66
|
+
this.rootElement.attr('id', this.videoId + '-box');
|
|
65
67
|
const video = this.rootElement.append('foreignObject')
|
|
66
68
|
.attr('x', 0)
|
|
67
69
|
.attr('y', 0)
|
|
@@ -91,6 +93,32 @@ export class VideoElement extends ConditionalDisplayElement {
|
|
|
91
93
|
if (this.isShow === false) {
|
|
92
94
|
$('#' + this.videoId).hide();
|
|
93
95
|
}
|
|
96
|
+
if (isIos) {
|
|
97
|
+
const gElement = document.getElementById(this.videoId + '-box');
|
|
98
|
+
this.clientRect = this.clientRect || gElement.getBoundingClientRect();
|
|
99
|
+
const svgElement = document.querySelector('.svg-content > svg');
|
|
100
|
+
const svgClientRect = svgElement.getBoundingClientRect();
|
|
101
|
+
svgElement.style.overflow = 'visible';
|
|
102
|
+
const x = svgElement.clientWidth / this.clientRect.width;
|
|
103
|
+
const y = svgElement.clientHeight / this.clientRect.height;
|
|
104
|
+
this.rootElement.style('transform', `scale(${x}, ${y})`);
|
|
105
|
+
this.rootElement.style('transform-origin', 'left top');
|
|
106
|
+
video.style('z-index', 0);
|
|
107
|
+
setTimeout(() => {
|
|
108
|
+
this.videoClientRect = document.getElementById(this.videoId).getBoundingClientRect();
|
|
109
|
+
video.style('position', 'absolute');
|
|
110
|
+
video.style('left', this.clientRect.left + 'px');
|
|
111
|
+
video.style('top', this.clientRect.top - svgClientRect.top + 'px');
|
|
112
|
+
video.style('transform', `scale(${this.clientRect.width / this.videoClientRect.width}, ${this.clientRect.height / this.videoClientRect.height})`);
|
|
113
|
+
video.style('transform-origin', 'left top');
|
|
114
|
+
}, 300);
|
|
115
|
+
$('#' + this.videoId).bind('webkitendfullscreen', () => {
|
|
116
|
+
setTimeout(() => {
|
|
117
|
+
video.style('width', this.videoClientRect.width + 'px');
|
|
118
|
+
video.style('height', this.videoClientRect.height + 'px');
|
|
119
|
+
}, 1000);
|
|
120
|
+
});
|
|
121
|
+
}
|
|
94
122
|
this.videoPlayer = new EZUIPlayer(this.videoId);
|
|
95
123
|
if (isAndroid) {
|
|
96
124
|
setTimeout(() => {
|
|
@@ -1 +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":
|
|
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":29,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":30,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":31,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":32,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":33,"character":23},{"__symbolic":"reference","module":"../../service","name":"VideoService","line":34,"character":39},{"__symbolic":"reference","module":"../../model","name":"Size","line":35,"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"}],"bindFullscreenEvent":[{"__symbolic":"method"}]}}}}]
|