import { Component, linkEvent } from 'inferno';
-import { FramelyData } from '../interfaces';
+import { Post } from 'lemmy-js-client';
import { mdToHtml } from '../utils';
+import { i18n } from '../i18next';
interface FramelyCardProps {
- iframely: FramelyData;
+ post: Post;
}
interface FramelyCardState {
}
render() {
- let iframely = this.props.iframely;
+ let post = this.props.post;
return (
<>
- <div class="card my-2">
- <div class="row no-gutters">
- {iframely.thumbnail_url && (
- <div class="col-sm-3">
- {iframely.html ? (
- <span
- class="pointer"
- onClick={linkEvent(this, this.handleIframeExpand)}
- >
- <img class="card-img" src={iframely.thumbnail_url} />
- </span>
- ) : (
- <img
- class="img-fluid card-img"
- src={iframely.thumbnail_url}
- />
- )}
- </div>
- )}
- <div class="col-sm-9">
- <div class="card-body">
- <h5 class="card-title d-inline">
- <span>
- <a class="text-body" target="_blank" href={iframely.url}>
- {iframely.title}
+ {post.embed_title && !this.state.expanded && (
+ <div class="card bg-transparent border-secondary mt-3 mb-2">
+ <div class="row">
+ <div class="col-12">
+ <div class="card-body">
+ <h5 class="card-title d-inline">
+ {post.embed_html ? (
+ <span
+ class="unselectable pointer"
+ onClick={linkEvent(this, this.handleIframeExpand)}
+ data-tippy-content={i18n.t('expand_here')}
+ >
+ {post.embed_title}
+ </span>
+ ) : (
+ <span>
+ <a
+ class="text-body"
+ target="_blank"
+ href={post.url}
+ rel="noopener"
+ >
+ {post.embed_title}
+ </a>
+ </span>
+ )}
+ </h5>
+ <span class="d-inline-block ml-2 mb-2 small text-muted">
+ <a
+ class="text-muted font-italic"
+ target="_blank"
+ href={post.url}
+ rel="noopener"
+ >
+ {new URL(post.url).hostname}
+ <svg class="ml-1 icon">
+ <use xlinkHref="#icon-external-link"></use>
+ </svg>
</a>
+ {post.embed_html && (
+ <span
+ class="ml-2 pointer text-monospace"
+ onClick={linkEvent(this, this.handleIframeExpand)}
+ data-tippy-content={i18n.t('expand_here')}
+ >
+ {this.state.expanded ? '[-]' : '[+]'}
+ </span>
+ )}
</span>
- </h5>
- <span class="d-inline-block ml-2 mb-2 small text-muted">
- <a class="text-muted" target="_blank" href={iframely.url}>
- {new URL(iframely.url).hostname}
- <svg class="ml-1 icon">
- <use xlinkHref="#icon-external-link"></use>
- </svg>
- </a>
- {iframely.html && (
- <span
- class="ml-2 pointer"
- onClick={linkEvent(this, this.handleIframeExpand)}
- >
- {this.state.expanded ? '[-]' : '[+]'}
- </span>
+ {post.embed_description && (
+ <div
+ className="card-text small text-muted md-div"
+ dangerouslySetInnerHTML={mdToHtml(post.embed_description)}
+ />
)}
- </span>
- {iframely.description && (
- <div
- className="card-text small text-muted md-div"
- dangerouslySetInnerHTML={mdToHtml(iframely.description)}
- />
- )}
+ </div>
</div>
</div>
</div>
- </div>
+ )}
{this.state.expanded && (
- <div class="my-2 embed-responsive embed-responsive-16by9">
- <div
- class="embed-responsive-item"
- dangerouslySetInnerHTML={{ __html: iframely.html }}
- />
- </div>
+ <div
+ class="mt-3 mb-2"
+ dangerouslySetInnerHTML={{ __html: post.embed_html }}
+ />
)}
</>
);