bfg-common 1.0.74 → 1.0.76

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.
Files changed (62) hide show
  1. package/components/atoms/alert/Notification.vue +167 -167
  2. package/components/atoms/autocomplete/Autocomplete.vue +236 -236
  3. package/components/atoms/datepicker/Datepicker.vue +612 -612
  4. package/components/atoms/list/SelectList.vue +62 -62
  5. package/components/atoms/modal/bySteps/BySteps.vue +234 -234
  6. package/components/atoms/nav/NavBar.vue +116 -116
  7. package/components/atoms/nav/VerticalNavBar.vue +89 -89
  8. package/components/atoms/notificationBar/NotificationBar.vue +174 -174
  9. package/components/atoms/perPage/PerPage.vue +52 -52
  10. package/components/atoms/popup/SimplePopup.vue +90 -90
  11. package/components/atoms/step/VerticalStep.vue +104 -104
  12. package/components/atoms/switch/Switch.vue +107 -107
  13. package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue +204 -204
  14. package/components/atoms/table/dataGrid/DataGridPage.vue +189 -189
  15. package/components/atoms/table/dataGrid/DataGridPagination.vue +83 -83
  16. package/components/atoms/tabs/Tabs.vue +189 -189
  17. package/components/atoms/tooltip/Signpost.vue +224 -224
  18. package/components/common/accordion/Recursion.vue +216 -216
  19. package/components/common/adapterManager/AddAdapterWarningModal.vue +82 -82
  20. package/components/common/adapterManager/NoActiveAdaptersModal.vue +62 -62
  21. package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue +62 -62
  22. package/components/common/browse/Browse.vue +182 -182
  23. package/components/common/browse/blocks/Title.vue +66 -66
  24. package/components/common/diagramMain/adapter/AdapterItem.vue +227 -227
  25. package/components/common/diagramMain/adapter/AdapterItems.vue +57 -57
  26. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +339 -339
  27. package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +202 -202
  28. package/components/common/diagramMain/modals/remove/RemoveModal.vue +226 -226
  29. package/components/common/diagramMain/modals/viewSettings/Info.vue +94 -94
  30. package/components/common/diagramMain/network/Contents.vue +238 -238
  31. package/components/common/feedback/Buttons.vue +232 -232
  32. package/components/common/feedback/Message.vue +468 -468
  33. package/components/common/feedback/VisitPortal.vue +54 -54
  34. package/components/common/mainNavigationPanel/MainNavigationPanel.vue +359 -359
  35. package/components/common/modals/Rename.vue +165 -165
  36. package/components/common/perPage/PerPage.vue +51 -51
  37. package/components/common/recursionTree/RecursionTree.vue +201 -201
  38. package/components/common/select/radio/RadioGroup.vue +50 -13
  39. package/components/common/select/radio/models/interfaces.ts +2 -6
  40. package/components/common/vm/actions/add/select/name/Name.vue +1 -1
  41. package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue +373 -373
  42. package/components/common/wizards/datastore/add/nfs/configuration/serversList/ServersList.vue +123 -123
  43. package/components/common/wizards/datastore/add/nfs/kerberosAuthentication/KerberosAuthentication.vue +54 -54
  44. package/components/common/wizards/datastore/add/nfs/version/Version.vue +9 -37
  45. package/components/common/wizards/datastore/add/nfs/version/config/versionOptions.ts +4 -4
  46. package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/hostTable/HostTable.vue +131 -131
  47. package/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue +230 -230
  48. package/components/common/wizards/datastore/add/sharedStorm/version/Version.vue +6 -37
  49. package/components/common/wizards/datastore/add/sharedStorm/version/config/versionOptions.ts +6 -4
  50. package/components/common/wizards/datastore/add/types/Types.vue +6 -66
  51. package/components/common/wizards/datastore/add/types/config/typeOptions.ts +11 -11
  52. package/models/store/storage/interfaces.ts +32 -32
  53. package/package.json +1 -1
  54. package/public/spice-console/application/codec.js +257 -257
  55. package/public/spice-console/lib/rasterEngine.js +907 -907
  56. package/public/spice-console/network/spicechannel.js +369 -369
  57. package/public/spice-console-minify/lib/decoder/dixie.min.js +4 -4
  58. package/public/spice-console-minify/lib/jgestures.min.js +24 -24
  59. package/public/spice-console-minify/lib/jquery-2.0.3.min.js +24 -24
  60. package/public/spice-console-minify/lib/jquery-mousewheel.min.js +11 -11
  61. package/public/spice-console-minify/lib/jquery-visibility.min.js +1 -1
  62. package/public/spice-console-minify/lib/lodash.4.0.0.min.js +5 -5
@@ -1,33 +1,33 @@
1
1
  import { UI_I_Localization } from '~/models/interfaces'
2
- import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
2
+ import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
3
3
 
4
4
  export const datastoreTypesFunc = (
5
5
  localization: UI_I_Localization
6
- ): UI_I_DatastoreTypeOption[] => {
6
+ ): UI_I_RadioOption[] => {
7
7
  return [
8
8
  {
9
9
  label: localization.localStorage,
10
10
  value: 'local',
11
11
  disabled: false,
12
- desc: localization.localDesc,
13
- isShowHelp: false,
14
- helpDesc: localization.localStorageHelpDesc,
12
+ description: localization.localDesc,
13
+ isTooltip: false,
14
+ tooltipContent: localization.localStorageHelpDesc,
15
15
  },
16
16
  {
17
17
  label: localization.stormSharedStorage,
18
18
  value: 'shared-storm',
19
19
  disabled: false,
20
- desc: localization.sharedStormDesc,
21
- isShowHelp: false,
22
- helpDesc: localization.stormSharedStorageHelpDesc,
20
+ description: localization.sharedStormDesc,
21
+ isTooltip: false,
22
+ tooltipContent: localization.stormSharedStorageHelpDesc,
23
23
  },
24
24
  {
25
25
  label: localization.nfs,
26
26
  value: 'nfs',
27
27
  disabled: false,
28
- desc: localization.nfsDesc,
29
- isShowHelp: false,
30
- helpDesc: localization.nfsHelpDesc,
28
+ description: localization.nfsDesc,
29
+ isTooltip: false,
30
+ tooltipContent: localization.nfsHelpDesc,
31
31
  },
32
32
  // {
33
33
  // label: localization.vVol,
@@ -1,32 +1,32 @@
1
- import { API_UI_I_Node } from '~/models/store/interfaces'
2
-
3
- export interface API_UI_I_DatastoreTableItemCapacity {
4
- capacity_mb: number
5
- provisioned_mb: number
6
- free_mb: number
7
- used_mb: number
8
- }
9
-
10
- export interface API_UI_I_DatastoreTableItem extends API_UI_I_Node {
11
- pool_name: string
12
- type_code: number
13
- type_text: string
14
- drive_type: string
15
- capacity: API_UI_I_DatastoreTableItemCapacity
16
- thin_provisioning: boolean
17
- access_mode: string
18
- hardware_acceleration: string
19
- device: string
20
- storage_io_control: boolean
21
- storage_compatibility: string
22
- }
23
-
24
- export interface UI_I_DatastoreTableItem extends API_UI_I_DatastoreTableItem {}
25
-
26
- export interface UI_I_FolderOrFileTreePayload {
27
- type: string
28
- id: string
29
- path: string
30
- merge: boolean
31
- show: boolean
32
- }
1
+ import { API_UI_I_Node } from '~/models/store/interfaces'
2
+
3
+ export interface API_UI_I_DatastoreTableItemCapacity {
4
+ capacity_mb: number
5
+ provisioned_mb: number
6
+ free_mb: number
7
+ used_mb: number
8
+ }
9
+
10
+ export interface API_UI_I_DatastoreTableItem extends API_UI_I_Node {
11
+ pool_name: string
12
+ type_code: number
13
+ type_text: string
14
+ drive_type: string
15
+ capacity: API_UI_I_DatastoreTableItemCapacity
16
+ thin_provisioning: boolean
17
+ access_mode: string
18
+ hardware_acceleration: string
19
+ device: string
20
+ storage_io_control: boolean
21
+ storage_compatibility: string
22
+ }
23
+
24
+ export interface UI_I_DatastoreTableItem extends API_UI_I_DatastoreTableItem {}
25
+
26
+ export interface UI_I_FolderOrFileTreePayload {
27
+ type: string
28
+ id: string
29
+ path: string
30
+ merge: boolean
31
+ show: boolean
32
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.0.74",
4
+ "version": "1.0.76",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",
@@ -1,257 +1,257 @@
1
- wdi.CodecH264 = {
2
- video: {},
3
- jmuxer: {},
4
- loadedVideo: {},
5
- queues: {},
6
- isReady: {},
7
-
8
- create: function (streamId) {
9
- if (this.video[streamId]) return
10
-
11
- const video = document.createElement('video')
12
- video.id = `video${streamId}`
13
- video.setAttribute('autoplay', '')
14
-
15
- this.video[streamId] = video
16
-
17
- this.jmuxer[streamId] = new JMuxer({
18
- node: video,
19
- mode: 'video',
20
- flushingTime: 0,
21
- fps: 60,
22
- onReady: () => {
23
- this.isReady[streamId] = true
24
- },
25
- })
26
- },
27
-
28
- addQueue: function (streamId, imageData) {
29
- if (!this.queues[streamId]) this.queues[streamId] = []
30
- this.queues[streamId].push(imageData)
31
- },
32
-
33
- resetQueues: function (streamId) {
34
- this.queues[streamId] = []
35
- },
36
-
37
- feed: function (streamId, data) {
38
- this._addListener(streamId)
39
-
40
- if (this.queues[streamId]?.length) {
41
- this.queues[streamId].forEach((queue) => {
42
- this.jmuxer[streamId].feed({
43
- video: queue,
44
- })
45
- })
46
- this.resetQueues(streamId)
47
- }
48
-
49
- this.jmuxer[streamId].feed({
50
- video: data,
51
- })
52
- },
53
-
54
- destroy: function (streamId) {
55
- this._removeListener(streamId)
56
- this.video[streamId]?.remove()
57
- this.video = {}
58
- this.jmuxer = {}
59
- this.loadedVideo = {}
60
- },
61
-
62
- _addListener: function (streamId) {
63
- this.video[streamId]?.removeEventListener(
64
- 'loadedmetadata',
65
- this.loadedVideo[streamId]
66
- )
67
- this.video[streamId].addEventListener(
68
- 'loadedmetadata',
69
- this.loadedVideo[streamId]
70
- )
71
- },
72
-
73
- _removeListener: function (streamId) {
74
- this.video[streamId]?.removeEventListener(
75
- 'loadedmetadata',
76
- this.loadedVideo[streamId]
77
- )
78
- },
79
- }
80
-
81
- wdi.CodecVp8 = {
82
- decoders: {},
83
-
84
- create: function (streamId) {
85
- this.decoders[streamId] = new vp8_decoder_ctx()
86
- },
87
-
88
- destroy: function () {
89
- this.decoders = {}
90
- },
91
-
92
- feed: function (streamId, imageData, context, box) {
93
- const errorCode = vp8_dixie_decode_frame(
94
- this.decoders[streamId],
95
- imageData,
96
- imageData.length
97
- )
98
- if (VPX_CODEC_OK === errorCode) {
99
- this._I420toRGBA(this.decoders[streamId].ref_frames[0].img, context, box)
100
- }
101
- },
102
-
103
- _I420toRGBA: function (vp8, context, box) {
104
- const yuvwidth = vp8.w
105
- const height = vp8.d_h
106
- const width = vp8.d_w
107
-
108
- let output = context.createImageData(width, height)
109
- let outputData = output.data
110
- let R, G, B
111
-
112
- for (let h = 0; h < height; h++) {
113
- for (let w = 0; w < width; w++) {
114
- const Y = vp8.planes[0][vp8.planes_off[0] + 0 + w + yuvwidth * h]
115
- const U =
116
- vp8.planes[1][
117
- vp8.planes_off[1] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
118
- ]
119
- const V =
120
- vp8.planes[2][
121
- vp8.planes_off[2] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
122
- ]
123
-
124
- R = Math.round(Y + 1.13983 * (V - 128))
125
- G = Math.round(Y - 0.39465 * (U - 128) - 0.5806 * (V - 128))
126
- B = Math.round(Y + 2.03211 * (U - 128))
127
-
128
- outputData[0 + w * 4 + width * 4 * h] = R
129
- outputData[1 + w * 4 + width * 4 * h] = G
130
- outputData[2 + w * 4 + width * 4 * h] = B
131
- outputData[3 + w * 4 + width * 4 * h] = 255
132
- }
133
- }
134
-
135
- context.putImageData(output, box.x, box.y)
136
- },
137
- }
138
-
139
- wdi.CodecH265 = {
140
- queue: {},
141
- configed: {},
142
- isReady: {},
143
- decoders: {},
144
- pendingFrames: {},
145
- underflow: {},
146
- baseTime: {},
147
-
148
- create: async function (streamId, context, box) {
149
- const init = {
150
- output: this._handleFrame.bind(this, streamId, context, box),
151
- error: (e) => {
152
- console.log(e)
153
- },
154
- }
155
- const config = {
156
- codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
157
- codedWidth: 640,
158
- codedHeight: 480,
159
- }
160
- const { supported } = await VideoDecoder.isConfigSupported(config)
161
- // Проверяем поддерживает ли браузер VideoDecoder
162
- if (supported) {
163
- this.decoders[streamId] = new VideoDecoder(init)
164
- this.decoders[streamId].configure(config)
165
- this.isReady[streamId] = true
166
- } else {
167
- // Try another config.
168
- console.log('not supported')
169
- }
170
- },
171
-
172
- destroy: function () {
173
- this.queue = {}
174
- this.configed = {}
175
- this.isReady = {}
176
- this.decoders = {}
177
- this.pendingFrames = {}
178
- this.underflow = {}
179
- this.baseTime = {}
180
- },
181
-
182
- addQueue: function (streamId, imageData) {
183
- if (!this.queues[streamId]) this.queues[streamId] = []
184
- this.queues[streamId].push(imageData)
185
- },
186
-
187
- resetQueues: function (streamId) {
188
- this.queues[streamId] = []
189
- },
190
-
191
- setConfig: function (streamId, box) {
192
- const config = {
193
- codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
194
- codedWidth: box.width,
195
- codedHeight: box.height,
196
- }
197
- this.decoders[streamId].configure(config)
198
- this.configed[streamId] = true
199
- },
200
-
201
- decode: function (streamId, imageData) {
202
- if (this.queue[streamId]?.length) {
203
- this.queue[streamId].forEach((data) => {
204
- const chunk = new EncodedVideoChunk({
205
- type: 'key',
206
- data: data,
207
- timestamp: performance.now(),
208
- })
209
- this.decoders[streamId].decode(chunk)
210
- })
211
- this.resetQueues(streamId)
212
- }
213
-
214
- const chunk = new EncodedVideoChunk({
215
- type: 'key',
216
- data: imageData,
217
- timestamp: performance.now(),
218
- })
219
- this.decoders[streamId].decode(chunk)
220
- },
221
-
222
- _handleFrame: function (streamId, context, box, frame) {
223
- if (!this.pendingFrames[streamId]) this.pendingFrames[streamId] = []
224
- this.pendingFrames[streamId].push(frame)
225
-
226
- if (this.underflow[streamId] === undefined) this.underflow[streamId] = true
227
- if (this.underflow[streamId])
228
- setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
229
- },
230
- _renderFrame: async function (streamId, context, box) {
231
- this.underflow[streamId] = this.pendingFrames[streamId].length === 0
232
- if (this.underflow[streamId]) return
233
-
234
- const frame = this.pendingFrames[streamId].shift()
235
-
236
- // Based on the frame's timestamp calculate how much of real time waiting
237
- // is needed before showing the next frame.
238
- const timeUntilNextFrame = this._calculateTimeUntilNextFrame(
239
- frame.timestamp,
240
- streamId
241
- )
242
- await new Promise((r) => {
243
- setTimeout(r, timeUntilNextFrame)
244
- })
245
-
246
- context.drawImage(frame, box.x, box.y, box.width, box.height)
247
- frame.close()
248
-
249
- // Immediately schedule rendering of the next frame
250
- setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
251
- },
252
- _calculateTimeUntilNextFrame: function (timestamp, streamId) {
253
- if (!this.baseTime[streamId]) this.baseTime[streamId] = performance.now()
254
- const mediaTime = performance.now() - this.baseTime[streamId]
255
- return Math.max(0, timestamp / 1000 - mediaTime)
256
- },
257
- }
1
+ wdi.CodecH264 = {
2
+ video: {},
3
+ jmuxer: {},
4
+ loadedVideo: {},
5
+ queues: {},
6
+ isReady: {},
7
+
8
+ create: function (streamId) {
9
+ if (this.video[streamId]) return
10
+
11
+ const video = document.createElement('video')
12
+ video.id = `video${streamId}`
13
+ video.setAttribute('autoplay', '')
14
+
15
+ this.video[streamId] = video
16
+
17
+ this.jmuxer[streamId] = new JMuxer({
18
+ node: video,
19
+ mode: 'video',
20
+ flushingTime: 0,
21
+ fps: 60,
22
+ onReady: () => {
23
+ this.isReady[streamId] = true
24
+ },
25
+ })
26
+ },
27
+
28
+ addQueue: function (streamId, imageData) {
29
+ if (!this.queues[streamId]) this.queues[streamId] = []
30
+ this.queues[streamId].push(imageData)
31
+ },
32
+
33
+ resetQueues: function (streamId) {
34
+ this.queues[streamId] = []
35
+ },
36
+
37
+ feed: function (streamId, data) {
38
+ this._addListener(streamId)
39
+
40
+ if (this.queues[streamId]?.length) {
41
+ this.queues[streamId].forEach((queue) => {
42
+ this.jmuxer[streamId].feed({
43
+ video: queue,
44
+ })
45
+ })
46
+ this.resetQueues(streamId)
47
+ }
48
+
49
+ this.jmuxer[streamId].feed({
50
+ video: data,
51
+ })
52
+ },
53
+
54
+ destroy: function (streamId) {
55
+ this._removeListener(streamId)
56
+ this.video[streamId]?.remove()
57
+ this.video = {}
58
+ this.jmuxer = {}
59
+ this.loadedVideo = {}
60
+ },
61
+
62
+ _addListener: function (streamId) {
63
+ this.video[streamId]?.removeEventListener(
64
+ 'loadedmetadata',
65
+ this.loadedVideo[streamId]
66
+ )
67
+ this.video[streamId].addEventListener(
68
+ 'loadedmetadata',
69
+ this.loadedVideo[streamId]
70
+ )
71
+ },
72
+
73
+ _removeListener: function (streamId) {
74
+ this.video[streamId]?.removeEventListener(
75
+ 'loadedmetadata',
76
+ this.loadedVideo[streamId]
77
+ )
78
+ },
79
+ }
80
+
81
+ wdi.CodecVp8 = {
82
+ decoders: {},
83
+
84
+ create: function (streamId) {
85
+ this.decoders[streamId] = new vp8_decoder_ctx()
86
+ },
87
+
88
+ destroy: function () {
89
+ this.decoders = {}
90
+ },
91
+
92
+ feed: function (streamId, imageData, context, box) {
93
+ const errorCode = vp8_dixie_decode_frame(
94
+ this.decoders[streamId],
95
+ imageData,
96
+ imageData.length
97
+ )
98
+ if (VPX_CODEC_OK === errorCode) {
99
+ this._I420toRGBA(this.decoders[streamId].ref_frames[0].img, context, box)
100
+ }
101
+ },
102
+
103
+ _I420toRGBA: function (vp8, context, box) {
104
+ const yuvwidth = vp8.w
105
+ const height = vp8.d_h
106
+ const width = vp8.d_w
107
+
108
+ let output = context.createImageData(width, height)
109
+ let outputData = output.data
110
+ let R, G, B
111
+
112
+ for (let h = 0; h < height; h++) {
113
+ for (let w = 0; w < width; w++) {
114
+ const Y = vp8.planes[0][vp8.planes_off[0] + 0 + w + yuvwidth * h]
115
+ const U =
116
+ vp8.planes[1][
117
+ vp8.planes_off[1] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
118
+ ]
119
+ const V =
120
+ vp8.planes[2][
121
+ vp8.planes_off[2] + 0 + (w >> 1) + (yuvwidth >> 1) * (h >> 1)
122
+ ]
123
+
124
+ R = Math.round(Y + 1.13983 * (V - 128))
125
+ G = Math.round(Y - 0.39465 * (U - 128) - 0.5806 * (V - 128))
126
+ B = Math.round(Y + 2.03211 * (U - 128))
127
+
128
+ outputData[0 + w * 4 + width * 4 * h] = R
129
+ outputData[1 + w * 4 + width * 4 * h] = G
130
+ outputData[2 + w * 4 + width * 4 * h] = B
131
+ outputData[3 + w * 4 + width * 4 * h] = 255
132
+ }
133
+ }
134
+
135
+ context.putImageData(output, box.x, box.y)
136
+ },
137
+ }
138
+
139
+ wdi.CodecH265 = {
140
+ queue: {},
141
+ configed: {},
142
+ isReady: {},
143
+ decoders: {},
144
+ pendingFrames: {},
145
+ underflow: {},
146
+ baseTime: {},
147
+
148
+ create: async function (streamId, context, box) {
149
+ const init = {
150
+ output: this._handleFrame.bind(this, streamId, context, box),
151
+ error: (e) => {
152
+ console.log(e)
153
+ },
154
+ }
155
+ const config = {
156
+ codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
157
+ codedWidth: 640,
158
+ codedHeight: 480,
159
+ }
160
+ const { supported } = await VideoDecoder.isConfigSupported(config)
161
+ // Проверяем поддерживает ли браузер VideoDecoder
162
+ if (supported) {
163
+ this.decoders[streamId] = new VideoDecoder(init)
164
+ this.decoders[streamId].configure(config)
165
+ this.isReady[streamId] = true
166
+ } else {
167
+ // Try another config.
168
+ console.log('not supported')
169
+ }
170
+ },
171
+
172
+ destroy: function () {
173
+ this.queue = {}
174
+ this.configed = {}
175
+ this.isReady = {}
176
+ this.decoders = {}
177
+ this.pendingFrames = {}
178
+ this.underflow = {}
179
+ this.baseTime = {}
180
+ },
181
+
182
+ addQueue: function (streamId, imageData) {
183
+ if (!this.queues[streamId]) this.queues[streamId] = []
184
+ this.queues[streamId].push(imageData)
185
+ },
186
+
187
+ resetQueues: function (streamId) {
188
+ this.queues[streamId] = []
189
+ },
190
+
191
+ setConfig: function (streamId, box) {
192
+ const config = {
193
+ codec: wdi.SpiceVideoCodecValue[wdi.currentCodec],
194
+ codedWidth: box.width,
195
+ codedHeight: box.height,
196
+ }
197
+ this.decoders[streamId].configure(config)
198
+ this.configed[streamId] = true
199
+ },
200
+
201
+ decode: function (streamId, imageData) {
202
+ if (this.queue[streamId]?.length) {
203
+ this.queue[streamId].forEach((data) => {
204
+ const chunk = new EncodedVideoChunk({
205
+ type: 'key',
206
+ data: data,
207
+ timestamp: performance.now(),
208
+ })
209
+ this.decoders[streamId].decode(chunk)
210
+ })
211
+ this.resetQueues(streamId)
212
+ }
213
+
214
+ const chunk = new EncodedVideoChunk({
215
+ type: 'key',
216
+ data: imageData,
217
+ timestamp: performance.now(),
218
+ })
219
+ this.decoders[streamId].decode(chunk)
220
+ },
221
+
222
+ _handleFrame: function (streamId, context, box, frame) {
223
+ if (!this.pendingFrames[streamId]) this.pendingFrames[streamId] = []
224
+ this.pendingFrames[streamId].push(frame)
225
+
226
+ if (this.underflow[streamId] === undefined) this.underflow[streamId] = true
227
+ if (this.underflow[streamId])
228
+ setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
229
+ },
230
+ _renderFrame: async function (streamId, context, box) {
231
+ this.underflow[streamId] = this.pendingFrames[streamId].length === 0
232
+ if (this.underflow[streamId]) return
233
+
234
+ const frame = this.pendingFrames[streamId].shift()
235
+
236
+ // Based on the frame's timestamp calculate how much of real time waiting
237
+ // is needed before showing the next frame.
238
+ const timeUntilNextFrame = this._calculateTimeUntilNextFrame(
239
+ frame.timestamp,
240
+ streamId
241
+ )
242
+ await new Promise((r) => {
243
+ setTimeout(r, timeUntilNextFrame)
244
+ })
245
+
246
+ context.drawImage(frame, box.x, box.y, box.width, box.height)
247
+ frame.close()
248
+
249
+ // Immediately schedule rendering of the next frame
250
+ setTimeout(this._renderFrame.bind(this, streamId, context, box), 0)
251
+ },
252
+ _calculateTimeUntilNextFrame: function (timestamp, streamId) {
253
+ if (!this.baseTime[streamId]) this.baseTime[streamId] = performance.now()
254
+ const mediaTime = performance.now() - this.baseTime[streamId]
255
+ return Math.max(0, timestamp / 1000 - mediaTime)
256
+ },
257
+ }