Merge pull request #4669 from coralproject/fix/CORL-3180-dont-autopla…

…y-gifs-mod-queue

[CORL-3180]: update to not autoplay tenor gifs in mod queue

client/src/core/client/admin/components/MediaContainer/GiphyMedia.tsx → client/src/core/client/admin/components/MediaContainer/GifMedia.tsx

@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
 import { ButtonPlayIcon, SvgIcon } from "coral-ui/components/icons";
-import { BaseButton, Flex } from "coral-ui/components/v2";
+import { BaseButton, Button, Flex } from "coral-ui/components/v2";
 
 import styles from "./Media.css";
 
@@ -12,19 +12,56 @@ interface Props {
   width: number | null;
   height: number | null;
   video: string | null;
+  url: string | null;
 }
 
-const GiphyMedia: FunctionComponent<Props> = ({
+const GifMedia: FunctionComponent<Props> = ({
   still,
   title,
   width,
   height,
   video,
+  url,
 }) => {
   const [showAnimated, setShowAnimated] = useState(false);
   const toggleImage = useCallback(() => {
     setShowAnimated(!showAnimated);
   }, [showAnimated]);
+
+  if (!still && !video) {
+    // Fallback to show/hide gif if there is no still and no video
+    return (
+      <>
+        <Button
+          iconLeft
+          variant="outlined"
+          color="regular"
+          onClick={toggleImage}
+          size="small"
+          className={styles.showHideButton}
+          aria-expanded="false"
+        >
+          {showAnimated ? (
+            <Localized id="comments-embedLinks-hide-gif">Hide GIF</Localized>
+          ) : (
+            <Localized id="comments-embedLinks-show-gif">Show GIF</Localized>
+          )}
+        </Button>
+        {showAnimated && (
+          <div className={styles.embed}>
+            <img
+              src={url ?? ""}
+              className={styles.image}
+              loading="lazy"
+              referrerPolicy="no-referrer"
+              alt={title ?? ""}
+            />
+          </div>
+        )}
+      </>
+    );
+  }
+
   return (
     <div className={styles.embed}>
       {!showAnimated && still && (
@@ -74,4 +111,4 @@ const GiphyMedia: FunctionComponent<Props> = ({
   );
 };
 
-export default GiphyMedia;
+export default GifMedia;

client/src/core/client/admin/components/MediaContainer/Media.css

@@ -32,3 +32,8 @@
   display: block;
   max-width: 100%;
 }
+
+.showHideButton {
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+}

client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx

@@ -6,8 +6,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
 import { MediaContainer_comment } from "coral-admin/__generated__/MediaContainer_comment.graphql";
 
 import ExternalMedia from "./ExternalMedia";
-import GiphyMedia from "./GiphyMedia";
-import TenorMedia from "./TenorMedia";
+import GifMedia from "./GifMedia";
 import TwitterMedia from "./TwitterMedia";
 import YouTubeMedia from "./YouTubeMedia";
 
@@ -24,12 +23,13 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
   switch (media.__typename) {
     case "GiphyMedia":
       return (
-        <GiphyMedia
+        <GifMedia
           still={media.still}
           video={media.video}
           title={media.title}
           width={media.width}
           height={media.height}
+          url={media.url}
         />
       );
     case "ExternalMedia":
@@ -59,7 +59,16 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
         />
       );
     case "TenorMedia":
-      return <TenorMedia url={media.url} title={media.title} />;
+      return (
+        <GifMedia
+          still={media.tenorStill}
+          video={media.tenorVideo}
+          title={media.title}
+          width={media.width}
+          height={media.height}
+          url={media.url}
+        />
+      );
     case "%other":
       return null;
   }
@@ -86,6 +95,10 @@ const enhanced = withFragmentContainer<Props>({
           ... on TenorMedia {
             url
             title
+            width
+            height
+            tenorStill: still
+            tenorVideo: video
           }
           ... on TwitterMedia {
             url

client/src/core/client/admin/components/MediaContainer/index.ts

@@ -1,4 +1,4 @@
 export { default as MediaContainer } from "./MediaContainer";
-export { default as GiphyMedia } from "./GiphyMedia";
+export { default as GifMedia } from "./GifMedia";
 export { default as TwitterMedia } from "./TwitterMedia";
 export { default as YouTubeMedia } from "./YouTubeMedia";

client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx

@@ -4,14 +4,13 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { HorizontalGutter, Timestamp } from "coral-ui/components/v2";
 import ExternalMedia from "../MediaContainer/ExternalMedia";
-import GiphyMedia from "../MediaContainer/GiphyMedia";
+import GifMedia from "../MediaContainer/GifMedia";
 import TwitterMedia from "../MediaContainer/TwitterMedia";
 import YouTubeMedia from "../MediaContainer/YouTubeMedia";
 
 import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
 
 import { CommentContent } from "../Comment";
-import TenorMedia from "../MediaContainer/TenorMedia";
 
 interface Props {
   comment: CommentData;
@@ -33,12 +32,13 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
             <Timestamp>{c.createdAt}</Timestamp>
             <CommentContent>{c.body ? c.body : ""}</CommentContent>
             {c.media && c.media.__typename === "GiphyMedia" && (
-              <GiphyMedia
+              <GifMedia
                 still={c.media.still}
                 video={c.media.video}
                 title={c.media.title}
                 width={c.media.width}
                 height={c.media.height}
+                url={c.media.url}
               />
             )}
             {c.media && c.media.__typename === "ExternalMedia" && (
@@ -65,7 +65,14 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
               />
             )}
             {c.media && c.media.__typename === "TenorMedia" && (
-              <TenorMedia url={c.media.url} title={c.media.title} />
+              <GifMedia
+                still={c.media.tenorStill}
+                video={c.media.tenorVideo}
+                title={c.media.title}
+                width={c.media.width}
+                height={c.media.height}
+                url={c.media.url}
+              />
             )}
           </div>
         ))}
@@ -100,6 +107,10 @@ const enhanced = withFragmentContainer<Props>({
           ... on TenorMedia {
             url
             title
+            width
+            height
+            tenorStill: still
+            tenorVideo: video
           }
           ... on TwitterMedia {
             url

common/lib/types/tenor.ts

@@ -0,0 +1,44 @@
+export interface MediaFormat {
+  url: string;
+  duration: number;
+  dims: number[];
+  size: number;
+}
+
+export interface SearchResult {
+  id: string;
+  title: string;
+  created: number;
+  content_description: string;
+  itemurl: string;
+  url: string;
+  tags: string[];
+  flags: [];
+  hasaudio: boolean;
+  media_formats: {
+    webm: MediaFormat;
+    mp4: MediaFormat;
+    nanowebm: MediaFormat;
+    loopedmp4: MediaFormat;
+    gifpreview: MediaFormat;
+    tinygifpreview: MediaFormat;
+    nanomp4: MediaFormat;
+    nanogifpreview: MediaFormat;
+    tinymp4: MediaFormat;
+    gif: MediaFormat;
+    webp: MediaFormat;
+    mediumgif: MediaFormat;
+    tinygif: MediaFormat;
+    nanogif: MediaFormat;
+    tinywebm: MediaFormat;
+  };
+}
+
+export interface SearchPayload {
+  results: SearchResult[];
+  next: string;
+}
+
+export interface FetchPayload {
+  results: SearchResult[];
+}

server/src/core/server/app/handlers/api/tenor/index.ts

@@ -1,6 +1,7 @@
 import Joi from "joi";
 import fetch from "node-fetch";
 
+import { SearchPayload } from "coral-common/common/lib/types/tenor";
 import { AppOptions } from "coral-server/app/";
 import { RequestHandler, TenantCoralRequest } from "coral-server/types/express";
 
@@ -17,47 +18,6 @@ interface BodyPayload {
   pos?: string;
 }
 
-interface MediaFormat {
-  url: string;
-  duration: number;
-  dims: number[];
-  size: number;
-}
-
-interface SearchResult {
-  id: string;
-  title: string;
-  created: number;
-  content_description: string;
-  itemurl: string;
-  url: string;
-  tags: string[];
-  flags: [];
-  hasaudio: boolean;
-  media_formats: {
-    webm: MediaFormat;
-    mp4: MediaFormat;
-    nanowebm: MediaFormat;
-    loopedmp4: MediaFormat;
-    gifpreview: MediaFormat;
-    tinygifpreview: MediaFormat;
-    nanomp4: MediaFormat;
-    nanogifpreview: MediaFormat;
-    tinymp4: MediaFormat;
-    gif: MediaFormat;
-    webp: MediaFormat;
-    mediumgif: MediaFormat;
-    tinygif: MediaFormat;
-    nanogif: MediaFormat;
-    tinywebm: MediaFormat;
-  };
-}
-
-interface SearchPayload {
-  results: SearchResult[];
-  next: string;
-}
-
 export const convertGiphyContentRatingToTenorLevel = (
   rating: string | null | undefined
 ): string => {
@@ -133,6 +93,7 @@ export const tenorSearchHandler =
     url.searchParams.set("key", apiKey);
     url.searchParams.set("limit", `${SEARCH_LIMIT}`);
     url.searchParams.set("contentfilter", contentFilter);
+    url.searchParams.set("media_filter", "gif,nanogif");
 
     if (params.pos) {
       url.searchParams.set("pos", params.pos);

server/src/core/server/graph/schema/schema.graphql

@@ -4013,6 +4013,26 @@ type TenorMedia {
   title is the title of the GIF.
   """
   title: String
+
+  """
+  still is a thumbnail preview of the GIF.
+  """
+  still: String
+
+  """
+  video is a URL to the mp4 video of the GIF.
+  """
+  video: String
+
+  """
+  width is the width of the GIF in pixels.
+  """
+  width: Int
+
+  """
+  height is the height of the GIF in pixels.
+  """
+  height: Int
 }
 
 """

server/src/core/server/models/comment/revision.ts

@@ -99,6 +99,11 @@ export interface TenorMedia {
   type: "tenor";
   id: string;
   url: string;
+  title?: string;
+  still?: string;
+  width?: number;
+  height?: number;
+  video?: string;
 }
 
 export interface TwitterMedia {