init

react/features/gifs/components/native/GifsMenu.tsx

@@ -0,0 +1,63 @@
+import { GiphyContent, GiphyGridView, GiphyMediaType, GiphyRating } from '@giphy/react-native-sdk';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { createGifSentEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import Input from '../../../base/ui/components/native/Input';
+import { sendMessage } from '../../../chat/actions.any';
+import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { formatGifUrlMessage, getGifRating, getGifUrl } from '../../functions.native';
+
+import GifsMenuFooter from './GifsMenuFooter';
+import styles from './styles';
+
+const GifsMenu = () => {
+    const [ searchQuery, setSearchQuery ] = useState('');
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const rating = useSelector(getGifRating) as GiphyRating;
+    const options = {
+        mediaType: GiphyMediaType.Gif,
+        limit: 20,
+        rating
+    };
+
+    const content = searchQuery === ''
+        ? GiphyContent.trending(options)
+        : GiphyContent.search({
+            ...options,
+            searchQuery
+        });
+
+    const sendGif = useCallback(e => {
+        const url = getGifUrl(e.nativeEvent.media);
+
+        sendAnalytics(createGifSentEvent());
+
+        dispatch(sendMessage(formatGifUrlMessage(url), true));
+        goBack();
+    }, []);
+
+    return (
+        <JitsiScreen
+            footerComponent = { GifsMenuFooter }
+            style = { styles.container }>
+            <Input
+                clearable = { true }
+                customStyles = {{ container: styles.customContainer }}
+                onChange = { setSearchQuery }
+                placeholder = { t('giphy.search') }
+                value = { searchQuery } />
+            <GiphyGridView
+                cellPadding = { 5 }
+                content = { content }
+                onMediaSelect = { sendGif }
+                style = { styles.grid } />
+        </JitsiScreen>
+    );
+};
+
+export default GifsMenu;

react/features/gifs/components/native/GifsMenuFooter.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, Text, TextStyle, View, ViewStyle } from 'react-native';
+
+import styles from './styles';
+
+
+/**
+ * Implements the gifs menu footer component.
+ *
+ * @returns { JSX.Element} - The gifs menu footer component.
+ */
+const GifsMenuFooter = (): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <View style = { styles.credit as ViewStyle }>
+            <Text style = { styles.creditText as TextStyle }>
+                { t('poweredby') }
+            </Text>
+            <Image
+                source = { require('../../../../../images/GIPHY_logo.png') } />
+        </View>
+    );
+};
+
+export default GifsMenuFooter;

react/features/gifs/components/native/styles.ts

@@ -0,0 +1,36 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+export default {
+    container: {
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1
+    },
+
+    customContainer: {
+        marginHorizontal: BaseTheme.spacing[3],
+        marginVertical: BaseTheme.spacing[2]
+    },
+
+    grid: {
+        flex: 1,
+        marginLeft: BaseTheme.spacing[3],
+        marginRight: BaseTheme.spacing[3]
+    },
+
+    credit: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        display: 'flex',
+        flexDirection: 'row',
+        height: 56,
+        justifyContent: 'center',
+        marginBottom: BaseTheme.spacing[0],
+        paddingBottom: BaseTheme.spacing[4],
+        width: '100%'
+    },
+
+    creditText: {
+        color: BaseTheme.palette.text01,
+        fontWeight: 'bold'
+    }
+};