diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/src/components/iframely-card.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 43 |
2 files changed, 28 insertions, 19 deletions
diff --git a/ui/src/components/iframely-card.tsx b/ui/src/components/iframely-card.tsx index b0a0d34b..4bae06d1 100644 --- a/ui/src/components/iframely-card.tsx +++ b/ui/src/components/iframely-card.tsx @@ -52,7 +52,7 @@ export class IFramelyCard extends Component< </a> {iframely.html && ( <span - class="ml-2 pointer" + class="ml-2 pointer text-monospace" onClick={linkEvent(this, this.handleIframeExpand)} > {this.state.expanded ? '[-]' : '[+]'} @@ -72,7 +72,7 @@ export class IFramelyCard extends Component< )} {this.state.expanded && ( <div - class="my-2" + class="mt-3 mb-2" dangerouslySetInnerHTML={{ __html: iframely.html }} /> )} diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 5cc63251..7b3d6479 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -49,6 +49,7 @@ interface PostListingState { score: number; upvotes: number; downvotes: number; + url: string; iframely: FramelyData; } @@ -77,6 +78,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { score: this.props.post.score, upvotes: this.props.post.upvotes, downvotes: this.props.post.downvotes, + url: this.props.post.url, iframely: null, }; @@ -89,7 +91,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { this.handleEditPost = this.handleEditPost.bind(this); this.handleEditCancel = this.handleEditCancel.bind(this); - if (this.props.post.url) { + if (this.state.url) { this.fetchIframely(); } } @@ -99,6 +101,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> { this.state.upvotes = nextProps.post.upvotes; this.state.downvotes = nextProps.post.downvotes; this.state.score = nextProps.post.score; + this.state.url = nextProps.post.url; + this.state.iframely = null; + + if (nextProps.post.url) { + this.fetchIframely(); + } + this.setState(this.state); } @@ -163,7 +172,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { /> </span> )} - {post.url && isVideo(post.url) && ( + {this.state.url && isVideo(this.state.url) && ( <video playsinline muted @@ -173,18 +182,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> { height="100" width="150" > - <source src={post.url} type="video/mp4" /> + <source src={this.state.url} type="video/mp4" /> </video> )} <div className="ml-4"> <div className="post-title"> <h5 className="mb-0 d-inline"> - {this.props.showBody && post.url ? ( + {this.props.showBody && this.state.url ? ( <a className="text-body" - href={post.url} + href={this.state.url} target="_blank" - title={post.url} + title={this.state.url} > {post.name} </a> @@ -198,15 +207,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> { </Link> )} </h5> - {post.url && ( + {this.state.url && ( <small class="d-inline-block"> <a className="ml-2 text-muted font-italic" - href={post.url} + href={this.state.url} target="_blank" - title={post.url} + title={this.state.url} > - {new URL(post.url).hostname} + {new URL(this.state.url).hostname} <svg class="ml-1 icon"> <use xlinkHref="#icon-external-link"></use> </svg> @@ -598,7 +607,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { </li> )} </ul> - {post.url && this.props.showBody && this.state.iframely && ( + {this.state.url && this.props.showBody && this.state.iframely && ( <IFramelyCard iframely={this.state.iframely} /> )} {this.state.showRemoveDialog && ( @@ -752,7 +761,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { } fetchIframely() { - fetch(`/iframely/oembed?url=${this.props.post.url}`) + fetch(`/iframely/oembed?url=${this.state.url}`) .then(res => res.json()) .then(res => { this.state.iframely = res; @@ -765,15 +774,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> { hasImage(): boolean { return ( - (this.props.post.url && isImage(this.props.post.url)) || + (this.state.url && isImage(this.state.url)) || (this.state.iframely && this.state.iframely.thumbnail_url !== undefined) ); } getImage(): string { - let simpleImg = isImage(this.props.post.url); + let simpleImg = isImage(this.state.url); if (simpleImg) { - return this.props.post.url; + return this.state.url; } else if (this.state.iframely) { let iframelyThumbnail = this.state.iframely.thumbnail_url; if (iframelyThumbnail) { @@ -877,8 +886,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> { get crossPostParams(): string { let params = `?title=${this.props.post.name}`; - if (this.props.post.url) { - params += `&url=${this.props.post.url}`; + if (this.state.url) { + params += `&url=${this.state.url}`; } if (this.props.post.body) { params += `&body=${this.props.post.body}`; |