feat(gif) Support rating config + show display name over gif tile (#12461)

config.js

@@ -1503,6 +1503,8 @@ var config = {
     //     displayMode: 'all',
     //     // How long the GIF should be displayed on the tile (in milliseconds).
     //     tileTime: 5000,
+    //     // Limit results by rating: g, pg, pg-13, r. Default value: g.
+    //     rating: 'pg',
     // },
 
     // Logging

react/features/base/config/configType.ts

@@ -312,6 +312,7 @@ export interface IConfig {
     giphy?: {
         displayMode?: 'all' | 'tile' | 'chat';
         enabled?: boolean;
+        rating?: 'g' | 'pg' | 'pg-13' | 'r';
         sdkKey?: string;
         tileTime?: number;
     };

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -363,7 +363,6 @@ const defaultStyles = (theme: Theme) => {
             position: 'absolute' as const,
             width: '100%',
             height: '100%',
-            zIndex: 11,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',

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

@@ -1,14 +1,14 @@
 import { GiphyContent, GiphyGridView, GiphyMediaType } from '@giphy/react-native-sdk';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { createGifSentEvent, sendAnalytics } from '../../../analytics';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { sendMessage } from '../../../chat/actions.any';
 import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import ClearableInput from '../../../participants-pane/components/native/ClearableInput';
-import { formatGifUrlMessage, getGifUrl } from '../../functions';
+import { formatGifUrlMessage, getGifRating, getGifUrl } from '../../functions';
 
 import GifsMenuFooter from './GifsMenuFooter';
 import styles from './styles';
@@ -17,12 +17,19 @@ const GifsMenu = () => {
     const [ searchQuery, setSearchQuery ] = useState('');
     const dispatch = useDispatch();
     const { t } = useTranslation();
+    const rating = useSelector(getGifRating);
+
+    const options = {
+        mediaType: GiphyMediaType.Gif,
+        limit: 20,
+        rating
+    };
 
     const content = searchQuery === ''
-        ? GiphyContent.trending({ mediaType: GiphyMediaType.Gif })
+        ? GiphyContent.trending(options)
         : GiphyContent.search({
-            searchQuery,
-            mediaType: GiphyMediaType.Gif
+            ...options,
+            searchQuery
         });
 
     const sendGif = useCallback(e => {

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

@@ -20,7 +20,12 @@ import { setOverflowMenuVisible } from '../../../toolbox/actions.web';
 import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
 import { setGifDrawerVisibility } from '../../actions';
-import { formatGifUrlMessage, getGifAPIKey, getGifUrl } from '../../functions';
+import {
+    formatGifUrlMessage,
+    getGifAPIKey,
+    getGifRating,
+    getGifUrl
+} from '../../function.any';
 
 const OVERFLOW_DRAWER_PADDING = 16;
 
@@ -88,12 +93,13 @@ function GifsMenu() {
     const { t } = useTranslation();
     const overflowDrawer: boolean = useSelector(showOverflowDrawer);
     const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
+    const rating = useSelector(getGifRating);
 
     const fetchGifs = useCallback(async (offset = 0) => {
         const options: TrendingOptions = {
-            rating: 'pg-13',
             limit: 20,
-            offset
+            offset,
+            rating
         };
 
         if (!searchKey) {

react/features/gifs/constants.ts

@@ -7,3 +7,8 @@ export const GIF_DEFAULT_TIMEOUT = 5000;
  * The prefix for formatted GIF messages.
  */
 export const GIF_PREFIX = 'gif[';
+
+/**
+ * The Giphy default option for audience rating.
+ */
+export const GIF_DEFAULT_RATING = 'g';

react/features/gifs/function.any.ts

@@ -1,6 +1,6 @@
 import { IReduxState } from '../app/types';
 
-import { GIF_PREFIX } from './constants';
+import { GIF_DEFAULT_RATING, GIF_PREFIX } from './constants';
 import { IGif } from './reducer';
 
 /**
@@ -87,3 +87,15 @@ export function getGifDisplayMode(state: IReduxState) {
 
     return giphy?.displayMode || 'all';
 }
+
+/**
+ * Get the GIF audience rating.
+ *
+ * @param {IReduxState} state - Redux state.
+ * @returns {string}
+ */
+export function getGifRating(state: IReduxState) {
+    const { giphy } = state['features/base/config'];
+
+    return giphy?.rating || GIF_DEFAULT_RATING;
+}