1 import { Component, linkEvent } from "inferno";
2 import { Post } from "lemmy-js-client";
3 import { i18n } from "../../i18next";
4 import { relTags } from "../../utils";
5 import { Icon } from "../common/icon";
7 interface MetadataCardProps {
11 interface MetadataCardState {
15 export class MetadataCard extends Component<
19 private emptyState: MetadataCardState = {
23 constructor(props: any, context: any) {
24 super(props, context);
25 this.state = this.emptyState;
29 let post = this.props.post;
32 {!this.state.expanded &&
33 post.embed_title.match({
37 <div class="card border-secondary mt-3 mb-2">
40 <div class="card-body">
41 {post.name !== embedTitle && [
42 <h5 class="card-title d-inline">
43 <a class="text-body" href={url} rel={relTags}>
47 <span class="d-inline-block ml-2 mb-2 small text-muted">
49 class="text-muted font-italic"
53 {new URL(url).hostname}
54 <Icon icon="external-link" classes="ml-1" />
58 {post.embed_description.match({
61 className="card-text small text-muted md-div"
62 dangerouslySetInnerHTML={{
69 {post.embed_html.isSome() && (
71 class="mt-2 btn btn-secondary text-monospace"
72 onClick={linkEvent(this, this.handleIframeExpand)}
73 data-tippy-content={i18n.t("expand_here")}
75 {this.state.expanded ? "-" : "+"}
87 {this.state.expanded &&
88 post.embed_html.match({
92 dangerouslySetInnerHTML={{ __html: html }}
101 handleIframeExpand(i: MetadataCard) {
102 i.state.expanded = !i.state.expanded;