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