client/src/app/core/wrappers/screen.service.ts

   1 import { Injectable } from '@angular/core'
   2
   3 @Injectable()
   4 export class ScreenService {
   5   isBroadcastMessageDisplayed = false
   6
   7   private windowInnerWidth: number
   8   private lastFunctionCallTime: number
   9   private cacheForMs = 500
  10
  11   constructor () {
  12     this.refreshWindowInnerWidth()
  13   }
  14
  15   isInSmallView (marginLeft = 0) {
  16     if (marginLeft > 0) {
  17       const contentWidth = this.getWindowInnerWidth() - marginLeft
  18       return contentWidth < 800
  19     }
  20
  21     return this.getWindowInnerWidth() < 800
  22   }
  23
  24   isInMediumView () {
  25     return this.getWindowInnerWidth() < 1100
  26   }
  27
  28   isInMobileView () {
  29     return this.getWindowInnerWidth() < 500
  30   }
  31
  32   isInTouchScreen () {
  33     return !!('ontouchstart' in window || navigator.msMaxTouchPoints)
  34   }
  35
  36   getNumberOfAvailableMiniatures () {
  37     const screenWidth = this.getWindowInnerWidth()
  38
  39     let numberOfVideos = 1
  40
  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
  45
  46     return numberOfVideos
  47   }
  48
  49   // Cache window inner width, because it's an expensive call
  50   getWindowInnerWidth () {
  51     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
  52
  53     return this.windowInnerWidth
  54   }
  55
  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
 114   private refreshWindowInnerWidth () {
 115     this.lastFunctionCallTime = new Date().getTime()
 116
 117     this.windowInnerWidth = window.innerWidth
 118   }
 119
 120   private cacheWindowInnerWidthExpired () {
 121     if (!this.lastFunctionCallTime) return true
 122
 123     return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
 124   }
 125 }