refactor(media_control): update delay for mobile devices

Keeps 2 seconds to hide for desktop and set 3 seconds for mobile devices.
joaopaulovieira · May 23, 2021 · 614d82f · 614d82f
1 parent 238e689
commit 614d82f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/base/media_control/media_control.js b/src/base/media_control/media_control.js
@@ -4,6 +4,9 @@ import MediaControlComponentPlugin from '../media_control_component/media_contro
 import pluginStyle from './public/media_control.scss'
 import defaultTemplateHtml from './public/default_template.html'
 
+const DESKTOP_HIDE_DELAY = 2000
+const MOBILE_HIDE_DELAY = 3000
+
 export default class MediaControlPlugin extends UICorePlugin {
   get name() { return 'media_control' }
 
@@ -109,7 +112,8 @@ export default class MediaControlPlugin extends UICorePlugin {
   }
 
   delayedHide() {
-    this._hideId = setTimeout(() => this.hide(), 2000)
+    const delay = Browser.isMobile ? MOBILE_HIDE_DELAY : DESKTOP_HIDE_DELAY
+    this._hideId = setTimeout(() => this.hide(), delay)
   }
 
   hide() {

diff --git a/src/base/media_control/media_control.test.js b/src/base/media_control/media_control.test.js
@@ -102,7 +102,7 @@ describe('MediaControl Plugin', () => {
       const { plugin } = setupTest()
 
       expect(plugin.events).toEqual({
-        'touchstart .media-control__elements': 'setKeepVisible',
+        'touchstart .media-control__elements': 'onTouchStart',
         'touchend .media-control__elements': 'removeKeepVisible',
       })
       Browser.isMobile = oldValue
@@ -414,7 +414,7 @@ describe('MediaControl Plugin', () => {
       expect(plugin.delayedHide).toHaveBeenCalledTimes(1)
     })
 
-    test('resets delayedHide timer if new call occurs', () => {
+    test('resets hide timer if new call occurs', () => {
       jest.useFakeTimers()
 
       const { plugin } = setupTest()
@@ -434,7 +434,30 @@ describe('MediaControl Plugin', () => {
   })
 
   describe('delayedHide method', () => {
-    test('calls hide method after 2 seconds', () => {
+    test('calls hide method after 2 seconds for desktop devices', () => {
+      const oldValue = Browser.isMobile
+      Browser.isMobile = false
+
+      jest.useFakeTimers()
+
+      const { plugin } = setupTest()
+      jest.spyOn(plugin, 'hide')
+      plugin.isVideoStarted = true
+      plugin.delayedHide()
+
+      expect(plugin.hide).not.toHaveBeenCalled()
+
+      jest.advanceTimersByTime(2000)
+
+      expect(plugin.hide).toHaveBeenCalledTimes(1)
+
+      Browser.isMobile = oldValue
+    })
+
+    test('calls hide method after 3 seconds for desktop devices', () => {
+      const oldValue = Browser.isMobile
+      Browser.isMobile = true
+
       jest.useFakeTimers()
 
       const { plugin } = setupTest()
@@ -446,7 +469,13 @@ describe('MediaControl Plugin', () => {
 
       jest.advanceTimersByTime(2000)
 
+      expect(plugin.hide).not.toHaveBeenCalled()
+
+      jest.advanceTimersByTime(1000)
+
       expect(plugin.hide).toHaveBeenCalledTimes(1)
+
+      Browser.isMobile = oldValue
     })
   })