Reorganize client shared modules

3 files changed, 105 insertions, 0 deletions

diff --git a/client/src/app/core/wrappers/index.ts b/client/src/app/core/wrappers/index.ts
new file mode 100644
index 000000000..d82b70070
--- /dev/null
+++ b/client/src/app/core/wrappers/index.ts
@@ -0,0 +1,2 @@
+export * from './screen.service'
+export * from './storage.service'
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
new file mode 100644
index 000000000..a69fad31d
--- /dev/null
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core'
+
+@Injectable()
+export class ScreenService {
+  private windowInnerWidth: number
+  private lastFunctionCallTime: number
+  private cacheForMs = 500
+
+  constructor () {
+    this.refreshWindowInnerWidth()
+  }
+
+  isInSmallView (marginLeft = 0) {
+    if (marginLeft > 0) {
+      const contentWidth = this.getWindowInnerWidth() - marginLeft
+      return contentWidth < 800
+    }
+
+    return this.getWindowInnerWidth() < 800
+  }
+
+  isInMediumView () {
+    return this.getWindowInnerWidth() < 1100
+  }
+
+  isInMobileView () {
+    return this.getWindowInnerWidth() < 500
+  }
+
+  isInTouchScreen () {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+  }
+
+  getNumberOfAvailableMiniatures () {
+    const screenWidth = this.getWindowInnerWidth()
+
+    let numberOfVideos = 1
+
+    if (screenWidth > 1850) numberOfVideos = 7
+    else if (screenWidth > 1600) numberOfVideos = 6
+    else if (screenWidth > 1370) numberOfVideos = 5
+    else if (screenWidth > 1100) numberOfVideos = 4
+    else if (screenWidth > 850) numberOfVideos = 3
+
+    return numberOfVideos
+  }
+
+  // Cache window inner width, because it's an expensive call
+  getWindowInnerWidth () {
+    if (this.cacheWindowInnerWidthExpired()) this.refreshWindowInnerWidth()
+
+    return this.windowInnerWidth
+  }
+
+  private refreshWindowInnerWidth () {
+    this.lastFunctionCallTime = new Date().getTime()
+
+    this.windowInnerWidth = window.innerWidth
+  }
+
+  private cacheWindowInnerWidthExpired () {
+    if (!this.lastFunctionCallTime) return true
+
+    return new Date().getTime() > (this.lastFunctionCallTime + this.cacheForMs)
+  }
+}
diff --git a/client/src/app/core/wrappers/storage.service.ts b/client/src/app/core/wrappers/storage.service.ts
new file mode 100644
index 000000000..9a60b9785
--- /dev/null
+++ b/client/src/app/core/wrappers/storage.service.ts
@@ -0,0 +1,37 @@
+import { Observable, Subject } from 'rxjs'
+import { filter } from 'rxjs/operators'
+import { Injectable } from '@angular/core'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@app/helpers'
+
+abstract class StorageService {
+  protected instance: Storage
+  static storageSub = new Subject<string>()
+
+  watch (keys?: string[]): Observable<string> {
+    return StorageService.storageSub.asObservable().pipe(filter(val => keys ? keys.includes(val) : true))
+  }
+
+  getItem (key: string) {
+    return this.instance.getItem(key)
+  }
+
+  setItem (key: string, data: any, notifyOfUpdate = true) {
+    this.instance.setItem(key, data)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+
+  removeItem (key: string, notifyOfUpdate = true) {
+    this.instance.removeItem(key)
+    if (notifyOfUpdate) StorageService.storageSub.next(key)
+  }
+}
+
+@Injectable()
+export class LocalStorageService extends StorageService {
+  protected instance: Storage = peertubeLocalStorage
+}
+
+@Injectable()
+export class SessionStorageService extends StorageService {
+  protected instance: Storage = peertubeSessionStorage
+}