1 import { Injectable } from '@angular/core'
4 export class ScreenService {
5 isBroadcastMessageDisplayed = false
7 private windowInnerWidth: number
8 private lastFunctionCallTime: number
9 private cacheForMs = 500
12 this.refreshWindowInnerWidth()
15 isInSmallView (marginLeft = 0) {
17 const contentWidth = this.getWindowInnerWidth() - marginLeft
18 return contentWidth < 800
21 return this.getWindowInnerWidth() < 800
25 return this.getWindowInnerWidth() < 1100
29 return this.getWindowInnerWidth() < 500
33 return !!('ontouchstart' in window || (navigator as any).msMaxTouchPoints)
36 getNumberOfAvailableMiniatures () {
37 const screenWidth = this.getWindowInnerWidth()
39 let numberOfVideos = 1
41 if (screenWidth > 1850) numberOfVideos = 5
42 else if (screenWidth > 1410) numberOfVideos = 4
43 else if (screenWidth > 1120) numberOfVideos = 3
44 else if (screenWidth > 890) numberOfVideos = 2
49 // Cache window inner width, because it's an expensive call
50 getWindowInnerWidth () {
51 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
53 return this.windowInnerWidth
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
61 const onTouchStart = (event: TouchEvent) => {
62 const firstTouch = event.touches[0]
63 touchDownClientX = firstTouch.clientX
64 touchDownClientY = firstTouch.clientY
67 const onTouchMove = (event: TouchEvent) => {
68 if (!touchDownClientX || !touchDownClientY) {
72 const touchUpClientX = event.touches[0].clientX
73 const touchUpClientY = event.touches[0].clientY
75 const touchClientX = Math.abs(touchDownClientX - touchUpClientX)
76 const touchClientY = Math.abs(touchDownClientY - touchUpClientY)
78 if (touchClientX > touchClientY) {
79 if (touchClientX > 0) {
80 if (direction === 'left') {
81 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
85 if (direction === 'right') {
86 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
91 if (touchClientY > 0) {
92 if (direction === 'up') {
93 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
97 if (direction === 'down') {
98 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
105 document.addEventListener('touchstart', onTouchStart, false)
106 document.addEventListener('touchmove', onTouchMove, false)
109 private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
110 document.removeEventListener('touchstart', onTouchStart)
111 document.removeEventListener('touchmove', onTouchMove)
114 private refreshWindowInnerWidth () {
115 this.lastFunctionCallTime = new Date().getTime()
117 this.windowInnerWidth = window.innerWidth
120 private cacheWindowInnerWidthExpired () {
121 if (!this.lastFunctionCallTime) return true
123 return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)