[CORL-3202] Add bluesky to embed options

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<Props> = ({ id, url, siteID }) => {
+  const component = encodeURIComponent(url);
+  return (
+    <div className={styles.embed}>
+      <Frame
+        id={id}
+        src={`/api/oembed?type=bluesky&url=${component}&siteID=${siteID}`}
+        width="100%"
+        showFullHeight
+      />
+    </div>
+  );
+};
+
+export default BlueskyMedia;

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<Props> = ({ comment }) => {
           siteID={comment.site.id}
         />
       );
+    case "BlueskyMedia":
+      return (
+        <BlueskyMedia
+          id={comment.id}
+          url={media.url}
+          siteID={comment.site.id}
+        />
+      );
     case "YouTubeMedia":
       return (
         <YouTubeMedia
@@ -103,6 +112,9 @@ const enhanced = withFragmentContainer<Props>({
           ... on TwitterMedia {
             url
           }
+          ... on BlueskyMedia {
+            url
+          }
           ... on YouTubeMedia {
             url
             still

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";

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<Props> = ({ disabled }) => {
         />
       </FormField>
 
+      <FormField>
+        <Localized id="configure-general-embedLinks-enableBlueskyEmbeds">
+          <Label component="legend">Allow Bluesky post embeds</Label>
+        </Localized>
+        <OnOffField
+          name="media.bluesky.enabled"
+          disabled={disabled}
+          onLabel={
+            <Localized id="configure-general-embedLinks-On">
+              <span>Yes</span>
+            </Localized>
+          }
+          offLabel={
+            <Localized id="configure-general-embedLinks-Off">
+              <span>No</span>
+            </Localized>
+          }
+        />
+      </FormField>
+
       <FormField>
         <Localized id="configure-general-embedLinks-enableYouTubeEmbeds">
           <Label component="legend">Allow YouTube embeds</Label>

client/src/core/client/admin/test/fixtures.ts

@@ -209,6 +209,7 @@ export const settings = createFixture<GQLSettings>({
   premoderateSuspectWords: false,
   media: {
     twitter: { enabled: false },
+    bluesky: { enabled: false },
     gifs: { enabled: false },
     youtube: { enabled: false },
     external: { enabled: false },

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;
 }
 

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<Props> = ({
+  id,
+  url,
+  siteID,
+  isToggled,
+}) => {
+  const component = encodeURIComponent(url);
+  return (
+    <Frame
+      id={id}
+      width="100%"
+      src={`/api/oembed?type=bluesky&url=${component}&siteID=${siteID}`}
+      isToggled={isToggled}
+      type="bluesky"
+    />
+  );
+};
+
+export default BlueskyMedia;

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
           }

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

client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx

@@ -51,6 +51,13 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
                 </p>
               </Localized>
             )}
+            {media.type === "bluesky" && (
+              <Localized id="comments-postComment-confirmMedia-bluesky">
+                <p className={styles.prompt}>
+                  Add this post to the end of your comment?
+                </p>
+              </Localized>
+            )}
             <p className={styles.url}>{media.url}</p>
           </div>
         </div>
@@ -76,6 +83,17 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
               </Button>
             </Localized>
           )}
+          {media.type === "bluesky" && (
+            <Localized id="comments-postComment-confirmMedia-add-bluesky">
+              <Button
+                color="mono"
+                onClick={onConfirm}
+                className={styles.promptButton}
+              >
+                Add post
+              </Button>
+            </Localized>
+          )}
           {media.type === "youtube" && (
             <Localized id="comments-postComment-confirmMedia-add-video">
               <Button

client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx

@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import { MediaLink } from "coral-common/common/lib/helpers/findMediaLinks";
 import {
+  BlueskyLogoIcon,
   ImageFileLandscapeIcon,
   SvgIcon,
   VideoPlayerIcon,
@@ -20,6 +21,9 @@ const MediaConfirmationIcon: FunctionComponent<Props> = ({ media }) => {
       {media.type === "twitter" && (
         <SvgIcon size="xs" filled="currentColor" Icon={XLogoTwitterIcon} />
       )}
+      {media.type === "bluesky" && (
+        <SvgIcon filled="currentColor" Icon={BlueskyLogoIcon} />
+      )}
     </>
   );
 };

client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx

@@ -7,6 +7,7 @@ import {
   TwitterMedia,
   YouTubeMedia,
 } from "coral-stream/common/Media";
+import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia";
 import { RemoveIcon, SvgIcon } from "coral-ui/components/icons";
 import { Flex, HorizontalGutter, MatchMedia } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
@@ -62,13 +63,18 @@ const MediaPreview: FunctionComponent<Props> = ({
             </Flex>
 
             {/* Show the actual media. */}
-            {media.type === "external" ? (
+            {media.type === "external" && (
               <ExternalMedia url={media.url} siteID={siteID} />
-            ) : media.type === "twitter" ? (
+            )}
+            {media.type === "twitter" && (
               <TwitterMedia url={media.url} siteID={siteID} />
-            ) : media.type === "youtube" ? (
+            )}
+            {media.type === "bluesky" && (
+              <BlueskyMedia url={media.url} siteID={siteID} />
+            )}
+            {media.type === "youtube" && (
               <YouTubeMedia url={media.url} siteID={siteID} isToggled={true} />
-            ) : null}
+            )}
           </HorizontalGutter>
 
           {/* On extra small screens, move the remove button to the bottom! */}

client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx

@@ -26,6 +26,7 @@ import { MediaSectionContainer_comment } from "coral-stream/__generated__/MediaS
 import { MediaSectionContainer_settings } from "coral-stream/__generated__/MediaSectionContainer_settings.graphql";
 import { MediaSectionContainerLocal } from "coral-stream/__generated__/MediaSectionContainerLocal.graphql";
 
+import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia";
 import styles from "./MediaSectionContainer.css";
 
 interface Props {
@@ -84,7 +85,9 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
     (media.__typename === "TwitterMedia" && !settings.media.twitter.enabled) ||
     (media.__typename === "YouTubeMedia" && !settings.media.youtube.enabled) ||
     (media.__typename === "GiphyMedia" && !settings.media.gifs.enabled) ||
-    (media.__typename === "ExternalMedia" && !settings.media.external.enabled)
+    (media.__typename === "ExternalMedia" &&
+      !settings.media.external.enabled) ||
+    (media.__typename === "BlueskyMedia" && !settings.media.bluesky.enabled)
   ) {
     return null;
   }
@@ -103,6 +106,9 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
         {media.__typename === "TwitterMedia" && (
           <Localized id="comments-embedLinks-show-twitter">Show post</Localized>
         )}
+        {media.__typename === "BlueskyMedia" && (
+          <Localized id="comments-embedLinks-show-bluesky">Show post</Localized>
+        )}
         {media.__typename === "YouTubeMedia" && (
           <Localized id="comments-embedLinks-show-youtube">
             Show video
@@ -144,6 +150,11 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
               Hide post
             </Localized>
           )}
+          {media.__typename === "BlueskyMedia" && (
+            <Localized id="comments-embedLinks-hide-bluesky">
+              Hide post
+            </Localized>
+          )}
           {media.__typename === "GiphyMedia" && (
             <Localized id="comments-embedLinks-hide-gif">Hide GIF</Localized>
           )}
@@ -178,6 +189,14 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
           isToggled={isToggled}
         />
       )}
+      {media.__typename === "BlueskyMedia" && (
+        <BlueskyMedia
+          id={comment.id}
+          url={media.url}
+          siteID={comment.site.id}
+          isToggled={isToggled}
+        />
+      )}
       {media.__typename === "YouTubeMedia" && (
         <YouTubeMedia
           id={comment.id}
@@ -224,6 +243,10 @@ const enhanced = withFragmentContainer<Props>({
             url
             width
           }
+          ... on BlueskyMedia {
+            url
+            width
+          }
           ... on YouTubeMedia {
             url
             width
@@ -242,6 +265,9 @@ const enhanced = withFragmentContainer<Props>({
         twitter {
           enabled
         }
+        bluesky {
+          enabled
+        }
         youtube {
           enabled
         }

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx

@@ -97,7 +97,7 @@ const CopyCommentEmbedCodeContainer: FunctionComponent<Props> = ({
         break;
       // Twitter and YouTube media embeds already have links in comments
       // so they don't also need to be added to the simple comment fallback
-      case "%other" || "TwitterMedia" || "YouTubeMedia":
+      case "%other" || "TwitterMedia" || "BlueskyMedia" || "YouTubeMedia":
         break;
     }
   }
@@ -163,6 +163,9 @@ const enhanced = withFragmentContainer<Props>({
           ... on TwitterMedia {
             url
           }
+          ... on BlueskyMedia {
+            url
+          }
           ... on YouTubeMedia {
             url
           }

client/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -353,6 +353,9 @@ const enhanced = withCreateCommentReplyMutation(
           twitter {
             enabled
           }
+          bluesky {
+            enabled
+          }
           youtube {
             enabled
           }