diff --git a/src/features/post/inFeed/compact/CompactPost.tsx b/src/features/post/inFeed/compact/CompactPost.tsx index 70985f5db6..24ba6a04fe 100644 --- 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 ( @@ -186,6 +198,7 @@ export default function CompactPost({ post }: PostProps) { /> )} + {domain && {domain}} {inModqueue ? ( diff --git a/src/features/shared/Url.tsx b/src/features/shared/Url.tsx index a26000703d..0eba864fdc 100644 --- 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 index 655639c7f5..f054a70256 100644 --- 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}`, + ]; +}