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 = 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
  46
  47     return numberOfVideos
  48   }
  49
  50   // Cache window inner width, because it's an expensive call
  51   getWindowInnerWidth () {
  52     if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
  53
  54     return this.windowInnerWidth
  55   }
  56
  57   private refreshWindowInnerWidth () {
  58     this.lastFunctionCallTime = new Date().getTime()
  59
  60     this.windowInnerWidth = window.innerWidth
  61   }
  62
  63   private cacheWindowInnerWidthExpired () {
  64     if (!this.lastFunctionCallTime) return true
  65
  66     return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
  67   }
  68 }