client/src/app/shared/misc/screen.service.ts

   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 () {
  14     return this.getWindowInnerWidth() < 800
  15   }
  16
  17   isInMediumView () {
  18     return this.getWindowInnerWidth() < 1100
  19   }
  20
  21   isInMobileView () {
  22     return this.getWindowInnerWidth() < 500
  23   }
  24
  25   isInTouchScreen () {
  26     return 'ontouchstart' in window || navigator.msMaxTouchPoints
  27   }
  28
  29   getNumberOfAvailableMiniatures () {
  30     const screenWidth = this.getWindowInnerWidth()
  31
  32     let numberOfVideos = 1
  33
  34     if (screenWidth > 1850) numberOfVideos = 6
  35     else if (screenWidth > 1600) numberOfVideos = 5
  36     else if (screenWidth > 1370) numberOfVideos = 4
  37     else if (screenWidth > 1100) numberOfVideos = 3
  38     else if (screenWidth > 850) numberOfVideos = 2
  39
  40     return numberOfVideos
  41   }
  42
  43   // Cache window inner width, because it's an expensive call
  44   getWindowInnerWidth () {
  45     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
  46
  47     return this.windowInnerWidth
  48   }
  49
  50   private refreshWindowInnerWidth () {
  51     this.lastFunctionCallTime = new Date().getTime()
  52
  53     this.windowInnerWidth = window.innerWidth
  54   }
  55
  56   private cacheWindowInnerWidthExpired () {
  57     if (!this.lastFunctionCallTime) return true
  58
  59     return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
  60   }
  61 }