Skip to content

Commit

Permalink
Merge branch 'develop' into feat/CORL-3172-optimized-redis-query
Browse files Browse the repository at this point in the history
  • Loading branch information
@nick-funk
nick-funk committed Sep 10, 2024
2 parents ce25264 + 91a49de commit c9e6ddf
Show file tree
Hide file tree
Showing 86 changed files with 1,450 additions and 222 deletions.
2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coralproject/talk",
"version": "9.0.7",
"version": "9.2.0",
"author": "The Coral Project",
"homepage": "https://coralproject.net/",
"sideEffects": [
Expand Down
7 changes: 7 additions & 0 deletions client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { MediaContainer_comment } from "coral-admin/__generated__/MediaContainer

import ExternalMedia from "./ExternalMedia";
import GiphyMedia from "./GiphyMedia";
import TenorMedia from "./TenorMedia";
import TwitterMedia from "./TwitterMedia";
import YouTubeMedia from "./YouTubeMedia";

Expand Down Expand Up @@ -57,6 +58,8 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
title={media.title}
/>
);
case "TenorMedia":
return <TenorMedia url={media.url} title={media.title} />;
case "%other":
return null;
}
Expand All @@ -80,6 +83,10 @@ const enhanced = withFragmentContainer<Props>({
still
video
}
... on TenorMedia {
url
title
}
... on TwitterMedia {
url
}
Expand Down
32 changes: 32 additions & 0 deletions client/src/core/client/admin/components/MediaContainer/TenorMedia.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { FunctionComponent, useCallback, useState } from "react";

import { BaseButton } from "coral-ui/components/v2";

import styles from "./Media.css";

interface Props {
url: string | null;
title: string | null;
}

const TenorMedia: FunctionComponent<Props> = ({ url, title }) => {
const [showAnimated, setShowAnimated] = useState(false);
const toggleImage = useCallback(() => {
setShowAnimated(!showAnimated);
}, [showAnimated]);
return (
<div className={styles.embed}>
<BaseButton onClick={toggleImage} className={styles.toggle}>
<img
src={url ?? ""}
className={styles.image}
loading="lazy"
referrerPolicy="no-referrer"
alt={title ?? ""}
/>
</BaseButton>
</div>
);
};

export default TenorMedia;
8 changes: 8 additions & 0 deletions client/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ 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;
Expand Down Expand Up @@ -63,6 +64,9 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
title={c.media.title}
/>
)}
{c.media && c.media.__typename === "TenorMedia" && (
<TenorMedia url={c.media.url} title={c.media.title} />
)}
</div>
))}
</HorizontalGutter>
Expand Down Expand Up @@ -93,6 +97,10 @@ const enhanced = withFragmentContainer<Props>({
still
video
}
... on TenorMedia {
url
title
}
... on TwitterMedia {
url
}
Expand Down
159 changes: 118 additions & 41 deletions client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
required,
validateWhen,
} from "coral-framework/lib/validation";
import { GQLGIF_MEDIA_SOURCE } from "coral-framework/schema";
import {
FieldSet,
FormField,
Expand All @@ -30,8 +31,8 @@ interface Props {
disabled: boolean;
}

const giphyIsEnabled: Condition = (value, values) =>
Boolean(values.media && values.media.giphy.enabled);
const gifsAreEnabled: Condition = (value, values) =>
Boolean(values.media && values.media.gifs.enabled);

// eslint-disable-next-line no-unused-expressions
graphql`
Expand All @@ -43,10 +44,11 @@ graphql`
youtube {
enabled
}
giphy {
gifs {
enabled
maxRating
key
provider
}
}
}
Expand All @@ -62,10 +64,10 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
}
container={<FieldSet />}
>
<Localized id="configure-general-embedLinks-desc">
<Localized id="configure-general-embedLinks-description">
<FormFieldDescription>
Allow commenters to add a YouTube video, X post or GIF from GIPHY's
library to the end of their comment
Allow commenters to add a YouTube video, X post or GIF's to the end of
their comment
</FormFieldDescription>
</Localized>
<FormField>
Expand Down Expand Up @@ -108,11 +110,11 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
/>
</FormField>
<FormField>
<Localized id="configure-general-embedLinks-enableGiphyEmbeds">
<Label component="legend">Allow GIFs from GIPHY</Label>
<Localized id="configure-general-embedLinks-enableGifs">
<Label component="legend">Allow GIFs</Label>
</Localized>
<OnOffField
name="media.giphy.enabled"
name="media.gifs.enabled"
disabled={disabled}
onLabel={
<Localized id="configure-general-embedLinks-On">
Expand All @@ -126,14 +128,57 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
}
/>
</FormField>

<FormSpy subscription={{ values: true }}>
{(props) => {
const giphyDisabled =
const gifsDisabled =
!props.values.media ||
!props.values.media.giphy ||
!props.values.media.giphy.enabled;
!props.values.media.gifs ||
!props.values.media.gifs.enabled;
const provider = props.values.media?.gifs?.provider;
return (
<>
<FormField>
<Localized id="configure-general-embedLinks-gifProvider">
<Label component="legend">GIF provider</Label>
</Localized>
<Localized id="configure-general-embedLinks-gifProvider-desc">
<HelperText>
Determines which provider commenters will search for and
show GIFs from.
</HelperText>
</Localized>
<Field name="media.gifs.provider" type="radio" value="GIPHY">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-gifs-provider-Giphy">
<RadioButton
{...input}
id="GIPHY"
disabled={gifsDisabled || disabled}
>
Giphy
</RadioButton>
</Localized>
</>
)}
</Field>
<Field name="media.gifs.provider" type="radio" value="TENOR">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-gifs-provider-Tenor">
<RadioButton
{...input}
id="TENOR"
disabled={gifsDisabled || disabled}
>
Tenor
</RadioButton>
</Localized>
</>
)}
</Field>
</FormField>
<FormField>
<Localized id="configure-general-embedLinks-giphyMaxRating">
<Label component="legend">GIF content rating</Label>
Expand All @@ -144,14 +189,14 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
appear in commenters’ search results
</HelperText>
</Localized>
<Field name="media.giphy.maxRating" type="radio" value="g">
<Field name="media.gifs.maxRating" type="radio" value="g">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-giphyMaxRating-g">
<RadioButton
{...input}
id="G"
disabled={giphyDisabled || disabled}
disabled={gifsDisabled || disabled}
>
G
</RadioButton>
Expand All @@ -165,14 +210,14 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
</>
)}
</Field>
<Field name="media.giphy.maxRating" type="radio" value="pg">
<Field name="media.gifs.maxRating" type="radio" value="pg">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-giphyMaxRating-pg">
<RadioButton
{...input}
id="PG"
disabled={giphyDisabled || disabled}
disabled={gifsDisabled || disabled}
>
PG
</RadioButton>
Expand All @@ -186,14 +231,14 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
</>
)}
</Field>
<Field name="media.giphy.maxRating" type="radio" value="pg13">
<Field name="media.gifs.maxRating" type="radio" value="pg13">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-giphyMaxRating-pg13">
<RadioButton
{...input}
id="PG13"
disabled={giphyDisabled || disabled}
disabled={gifsDisabled || disabled}
>
PG-13
</RadioButton>
Expand All @@ -209,14 +254,14 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
</>
)}
</Field>
<Field name="media.giphy.maxRating" type="radio" value="r">
<Field name="media.gifs.maxRating" type="radio" value="r">
{({ input }) => (
<>
<Localized id="configure-general-embedLinks-giphyMaxRating-r">
<RadioButton
{...input}
id="r"
disabled={giphyDisabled || disabled}
disabled={gifsDisabled || disabled}
>
R
</RadioButton>
Expand All @@ -235,31 +280,63 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
<Localized id="configure-general-embedLinks-configuration">
<Subheader>Configuration</Subheader>
</Localized>
<Localized
id="configure-general-embedLinks-configuration-desc"
elems={{
externalLink: (
<ExternalLink
href={"https://developers.giphy.com/docs/api"}
/>
),
}}
>
<HelperText>
For additional information on GIPHY’s API please visit:
https://developers.giphy.com/docs/api
</HelperText>
</Localized>
<FormField>
<Localized id="configure-general-embedLinks-giphyAPIKey">
<Label>GIPHY API Key</Label>

{provider === GQLGIF_MEDIA_SOURCE.GIPHY && (
<Localized
id="configure-general-embedLinks-configuration-giphy-desc"
elems={{
externalLink: (
<ExternalLink
href={"https://developers.giphy.com/docs/api"}
/>
),
}}
>
<HelperText>
For additional information on GIPHY’s API please visit:
https://developers.giphy.com/docs/api
</HelperText>
</Localized>
)}

{provider === GQLGIF_MEDIA_SOURCE.TENOR && (
<Localized
id="configure-general-embedLinks-configuration-tenor-desc"
elems={{
externalLink: (
<ExternalLink
href={
"https://developers.google.com/tenor/guides/endpoints"
}
/>
),
}}
>
<HelperText>
For additional information on TENOR’s API please visit:
https://developers.google.com/tenor/guides/endpoints
</HelperText>
</Localized>
<Field name="media.giphy.key">
)}

<FormField>
{provider === GQLGIF_MEDIA_SOURCE.GIPHY && (
<Localized id="configure-general-embedLinks-giphyAPIKey">
<Label>GIPHY API Key</Label>
</Localized>
)}
{provider === GQLGIF_MEDIA_SOURCE.TENOR && (
<Localized id="configure-general-embedLinks-tenorAPIKey">
<Label>TENOR API Key</Label>
</Localized>
)}

<Field name="media.gifs.key">
{({ input, meta }) => (
<APIKeyField
{...input}
disabled={giphyDisabled || disabled}
validate={validateWhen(giphyIsEnabled, required)}
disabled={gifsDisabled || disabled}
validate={validateWhen(gifsAreEnabled, required)}
/>
)}
</Field>
Expand Down
2 changes: 1 addition & 1 deletion client/src/core/client/admin/test/fixtures.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export const settings = createFixture<GQLSettings>({
premoderateSuspectWords: false,
media: {
twitter: { enabled: false },
giphy: { enabled: false },
gifs: { enabled: false },
youtube: { enabled: false },
external: { enabled: false },
},
Expand Down
Loading

0 comments on commit c9e6ddf

Please sign in to comment.