diff --git a/client/package.json b/client/package.json index 805548fef4..978ba05042 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "@coralproject/talk", - "version": "9.1.2", + "version": "9.2.0", "author": "The Coral Project", "homepage": "https://coralproject.net/", "sideEffects": [ diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.css b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.css new file mode 100644 index 0000000000..458806cd34 --- /dev/null +++ b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.css @@ -0,0 +1,37 @@ +.grid { + max-height: 300px; + overflow: auto; +} + +.gridColumns { + display: flex; + flex-direction: row; + justify-content: center; +} + +.gridColumn { + display: flex; + flex-direction: column; +} + +.gridControls { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.gridItem { + width: 85px; + background: var(--palette-background-body); + border-style: none; + padding: 2px; + + display: flex; + justify-content: center; +} + +.gridImage { + width: 100%; + height: auto; +} diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.tsx b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.tsx new file mode 100644 index 0000000000..a12bc4642a --- /dev/null +++ b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.tsx @@ -0,0 +1,158 @@ +import { Localized } from "@fluent/react/compat"; +import React, { + FunctionComponent, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; + +import { useCoralContext } from "coral-framework/lib/bootstrap"; +import { Button } from "coral-ui/components/v2"; + +import { GifResult } from "./TenorInput"; + +import styles from "./TenorGrid.css"; + +interface GridItemProps { + gif: GifResult; + onSelect: (gif: GifResult) => void; +} + +const TenorGridItem: FunctionComponent = ({ gif, onSelect }) => { + const onClick = useCallback(() => { + onSelect(gif); + }, [gif, onSelect]); + + return ( + + ); +}; + +interface GridColumnsProps { + gifs: GifResult[]; + onSelectGif: (gif: GifResult) => void; + numColumns: number; +} + +const TenorGridColumns: FunctionComponent = ({ + gifs, + onSelectGif, + numColumns, +}) => { + const columns = useMemo(() => { + const resultColumns: GifResult[][] = []; + for (let i = 0; i < numColumns; i++) { + resultColumns.push(new Array()); + } + + let columnIndex = 0; + // eslint-disable-next-line @typescript-eslint/prefer-for-of + for (let j = 0; j < gifs.length; j++) { + const column = resultColumns[columnIndex]; + const gif = gifs[j]; + + column.push(gif); + + columnIndex++; + if (columnIndex >= numColumns) { + columnIndex = 0; + } + } + + return resultColumns; + }, [gifs, numColumns]); + + return ( +
+ {columns.map((colGifs, colIndex) => { + return ( +
+ {colGifs && + colGifs.map((gif, index) => { + return ( + + ); + })} +
+ ); + })} +
+ ); +}; + +interface Props { + gifs: GifResult[]; + showLoadMore?: boolean; + + onSelectGif: (gif: GifResult) => void; + onLoadMore: () => void; +} + +const TenorGrid: FunctionComponent = ({ + gifs, + showLoadMore, + onSelectGif, + onLoadMore, +}) => { + const { window } = useCoralContext(); + + const gridRef = useRef(null); + const [cols, setCols] = useState(0); + + const resizeGrid = useCallback(() => { + if (!gridRef || !gridRef.current) { + setCols(0); + return; + } + + const rect = gridRef.current.getBoundingClientRect(); + const numCols = rect.width / 90; + + setCols(numCols); + }, [gridRef, setCols]); + + useEffect(() => { + window.requestAnimationFrame(resizeGrid); + window.addEventListener("resize", resizeGrid); + + return () => { + window.removeEventListener("resize", resizeGrid); + }; + // include gifs so we re-calc grid col's on gif change + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [gifs]); + + return ( +
+ {gifs && cols > 0 && ( + + )} + {showLoadMore && ( +
+ + + +
+ )} +
+ ); +}; + +export default TenorGrid; diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css index 201a68c1a7..1446ef3e8c 100644 --- a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css +++ b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css @@ -29,35 +29,6 @@ max-width: 100%; } -.grid { - max-height: 300px; - overflow: auto; - - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 8px; -} - -.gridControls { - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.gridItem { - width: 85px; - background: var(--palette-background-body); - border-style: none; - padding: 0px; -} - -.gridImage { - width: 100%; - height: auto; -} - .input { border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx index ae9e8e90de..5d0f62e6fd 100644 --- a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx +++ b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx @@ -18,6 +18,7 @@ import { ButtonSvgIcon, SearchIcon } from "coral-ui/components/icons"; import { Button, HorizontalGutter, TextField } from "coral-ui/components/v2"; import TenorAttribution from "./TenorAttribution"; +import TenorGrid from "./TenorGrid"; import styles from "./TenorInput.css"; @@ -181,34 +182,14 @@ const TenorInput: FunctionComponent = ({ onSelect }) => { } ref={inputRef} /> -
- {query && - gifs && - gifs.map((gif, index) => { - return ( - - ); - })} - {next && gifs && gifs.length > 0 && query?.length > 0 && ( -
- - - -
- )} -
+ 0 && query?.length > 0) + } + onSelectGif={onGifClick} + onLoadMore={onLoadMore} + /> diff --git a/common/package.json b/common/package.json index e83f5d9ae2..5d590ced5b 100644 --- a/common/package.json +++ b/common/package.json @@ -1,6 +1,6 @@ { "name": "common", - "version": "9.1.2", + "version": "9.2.0", "description": "", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/config/package.json b/config/package.json index c9f5ac044d..2ffb9254b5 100644 --- a/config/package.json +++ b/config/package.json @@ -1,6 +1,6 @@ { "name": "common", - "version": "9.1.2", + "version": "9.2.0", "description": "", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/server/package.json b/server/package.json index 8e123299a1..46c902df9f 100644 --- a/server/package.json +++ b/server/package.json @@ -1,6 +1,6 @@ { "name": "@coralproject/talk", - "version": "9.1.2", + "version": "9.2.0", "author": "The Coral Project", "homepage": "https://coralproject.net/", "sideEffects": [ diff --git a/server/src/core/server/services/comments/pipeline/phases/index.ts b/server/src/core/server/services/comments/pipeline/phases/index.ts index 8e8419114c..f1202f9ff0 100644 --- a/server/src/core/server/services/comments/pipeline/phases/index.ts +++ b/server/src/core/server/services/comments/pipeline/phases/index.ts @@ -62,11 +62,11 @@ export const moderationPhases: IntermediateModerationPhase[] = [ spam, detectLinks, - // Apply any pre-existing conditions to these comments. + // Run any external moderation phase that missed other filters. + external, + + // Apply any pre-moderation conditions to these comments. statusPreModerateNewCommenter, statusPreModerate, statusPreModerateUser, - - // Run any external moderation phase that missed other filters. - external, ]; diff --git a/utilities/externalModPhase/src/main.ts b/utilities/externalModPhase/src/main.ts index 1fc2395b1d..66b3aab90f 100644 --- a/utilities/externalModPhase/src/main.ts +++ b/utilities/externalModPhase/src/main.ts @@ -52,6 +52,14 @@ const run = async () => { res.send(result); }); + app.post("/api/none", (req, res) => { + console.log(req.body); + + const result = {}; + + res.send(result); + }); + app.listen(PORT, HOST, () => { console.log(`external mod phase tester is listening on "${HOST}:${PORT}"...`); });