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" && (
+
+ )}
{media.url}
@@ -76,6 +83,17 @@ const MediaConfirmPrompt: FunctionComponent = ({
)}
+ {media.type === "bluesky" && (
+
+ )}
{media.type === "youtube" && (