Display domain on compact posts

aeharding · Mar 20, 2024 · 84e7cfa · 84e7cfa
1 parent bdf1f06
commit 84e7cfa
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/src/features/post/inFeed/compact/CompactPost.tsx b/src/features/post/inFeed/compact/CompactPost.tsx
@@ -23,6 +23,7 @@ import useCrosspostUrl from "../../shared/useCrosspostUrl";
 import { useInModqueue } from "../../../../routes/pages/shared/ModqueuePage";
 import { PageTypeContext } from "../../../feed/PageTypeContext";
 import { styled } from "@linaria/react";
+import { parseUrlForDisplay } from "../../../../helpers/url";
 
 const Container = styled.div`
   width: 100%;
@@ -126,6 +127,12 @@ const EndDetails = styled.div`
   margin-left: auto;
 `;
 
+const Domain = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export default function CompactPost({ post }: PostProps) {
   const compactThumbnailPositionType = useAppSelector(
     (state) => state.settings.appearance.compact.thumbnailsPosition,
@@ -146,6 +153,11 @@ export default function CompactPost({ post }: PostProps) {
     post.read;
   const nsfw = useMemo(() => isNsfw(post), [post]);
 
+  const [domain] = useMemo(
+    () => (post.post.url ? parseUrlForDisplay(post.post.url) : []),
+    [post],
+  );
+
   return (
     <ModeratableItem itemView={post}>
       <Container>
@@ -186,6 +198,7 @@ export default function CompactPost({ post }: PostProps) {
                   />
                 )}
               </From>
+              {domain && <Domain>{domain}</Domain>}
               <ActionsContainer>
                 <PreviewStats post={post} />
                 {inModqueue ? (

diff --git a/src/features/shared/Url.tsx b/src/features/shared/Url.tsx
@@ -1,5 +1,6 @@
 import { styled } from "@linaria/react";
 import { useMemo } from "react";
+import { parseUrlForDisplay } from "../../helpers/url";
 
 const Rest = styled.span`
   opacity: 0.6;
@@ -10,29 +11,10 @@ interface UrlProps {
 }
 
 export default function Url({ children }: UrlProps) {
-  const [domain, rest] = useMemo(() => {
-    let url;
-
-    try {
-      url = new URL(children);
-    } catch (error) {
-      console.error(error);
-      return [];
-    }
-
-    const protocolPrefix = url.protocol === "https:" ? "" : `${url.protocol}//`;
-    const normalizedHost = (() => {
-      if (protocolPrefix) return url.host;
-      if (url.host.startsWith("www.")) return url.host.slice(4);
-
-      return url.host;
-    })();
-
-    return [
-      `${protocolPrefix}${normalizedHost}`,
-      `${url.pathname}${url.search}${url.hash}`,
-    ];
-  }, [children]);
+  const [domain, rest] = useMemo(
+    () => parseUrlForDisplay(children),
+    [children],
+  );
 
   if (!domain || !rest) return;
 

diff --git a/src/helpers/url.ts b/src/helpers/url.ts
@@ -121,3 +121,28 @@ export function getVideoSrcForUrl(url: string) {
 export function stripProtocol(url: string): string {
   return url.replace(/^https?:\/\//, "");
 }
+
+export function parseUrlForDisplay(url: string): string[] {
+  let parsedUrl;
+
+  try {
+    parsedUrl = new URL(url);
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+
+  const protocolPrefix =
+    parsedUrl.protocol === "https:" ? "" : `${parsedUrl.protocol}//`;
+  const normalizedHost = (() => {
+    if (protocolPrefix) return parsedUrl.host;
+    if (parsedUrl.host.startsWith("www.")) return parsedUrl.host.slice(4);
+
+    return parsedUrl.host;
+  })();
+
+  return [
+    `${protocolPrefix}${normalizedHost}`,
+    `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`,
+  ];
+}