1 import { Component, linkEvent } from "inferno";
2 import { Post } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { Icon } from "../common/icon";
6 interface MetadataCardProps {
10 interface MetadataCardState {
14 export class MetadataCard extends Component<
18 private emptyState: MetadataCardState = {
22 constructor(props: any, context: any) {
23 super(props, context);
24 this.state = this.emptyState;
28 let post = this.props.post;
31 {post.embed_title && !this.state.expanded && (
32 <div class="card border-secondary mt-3 mb-2 offset-sm-3">
35 <div class="card-body">
36 {post.name !== post.embed_title && [
37 <h5 class="card-title d-inline">
38 <a class="text-body" href={post.url} rel="noopener">
42 <span class="d-inline-block ml-2 mb-2 small text-muted">
44 class="text-muted font-italic"
48 {new URL(post.url).hostname}
49 <Icon icon="external-link" classes="ml-1" />
53 {post.embed_description && (
55 className="card-text small text-muted md-div"
56 dangerouslySetInnerHTML={{
57 __html: post.embed_description,
63 class="mt-2 btn btn-secondary text-monospace"
64 onClick={linkEvent(this, this.handleIframeExpand)}
65 data-tippy-content={i18n.t("expand_here")}
67 {this.state.expanded ? "-" : "+"}
75 {this.state.expanded && (
78 dangerouslySetInnerHTML={{ __html: post.embed_html }}
85 handleIframeExpand(i: MetadataCard) {
86 i.state.expanded = !i.state.expanded;