import { Component, linkEvent } from "inferno";
import { Post } from "lemmy-js-client";
+import * as sanitizeHtml from "sanitize-html";
import { i18n } from "../../i18next";
+import { relTags } from "../../utils";
import { Icon } from "../common/icon";
interface MetadataCardProps {
MetadataCardProps,
MetadataCardState
> {
- private emptyState: MetadataCardState = {
+ state: MetadataCardState = {
expanded: false,
};
constructor(props: any, context: any) {
super(props, context);
- this.state = this.emptyState;
}
render() {
- let post = this.props.post;
+ const post = this.props.post;
return (
<>
- {post.embed_title && !this.state.expanded && (
- <div class="card border-secondary mt-3 mb-2">
- <div class="row">
- <div class="col-12">
- <div class="card-body">
- {post.name !== post.embed_title && [
- <h5 class="card-title d-inline">
- <a class="text-body" href={post.url} rel="noopener">
- {post.embed_title}
- </a>
- </h5>,
- <span class="d-inline-block ml-2 mb-2 small text-muted">
- <a
- class="text-muted font-italic"
- href={post.url}
- rel="noopener"
- >
- {new URL(post.url).hostname}
- <Icon icon="external-link" classes="ml-1" />
- </a>
- </span>,
- ]}
+ {!this.state.expanded && post.embed_title && post.url && (
+ <div className="post-metadata-card card border-secondary mt-3 mb-2">
+ <div className="row">
+ <div className="col-12">
+ <div className="card-body">
+ {post.name !== post.embed_title && (
+ <>
+ <h5 className="card-title d-inline">
+ <a className="text-body" href={post.url} rel={relTags}>
+ {post.embed_title}
+ </a>
+ </h5>
+ <span className="d-inline-block ms-2 mb-2 small text-muted">
+ <a
+ className="text-muted font-italic"
+ href={post.url}
+ rel={relTags}
+ >
+ {new URL(post.url).hostname}
+ <Icon icon="external-link" classes="ms-1" />
+ </a>
+ </span>
+ </>
+ )}
{post.embed_description && (
<div
className="card-text small text-muted md-div"
dangerouslySetInnerHTML={{
- __html: post.embed_description,
+ __html: sanitizeHtml(post.embed_description),
}}
/>
)}
- {post.embed_html && (
+ {post.embed_video_url && (
<button
- class="mt-2 btn btn-secondary text-monospace"
+ className="mt-2 btn btn-secondary text-monospace"
onClick={linkEvent(this, this.handleIframeExpand)}
- data-tippy-content={i18n.t("expand_here")}
>
- {this.state.expanded ? "-" : "+"}
+ {i18n.t("expand_here")}
</button>
)}
</div>
</div>
</div>
)}
- {this.state.expanded && (
- <div
- class="mt-3 mb-2"
- dangerouslySetInnerHTML={{ __html: post.embed_html }}
- />
+ {this.state.expanded && post.embed_video_url && (
+ <iframe
+ className="post-metadata-iframe"
+ src={post.embed_video_url}
+ ></iframe>
)}
</>
);
}
handleIframeExpand(i: MetadataCard) {
- i.state.expanded = !i.state.expanded;
- i.setState(i.state);
+ i.setState({ expanded: !i.state.expanded });
}
}