]>
Commit | Line | Data |
---|---|---|
fc11a44e | 1 | import { Injectable } from '@angular/core' |
bbe0f064 C |
2 | |
3 | @Injectable() | |
4 | export class ScreenService { | |
7034b3c9 | 5 | isBroadcastMessageDisplayed = false |
6 | ||
bbe0f064 | 7 | private windowInnerWidth: number |
fc11a44e C |
8 | private lastFunctionCallTime: number |
9 | private cacheForMs = 500 | |
bbe0f064 | 10 | |
fc11a44e C |
11 | constructor () { |
12 | this.refreshWindowInnerWidth() | |
bbe0f064 C |
13 | } |
14 | ||
8544d8f5 K |
15 | isInSmallView (marginLeft = 0) { |
16 | if (marginLeft > 0) { | |
17 | const contentWidth = this.getWindowInnerWidth() - marginLeft | |
18 | return contentWidth < 800 | |
19 | } | |
20 | ||
8ff3f883 | 21 | return this.getWindowInnerWidth() < 800 |
bbe0f064 C |
22 | } |
23 | ||
3b20bdd6 RK |
24 | isInMediumView () { |
25 | return this.getWindowInnerWidth() < 1100 | |
26 | } | |
27 | ||
bbe0f064 | 28 | isInMobileView () { |
fc11a44e C |
29 | return this.getWindowInnerWidth() < 500 |
30 | } | |
31 | ||
8dfceec4 | 32 | isInTouchScreen () { |
cd2fad00 | 33 | return !!('ontouchstart' in window || (navigator as any).msMaxTouchPoints) |
8dfceec4 C |
34 | } |
35 | ||
6eb62c33 C |
36 | getNumberOfAvailableMiniatures () { |
37 | const screenWidth = this.getWindowInnerWidth() | |
38 | ||
39 | let numberOfVideos = 1 | |
40 | ||
0f7407d9 | 41 | if (screenWidth > 1850) numberOfVideos = 5 |
9e140971 C |
42 | else if (screenWidth > 1410) numberOfVideos = 4 |
43 | else if (screenWidth > 1120) numberOfVideos = 3 | |
44 | else if (screenWidth > 890) numberOfVideos = 2 | |
6eb62c33 C |
45 | |
46 | return numberOfVideos | |
47 | } | |
48 | ||
fc11a44e | 49 | // Cache window inner width, because it's an expensive call |
6eb62c33 | 50 | getWindowInnerWidth () { |
fc11a44e C |
51 | if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth() |
52 | ||
53 | return this.windowInnerWidth | |
54 | } | |
55 | ||
245b9d27 K |
56 | // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android |
57 | onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) { | |
58 | let touchDownClientX: number | |
59 | let touchDownClientY: number | |
60 | ||
61 | const onTouchStart = (event: TouchEvent) => { | |
62 | const firstTouch = event.touches[0] | |
63 | touchDownClientX = firstTouch.clientX | |
64 | touchDownClientY = firstTouch.clientY | |
65 | } | |
66 | ||
67 | const onTouchMove = (event: TouchEvent) => { | |
68 | if (!touchDownClientX || !touchDownClientY) { | |
69 | return | |
70 | } | |
71 | ||
72 | const touchUpClientX = event.touches[0].clientX | |
73 | const touchUpClientY = event.touches[0].clientY | |
74 | ||
75 | const touchClientX = Math.abs(touchDownClientX - touchUpClientX) | |
76 | const touchClientY = Math.abs(touchDownClientY - touchUpClientY) | |
77 | ||
78 | if (touchClientX > touchClientY) { | |
79 | if (touchClientX > 0) { | |
80 | if (direction === 'left') { | |
81 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | |
82 | action() | |
83 | } | |
84 | } else { | |
85 | if (direction === 'right') { | |
86 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | |
87 | action() | |
88 | } | |
89 | } | |
90 | } else { | |
91 | if (touchClientY > 0) { | |
92 | if (direction === 'up') { | |
93 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | |
94 | action() | |
95 | } | |
96 | } else { | |
97 | if (direction === 'down') { | |
98 | if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove) | |
99 | action() | |
100 | } | |
101 | } | |
102 | } | |
103 | } | |
104 | ||
105 | document.addEventListener('touchstart', onTouchStart, false) | |
106 | document.addEventListener('touchmove', onTouchMove, false) | |
107 | } | |
108 | ||
109 | private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) { | |
110 | document.removeEventListener('touchstart', onTouchStart) | |
111 | document.removeEventListener('touchmove', onTouchMove) | |
112 | } | |
113 | ||
fc11a44e C |
114 | private refreshWindowInnerWidth () { |
115 | this.lastFunctionCallTime = new Date().getTime() | |
116 | ||
117 | this.windowInnerWidth = window.innerWidth | |
118 | } | |
119 | ||
120 | private cacheWindowInnerWidthExpired () { | |
3a0fb65c C |
121 | if (!this.lastFunctionCallTime) return true |
122 | ||
fc11a44e | 123 | return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs) |
bbe0f064 C |
124 | } |
125 | } |