Refactor video miniature

[github/Chocobozzz/PeerTube.git] / client / src / app / core / wrappers / screen.service.ts

diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index a69fad31df46e45e931c2d8f05e0c61f07eec9ac..c133b5fe91b6f41de258c79feb93059e8c1f5771 100644 (file)
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'
 
 @Injectable()
 export class ScreenService {
+  isBroadcastMessageDisplayed = false
+
   private windowInnerWidth: number
   private lastFunctionCallTime: number
   private cacheForMs = 500
@@ -28,7 +30,7 @@ export class ScreenService {
   }
 
   isInTouchScreen () {
-    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+    return !!('ontouchstart' in window || navigator.msMaxTouchPoints)
   }
 
   getNumberOfAvailableMiniatures () {
@@ -36,11 +38,10 @@ export class ScreenService {
 
     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
+    if (screenWidth > 1850) numberOfVideos = 5
+    else if (screenWidth > 1600) numberOfVideos = 4
+    else if (screenWidth > 1370) numberOfVideos = 3
+    else if (screenWidth > 1100) numberOfVideos = 2
 
     return numberOfVideos
   }
@@ -52,6 +53,64 @@ export class ScreenService {
     return this.windowInnerWidth
   }
 
+  // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
+  onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) {
+    let touchDownClientX: number
+    let touchDownClientY: number
+
+    const onTouchStart = (event: TouchEvent) => {
+      const firstTouch = event.touches[0]
+      touchDownClientX = firstTouch.clientX
+      touchDownClientY = firstTouch.clientY
+    }
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (!touchDownClientX || !touchDownClientY) {
+        return
+      }
+
+      const touchUpClientX = event.touches[0].clientX
+      const touchUpClientY = event.touches[0].clientY
+
+      const touchClientX = Math.abs(touchDownClientX - touchUpClientX)
+      const touchClientY = Math.abs(touchDownClientY - touchUpClientY)
+
+      if (touchClientX > touchClientY) {
+        if (touchClientX > 0) {
+          if (direction === 'left') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        } else {
+          if (direction === 'right') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        }
+      } else {
+        if (touchClientY > 0) {
+          if (direction === 'up') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        } else {
+          if (direction === 'down') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        }
+      }
+    }
+
+    document.addEventListener('touchstart', onTouchStart, false)
+    document.addEventListener('touchmove', onTouchMove, false)
+  }
+
+  private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
+    document.removeEventListener('touchstart', onTouchStart)
+    document.removeEventListener('touchmove', onTouchMove)
+  }
+
   private refreshWindowInnerWidth () {
     this.lastFunctionCallTime = new Date().getTime()