@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

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 (302) hide show
  1. package/README.md +90 -71
  2. package/dist/components/icons/index.d.ts +36 -0
  3. package/dist/components/icons/index.d.ts.map +1 -0
  4. package/dist/components/icons/svg-icons/ArrowLeftIcon.d.ts +4 -0
  5. package/dist/components/icons/svg-icons/ArrowLeftIcon.d.ts.map +1 -0
  6. package/dist/components/icons/svg-icons/ArrowRightIcon.d.ts +5 -0
  7. package/dist/components/icons/svg-icons/ArrowRightIcon.d.ts.map +1 -0
  8. package/dist/components/icons/svg-icons/AudioIcon.d.ts +5 -0
  9. package/dist/components/icons/svg-icons/AudioIcon.d.ts.map +1 -0
  10. package/dist/components/icons/svg-icons/BackwardIcon.d.ts +5 -0
  11. package/dist/components/icons/svg-icons/BackwardIcon.d.ts.map +1 -0
  12. package/dist/components/icons/svg-icons/CameraIcon.d.ts +5 -0
  13. package/dist/components/icons/svg-icons/CameraIcon.d.ts.map +1 -0
  14. package/dist/components/icons/svg-icons/CheckIcon.d.ts +5 -0
  15. package/dist/components/icons/svg-icons/CheckIcon.d.ts.map +1 -0
  16. package/dist/components/icons/svg-icons/EnablePiPIcon.d.ts +4 -0
  17. package/dist/components/icons/svg-icons/EnablePiPIcon.d.ts.map +1 -0
  18. package/dist/components/icons/svg-icons/ForwardIcon.d.ts +5 -0
  19. package/dist/components/icons/svg-icons/ForwardIcon.d.ts.map +1 -0
  20. package/dist/components/icons/svg-icons/FullscreenEnterIcon.d.ts +5 -0
  21. package/dist/components/icons/svg-icons/FullscreenEnterIcon.d.ts.map +1 -0
  22. package/dist/components/icons/svg-icons/FullscreenExitIcon.d.ts +5 -0
  23. package/dist/components/icons/svg-icons/FullscreenExitIcon.d.ts.map +1 -0
  24. package/dist/components/icons/svg-icons/LoadingIcon.d.ts +5 -0
  25. package/dist/components/icons/svg-icons/LoadingIcon.d.ts.map +1 -0
  26. package/dist/components/icons/svg-icons/PauseIcon.d.ts +5 -0
  27. package/dist/components/icons/svg-icons/PauseIcon.d.ts.map +1 -0
  28. package/dist/components/icons/svg-icons/PlayIcon.d.ts +5 -0
  29. package/dist/components/icons/svg-icons/PlayIcon.d.ts.map +1 -0
  30. package/dist/components/icons/svg-icons/PlaybackSpeedIcon.d.ts +5 -0
  31. package/dist/components/icons/svg-icons/PlaybackSpeedIcon.d.ts.map +1 -0
  32. package/dist/components/icons/svg-icons/QualityIcon.d.ts +5 -0
  33. package/dist/components/icons/svg-icons/QualityIcon.d.ts.map +1 -0
  34. package/dist/components/icons/svg-icons/SettingsIcon.d.ts +5 -0
  35. package/dist/components/icons/svg-icons/SettingsIcon.d.ts.map +1 -0
  36. package/dist/components/icons/svg-icons/SliderIcon.d.ts +5 -0
  37. package/dist/components/icons/svg-icons/SliderIcon.d.ts.map +1 -0
  38. package/dist/components/icons/svg-icons/SubtitleIcon.d.ts +5 -0
  39. package/dist/components/icons/svg-icons/SubtitleIcon.d.ts.map +1 -0
  40. package/dist/components/icons/svg-icons/SubtitleOffIcon.d.ts +5 -0
  41. package/dist/components/icons/svg-icons/SubtitleOffIcon.d.ts.map +1 -0
  42. package/dist/components/icons/svg-icons/UnPiPIcon.d.ts +4 -0
  43. package/dist/components/icons/svg-icons/UnPiPIcon.d.ts.map +1 -0
  44. package/dist/components/icons/svg-icons/VolumeMutedIcon.d.ts +5 -0
  45. package/dist/components/icons/svg-icons/VolumeMutedIcon.d.ts.map +1 -0
  46. package/dist/components/icons/svg-icons/VolumeOneIcon.d.ts +5 -0
  47. package/dist/components/icons/svg-icons/VolumeOneIcon.d.ts.map +1 -0
  48. package/dist/components/icons/svg-icons/VolumeThreeIcon.d.ts +5 -0
  49. package/dist/components/icons/svg-icons/VolumeThreeIcon.d.ts.map +1 -0
  50. package/dist/components/icons/svg-icons/VolumeTwoIcon.d.ts +5 -0
  51. package/dist/components/icons/svg-icons/VolumeTwoIcon.d.ts.map +1 -0
  52. package/dist/components/variants/gradient/gradient-audio.d.ts +13 -0
  53. package/dist/components/variants/gradient/gradient-audio.d.ts.map +1 -0
  54. package/dist/components/variants/gradient/gradient-controls.d.ts +4 -0
  55. package/dist/components/variants/gradient/gradient-controls.d.ts.map +1 -0
  56. package/dist/components/variants/gradient/gradient-glyphs.d.ts +30 -0
  57. package/dist/components/variants/gradient/gradient-glyphs.d.ts.map +1 -0
  58. package/dist/components/variants/gradient/gradient-video.d.ts +16 -0
  59. package/dist/components/variants/gradient/gradient-video.d.ts.map +1 -0
  60. package/dist/index.css +1 -1
  61. package/dist/index.d.ts +5 -0
  62. package/dist/index.d.ts.map +1 -0
  63. package/dist/index.js +1 -41
  64. package/dist/index.js.map +1 -1
  65. package/dist/index.mjs +750 -5640
  66. package/dist/index.mjs.map +1 -1
  67. package/dist/package.json +3 -0
  68. package/package.json +110 -114
  69. package/src/components/variants/gradient/gradient-audio.tsx +47 -0
  70. package/src/components/variants/gradient/gradient-controls.tsx +254 -0
  71. package/src/components/variants/gradient/gradient-glyphs.test.tsx +69 -0
  72. package/src/components/variants/gradient/gradient-glyphs.tsx +129 -0
  73. package/src/components/variants/gradient/gradient-skin.css +211 -0
  74. package/src/components/variants/gradient/gradient-video.tsx +70 -0
  75. package/src/index.ts +5 -198
  76. package/src/test/accessibility-utils.ts +0 -59
  77. package/dist/context/media.js +0 -1
  78. package/dist/context/media.mjs +0 -3
  79. package/dist/context/store.js +0 -1
  80. package/dist/context/store.mjs +0 -3
  81. package/dist/context-Bzd5QCKM.cjs +0 -7
  82. package/dist/context-Bzd5QCKM.cjs.map +0 -1
  83. package/dist/context-DD_SH4tT.js +0 -1053
  84. package/dist/context-DD_SH4tT.js.map +0 -1
  85. package/dist/core-events-BRnLMB7s.cjs +0 -2
  86. package/dist/core-events-BRnLMB7s.cjs.map +0 -1
  87. package/dist/core-events-v_mKdj5p.js +0 -417
  88. package/dist/core-events-v_mKdj5p.js.map +0 -1
  89. package/dist/core-plugins-CMBv-yVh.cjs +0 -2
  90. package/dist/core-plugins-CMBv-yVh.cjs.map +0 -1
  91. package/dist/core-plugins-CqCxLkbd.js +0 -754
  92. package/dist/core-plugins-CqCxLkbd.js.map +0 -1
  93. package/dist/core.js +0 -15
  94. package/dist/core.js.map +0 -1
  95. package/dist/core.mjs +0 -960
  96. package/dist/core.mjs.map +0 -1
  97. package/dist/enhanced-components-BwjBqSA1.js +0 -2858
  98. package/dist/enhanced-components-BwjBqSA1.js.map +0 -1
  99. package/dist/enhanced-components-C-ka-XLp.cjs +0 -2
  100. package/dist/enhanced-components-C-ka-XLp.cjs.map +0 -1
  101. package/dist/hooks-B-IIWPJr.js +0 -1842
  102. package/dist/hooks-B-IIWPJr.js.map +0 -1
  103. package/dist/hooks-DcHzmBwA.cjs +0 -4
  104. package/dist/hooks-DcHzmBwA.cjs.map +0 -1
  105. package/dist/minimal-components-BYsMQde5.js +0 -1610
  106. package/dist/minimal-components-BYsMQde5.js.map +0 -1
  107. package/dist/minimal-components-CsxQbDp7.cjs +0 -2
  108. package/dist/minimal-components-CsxQbDp7.cjs.map +0 -1
  109. package/dist/minimal-components.css +0 -1
  110. package/dist/mona-loading.gif +0 -0
  111. package/dist/performance-monitor-DCSijLJg.js +0 -312
  112. package/dist/performance-monitor-DCSijLJg.js.map +0 -1
  113. package/dist/performance-monitor-wNFKmqMr.cjs +0 -2
  114. package/dist/performance-monitor-wNFKmqMr.cjs.map +0 -1
  115. package/dist/rolldown-runtime-BmowowmI.js +0 -14
  116. package/dist/rolldown-runtime-mLOUI7ql.cjs +0 -1
  117. package/dist/utils-D2gQ7c2R.js +0 -64
  118. package/dist/utils-D2gQ7c2R.js.map +0 -1
  119. package/dist/utils-DJaAwiZ9.cjs +0 -2
  120. package/dist/utils-DJaAwiZ9.cjs.map +0 -1
  121. package/dist/utils.js +0 -1
  122. package/dist/utils.mjs +0 -3
  123. package/src/adapters/videojs-adapter.tsx +0 -470
  124. package/src/assets/mona-loading.gif +0 -0
  125. package/src/components/AnimateLoading.tsx +0 -111
  126. package/src/components/LoadingState.tsx +0 -239
  127. package/src/components/__tests__/media-player-accessibility.test.tsx +0 -510
  128. package/src/components/__tests__/media-player-react19.test.tsx +0 -457
  129. package/src/components/accessibility/keyboard-help-overlay.tsx +0 -207
  130. package/src/components/audio-player.tsx +0 -85
  131. package/src/components/basic/index.ts +0 -37
  132. package/src/components/enhanced/advanced-features.tsx +0 -311
  133. package/src/components/enhanced/debug-panel.tsx +0 -448
  134. package/src/components/enhanced/enhanced-controls.tsx +0 -597
  135. package/src/components/enhanced/enhanced-media-player.tsx +0 -566
  136. package/src/components/enhanced/error-handling.tsx +0 -338
  137. package/src/components/enhanced/index.ts +0 -39
  138. package/src/components/enhanced/media-player-enhanced.tsx +0 -383
  139. package/src/components/examples/basic-video-player.tsx +0 -50
  140. package/src/components/examples/custom-controls-example.tsx +0 -63
  141. package/src/components/examples/enhanced-controls-example.tsx +0 -100
  142. package/src/components/examples/enhanced-media-player-example.tsx +0 -302
  143. package/src/components/examples/loading-states-demo.tsx +0 -141
  144. package/src/components/examples/react-19-demo.tsx +0 -349
  145. package/src/components/examples/volume-orientation-demo.tsx +0 -105
  146. package/src/components/icon-demo.tsx +0 -196
  147. package/src/components/legacy.tsx +0 -87
  148. package/src/components/media-metadata-display.tsx +0 -99
  149. package/src/components/media-player-audio.tsx +0 -39
  150. package/src/components/media-player-controls.tsx +0 -223
  151. package/src/components/media-player-error.tsx +0 -163
  152. package/src/components/media-player-fullscreen.tsx +0 -109
  153. package/src/components/media-player-hls.tsx +0 -111
  154. package/src/components/media-player-loading.tsx +0 -76
  155. package/src/components/media-player-play.tsx +0 -75
  156. package/src/components/media-player-root.tsx +0 -338
  157. package/src/components/media-player-seek.tsx +0 -168
  158. package/src/components/media-player-time.tsx +0 -99
  159. package/src/components/media-player-tooltip.tsx +0 -58
  160. package/src/components/media-player-video.tsx +0 -54
  161. package/src/components/media-player-volume.tsx +0 -155
  162. package/src/components/media-player.tsx +0 -292
  163. package/src/components/media-suspense.tsx +0 -344
  164. package/src/components/player-settings-form.tsx +0 -158
  165. package/src/components/react-player-wrapper.tsx +0 -651
  166. package/src/components/simple-video-player.tsx +0 -62
  167. package/src/components/ui/blur-poster.tsx +0 -96
  168. package/src/components/ui/empty-state.tsx +0 -91
  169. package/src/components/ui/enhanced-seek-bar.tsx +0 -254
  170. package/src/components/ui/error-state.tsx +0 -124
  171. package/src/components/ui/fullscreen-button.tsx +0 -81
  172. package/src/components/ui/loading-skeleton.tsx +0 -107
  173. package/src/components/ui/media-resource-preloader.tsx +0 -458
  174. package/src/components/ui/offline-message.tsx +0 -98
  175. package/src/components/ui/play-button.tsx +0 -99
  176. package/src/components/ui/seek-bar.tsx +0 -191
  177. package/src/components/ui/time-display.tsx +0 -61
  178. package/src/components/ui/volume-control.tsx +0 -190
  179. package/src/components/unified/base-media-player.tsx +0 -252
  180. package/src/components/unified/media-player.tsx +0 -75
  181. package/src/components/variants/minimal/AccessibleMinimalPlayer.tsx +0 -587
  182. package/src/components/variants/minimal/EnhancedMinimalMediaPlayer.tsx +0 -573
  183. package/src/components/variants/minimal/MinimalControls.tsx +0 -124
  184. package/src/components/variants/minimal/MinimalLoading.tsx +0 -28
  185. package/src/components/variants/minimal/MinimalMediaPlayer.tsx +0 -318
  186. package/src/components/variants/minimal/MinimalOverlay.tsx +0 -58
  187. package/src/components/variants/minimal/MinimalPlayButton.tsx +0 -56
  188. package/src/components/variants/minimal/MinimalSeekBar.tsx +0 -140
  189. package/src/components/variants/minimal/MinimalVolumeControl.tsx +0 -75
  190. package/src/components/variants/minimal/SimpleMinimalPlayer.tsx +0 -206
  191. package/src/components/variants/minimal/components/CenterPlayButton.tsx +0 -22
  192. package/src/components/variants/minimal/components/ControlBar.tsx +0 -142
  193. package/src/components/variants/minimal/components/EnhancedSettingsMenu.tsx +0 -412
  194. package/src/components/variants/minimal/components/PlaybackControls.tsx +0 -46
  195. package/src/components/variants/minimal/components/RightControls.tsx +0 -164
  196. package/src/components/variants/minimal/components/SeekBar.tsx +0 -127
  197. package/src/components/variants/minimal/components/SettingsDropdown.tsx +0 -68
  198. package/src/components/variants/minimal/components/SubtitleDisplay.tsx +0 -21
  199. package/src/components/variants/minimal/components/TimeDisplay.tsx +0 -15
  200. package/src/components/variants/minimal/components/VideoElement.tsx +0 -35
  201. package/src/components/variants/minimal/components/VolumeControl.tsx +0 -220
  202. package/src/components/variants/minimal/index.ts +0 -23
  203. package/src/components/video-player.tsx +0 -100
  204. package/src/context/__tests__/media-store.test.ts +0 -509
  205. package/src/context/error-handling.ts +0 -398
  206. package/src/context/media-context.tsx +0 -254
  207. package/src/context/media-provider.tsx +0 -264
  208. package/src/context/media-store.ts +0 -387
  209. package/src/context/persistence.ts +0 -462
  210. package/src/core/events/event-system.ts +0 -448
  211. package/src/core/events/hooks.ts +0 -325
  212. package/src/core/events/index.ts +0 -22
  213. package/src/core/events/middleware.ts +0 -286
  214. package/src/core/index.ts +0 -22
  215. package/src/core/optimization/bundle-optimizer.tsx +0 -312
  216. package/src/core/performance/cicd.ts +0 -98
  217. package/src/core/performance/index.ts +0 -38
  218. package/src/core/performance/media-loading-optimizer.ts +0 -545
  219. package/src/core/performance/performance-budgets.ts +0 -437
  220. package/src/core/performance/performance-monitor.tsx +0 -488
  221. package/src/core/performance/performance-testing.ts +0 -461
  222. package/src/core/plugins/__tests__/registry.test.ts +0 -595
  223. package/src/core/plugins/base-plugin.ts +0 -225
  224. package/src/core/plugins/enhanced-plugin-system.ts +0 -435
  225. package/src/core/plugins/examples/analytics-plugin.ts +0 -241
  226. package/src/core/plugins/index.ts +0 -39
  227. package/src/core/plugins/registry.ts +0 -546
  228. package/src/core/plugins/types.ts +0 -169
  229. package/src/core/plugins/utils.ts +0 -317
  230. package/src/core/progressive-loading.tsx +0 -331
  231. package/src/core/providers/enhanced-hls-provider.ts +0 -307
  232. package/src/core/providers/lazy-provider.tsx +0 -14
  233. package/src/core/providers/service-provider.tsx +0 -164
  234. package/src/core/utils.tsx +0 -34
  235. package/src/features/media-session/media-session-manager.ts +0 -411
  236. package/src/features/picture-in-picture/pip-manager.ts +0 -428
  237. package/src/features/playlist/playlist-manager.ts +0 -626
  238. package/src/features/subtitles/subtitle-manager.ts +0 -435
  239. package/src/features/subtitles/subtitle-parser.ts +0 -284
  240. package/src/features/thumbnails/thumbnail-generator.ts +0 -528
  241. package/src/hooks/__tests__/currentTime-fix.test.ts +0 -149
  242. package/src/hooks/__tests__/use-media-player.test.ts +0 -712
  243. package/src/hooks/__tests__/use-media-state.test.tsx +0 -316
  244. package/src/hooks/accessibility/index.ts +0 -27
  245. package/src/hooks/accessibility/use-accessibility-preferences.ts +0 -190
  246. package/src/hooks/accessibility/use-focus-management.ts +0 -183
  247. package/src/hooks/accessibility/use-keyboard-shortcuts.ts +0 -152
  248. package/src/hooks/accessibility/use-screen-reader.ts +0 -212
  249. package/src/hooks/core/index.ts +0 -47
  250. package/src/hooks/legacy.ts +0 -21
  251. package/src/hooks/use-buffer-health.ts +0 -218
  252. package/src/hooks/use-enhanced-media-player.ts +0 -575
  253. package/src/hooks/use-focus-trap.tsx +0 -162
  254. package/src/hooks/use-intelligent-preloading.ts +0 -387
  255. package/src/hooks/use-keyboard-controls.ts +0 -115
  256. package/src/hooks/use-keyboard-shortcuts.ts +0 -255
  257. package/src/hooks/use-media-actions.ts +0 -184
  258. package/src/hooks/use-media-metadata.ts +0 -91
  259. package/src/hooks/use-media-optimistic.ts +0 -264
  260. package/src/hooks/use-media-player.ts +0 -343
  261. package/src/hooks/use-media-state.ts +0 -194
  262. package/src/hooks/use-memory-optimization.ts +0 -360
  263. package/src/hooks/use-network-status.ts +0 -124
  264. package/src/hooks/use-optimistic-controls.ts +0 -95
  265. package/src/hooks/use-optimized-media.ts +0 -283
  266. package/src/hooks/use-smart-preload.ts +0 -229
  267. package/src/hooks/use-touch-gestures.ts +0 -461
  268. package/src/hooks/useEnhancedSubtitles.ts +0 -258
  269. package/src/hooks/useKeyboardShortcuts.ts +0 -106
  270. package/src/hooks/useMediaControls.ts +0 -52
  271. package/src/hooks/useScreenshot.ts +0 -77
  272. package/src/hooks/useSubtitles.ts +0 -91
  273. package/src/hooks/useVideoPlayer.ts +0 -278
  274. package/src/icons/components/FullscreenIcon.tsx +0 -36
  275. package/src/icons/components/SettingsIcon.tsx +0 -37
  276. package/src/icons/components/animated/LoadingIcon.tsx +0 -27
  277. package/src/icons/components/animated/PlayPauseIcon.tsx +0 -42
  278. package/src/icons/components/media/PauseIcon.tsx +0 -38
  279. package/src/icons/components/media/PlayIcon.tsx +0 -37
  280. package/src/icons/components/volume/VolumeIcon.tsx +0 -38
  281. package/src/icons/components/volume/VolumeOffIcon.tsx +0 -38
  282. package/src/icons/index.ts +0 -56
  283. package/src/icons/provider.tsx +0 -58
  284. package/src/icons/types.ts +0 -60
  285. package/src/index-enhanced.ts +0 -35
  286. package/src/index-legacy.ts +0 -324
  287. package/src/index.css +0 -102
  288. package/src/lib/__tests__/async-utils.test.ts +0 -291
  289. package/src/lib/async-utils.ts +0 -194
  290. package/src/lib/deprecation.ts +0 -51
  291. package/src/lib/format-time.ts +0 -37
  292. package/src/lib/index.ts +0 -4
  293. package/src/lib/utils.ts +0 -6
  294. package/src/styles/globals.css +0 -462
  295. package/src/styles/minimal-player.css +0 -621
  296. package/src/styles/pixel-art.css +0 -41
  297. package/src/styles/videojs.css +0 -100
  298. package/src/types/assets.d.ts +0 -29
  299. package/src/types/events.ts +0 -47
  300. package/src/types/formats.ts +0 -79
  301. package/src/types/index.ts +0 -203
  302. package/src/types/videojs-plugins.d.ts +0 -14
@@ -1,437 +0,0 @@
1
- // Performance budget configuration
2
- export interface PerformanceBudget {
3
- name: string
4
- category: "bundle" | "runtime" | "network" | "memory"
5
- limit: number
6
- unit: "bytes" | "ms" | "score" | "percent"
7
- severity: "error" | "warning" | "info"
8
- description: string
9
- }
10
-
11
- // Performance budget violation
12
- export interface BudgetViolation {
13
- budget: PerformanceBudget
14
- actualValue: number
15
- overageAmount: number
16
- overagePercentage: number
17
- timestamp: number
18
- }
19
-
20
- // Alert configuration
21
- export interface AlertConfig {
22
- enabled: boolean
23
- channels: AlertChannel[]
24
- threshold: number // Number of violations before alerting
25
- cooldown: number // Minimum time between alerts (ms)
26
- }
27
-
28
- export interface AlertChannel {
29
- type: "console" | "webhook" | "email" | "slack"
30
- config: {
31
- url?: string
32
- email?: string
33
- token?: string
34
- channel?: string
35
- }
36
- }
37
-
38
- // Default performance budgets for media player
39
- export const defaultPerformanceBudgets: PerformanceBudget[] = [
40
- // Bundle size budgets
41
- {
42
- name: "Main Bundle Size (ESM)",
43
- category: "bundle",
44
- limit: 250 * 1024, // 250KB
45
- unit: "bytes",
46
- severity: "error",
47
- description: "Main bundle should stay under 250KB for fast initial loading"
48
- },
49
- {
50
- name: "Main Bundle Size (CJS)",
51
- category: "bundle",
52
- limit: 200 * 1024, // 200KB
53
- unit: "bytes",
54
- severity: "error",
55
- description: "CJS bundle should be smaller due to better compression"
56
- },
57
- {
58
- name: "Core Module Size",
59
- category: "bundle",
60
- limit: 15 * 1024, // 15KB
61
- unit: "bytes",
62
- severity: "warning",
63
- description: "Core architecture should remain lightweight"
64
- },
65
- {
66
- name: "Enhanced Components Size",
67
- category: "bundle",
68
- limit: 40 * 1024, // 40KB
69
- unit: "bytes",
70
- severity: "warning",
71
- description: "Enhanced components bundle size"
72
- },
73
-
74
- // Runtime performance budgets
75
- {
76
- name: "Component Render Time",
77
- category: "runtime",
78
- limit: 16, // 16ms for 60fps
79
- unit: "ms",
80
- severity: "error",
81
- description: "Component rendering should complete within one frame"
82
- },
83
- {
84
- name: "First Input Delay",
85
- category: "runtime",
86
- limit: 100, // 100ms
87
- unit: "ms",
88
- severity: "error",
89
- description: "First Input Delay should be under 100ms for good UX"
90
- },
91
- {
92
- name: "Largest Contentful Paint",
93
- category: "runtime",
94
- limit: 2500, // 2.5s
95
- unit: "ms",
96
- severity: "warning",
97
- description: "LCP should be under 2.5s for good Core Web Vitals score"
98
- },
99
- {
100
- name: "Cumulative Layout Shift",
101
- category: "runtime",
102
- limit: 0.1,
103
- unit: "score",
104
- severity: "warning",
105
- description: "CLS should be under 0.1 for good visual stability"
106
- },
107
-
108
- // Memory budgets
109
- {
110
- name: "Memory Usage",
111
- category: "memory",
112
- limit: 50 * 1024 * 1024, // 50MB
113
- unit: "bytes",
114
- severity: "warning",
115
- description: "Memory usage should stay under 50MB for good performance"
116
- },
117
- {
118
- name: "Memory Increase Per Operation",
119
- category: "memory",
120
- limit: 1024 * 1024, // 1MB
121
- unit: "bytes",
122
- severity: "error",
123
- description: "Each operation should not increase memory by more than 1MB"
124
- },
125
-
126
- // Network budgets (for media loading)
127
- {
128
- name: "Media Load Time",
129
- category: "network",
130
- limit: 3000, // 3s
131
- unit: "ms",
132
- severity: "warning",
133
- description: "Media should start loading within 3 seconds"
134
- }
135
- ]
136
-
137
- // Performance budget monitor
138
- export class PerformanceBudgetMonitor {
139
- private budgets: Map<string, PerformanceBudget> = new Map()
140
- private violations: BudgetViolation[] = []
141
- private alertConfig: AlertConfig
142
- private lastAlertTime = 0
143
-
144
- constructor(
145
- budgets: PerformanceBudget[] = defaultPerformanceBudgets,
146
- alertConfig: AlertConfig = {
147
- enabled: true,
148
- channels: [{ type: "console", config: {} }],
149
- threshold: 1,
150
- cooldown: 5 * 60 * 1000 // 5 minutes
151
- }
152
- ) {
153
- budgets.forEach((budget) => {
154
- this.budgets.set(budget.name, budget)
155
- })
156
- this.alertConfig = alertConfig
157
- }
158
-
159
- // Check a single metric against budgets
160
- checkMetric(
161
- metricName: string,
162
- value: number,
163
- category: PerformanceBudget["category"] = "runtime"
164
- ): BudgetViolation[] {
165
- const violations: BudgetViolation[] = []
166
-
167
- for (const [name, budget] of this.budgets) {
168
- if (
169
- budget.category === category &&
170
- (name.includes(metricName) || metricName.includes(name.split(" ")[0]?.toLowerCase() || ""))
171
- ) {
172
- if (value > budget.limit) {
173
- const violation: BudgetViolation = {
174
- budget,
175
- actualValue: value,
176
- overageAmount: value - budget.limit,
177
- overagePercentage: ((value - budget.limit) / budget.limit) * 100,
178
- timestamp: Date.now()
179
- }
180
-
181
- violations.push(violation)
182
- this.violations.push(violation)
183
- }
184
- }
185
- }
186
-
187
- if (violations.length > 0) {
188
- this.handleViolations(violations)
189
- }
190
-
191
- return violations
192
- }
193
-
194
- // Check bundle sizes
195
- async checkBundleSizes(distPath: string): Promise<BudgetViolation[]> {
196
- const violations: BudgetViolation[] = []
197
-
198
- // Only check bundle sizes in Node.js environment
199
- if (typeof window !== "undefined" || typeof process === "undefined") {
200
- console.warn("Bundle size checking is only available in Node.js environment")
201
- return violations
202
- }
203
-
204
- // Bundle size checking is disabled in browser environments
205
- console.warn(
206
- "Bundle size checking disabled - use Node.js cicdIntegration from @therealtinhtute/baroiplayer/core/performance/cicd for CI/CD environments"
207
- )
208
-
209
- return violations
210
- }
211
-
212
- // Check runtime performance
213
- checkRuntimeMetrics(metrics: {
214
- renderTime?: number
215
- fid?: number
216
- lcp?: number
217
- cls?: number
218
- memoryUsage?: number
219
- mediaLoadTime?: number
220
- }): BudgetViolation[] {
221
- const allViolations: BudgetViolation[] = []
222
-
223
- if (metrics.renderTime !== undefined) {
224
- allViolations.push(
225
- ...this.checkMetric("Component Render Time", metrics.renderTime, "runtime")
226
- )
227
- }
228
-
229
- if (metrics.fid !== undefined) {
230
- allViolations.push(...this.checkMetric("First Input Delay", metrics.fid, "runtime"))
231
- }
232
-
233
- if (metrics.lcp !== undefined) {
234
- allViolations.push(...this.checkMetric("Largest Contentful Paint", metrics.lcp, "runtime"))
235
- }
236
-
237
- if (metrics.cls !== undefined) {
238
- allViolations.push(...this.checkMetric("Cumulative Layout Shift", metrics.cls, "runtime"))
239
- }
240
-
241
- if (metrics.memoryUsage !== undefined) {
242
- allViolations.push(...this.checkMetric("Memory Usage", metrics.memoryUsage, "memory"))
243
- }
244
-
245
- if (metrics.mediaLoadTime !== undefined) {
246
- allViolations.push(...this.checkMetric("Media Load Time", metrics.mediaLoadTime, "network"))
247
- }
248
-
249
- return allViolations
250
- }
251
-
252
- // Handle budget violations
253
- private async handleViolations(violations: BudgetViolation[]) {
254
- if (!this.alertConfig.enabled) return
255
-
256
- const now = Date.now()
257
- const errorViolations = violations.filter((v) => v.budget.severity === "error")
258
-
259
- // Check if we should send an alert based on threshold and cooldown
260
- if (
261
- errorViolations.length >= this.alertConfig.threshold &&
262
- now - this.lastAlertTime >= this.alertConfig.cooldown
263
- ) {
264
- await this.sendAlerts(violations)
265
- this.lastAlertTime = now
266
- }
267
- }
268
-
269
- // Send alerts through configured channels
270
- private async sendAlerts(violations: BudgetViolation[]) {
271
- const message = this.formatAlertMessage(violations)
272
-
273
- for (const channel of this.alertConfig.channels) {
274
- try {
275
- await this.sendAlert(channel, message)
276
- } catch (error) {
277
- console.error(`Failed to send alert via ${channel.type}:`, error)
278
- }
279
- }
280
- }
281
-
282
- // Format alert message
283
- private formatAlertMessage(violations: BudgetViolation[]): string {
284
- let message = `🚨 Performance Budget Violations Detected!\n\n`
285
-
286
- violations.forEach((violation) => {
287
- const { budget, actualValue, overageAmount, overagePercentage } = violation
288
- const unit = this.getUnitDisplay(budget.unit)
289
-
290
- message += `❌ ${budget.name}\n`
291
- message += ` Limit: ${this.formatValue(budget.limit, budget.unit)}\n`
292
- message += ` Actual: ${this.formatValue(actualValue, budget.unit)}\n`
293
- message += ` Overage: ${this.formatValue(overageAmount, budget.unit)} (+${overagePercentage.toFixed(1)}%)\n`
294
- message += ` Severity: ${budget.severity.toUpperCase()}\n\n`
295
- })
296
-
297
- message += `Time: ${new Date().toISOString()}\n`
298
- message += `Total Violations: ${violations.length}`
299
-
300
- return message
301
- }
302
-
303
- // Send alert to specific channel
304
- private async sendAlert(channel: AlertChannel, message: string) {
305
- switch (channel.type) {
306
- case "console":
307
- console.error(message)
308
- break
309
-
310
- case "webhook":
311
- if (channel.config.url) {
312
- const response = await fetch(channel.config.url, {
313
- method: "POST",
314
- headers: { "Content-Type": "application/json" },
315
- body: JSON.stringify({ text: message, timestamp: Date.now() })
316
- })
317
- if (!response.ok) {
318
- throw new Error(`Webhook failed: ${response.status}`)
319
- }
320
- }
321
- break
322
-
323
- case "slack":
324
- if (channel.config.url) {
325
- const response = await fetch(channel.config.url, {
326
- method: "POST",
327
- headers: { "Content-Type": "application/json" },
328
- body: JSON.stringify({
329
- text: message,
330
- channel: channel.config.channel,
331
- username: "BaroiPlayer Performance Monitor"
332
- })
333
- })
334
- if (!response.ok) {
335
- throw new Error(`Slack webhook failed: ${response.status}`)
336
- }
337
- }
338
- break
339
-
340
- default:
341
- console.warn(`Unsupported alert channel: ${channel.type}`)
342
- }
343
- }
344
-
345
- // Helper methods
346
- private formatValue(value: number, unit: PerformanceBudget["unit"]): string {
347
- switch (unit) {
348
- case "bytes":
349
- return this.formatBytes(value)
350
- case "ms":
351
- return `${value.toFixed(2)}ms`
352
- case "score":
353
- return value.toFixed(3)
354
- case "percent":
355
- return `${value.toFixed(1)}%`
356
- default:
357
- return value.toString()
358
- }
359
- }
360
-
361
- private formatBytes(bytes: number): string {
362
- if (bytes >= 1024 * 1024) {
363
- return `${(bytes / 1024 / 1024).toFixed(2)}MB`
364
- }
365
- if (bytes >= 1024) {
366
- return `${(bytes / 1024).toFixed(2)}KB`
367
- }
368
- return `${bytes}B`
369
- }
370
-
371
- private getUnitDisplay(unit: PerformanceBudget["unit"]): string {
372
- const displays = {
373
- bytes: "bytes",
374
- ms: "milliseconds",
375
- score: "score",
376
- percent: "percent"
377
- }
378
- return displays[unit] || unit
379
- }
380
-
381
- // Management methods
382
- addBudget(budget: PerformanceBudget) {
383
- this.budgets.set(budget.name, budget)
384
- }
385
-
386
- removeBudget(name: string) {
387
- this.budgets.delete(name)
388
- }
389
-
390
- updateBudget(name: string, updates: Partial<PerformanceBudget>) {
391
- const existing = this.budgets.get(name)
392
- if (existing) {
393
- this.budgets.set(name, { ...existing, ...updates })
394
- }
395
- }
396
-
397
- getBudgets(): PerformanceBudget[] {
398
- return Array.from(this.budgets.values())
399
- }
400
-
401
- getViolations(since?: number): BudgetViolation[] {
402
- if (since) {
403
- return this.violations.filter((v) => v.timestamp >= since)
404
- }
405
- return [...this.violations]
406
- }
407
-
408
- clearViolations() {
409
- this.violations = []
410
- }
411
-
412
- getViolationSummary(): {
413
- total: number
414
- byCategory: Record<string, number>
415
- bySeverity: Record<string, number>
416
- } {
417
- const byCategory: Record<string, number> = {}
418
- const bySeverity: Record<string, number> = {}
419
-
420
- this.violations.forEach((violation) => {
421
- const category = violation.budget.category
422
- const severity = violation.budget.severity
423
-
424
- byCategory[category] = (byCategory[category] || 0) + 1
425
- bySeverity[severity] = (bySeverity[severity] || 0) + 1
426
- })
427
-
428
- return {
429
- total: this.violations.length,
430
- byCategory,
431
- bySeverity
432
- }
433
- }
434
- }
435
-
436
- // Global performance budget monitor
437
- export const performanceBudgetMonitor = new PerformanceBudgetMonitor()