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 private emptyState: MetadataCardState = {
24 constructor(props: any, context: any) {
25 super(props, context);
26 this.state = this.emptyState;
30 let post = this.props.post;
33 {!this.state.expanded &&
34 post.embed_title.match({
38 <div className="card border-secondary mt-3 mb-2">
40 <div className="col-12">
41 <div className="card-body">
42 {post.name !== embedTitle && (
44 <h5 className="card-title d-inline">
53 <span className="d-inline-block ml-2 mb-2 small text-muted">
55 className="text-muted font-italic"
59 {new URL(url).hostname}
60 <Icon icon="external-link" classes="ml-1" />
65 {post.embed_description.match({
68 className="card-text small text-muted md-div"
69 dangerouslySetInnerHTML={{
70 __html: sanitizeHtml(desc),
76 {post.embed_video_url.isSome() && (
78 className="mt-2 btn btn-secondary text-monospace"
79 onClick={linkEvent(this, this.handleIframeExpand)}
81 {i18n.t("expand_here")}
93 {this.state.expanded &&
94 post.embed_video_url.match({
95 some: video_url => <iframe src={video_url}></iframe>,
102 handleIframeExpand(i: MetadataCard) {
103 i.setState({ expanded: !i.state.expanded });