feat(large-video): Switch to tile view on large video double tap

react/features/large-video/components/LargeVideo.web.js

@@ -7,6 +7,7 @@ import { connect } from '../../base/redux';
 import { setColorAlpha } from '../../base/util';
 import { SharedVideo } from '../../shared-video/components/web';
 import { Captions } from '../../subtitles/';
+import { setTileView } from '../../video-layout/actions';
 
 declare var interfaceConfig: Object;
 
@@ -36,7 +37,12 @@ type Props = {
      * Used to determine the value of the autoplay attribute of the underlying
      * video element.
      */
-    _noAutoPlayVideo: boolean
+    _noAutoPlayVideo: boolean,
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function
 }
 
 /**
@@ -46,6 +52,19 @@ type Props = {
  * @extends Component
  */
 class LargeVideo extends Component<Props> {
+    _tappedTimeout: ?TimeoutID
+
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+
+        this._clearTapTimeout = this._clearTapTimeout.bind(this);
+        this._onDoubleTap = this._onDoubleTap.bind(this);
+    }
 
     /**
      * Implements React's {@link Component#render()}.
@@ -71,7 +90,9 @@ class LargeVideo extends Component<Props> {
 
                 <Watermarks />
 
-                <div id = 'dominantSpeaker'>
+                <div
+                    id = 'dominantSpeaker'
+                    onTouchEnd = { this._onDoubleTap }>
                     <div className = 'dynamic-shadow' />
                     <div id = 'dominantSpeakerAvatarContainer' />
                 </div>
@@ -90,6 +111,7 @@ class LargeVideo extends Component<Props> {
                       */}
                     <div
                         id = 'largeVideoWrapper'
+                        onTouchEnd = { this._onDoubleTap }
                         role = 'figure' >
                         <video
                             autoPlay = { !_noAutoPlayVideo }
@@ -104,6 +126,19 @@ class LargeVideo extends Component<Props> {
         );
     }
 
+    _clearTapTimeout: () => void
+
+    /**
+     * Clears the '_tappedTimout'.
+     *
+     * @private
+     * @returns {void}
+     */
+    _clearTapTimeout() {
+        clearTimeout(this._tappedTimeout);
+        this._tappedTimeout = undefined;
+    }
+
     /**
      * Creates the custom styles object.
      *
@@ -129,6 +164,27 @@ class LargeVideo extends Component<Props> {
 
         return styles;
     }
+
+    _onDoubleTap: () => void
+
+    /**
+     * Creates the custom styles object.
+     *
+     * @param {Object} e - The event.
+     * @private
+     * @returns {void}
+     */
+    _onDoubleTap(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (this._tappedTimeout) {
+            this._clearTapTimeout();
+            this.props.dispatch(setTileView(true));
+        } else {
+            this._tappedTimeout = setTimeout(this._clearTapTimeout, 300);
+        }
+    }
 }