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.msMaxTouchPoints)
36 getNumberOfAvailableMiniatures () {
37 const screenWidth = this.getWindowInnerWidth()
39 let numberOfVideos = 1
41 if (screenWidth > 1850) numberOfVideos = 7
42 else if (screenWidth > 1600) numberOfVideos = 6
43 else if (screenWidth > 1370) numberOfVideos = 5
44 else if (screenWidth > 1100) numberOfVideos = 4
45 else if (screenWidth > 850) numberOfVideos = 3
50 // Cache window inner width, because it's an expensive call
51 getWindowInnerWidth () {
52 if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
54 return this.windowInnerWidth
57 // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
58 onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) {
59 let touchDownClientX: number
60 let touchDownClientY: number
62 const onTouchStart = (event: TouchEvent) => {
63 const firstTouch = event.touches[0]
64 touchDownClientX = firstTouch.clientX
65 touchDownClientY = firstTouch.clientY
68 const onTouchMove = (event: TouchEvent) => {
69 if (!touchDownClientX || !touchDownClientY) {
73 const touchUpClientX = event.touches[0].clientX
74 const touchUpClientY = event.touches[0].clientY
76 const touchClientX = Math.abs(touchDownClientX - touchUpClientX)
77 const touchClientY = Math.abs(touchDownClientY - touchUpClientY)
79 if (touchClientX > touchClientY) {
80 if (touchClientX > 0) {
81 if (direction === 'left') {
82 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
86 if (direction === 'right') {
87 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
92 if (touchClientY > 0) {
93 if (direction === 'up') {
94 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
98 if (direction === 'down') {
99 if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
106 document.addEventListener('touchstart', onTouchStart, false)
107 document.addEventListener('touchmove', onTouchMove, false)
110 private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
111 document.removeEventListener('touchstart', onTouchStart)
112 document.removeEventListener('touchmove', onTouchMove)
115 private refreshWindowInnerWidth () {
116 this.lastFunctionCallTime = new Date().getTime()
118 this.windowInnerWidth = window.innerWidth
121 private cacheWindowInnerWidthExpired () {
122 if (!this.lastFunctionCallTime) return true
124 return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)