From bcc1be675f19c118aa6e29a4ff160a5295244e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Fri, 13 Sep 2019 12:06:02 +0200
Subject: [PATCH] thumbnail: use a functional component

Simplifies the code a bit, and we use no lifecycle methods.
---
 .../filmstrip/components/native/Thumbnail.js  | 153 +++++++++---------
 1 file changed, 73 insertions(+), 80 deletions(-)

diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js
index dc87cdb0e..2ef83860e 100644
--- a/react/features/filmstrip/components/native/Thumbnail.js
+++ b/react/features/filmstrip/components/native/Thumbnail.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import type { Dispatch } from 'redux';
 
@@ -111,93 +111,86 @@ type Props = {
 /**
  * React component for video thumbnail.
  *
- * @extends Component
+ * @param {Props} props - Properties passed to this functional component.
+ * @returns {Component} - A React component.
  */
-class Thumbnail extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const {
-            _audioMuted: audioMuted,
-            _largeVideo: largeVideo,
-            _onClick,
-            _onShowRemoteVideoMenu,
-            _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
-            _renderModeratorIndicator: renderModeratorIndicator,
-            _styles,
-            _videoTrack: videoTrack,
-            disableTint,
-            participant,
-            renderDisplayName,
-            tileView
-        } = this.props;
+function Thumbnail(props: Props) {
+    const {
+        _audioMuted: audioMuted,
+        _largeVideo: largeVideo,
+        _onClick,
+        _onShowRemoteVideoMenu,
+        _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
+        _renderModeratorIndicator: renderModeratorIndicator,
+        _styles,
+        _videoTrack: videoTrack,
+        disableTint,
+        participant,
+        renderDisplayName,
+        tileView
+    } = props;
 
-        const participantId = participant.id;
-        const participantInLargeVideo
-            = participantId === largeVideo.participantId;
-        const videoMuted = !videoTrack || videoTrack.muted;
-        const isScreenShare = videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
+    const participantId = participant.id;
+    const participantInLargeVideo
+        = participantId === largeVideo.participantId;
+    const videoMuted = !videoTrack || videoTrack.muted;
+    const isScreenShare = videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
 
-        return (
-            <Container
-                onClick = { _onClick }
-                onLongPress = { participant.local ? undefined : _onShowRemoteVideoMenu }
+    return (
+        <Container
+            onClick = { _onClick }
+            onLongPress = { participant.local ? undefined : _onShowRemoteVideoMenu }
+            style = { [
+                styles.thumbnail,
+                participant.pinned && !tileView
+                    ? _styles.thumbnailPinned : null,
+                this.props.styleOverrides || null
+            ] }
+            touchFeedback = { false }>
+
+            <ParticipantView
+                avatarSize = { AVATAR_SIZE }
+                disableVideo = { isScreenShare }
+                participantId = { participantId }
+                style = { _styles.participantViewStyle }
+                tintEnabled = { participantInLargeVideo && !disableTint }
+                tintStyle = { _styles.activeThumbnailTint }
+                zOrder = { 1 } />
+
+            { renderDisplayName && <DisplayNameLabel participantId = { participantId } /> }
+
+            { renderModeratorIndicator
+                && <View style = { styles.moderatorIndicatorContainer }>
+                    <ModeratorIndicator />
+                </View> }
+
+            <View
                 style = { [
-                    styles.thumbnail,
-                    participant.pinned && !tileView
-                        ? _styles.thumbnailPinned : null,
-                    this.props.styleOverrides || null
-                ] }
-                touchFeedback = { false }>
+                    styles.thumbnailTopIndicatorContainer,
+                    styles.thumbnailTopLeftIndicatorContainer
+                ] }>
+                <RaisedHandIndicator participantId = { participant.id } />
+                { renderDominantSpeakerIndicator && <DominantSpeakerIndicator /> }
+            </View>
 
-                <ParticipantView
-                    avatarSize = { AVATAR_SIZE }
-                    disableVideo = { isScreenShare }
-                    participantId = { participantId }
-                    style = { _styles.participantViewStyle }
-                    tintEnabled = { participantInLargeVideo && !disableTint }
-                    tintStyle = { _styles.activeThumbnailTint }
-                    zOrder = { 1 } />
+            <View
+                style = { [
+                    styles.thumbnailTopIndicatorContainer,
+                    styles.thumbnailTopRightIndicatorContainer
+                ] }>
+                <ConnectionIndicator participantId = { participant.id } />
+            </View>
 
-                { renderDisplayName && <DisplayNameLabel participantId = { participantId } /> }
-
-                { renderModeratorIndicator
-                    && <View style = { styles.moderatorIndicatorContainer }>
-                        <ModeratorIndicator />
-                    </View> }
-
-                <View
-                    style = { [
-                        styles.thumbnailTopIndicatorContainer,
-                        styles.thumbnailTopLeftIndicatorContainer
-                    ] }>
-                    <RaisedHandIndicator participantId = { participant.id } />
-                    { renderDominantSpeakerIndicator && <DominantSpeakerIndicator /> }
-                </View>
-
-                <View
-                    style = { [
-                        styles.thumbnailTopIndicatorContainer,
-                        styles.thumbnailTopRightIndicatorContainer
-                    ] }>
-                    <ConnectionIndicator participantId = { participant.id } />
-                </View>
-
-                <Container style = { styles.thumbnailIndicatorContainer }>
-                    { audioMuted
-                        && <AudioMutedIndicator /> }
-
-                    { videoMuted
-                        && <VideoMutedIndicator /> }
-                </Container>
+            <Container style = { styles.thumbnailIndicatorContainer }>
+                { audioMuted
+                    && <AudioMutedIndicator /> }
 
+                { videoMuted
+                    && <VideoMutedIndicator /> }
             </Container>
-        );
-    }
+
+        </Container>
+    );
 }
 
 /**