import { myAuthRequired, newVote, showScores } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
-import { futureDaysToUnixTime, hostname, numToSI } from "@utils/helpers";
+import {
+ capitalizeFirstLetter,
+ futureDaysToUnixTime,
+ hostname,
+ numToSI,
+} from "@utils/helpers";
import { isImage, isVideo } from "@utils/media";
import {
amAdmin,
}
get img() {
- return this.imageSrc ? (
- <>
- <div className="offset-sm-3 my-2 d-none d-sm-block">
- <a href={this.imageSrc} className="d-inline-block">
- <PictrsImage src={this.imageSrc} />
- </a>
- </div>
- <div className="my-2 d-block d-sm-none">
- <a
- className="d-inline-block"
- onClick={linkEvent(this, this.handleImageExpandClick)}
- >
- <PictrsImage src={this.imageSrc} />
- </a>
+ if (this.imageSrc) {
+ return (
+ <>
+ <div className="offset-sm-3 my-2 d-none d-sm-block">
+ <a href={this.imageSrc} className="d-inline-block">
+ <PictrsImage src={this.imageSrc} />
+ </a>
+ </div>
+ <div className="my-2 d-block d-sm-none">
+ <a
+ className="d-inline-block"
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ >
+ <PictrsImage src={this.imageSrc} />
+ </a>
+ </div>
+ </>
+ );
+ }
+
+ const { post } = this.postView;
+ const { url } = post;
+
+ if (url && isVideo(url)) {
+ return (
+ <div className="embed-responsive mt-3">
+ <video muted controls className="embed-responsive-item col-12">
+ <source src={url} type="video/mp4" />
+ </video>
</div>
- </>
- ) : (
- <></>
- );
+ );
+ }
+
+ return <></>;
}
imgThumb(src: string) {
} else if (url) {
if (!this.props.hideImage && isVideo(url)) {
return (
- <div className="embed-responsive embed-responsive-16by9">
- <video
- playsInline
- muted
- loop
- controls
- className="embed-responsive-item"
- >
- <source src={url} type="video/mp4" />
- </video>
- </div>
+ <a
+ className="text-body"
+ href={url}
+ title={url}
+ rel={relTags}
+ data-tippy-content={I18NextService.i18n.t("expand_here")}
+ onClick={linkEvent(this, this.handleImageExpandClick)}
+ aria-label={I18NextService.i18n.t("expand_here")}
+ >
+ <div className="thumbnail rounded bg-light d-flex justify-content-center">
+ <Icon icon="play" classes="d-flex align-items-center" />
+ </div>
+ </a>
);
} else {
return (
createdLine() {
const post_view = this.postView;
return (
- <ul className="list-inline mb-1 text-muted small mt-2">
- <li className="list-inline-item">
- <PersonListing person={post_view.creator} />
-
- {this.creatorIsMod_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("mod")}
- </span>
- )}
- {this.creatorIsAdmin_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("admin")}
- </span>
- )}
- {post_view.creator.bot_account && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("bot_account").toLowerCase()}
- </span>
- )}
- {this.props.showCommunity && (
- <>
- {" "}
- {I18NextService.i18n.t("to")}{" "}
- <CommunityLink community={post_view.community} />
- </>
- )}
- </li>
+ <span className="small">
+ <PersonListing person={post_view.creator} />
+ {this.creatorIsMod_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("mod")}
+ </span>
+ )}
+ {this.creatorIsAdmin_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("admin")}
+ </span>
+ )}
+ {post_view.creator.bot_account && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("bot_account").toLowerCase()}
+ </span>
+ )}
+ {this.props.showCommunity && (
+ <>
+ {" "}
+ {I18NextService.i18n.t("to")}{" "}
+ <CommunityLink community={post_view.community} />
+ </>
+ )}
{post_view.post.language_id !== 0 && (
<span className="mx-1 badge text-bg-light">
{
)?.name
}
</span>
- )}
- <li className="list-inline-item">•</li>
- <li className="list-inline-item">
- <span>
- <MomentTime
- published={post_view.post.published}
- updated={post_view.post.updated}
- />
- </span>
- </li>
- </ul>
+ )}{" "}
+ •{" "}
+ <MomentTime
+ published={post_view.post.published}
+ updated={post_view.post.updated}
+ />
+ </span>
);
}
to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title}
>
- <span className="me-1">
- <Icon icon="message-square" classes="me-1" inline />
- {post_view.counts.comments}
- </span>
+ <Icon icon="message-square" classes="me-1" inline />
+ {post_view.counts.comments}
{this.unreadCount && (
<span className="text-muted fst-italic">
({this.unreadCount} {I18NextService.i18n.t("new")})
classes={classNames("me-1", { "text-danger": locked })}
inline
/>
- {label}
+ {capitalizeFirstLetter(label)}
</>
)}
</button>
const post_view = this.postView;
return (
this.state.showAdvanced && (
- <>
+ <div className="mt-3">
{this.canMod_ && (
<>
{!this.creatorIsMod_ &&
)}
</>
)}
- </>
+ </div>
)
);
}
);
}
- showMobilePreview() {
+ showBodyPreview() {
const { body, id } = this.postView.post;
return !this.showBody && body ? (
- <Link className="text-body" to={`/post/${id}`}>
+ <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
<div className="md-div mb-1 preview-lines">{body}</div>
</Link>
) : (
{this.mobileThumbnail()}
{/* Show a preview of the post body */}
- {this.showMobilePreview()}
+ {this.showBodyPreview()}
{this.commentsLine(true)}
{this.userActionsLine()}
<div className="col-12">
{this.postTitleLine()}
{this.createdLine()}
+ {this.showBodyPreview()}
{this.commentsLine()}
{this.duplicatesLine()}
{this.userActionsLine()}