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";
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 (
<>
- {!this.state.expanded &&
- post.embed_title.match({
- some: embedTitle =>
- post.url.match({
- some: url => (
- <div class="card border-secondary mt-3 mb-2">
- <div class="row">
- <div class="col-12">
- <div class="card-body">
- {post.name !== embedTitle && [
- <h5 class="card-title d-inline">
- <a class="text-body" href={url} rel={relTags}>
- {embedTitle}
- </a>
- </h5>,
- <span class="d-inline-block ml-2 mb-2 small text-muted">
- <a
- class="text-muted font-italic"
- href={url}
- rel={relTags}
- >
- {new URL(url).hostname}
- <Icon icon="external-link" classes="ml-1" />
- </a>
- </span>,
- ]}
- {post.embed_description.match({
- some: desc => (
- <div
- className="card-text small text-muted md-div"
- dangerouslySetInnerHTML={{
- __html: desc,
- }}
- />
- ),
- none: <></>,
- })}
- {post.embed_html.isSome() && (
- <button
- class="mt-2 btn btn-secondary text-monospace"
- onClick={linkEvent(this, this.handleIframeExpand)}
- data-tippy-content={i18n.t("expand_here")}
- >
- {this.state.expanded ? "-" : "+"}
- </button>
- )}
- </div>
- </div>
- </div>
- </div>
- ),
- none: <></>,
- }),
- none: <></>,
- })}
- {this.state.expanded &&
- post.embed_html.match({
- some: html => (
- <div
- class="mt-3 mb-2"
- dangerouslySetInnerHTML={{ __html: html }}
- />
- ),
- none: <></>,
- })}
+ {!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: sanitizeHtml(post.embed_description),
+ }}
+ />
+ )}
+ {post.embed_video_url && (
+ <button
+ className="mt-2 btn btn-secondary text-monospace"
+ onClick={linkEvent(this, this.handleIframeExpand)}
+ >
+ {i18n.t("expand_here")}
+ </button>
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
+ {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 });
}
}