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