diff --git a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx new file mode 100644 index 0000000000..18e2fdea07 --- /dev/null +++ b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx @@ -0,0 +1,27 @@ +import React, { FunctionComponent } from "react"; + +import Frame from "coral-framework/components/Frame"; + +import styles from "./Media.css"; + +interface Props { + id: string; + url: string; + siteID: string; +} + +const BlueskyMedia: FunctionComponent = ({ id, url, siteID }) => { + const component = encodeURIComponent(url); + return ( +
+ +
+ ); +}; + +export default BlueskyMedia; diff --git a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx index 24a8c10bf0..6d6ffe151f 100644 --- a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx +++ b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react"; import { graphql } from "react-relay"; import { withFragmentContainer } from "coral-framework/lib/relay"; +import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia"; import { MediaContainer_comment } from "coral-admin/__generated__/MediaContainer_comment.graphql"; @@ -48,6 +49,14 @@ const MediaContainer: FunctionComponent = ({ comment }) => { siteID={comment.site.id} /> ); + case "BlueskyMedia": + return ( + + ); case "YouTubeMedia": return ( ({ ... on TwitterMedia { url } + ... on BlueskyMedia { + url + } ... on YouTubeMedia { url still diff --git a/client/src/core/client/admin/components/MediaContainer/index.ts b/client/src/core/client/admin/components/MediaContainer/index.ts index 8ff24d19c8..01083a6390 100644 --- a/client/src/core/client/admin/components/MediaContainer/index.ts +++ b/client/src/core/client/admin/components/MediaContainer/index.ts @@ -1,4 +1,5 @@ export { default as MediaContainer } from "./MediaContainer"; export { default as GifMedia } from "./GifMedia"; export { default as TwitterMedia } from "./TwitterMedia"; +export { default as BlueskyMedia } from "./BlueskyMedia"; export { default as YouTubeMedia } from "./YouTubeMedia"; diff --git a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx index 51b7738d1e..8f283303a3 100644 --- a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx +++ b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx @@ -41,6 +41,9 @@ graphql` twitter { enabled } + bluesky { + enabled + } youtube { enabled } @@ -90,6 +93,26 @@ const MediaLinksConfig: FunctionComponent = ({ disabled }) => { /> + + + + + + Yes + + } + offLabel={ + + No + + } + /> + + diff --git a/client/src/core/client/admin/test/fixtures.ts b/client/src/core/client/admin/test/fixtures.ts index 771fb3c95b..c0eed5f45b 100644 --- a/client/src/core/client/admin/test/fixtures.ts +++ b/client/src/core/client/admin/test/fixtures.ts @@ -209,6 +209,7 @@ export const settings = createFixture({ premoderateSuspectWords: false, media: { twitter: { enabled: false }, + bluesky: { enabled: false }, gifs: { enabled: false }, youtube: { enabled: false }, external: { enabled: false }, diff --git a/client/src/core/client/framework/components/Frame.tsx b/client/src/core/client/framework/components/Frame.tsx index f24a4603c8..28587e2e3d 100644 --- a/client/src/core/client/framework/components/Frame.tsx +++ b/client/src/core/client/framework/components/Frame.tsx @@ -22,7 +22,7 @@ interface Props { isToggled?: boolean; width?: string; showFullHeight?: boolean; - type?: "twitter" | "youtube" | "external_media"; + type?: "twitter" | "bluesky" | "youtube" | "external_media"; mobile?: boolean; } diff --git a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx new file mode 100644 index 0000000000..79fdacde9c --- /dev/null +++ b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx @@ -0,0 +1,30 @@ +import React, { FunctionComponent } from "react"; + +import Frame from "coral-framework/components/Frame"; + +interface Props { + id?: string; + url: string; + siteID: string; + isToggled?: boolean; +} + +const BlueskyMedia: FunctionComponent = ({ + id, + url, + siteID, + isToggled, +}) => { + const component = encodeURIComponent(url); + return ( + + ); +}; + +export default BlueskyMedia; diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx index fd46afe8c4..63f9a44531 100644 --- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx +++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx @@ -60,6 +60,11 @@ function getMediaFromComment(comment: CommentData) { type: "twitter", url: comment.revision.media.url, }; + case "BlueskyMedia": + return { + type: "bluesky", + url: comment.revision.media.url, + }; case "ExternalMedia": return { type: "external", @@ -211,6 +216,10 @@ const enhanced = withEditCommentMutation( url width } + ... on BlueskyMedia { + url + width + } ... on YouTubeMedia { url width @@ -248,6 +257,9 @@ const enhanced = withEditCommentMutation( twitter { enabled } + bluesky { + enabled + } youtube { enabled } diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts index 35fd1cc387..eba246f43a 100644 --- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts +++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts @@ -43,6 +43,10 @@ const mutation = graphql` url width } + ... on BlueskyMedia { + url + width + } ... on YouTubeMedia { url width diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx index e05c1df6a7..03c71b93b9 100644 --- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx +++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx @@ -51,6 +51,13 @@ const MediaConfirmPrompt: FunctionComponent = ({

)} + {media.type === "bluesky" && ( + +

+ Add this post to the end of your comment? +

+
+ )}

{media.url}

@@ -76,6 +83,17 @@ const MediaConfirmPrompt: FunctionComponent = ({ )} + {media.type === "bluesky" && ( + + + + )} {media.type === "youtube" && (