diff options
Diffstat (limited to 'client/src/app/core/wrappers')
-rw-r--r-- | client/src/app/core/wrappers/index.ts | 2 | ||||
-rw-r--r-- | client/src/app/core/wrappers/screen.service.ts | 66 | ||||
-rw-r--r-- | client/src/app/core/wrappers/storage.service.ts | 37 |
3 files changed, 105 insertions, 0 deletions
diff --git a/client/src/app/core/wrappers/index.ts b/client/src/app/core/wrappers/index.ts new file mode 100644 index 000000000..d82b70070 --- /dev/null +++ b/client/src/app/core/wrappers/index.ts | |||
@@ -0,0 +1,2 @@ | |||
1 | export * from './screen.service' | ||
2 | export * from './storage.service' | ||
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts new file mode 100644 index 000000000..a69fad31d --- /dev/null +++ b/client/src/app/core/wrappers/screen.service.ts | |||
@@ -0,0 +1,66 @@ | |||
1 | import { Injectable } from '@angular/core' | ||
2 | |||
3 | @Injectable() | ||
4 | export class ScreenService { | ||
5 | private windowInnerWidth: number | ||
6 | private lastFunctionCallTime: number | ||
7 | private cacheForMs = 500 | ||
8 | |||
9 | constructor () { | ||
10 | this.refreshWindowInnerWidth() | ||
11 | } | ||
12 | |||
13 | isInSmallView (marginLeft = 0) { | ||
14 | if (marginLeft > 0) { | ||
15 | const contentWidth = this.getWindowInnerWidth() - marginLeft | ||
16 | return contentWidth < 800 | ||
17 | } | ||
18 | |||
19 | return this.getWindowInnerWidth() < 800 | ||
20 | } | ||
21 | |||
22 | isInMediumView () { | ||
23 | return this.getWindowInnerWidth() < 1100 | ||
24 | } | ||
25 | |||
26 | isInMobileView () { | ||
27 | return this.getWindowInnerWidth() < 500 | ||
28 | } | ||
29 | |||
30 | isInTouchScreen () { | ||
31 | return 'ontouchstart' in window || navigator.msMaxTouchPoints | ||
32 | } | ||
33 | |||
34 | getNumberOfAvailableMiniatures () { | ||
35 | const screenWidth = this.getWindowInnerWidth() | ||
36 | |||
37 | let numberOfVideos = 1 | ||
38 | |||
39 | if (screenWidth > 1850) numberOfVideos = 7 | ||
40 | else if (screenWidth > 1600) numberOfVideos = 6 | ||
41 | else if (screenWidth > 1370) numberOfVideos = 5 | ||
42 | else if (screenWidth > 1100) numberOfVideos = 4 | ||
43 | else if (screenWidth > 850) numberOfVideos = 3 | ||
44 | |||
45 | return numberOfVideos | ||
46 | } | ||
47 | |||
48 | // Cache window inner width, because it's an expensive call | ||
49 | getWindowInnerWidth () { | ||
50 | if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth() | ||
51 | |||
52 | return this.windowInnerWidth | ||
53 | } | ||
54 | |||
55 | private refreshWindowInnerWidth () { | ||
56 | this.lastFunctionCallTime = new Date().getTime() | ||
57 | |||
58 | this.windowInnerWidth = window.innerWidth | ||
59 | } | ||
60 | |||
61 | private cacheWindowInnerWidthExpired () { | ||
62 | if (!this.lastFunctionCallTime) return true | ||
63 | |||
64 | return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs) | ||
65 | } | ||
66 | } | ||
diff --git a/client/src/app/core/wrappers/storage.service.ts b/client/src/app/core/wrappers/storage.service.ts new file mode 100644 index 000000000..9a60b9785 --- /dev/null +++ b/client/src/app/core/wrappers/storage.service.ts | |||
@@ -0,0 +1,37 @@ | |||
1 | import { Observable, Subject } from 'rxjs' | ||
2 | import { filter } from 'rxjs/operators' | ||
3 | import { Injectable } from '@angular/core' | ||
4 | import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers' | ||
5 | |||
6 | abstract class StorageService { | ||
7 | protected instance: Storage | ||
8 | static storageSub = new Subject<string>() | ||
9 | |||
10 | watch (keys?: string[]): Observable<string> { | ||
11 | return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true)) | ||
12 | } | ||
13 | |||
14 | getItem (key: string) { | ||
15 | return this.instance.getItem(key) | ||
16 | } | ||
17 | |||
18 | setItem (key: string, data: any, notifyOfUpdate = true) { | ||
19 | this.instance.setItem(key, data) | ||
20 | if (notifyOfUpdate) StorageService.storageSub.next(key) | ||
21 | } | ||
22 | |||
23 | removeItem (key: string, notifyOfUpdate = true) { | ||
24 | this.instance.removeItem(key) | ||
25 | if (notifyOfUpdate) StorageService.storageSub.next(key) | ||
26 | } | ||
27 | } | ||
28 | |||
29 | @Injectable() | ||
30 | export class LocalStorageService extends StorageService { | ||
31 | protected instance: Storage = peertubeLocalStorage | ||
32 | } | ||
33 | |||
34 | @Injectable() | ||
35 | export class SessionStorageService extends StorageService { | ||
36 | protected instance: Storage = peertubeSessionStorage | ||
37 | } | ||