1 import { Component, linkEvent } from "inferno";
2 import { Post } from "lemmy-js-client";
3 import * as sanitizeHtml from "sanitize-html";
4 import { i18n } from "../../i18next";
5 import { relTags } from "../../utils";
6 import { Icon } from "../common/icon";
8 interface MetadataCardProps {
12 interface MetadataCardState {
16 export class MetadataCard extends Component<
20 state: MetadataCardState = {
24 constructor(props: any, context: any) {
25 super(props, context);
29 const post = this.props.post;
32 {!this.state.expanded && post.embed_title && post.url && (
33 <div className="card border-secondary mt-3 mb-2">
35 <div className="col-12">
36 <div className="card-body">
37 {post.name !== post.embed_title && (
39 <h5 className="card-title d-inline">
40 <a className="text-body" href={post.url} rel={relTags}>
44 <span className="d-inline-block ms-2 mb-2 small text-muted">
46 className="text-muted font-italic"
50 {new URL(post.url).hostname}
51 <Icon icon="external-link" classes="ms-1" />
56 {post.embed_description && (
58 className="card-text small text-muted md-div"
59 dangerouslySetInnerHTML={{
60 __html: sanitizeHtml(post.embed_description),
64 {post.embed_video_url && (
66 className="mt-2 btn btn-secondary text-monospace"
67 onClick={linkEvent(this, this.handleIframeExpand)}
69 {i18n.t("expand_here")}
77 {this.state.expanded && post.embed_video_url && (
78 <iframe src={post.embed_video_url}></iframe>
84 handleIframeExpand(i: MetadataCard) {
85 i.setState({ expanded: !i.state.expanded });