chuijs 3.6.2 → 3.6.4

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 (119) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +1203 -162
  3. package/framework/appLayout/default/chui_app_layout.js +747 -747
  4. package/framework/appLayout/default/global_style.css +592 -568
  5. package/framework/appLayout/default/main_theme_style.css +118 -101
  6. package/framework/components/chui_accordion/accordion.js +63 -63
  7. package/framework/components/chui_accordion/styles.css +79 -75
  8. package/framework/components/chui_badge/badge.js +55 -55
  9. package/framework/components/chui_badge/styles.css +29 -29
  10. package/framework/components/chui_button/button.js +48 -48
  11. package/framework/components/chui_button/styles.css +75 -70
  12. package/framework/components/chui_calendar/calendar.js +97 -97
  13. package/framework/components/chui_card/card.js +87 -0
  14. package/framework/components/chui_card/styles.css +72 -0
  15. package/framework/components/chui_code/code.js +18 -18
  16. package/framework/components/chui_code/styles.css +9 -9
  17. package/framework/components/chui_console/console.js +27 -27
  18. package/framework/components/chui_console/styles.css +31 -31
  19. package/framework/components/chui_content_block/content_block.js +51 -51
  20. package/framework/components/chui_content_block/styles.css +2 -2
  21. package/framework/components/chui_context_menu/context_menu.js +230 -0
  22. package/framework/components/chui_context_menu/styles.css +136 -0
  23. package/framework/components/chui_custom_element/custom_element.js +24 -24
  24. package/framework/components/chui_details/details.js +85 -85
  25. package/framework/components/chui_details/styles.css +70 -66
  26. package/framework/components/chui_fieldset/fieldset.js +40 -40
  27. package/framework/components/chui_fieldset/styles.css +24 -24
  28. package/framework/components/chui_form/form.js +40 -40
  29. package/framework/components/chui_form/styles.css +21 -21
  30. package/framework/components/chui_graphs/graphs.js +234 -190
  31. package/framework/components/chui_graphs/styles.css +37 -32
  32. package/framework/components/chui_hero/hero.js +98 -0
  33. package/framework/components/chui_hero/styles.css +91 -0
  34. package/framework/components/chui_html_block/html_block.js +16 -16
  35. package/framework/components/chui_html_block/styles.css +5 -5
  36. package/framework/components/chui_hx/hx.js +15 -15
  37. package/framework/components/chui_hx/styles.css +38 -38
  38. package/framework/components/chui_icons/icons.js +2144 -2144
  39. package/framework/components/chui_icons/styles.css +13 -13
  40. package/framework/components/chui_inputs/chui_check_box/check_box.js +32 -32
  41. package/framework/components/chui_inputs/chui_check_box/styles.css +91 -86
  42. package/framework/components/chui_inputs/chui_combo_box/combo_box.js +166 -150
  43. package/framework/components/chui_inputs/chui_combo_box/styles.css +113 -107
  44. package/framework/components/chui_inputs/chui_date/date.js +177 -174
  45. package/framework/components/chui_inputs/chui_date/styles.css +163 -128
  46. package/framework/components/chui_inputs/chui_email/email.js +61 -61
  47. package/framework/components/chui_inputs/chui_email/styles.css +69 -71
  48. package/framework/components/chui_inputs/chui_file/file.js +76 -76
  49. package/framework/components/chui_inputs/chui_file/styles.css +99 -99
  50. package/framework/components/chui_inputs/chui_multi_combo_box/multi_combo_box.js +295 -295
  51. package/framework/components/chui_inputs/chui_multi_combo_box/styles.css +212 -235
  52. package/framework/components/chui_inputs/chui_number/number.js +108 -108
  53. package/framework/components/chui_inputs/chui_number/styles.css +84 -84
  54. package/framework/components/chui_inputs/chui_password/password.js +99 -99
  55. package/framework/components/chui_inputs/chui_password/styles.css +97 -97
  56. package/framework/components/chui_inputs/chui_radio_button/radio_button.js +45 -45
  57. package/framework/components/chui_inputs/chui_radio_button/styles.css +76 -73
  58. package/framework/components/chui_inputs/chui_select_box/select_box.js +187 -170
  59. package/framework/components/chui_inputs/chui_select_box/styles.css +123 -117
  60. package/framework/components/chui_inputs/chui_text/styles.css +83 -84
  61. package/framework/components/chui_inputs/chui_text/text.js +91 -91
  62. package/framework/components/chui_inputs/chui_text_area/styles.css +57 -57
  63. package/framework/components/chui_inputs/chui_text_area/text_area.js +61 -61
  64. package/framework/components/chui_inputs/chui_toggle/styles.css +66 -61
  65. package/framework/components/chui_inputs/chui_toggle/toggle.js +36 -36
  66. package/framework/components/chui_label/label.js +54 -54
  67. package/framework/components/chui_label/styles.css +11 -11
  68. package/framework/components/chui_media/audio.js +908 -908
  69. package/framework/components/chui_media/audio_styles.css +458 -458
  70. package/framework/components/chui_media/image.js +105 -105
  71. package/framework/components/chui_media/image_styles.css +61 -61
  72. package/framework/components/chui_media/video.js +248 -248
  73. package/framework/components/chui_media/video_styles.css +160 -160
  74. package/framework/components/chui_menu_bar/menu_bar.js +66 -74
  75. package/framework/components/chui_menu_bar/styles.css +114 -76
  76. package/framework/components/chui_modal/modal.js +142 -135
  77. package/framework/components/chui_modal/styles.css +36 -36
  78. package/framework/components/chui_notification/notification.js +72 -72
  79. package/framework/components/chui_notification/notification_download.js +78 -78
  80. package/framework/components/chui_notification/notification_download_progress.css +119 -123
  81. package/framework/components/chui_notification/notification_download_progress.js +105 -105
  82. package/framework/components/chui_notification/notification_update.js +54 -54
  83. package/framework/components/chui_notification/styles.css +91 -91
  84. package/framework/components/chui_notification/styles_download.css +85 -85
  85. package/framework/components/chui_notification/styles_update.css +73 -73
  86. package/framework/components/chui_paragraph/paragraph.js +14 -14
  87. package/framework/components/chui_paragraph/styles.css +6 -6
  88. package/framework/components/chui_popups/popups.js +250 -250
  89. package/framework/components/chui_popups/styles.css +129 -115
  90. package/framework/components/chui_progress_bar/progress_bar.js +28 -28
  91. package/framework/components/chui_progress_bar/styles.css +28 -28
  92. package/framework/components/chui_radio_group/radio_group.js +57 -57
  93. package/framework/components/chui_radio_group/styles.css +3 -3
  94. package/framework/components/chui_slideshow/slideshow.js +75 -75
  95. package/framework/components/chui_slideshow/styles.css +94 -85
  96. package/framework/components/chui_spinner/spinner.js +45 -45
  97. package/framework/components/chui_spinner/styles.css +23 -23
  98. package/framework/components/chui_table/styles.css +42 -42
  99. package/framework/components/chui_table/table.js +234 -234
  100. package/framework/components/chui_tabs/chui_tabs.js +77 -77
  101. package/framework/components/chui_tabs/styles.css +54 -48
  102. package/framework/components/chui_text_editor/styles.css +217 -217
  103. package/framework/components/chui_text_editor/text_editor.js +144 -144
  104. package/framework/components/chui_text_editor/text_editor_panel.js +568 -568
  105. package/framework/components/chui_tree_view/styles.css +81 -75
  106. package/framework/components/chui_tree_view/tree_view.js +90 -90
  107. package/framework/components/chui_webview/styles.css +27 -27
  108. package/framework/components/chui_webview/webview.js +103 -103
  109. package/framework/components/telegram_bot/chui_telegram_bot.js +183 -183
  110. package/framework/modules/chui_animations/animations.js +121 -121
  111. package/framework/modules/chui_animations/styles.css +79 -79
  112. package/framework/modules/chui_fonts.js +7129 -6974
  113. package/framework/modules/chui_functions.js +106 -78
  114. package/framework/modules/chui_logger/chui_logger.js +53 -53
  115. package/framework/modules/chui_page/page.js +86 -86
  116. package/framework/modules/chui_page/styles.css +9 -9
  117. package/framework/tray_bar/chui_menu_items.js +48 -48
  118. package/index.js +570 -555
  119. package/package.json +51 -46
@@ -1,249 +1,249 @@
1
- const fs = require("fs");
2
- const dataurl = require("dataurl");
3
- const { Icon, Icons } = require("../chui_icons/icons");
4
- const {Label} = require('../chui_label/label');
5
-
6
- let play_list = []
7
-
8
- class Video {
9
- #current_video = 0
10
- #chui_vp_main = document.createElement(`chui_vp_main`);
11
- #chui_vp_block = document.createElement(`chui_vp_block`);
12
- #chui_vt = document.createElement(`video`);
13
- #chui_vt_height = "auto"
14
- #chui_vt_width = "auto"
15
- #chui_source_tag = document.createElement(`source`);
16
- // Блок информация
17
- #chui_vp_info = document.createElement(`chui_vp_info`);
18
- #chui_vp_time = undefined;
19
- #chui_vp_seek = document.createElement(`input`);
20
- #chui_vp_seek_buf = document.createElement(`chui_vp_seek_buf`);
21
- // Блок управления
22
- #chui_vp_controls = document.createElement(`chui_vp_controls`);
23
- #chui_vp_play_pause = document.createElement(`chui_vp_play_pause`);
24
- #chui_vp_next = document.createElement(`chui_vp_next`);
25
- #chui_vp_prev = document.createElement(`chui_vp_prev`);
26
- #chui_vp_full_mode = document.createElement(`chui_vp_full_mode`);
27
- // Блок управления громкостью
28
- #chui_vp_volume_block = document.createElement("chui_vp_volume_block");
29
- #chui_vp_volume_icon = document.createElement(`chui_vp_volume_icon`);
30
- #chui_vp_volume = document.createElement(`input`);
31
- //
32
- #size_play_stop = "36px"
33
- #size_next_prev = "30px"
34
- constructor(options = { autoplay: Boolean(), height: String(), width: String() }) {
35
- require('../../modules/chui_functions').setStyles(__dirname + "/video_styles.css", 'chUiJS_Video');
36
- this.#chui_vt.setAttribute("name", "media")
37
- this.#chui_vt.controls = false;
38
- this.#chui_vt.preload = "metadata"
39
- this.#chui_vt.style.borderRadius = "var(--border_radius)"
40
- this.#chui_vt.setAttribute("height", this.#chui_vt_height);
41
- this.#chui_vt.setAttribute("width", this.#chui_vt_width);
42
- // Настройки
43
- if (options.autoplay) {
44
- this.#chui_vt.autoplay = options.autoplay;
45
- setTimeout(async () => await this.#start(play_list[this.#current_video]), 1)
46
- }
47
- if (options.height) this.#chui_vt.setAttribute("height", options.height);
48
- if (options.width) this.#chui_vt.setAttribute("width", options.width);
49
- // ИНФОРМАЦИЯ
50
- this.#chui_vp_time = new Label({text: `${this.#calculateTime(0)} - ${this.#calculateTime(0)}`})
51
- this.#chui_vp_seek.type = "range"
52
- this.#chui_vp_seek.id = "chui_vp_seek"
53
- this.#chui_vp_seek.max = "0"
54
- this.#chui_vp_seek.value = "0"
55
- // КНОПКИ
56
- this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PLAY_ARROW, this.#size_play_stop).getHTML()
57
- this.#chui_vp_next.innerHTML = new Icon(Icons.AUDIO_VIDEO.SKIP_NEXT, this.#size_next_prev).getHTML()
58
- this.#chui_vp_prev.innerHTML = new Icon(Icons.AUDIO_VIDEO.SKIP_PREVIOUS, this.#size_next_prev).getHTML()
59
- this.#chui_vp_full_mode.innerHTML = new Icon(Icons.NAVIGATION.FULLSCREEN, this.#size_next_prev).getHTML()
60
- //Заполнение элемента
61
- // УПРАВЛЕНИЕ ГРОМКОСТЬЮ
62
- this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_UP, this.#size_next_prev).getHTML()
63
- this.#chui_vp_volume.type = "range"
64
- this.#chui_vp_volume.id = "chui_vp_volume"
65
- this.#chui_vp_volume.max = "100"
66
- this.#chui_vp_volume.value = "50"
67
- this.#chui_vt.volume = this.#chui_vp_volume.value / 100;
68
- this.#chui_vp_volume_block.appendChild(this.#chui_vp_volume_icon)
69
- this.#chui_vp_volume_block.appendChild(this.#chui_vp_volume)
70
- // ИНФОРМАЦИЯ
71
- this.#chui_vp_info.appendChild(this.#chui_vp_seek)
72
- this.#chui_vp_info.appendChild(this.#chui_vp_seek_buf)
73
- // КНОПКИ
74
- this.#chui_vp_controls.appendChild(this.#chui_vp_prev)
75
- this.#chui_vp_controls.appendChild(this.#chui_vp_play_pause)
76
- this.#chui_vp_controls.appendChild(this.#chui_vp_next)
77
- this.#chui_vp_controls.appendChild(this.#chui_vp_time.set())
78
- this.#chui_vp_controls.appendChild(this.#chui_vp_volume_block)
79
- this.#chui_vp_controls.appendChild(this.#chui_vp_full_mode)
80
- //
81
- this.#chui_vp_main.appendChild(this.#chui_vt)
82
- this.#chui_vt.appendChild(this.#chui_source_tag)
83
- this.#chui_vp_block.appendChild(this.#chui_vp_controls)
84
- this.#chui_vp_block.appendChild(this.#chui_vp_info)
85
- //
86
- this.#chui_vp_main.appendChild(this.#chui_vp_block)
87
- // СОБЫТИЯ
88
- this.#chui_vp_play_pause.addEventListener("click", async () => this.#playPause())
89
- navigator.mediaSession.setActionHandler('play', async () => this.#playPause());
90
- navigator.mediaSession.setActionHandler('pause', async () => this.#playPause());
91
- this.#chui_vp_next.addEventListener("click", async () => this.#playNext())
92
- this.#chui_vp_prev.addEventListener("click", async () => this.#playPrev())
93
- navigator.mediaSession.setActionHandler('nexttrack', async () => this.#playNext());
94
- navigator.mediaSession.setActionHandler('previoustrack', async () => this.#playPrev());
95
- this.#chui_vt.addEventListener("timeupdate", async (e) => {
96
- this.#renderProgress(e.target.currentTime)
97
- this.#displayBufferedAmount()
98
- if (e.target.currentTime === e.target.duration) await this.#playNext()
99
- });
100
- this.#chui_vp_seek.addEventListener('input', () => {
101
- this.#chui_vp_seek.textContent = this.#calculateTime(this.#chui_vp_seek.value);
102
- this.#renderProgress(this.#chui_vp_seek.value)
103
- });
104
- this.#chui_vp_seek.addEventListener('change', () => {
105
- this.#chui_vt.currentTime = Number(this.#chui_vp_seek.value);
106
- this.#renderProgress(this.#chui_vp_seek.value)
107
- });
108
- this.#chui_vp_volume.addEventListener('input', (e) => {
109
- const value = e.target.value;
110
- this.#chui_vt.volume = value / 100;
111
- this.#renderVolume()
112
- if (Number(e.target.value) === 0) {
113
- this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_OFF, this.#size_next_prev).getHTML()
114
- } else {
115
- this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_UP, this.#size_next_prev).getHTML()
116
- }
117
- });
118
- this.#chui_vp_main.addEventListener("mouseover", () => {
119
- this.#chui_vp_block.style.opacity = "1"
120
- })
121
- this.#chui_vp_main.addEventListener("mouseout", () => {
122
- this.#chui_vp_block.style.opacity = "0"
123
- })
124
- this.#renderVolume()
125
- this.#chui_vp_full_mode.addEventListener("click", async () => {
126
- if (!document.fullscreenElement) {
127
- await this.#chui_vt.requestFullscreen({ navigationUI: "hide" });
128
- } else {
129
- await document.exitFullscreen();
130
- }
131
- })
132
- }
133
- set() {
134
- return this.#chui_vp_main;
135
- }
136
- async #convertSong(filePath, type) {
137
- return await new Promise((resolve, reject) => {
138
- fs.readFile(filePath, (err, data) => {
139
- if (err) reject(err)
140
- resolve(dataurl.convert({data, mimetype: type}));
141
- });
142
- });
143
- };
144
- async #start(track) {
145
- // this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PAUSE, this.#size_play_stop).getHTML()
146
- // if (track.videoPath.includes("http")) {
147
- // this.#chui_source_tag.src = track.videoPath
148
- // } else {
149
- // this.#chui_source_tag.src = String(await this.#convertSong(track.videoPath, track.mimetype))
150
- // }
151
- // this.#chui_vt.load()
152
- // await this.#chui_vt.play().then(() => {
153
- // this.#setSliderMax()
154
- // this.#displayBufferedAmount()
155
- // })
156
- // this.#setMediaData(track)
157
- }
158
- async #playNext() {
159
- this.#current_video = this.#current_video + 1
160
- if (this.#current_video < play_list.length) {
161
- await this.#start(play_list[this.#current_video])
162
- } else if (this.#current_video === play_list.length) {
163
- this.#current_video = 0
164
- await this.#start(play_list[this.#current_video])
165
- }
166
- }
167
- async #playPrev() {
168
- this.#current_video = this.#current_video - 1
169
- if (this.#current_video < 0) {
170
- this.#current_video = play_list.length - 1
171
- await this.#start(play_list[this.#current_video])
172
- } else {
173
- await this.#start(play_list[this.#current_video])
174
- }
175
- }
176
- async #playPause() {
177
- if (this.#chui_vt.currentTime === 0) {
178
- await this.#start(play_list[this.#current_video])
179
- } else if (this.#chui_vt.currentTime > 0 && !this.#chui_vt.paused) {
180
- this.#chui_vt.pause()
181
- this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PLAY_ARROW, this.#size_play_stop).getHTML()
182
- } else if (this.#chui_vt.currentTime > 0 && this.#chui_vt.paused) {
183
- await this.#chui_vt.play()
184
- this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PAUSE, this.#size_play_stop).getHTML()
185
- }
186
- }
187
- #displayBufferedAmount = () => {
188
- try {
189
- const end = Math.floor(this.#chui_vt.buffered.end(0) / this.#chui_vp_seek.max * 100)
190
- if (end > 100) {
191
- this.#chui_vp_seek_buf.style.width = `100%`;
192
- } else {
193
- this.#chui_vp_seek_buf.style.width = `${end}%`;
194
- }
195
- } catch (e) {}
196
- }
197
- #renderVolume = () => {
198
- let test = Math.floor(this.#chui_vp_volume.value / this.#chui_vp_volume.max * 100)
199
- this.#chui_vp_main.style.setProperty('--volume-before-width', `${test}%`);
200
- }
201
- #renderProgress = (value) => {
202
- try {
203
- this.#chui_vp_time.setText(`${this.#calculateTime(value)} / ${this.#calculateTime(this.#chui_vt.duration)}`);
204
- this.#chui_vp_seek.value = String(Math.floor(value));
205
- const test = Math.floor(this.#chui_vp_seek.value / this.#chui_vp_seek.max * 100)
206
- this.#chui_vp_main.style.setProperty('--seek-before-width', `${test}%`);
207
- } catch (e) {
208
- this.#chui_vp_time.setText(`${this.#calculateTime(0)} / ${this.#calculateTime(0)}`);
209
- }
210
- }
211
- #calculateTime = (secs) => {
212
- const minutes = Math.floor(secs / 60);
213
- const seconds = Math.floor(secs % 60);
214
- const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
215
- return `${minutes}:${returnedSeconds}`;
216
- }
217
- #setSliderMax = () => {
218
- this.#chui_vp_seek.max = String(Math.floor(this.#chui_vt.duration));
219
- }
220
- setStream(stream) {
221
- this.#chui_vt.srcObject = stream;
222
- this.#chui_vt.load()
223
- this.#chui_vt.play()
224
- }
225
- setPlayList(list = [{ title: String(), artist: String(), album: String(), mimetype: String(), videoPath: String(), artwork: [] }]) {
226
- play_list = list
227
- }
228
- getPlayList() {
229
- return play_list
230
- }
231
- static #setMediaData(media) {
232
- if ("mediaSession" in navigator) {
233
- navigator.mediaSession.metadata = new MediaMetadata({
234
- title: media.title,
235
- artist: media.artist,
236
- album: media.album,
237
- artwork: media.artwork
238
- });
239
- }
240
- }
241
- static MIMETYPES = {
242
- MP4: 'video/mp4',
243
- WEBM: 'video/webm',
244
- M4V: 'video/x-m4v',
245
- QUICK_TIME: 'video/quicktime'
246
- }
247
- }
248
-
1
+ const fs = require("fs");
2
+ const dataurl = require("dataurl");
3
+ const { Icon, Icons } = require("../chui_icons/icons");
4
+ const {Label} = require('../chui_label/label');
5
+
6
+ let play_list = []
7
+
8
+ class Video {
9
+ #current_video = 0
10
+ #chui_vp_main = document.createElement(`chui_vp_main`);
11
+ #chui_vp_block = document.createElement(`chui_vp_block`);
12
+ #chui_vt = document.createElement(`video`);
13
+ #chui_vt_height = "auto"
14
+ #chui_vt_width = "auto"
15
+ #chui_source_tag = document.createElement(`source`);
16
+ // Блок информация
17
+ #chui_vp_info = document.createElement(`chui_vp_info`);
18
+ #chui_vp_time = undefined;
19
+ #chui_vp_seek = document.createElement(`input`);
20
+ #chui_vp_seek_buf = document.createElement(`chui_vp_seek_buf`);
21
+ // Блок управления
22
+ #chui_vp_controls = document.createElement(`chui_vp_controls`);
23
+ #chui_vp_play_pause = document.createElement(`chui_vp_play_pause`);
24
+ #chui_vp_next = document.createElement(`chui_vp_next`);
25
+ #chui_vp_prev = document.createElement(`chui_vp_prev`);
26
+ #chui_vp_full_mode = document.createElement(`chui_vp_full_mode`);
27
+ // Блок управления громкостью
28
+ #chui_vp_volume_block = document.createElement("chui_vp_volume_block");
29
+ #chui_vp_volume_icon = document.createElement(`chui_vp_volume_icon`);
30
+ #chui_vp_volume = document.createElement(`input`);
31
+ //
32
+ #size_play_stop = "36px"
33
+ #size_next_prev = "30px"
34
+ constructor(options = { autoplay: Boolean(), height: String(), width: String() }) {
35
+ require('../../modules/chui_functions').setStyles(__dirname + "/video_styles.css", 'chUiJS_Video');
36
+ this.#chui_vt.setAttribute("name", "media")
37
+ this.#chui_vt.controls = false;
38
+ this.#chui_vt.preload = "metadata"
39
+ this.#chui_vt.style.borderRadius = "var(--border_radius)"
40
+ this.#chui_vt.setAttribute("height", this.#chui_vt_height);
41
+ this.#chui_vt.setAttribute("width", this.#chui_vt_width);
42
+ // Настройки
43
+ if (options.autoplay) {
44
+ this.#chui_vt.autoplay = options.autoplay;
45
+ setTimeout(async () => await this.#start(play_list[this.#current_video]), 1)
46
+ }
47
+ if (options.height) this.#chui_vt.setAttribute("height", options.height);
48
+ if (options.width) this.#chui_vt.setAttribute("width", options.width);
49
+ // ИНФОРМАЦИЯ
50
+ this.#chui_vp_time = new Label({text: `${this.#calculateTime(0)} - ${this.#calculateTime(0)}`})
51
+ this.#chui_vp_seek.type = "range"
52
+ this.#chui_vp_seek.id = "chui_vp_seek"
53
+ this.#chui_vp_seek.max = "0"
54
+ this.#chui_vp_seek.value = "0"
55
+ // КНОПКИ
56
+ this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PLAY_ARROW, this.#size_play_stop).getHTML()
57
+ this.#chui_vp_next.innerHTML = new Icon(Icons.AUDIO_VIDEO.SKIP_NEXT, this.#size_next_prev).getHTML()
58
+ this.#chui_vp_prev.innerHTML = new Icon(Icons.AUDIO_VIDEO.SKIP_PREVIOUS, this.#size_next_prev).getHTML()
59
+ this.#chui_vp_full_mode.innerHTML = new Icon(Icons.NAVIGATION.FULLSCREEN, this.#size_next_prev).getHTML()
60
+ //Заполнение элемента
61
+ // УПРАВЛЕНИЕ ГРОМКОСТЬЮ
62
+ this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_UP, this.#size_next_prev).getHTML()
63
+ this.#chui_vp_volume.type = "range"
64
+ this.#chui_vp_volume.id = "chui_vp_volume"
65
+ this.#chui_vp_volume.max = "100"
66
+ this.#chui_vp_volume.value = "50"
67
+ this.#chui_vt.volume = this.#chui_vp_volume.value / 100;
68
+ this.#chui_vp_volume_block.appendChild(this.#chui_vp_volume_icon)
69
+ this.#chui_vp_volume_block.appendChild(this.#chui_vp_volume)
70
+ // ИНФОРМАЦИЯ
71
+ this.#chui_vp_info.appendChild(this.#chui_vp_seek)
72
+ this.#chui_vp_info.appendChild(this.#chui_vp_seek_buf)
73
+ // КНОПКИ
74
+ this.#chui_vp_controls.appendChild(this.#chui_vp_prev)
75
+ this.#chui_vp_controls.appendChild(this.#chui_vp_play_pause)
76
+ this.#chui_vp_controls.appendChild(this.#chui_vp_next)
77
+ this.#chui_vp_controls.appendChild(this.#chui_vp_time.set())
78
+ this.#chui_vp_controls.appendChild(this.#chui_vp_volume_block)
79
+ this.#chui_vp_controls.appendChild(this.#chui_vp_full_mode)
80
+ //
81
+ this.#chui_vp_main.appendChild(this.#chui_vt)
82
+ this.#chui_vt.appendChild(this.#chui_source_tag)
83
+ this.#chui_vp_block.appendChild(this.#chui_vp_controls)
84
+ this.#chui_vp_block.appendChild(this.#chui_vp_info)
85
+ //
86
+ this.#chui_vp_main.appendChild(this.#chui_vp_block)
87
+ // СОБЫТИЯ
88
+ this.#chui_vp_play_pause.addEventListener("click", async () => this.#playPause())
89
+ navigator.mediaSession.setActionHandler('play', async () => this.#playPause());
90
+ navigator.mediaSession.setActionHandler('pause', async () => this.#playPause());
91
+ this.#chui_vp_next.addEventListener("click", async () => this.#playNext())
92
+ this.#chui_vp_prev.addEventListener("click", async () => this.#playPrev())
93
+ navigator.mediaSession.setActionHandler('nexttrack', async () => this.#playNext());
94
+ navigator.mediaSession.setActionHandler('previoustrack', async () => this.#playPrev());
95
+ this.#chui_vt.addEventListener("timeupdate", async (e) => {
96
+ this.#renderProgress(e.target.currentTime)
97
+ this.#displayBufferedAmount()
98
+ if (e.target.currentTime === e.target.duration) await this.#playNext()
99
+ });
100
+ this.#chui_vp_seek.addEventListener('input', () => {
101
+ this.#chui_vp_seek.textContent = this.#calculateTime(this.#chui_vp_seek.value);
102
+ this.#renderProgress(this.#chui_vp_seek.value)
103
+ });
104
+ this.#chui_vp_seek.addEventListener('change', () => {
105
+ this.#chui_vt.currentTime = Number(this.#chui_vp_seek.value);
106
+ this.#renderProgress(this.#chui_vp_seek.value)
107
+ });
108
+ this.#chui_vp_volume.addEventListener('input', (e) => {
109
+ const value = e.target.value;
110
+ this.#chui_vt.volume = value / 100;
111
+ this.#renderVolume()
112
+ if (Number(e.target.value) === 0) {
113
+ this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_OFF, this.#size_next_prev).getHTML()
114
+ } else {
115
+ this.#chui_vp_volume_icon.innerHTML = new Icon(Icons.AUDIO_VIDEO.VOLUME_UP, this.#size_next_prev).getHTML()
116
+ }
117
+ });
118
+ this.#chui_vp_main.addEventListener("mouseover", () => {
119
+ this.#chui_vp_block.style.opacity = "1"
120
+ })
121
+ this.#chui_vp_main.addEventListener("mouseout", () => {
122
+ this.#chui_vp_block.style.opacity = "0"
123
+ })
124
+ this.#renderVolume()
125
+ this.#chui_vp_full_mode.addEventListener("click", async () => {
126
+ if (!document.fullscreenElement) {
127
+ await this.#chui_vt.requestFullscreen({ navigationUI: "hide" });
128
+ } else {
129
+ await document.exitFullscreen();
130
+ }
131
+ })
132
+ }
133
+ set() {
134
+ return this.#chui_vp_main;
135
+ }
136
+ async #convertSong(filePath, type) {
137
+ return await new Promise((resolve, reject) => {
138
+ fs.readFile(filePath, (err, data) => {
139
+ if (err) reject(err)
140
+ resolve(dataurl.convert({data, mimetype: type}));
141
+ });
142
+ });
143
+ };
144
+ async #start(track) {
145
+ // this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PAUSE, this.#size_play_stop).getHTML()
146
+ // if (track.videoPath.includes("http")) {
147
+ // this.#chui_source_tag.src = track.videoPath
148
+ // } else {
149
+ // this.#chui_source_tag.src = String(await this.#convertSong(track.videoPath, track.mimetype))
150
+ // }
151
+ // this.#chui_vt.load()
152
+ // await this.#chui_vt.play().then(() => {
153
+ // this.#setSliderMax()
154
+ // this.#displayBufferedAmount()
155
+ // })
156
+ // this.#setMediaData(track)
157
+ }
158
+ async #playNext() {
159
+ this.#current_video = this.#current_video + 1
160
+ if (this.#current_video < play_list.length) {
161
+ await this.#start(play_list[this.#current_video])
162
+ } else if (this.#current_video === play_list.length) {
163
+ this.#current_video = 0
164
+ await this.#start(play_list[this.#current_video])
165
+ }
166
+ }
167
+ async #playPrev() {
168
+ this.#current_video = this.#current_video - 1
169
+ if (this.#current_video < 0) {
170
+ this.#current_video = play_list.length - 1
171
+ await this.#start(play_list[this.#current_video])
172
+ } else {
173
+ await this.#start(play_list[this.#current_video])
174
+ }
175
+ }
176
+ async #playPause() {
177
+ if (this.#chui_vt.currentTime === 0) {
178
+ await this.#start(play_list[this.#current_video])
179
+ } else if (this.#chui_vt.currentTime > 0 && !this.#chui_vt.paused) {
180
+ this.#chui_vt.pause()
181
+ this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PLAY_ARROW, this.#size_play_stop).getHTML()
182
+ } else if (this.#chui_vt.currentTime > 0 && this.#chui_vt.paused) {
183
+ await this.#chui_vt.play()
184
+ this.#chui_vp_play_pause.innerHTML = new Icon(Icons.AUDIO_VIDEO.PAUSE, this.#size_play_stop).getHTML()
185
+ }
186
+ }
187
+ #displayBufferedAmount = () => {
188
+ try {
189
+ const end = Math.floor(this.#chui_vt.buffered.end(0) / this.#chui_vp_seek.max * 100)
190
+ if (end > 100) {
191
+ this.#chui_vp_seek_buf.style.width = `100%`;
192
+ } else {
193
+ this.#chui_vp_seek_buf.style.width = `${end}%`;
194
+ }
195
+ } catch (e) {}
196
+ }
197
+ #renderVolume = () => {
198
+ let test = Math.floor(this.#chui_vp_volume.value / this.#chui_vp_volume.max * 100)
199
+ this.#chui_vp_main.style.setProperty('--volume-before-width', `${test}%`);
200
+ }
201
+ #renderProgress = (value) => {
202
+ try {
203
+ this.#chui_vp_time.setText(`${this.#calculateTime(value)} / ${this.#calculateTime(this.#chui_vt.duration)}`);
204
+ this.#chui_vp_seek.value = String(Math.floor(value));
205
+ const test = Math.floor(this.#chui_vp_seek.value / this.#chui_vp_seek.max * 100)
206
+ this.#chui_vp_main.style.setProperty('--seek-before-width', `${test}%`);
207
+ } catch (e) {
208
+ this.#chui_vp_time.setText(`${this.#calculateTime(0)} / ${this.#calculateTime(0)}`);
209
+ }
210
+ }
211
+ #calculateTime = (secs) => {
212
+ const minutes = Math.floor(secs / 60);
213
+ const seconds = Math.floor(secs % 60);
214
+ const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
215
+ return `${minutes}:${returnedSeconds}`;
216
+ }
217
+ #setSliderMax = () => {
218
+ this.#chui_vp_seek.max = String(Math.floor(this.#chui_vt.duration));
219
+ }
220
+ setStream(stream) {
221
+ this.#chui_vt.srcObject = stream;
222
+ this.#chui_vt.load()
223
+ this.#chui_vt.play()
224
+ }
225
+ setPlayList(list = [{ title: String(), artist: String(), album: String(), mimetype: String(), videoPath: String(), artwork: [] }]) {
226
+ play_list = list
227
+ }
228
+ getPlayList() {
229
+ return play_list
230
+ }
231
+ static #setMediaData(media) {
232
+ if ("mediaSession" in navigator) {
233
+ navigator.mediaSession.metadata = new MediaMetadata({
234
+ title: media.title,
235
+ artist: media.artist,
236
+ album: media.album,
237
+ artwork: media.artwork
238
+ });
239
+ }
240
+ }
241
+ static MIMETYPES = {
242
+ MP4: 'video/mp4',
243
+ WEBM: 'video/webm',
244
+ M4V: 'video/x-m4v',
245
+ QUICK_TIME: 'video/quicktime'
246
+ }
247
+ }
248
+
249
249
  exports.Video = Video