]>
Commit | Line | Data |
---|---|---|
1 | import { DatePipe } from '@angular/common' | |
2 | import { HttpErrorResponse } from '@angular/common/http' | |
3 | import { Notifier } from '@app/core' | |
4 | import { SelectChannelItem } from '@app/shared/shared-forms' | |
5 | import { environment } from '../../environments/environment' | |
6 | import { AuthService } from '../core/auth' | |
7 | import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' | |
8 | ||
9 | // Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript | |
10 | function getParameterByName (name: string, url: string) { | |
11 | if (!url) url = window.location.href | |
12 | name = name.replace(/[\[\]]/g, '\\$&') | |
13 | ||
14 | const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)') | |
15 | const results = regex.exec(url) | |
16 | ||
17 | if (!results) return null | |
18 | if (!results[2]) return '' | |
19 | ||
20 | return decodeURIComponent(results[2].replace(/\+/g, ' ')) | |
21 | } | |
22 | ||
23 | function populateAsyncUserVideoChannels ( | |
24 | authService: AuthService, | |
25 | channel: SelectChannelItem[] | |
26 | ) { | |
27 | return new Promise(res => { | |
28 | authService.userInformationLoaded | |
29 | .subscribe( | |
30 | () => { | |
31 | const user = authService.getUser() | |
32 | if (!user) return | |
33 | ||
34 | const videoChannels = user.videoChannels | |
35 | if (Array.isArray(videoChannels) === false) return | |
36 | ||
37 | videoChannels.forEach(c => channel.push({ | |
38 | id: c.id, | |
39 | label: c.displayName, | |
40 | support: c.support, | |
41 | avatarPath: c.avatar?.path | |
42 | })) | |
43 | ||
44 | return res() | |
45 | } | |
46 | ) | |
47 | }) | |
48 | } | |
49 | ||
50 | function getAbsoluteAPIUrl () { | |
51 | let absoluteAPIUrl = environment.hmr === true | |
52 | ? 'http://localhost:9000' | |
53 | : environment.apiUrl | |
54 | ||
55 | if (!absoluteAPIUrl) { | |
56 | // The API is on the same domain | |
57 | absoluteAPIUrl = window.location.origin | |
58 | } | |
59 | ||
60 | return absoluteAPIUrl | |
61 | } | |
62 | ||
63 | function getAbsoluteEmbedUrl () { | |
64 | let absoluteEmbedUrl = environment.originServerUrl | |
65 | if (!absoluteEmbedUrl) { | |
66 | // The Embed is on the same domain | |
67 | absoluteEmbedUrl = window.location.origin | |
68 | } | |
69 | ||
70 | return absoluteEmbedUrl | |
71 | } | |
72 | ||
73 | const datePipe = new DatePipe('en') | |
74 | function dateToHuman (date: string) { | |
75 | return datePipe.transform(date, 'medium') | |
76 | } | |
77 | ||
78 | function durationToString (duration: number) { | |
79 | const hours = Math.floor(duration / 3600) | |
80 | const minutes = Math.floor((duration % 3600) / 60) | |
81 | const seconds = duration % 60 | |
82 | ||
83 | const minutesPadding = minutes >= 10 ? '' : '0' | |
84 | const secondsPadding = seconds >= 10 ? '' : '0' | |
85 | const displayedHours = hours > 0 ? hours.toString() + ':' : '' | |
86 | ||
87 | return ( | |
88 | displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString() | |
89 | ).replace(/^0/, '') | |
90 | } | |
91 | ||
92 | function immutableAssign <A, B> (target: A, source: B) { | |
93 | return Object.assign({}, target, source) | |
94 | } | |
95 | ||
96 | // Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34 | |
97 | function objectToFormData (obj: any, form?: FormData, namespace?: string) { | |
98 | const fd = form || new FormData() | |
99 | let formKey | |
100 | ||
101 | for (const key of Object.keys(obj)) { | |
102 | if (namespace) formKey = `${namespace}[${key}]` | |
103 | else formKey = key | |
104 | ||
105 | if (obj[key] === undefined) continue | |
106 | ||
107 | if (Array.isArray(obj[key]) && obj[key].length === 0) { | |
108 | fd.append(key, null) | |
109 | continue | |
110 | } | |
111 | ||
112 | if (obj[key] !== null && typeof obj[ key ] === 'object' && !(obj[ key ] instanceof File)) { | |
113 | objectToFormData(obj[ key ], fd, formKey) | |
114 | } else { | |
115 | fd.append(formKey, obj[ key ]) | |
116 | } | |
117 | } | |
118 | ||
119 | return fd | |
120 | } | |
121 | ||
122 | function objectLineFeedToHtml (obj: any, keyToNormalize: string) { | |
123 | return immutableAssign(obj, { | |
124 | [keyToNormalize]: lineFeedToHtml(obj[keyToNormalize]) | |
125 | }) | |
126 | } | |
127 | ||
128 | function lineFeedToHtml (text: string) { | |
129 | if (!text) return text | |
130 | ||
131 | return text.replace(/\r?\n|\r/g, '<br />') | |
132 | } | |
133 | ||
134 | function removeElementFromArray <T> (arr: T[], elem: T) { | |
135 | const index = arr.indexOf(elem) | |
136 | if (index !== -1) arr.splice(index, 1) | |
137 | } | |
138 | ||
139 | function sortBy (obj: any[], key1: string, key2?: string) { | |
140 | return obj.sort((a, b) => { | |
141 | const elem1 = key2 ? a[key1][key2] : a[key1] | |
142 | const elem2 = key2 ? b[key1][key2] : b[key1] | |
143 | ||
144 | if (elem1 < elem2) return -1 | |
145 | if (elem1 === elem2) return 0 | |
146 | return 1 | |
147 | }) | |
148 | } | |
149 | ||
150 | function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') { | |
151 | window.scrollTo({ | |
152 | left: 0, | |
153 | top: 0, | |
154 | behavior | |
155 | }) | |
156 | } | |
157 | ||
158 | function isInViewport (el: HTMLElement) { | |
159 | const bounding = el.getBoundingClientRect() | |
160 | return ( | |
161 | bounding.top >= 0 && | |
162 | bounding.left >= 0 && | |
163 | bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && | |
164 | bounding.right <= (window.innerWidth || document.documentElement.clientWidth) | |
165 | ) | |
166 | } | |
167 | ||
168 | function isXPercentInViewport (el: HTMLElement, percentVisible: number) { | |
169 | const rect = el.getBoundingClientRect() | |
170 | const windowHeight = (window.innerHeight || document.documentElement.clientHeight) | |
171 | ||
172 | return !( | |
173 | Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible || | |
174 | Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible | |
175 | ) | |
176 | } | |
177 | ||
178 | function uploadErrorHandler (parameters: { | |
179 | err: HttpErrorResponse | |
180 | name: string | |
181 | notifier: Notifier | |
182 | sticky?: boolean | |
183 | }) { | |
184 | const { err, name, notifier, sticky } = { sticky: false, ...parameters } | |
185 | const title = $localize`The upload failed` | |
186 | let message = err.message | |
187 | ||
188 | if (err instanceof ErrorEvent) { // network error | |
189 | message = $localize`The connection was interrupted` | |
190 | notifier.error(message, title, null, sticky) | |
191 | } else if (err.status === HttpStatusCode.REQUEST_TIMEOUT_408) { | |
192 | message = $localize`Your ${name} file couldn't be transferred before the set timeout (usually 10min)` | |
193 | notifier.error(message, title, null, sticky) | |
194 | } else if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) { | |
195 | const maxFileSize = err.headers?.get('X-File-Maximum-Size') || '8G' | |
196 | message = $localize`Your ${name} file was too large (max. size: ${maxFileSize})` | |
197 | notifier.error(message, title, null, sticky) | |
198 | } else { | |
199 | notifier.error(err.message, title) | |
200 | } | |
201 | ||
202 | return message | |
203 | } | |
204 | ||
205 | export { | |
206 | sortBy, | |
207 | durationToString, | |
208 | lineFeedToHtml, | |
209 | getParameterByName, | |
210 | populateAsyncUserVideoChannels, | |
211 | getAbsoluteAPIUrl, | |
212 | dateToHuman, | |
213 | immutableAssign, | |
214 | objectToFormData, | |
215 | getAbsoluteEmbedUrl, | |
216 | objectLineFeedToHtml, | |
217 | removeElementFromArray, | |
218 | scrollToTop, | |
219 | isInViewport, | |
220 | isXPercentInViewport, | |
221 | uploadErrorHandler | |
222 | } |