Progress
This commit is contained in:
parent
4d7aee59c9
commit
fed036be08
2
Gemfile
2
Gemfile
|
@ -56,6 +56,7 @@ gem 'http_parser.rb', '~> 0.6', git: 'https://github.com/tmm1/http_parser.rb', r
|
|||
gem 'httplog', '~> 1.3'
|
||||
gem 'idn-ruby', require: 'idn'
|
||||
gem 'kaminari', '~> 1.1'
|
||||
gem 'kramdown', '~> 2.1.0'
|
||||
gem 'link_header', '~> 0.0'
|
||||
gem 'mime-types', '~> 3.2', require: 'mime/types/columnar'
|
||||
gem 'nokogiri', '~> 1.10'
|
||||
|
@ -89,6 +90,7 @@ gem 'twitter-text', '~> 1.14'
|
|||
gem 'tzinfo-data', '~> 1.2019'
|
||||
gem 'webpacker', '~> 4.0'
|
||||
gem 'webpush'
|
||||
gem 'redcarpet', '~> 3.5.0'
|
||||
|
||||
gem 'json-ld', '~> 3.0'
|
||||
gem 'json-ld-preloaded', '~> 3.0'
|
||||
|
|
|
@ -311,6 +311,7 @@ GEM
|
|||
activerecord
|
||||
kaminari-core (= 1.1.1)
|
||||
kaminari-core (1.1.1)
|
||||
kramdown (2.1.0)
|
||||
launchy (2.4.3)
|
||||
addressable (~> 2.3)
|
||||
letter_opener (1.7.0)
|
||||
|
@ -478,6 +479,7 @@ GEM
|
|||
link_header (~> 0.0, >= 0.0.8)
|
||||
rdf-normalize (0.3.3)
|
||||
rdf (>= 2.2, < 4.0)
|
||||
redcarpet (3.5.0)
|
||||
redis (4.1.2)
|
||||
redis-actionpack (5.0.2)
|
||||
actionpack (>= 4.0, < 6)
|
||||
|
@ -701,6 +703,7 @@ DEPENDENCIES
|
|||
json-ld (~> 3.0)
|
||||
json-ld-preloaded (~> 3.0)
|
||||
kaminari (~> 1.1)
|
||||
kramdown (~> 2.1.0)
|
||||
letter_opener (~> 1.7)
|
||||
letter_opener_web (~> 1.3)
|
||||
link_header (~> 0.0)
|
||||
|
@ -739,6 +742,7 @@ DEPENDENCIES
|
|||
rails-i18n (~> 5.1)
|
||||
rails-settings-cached (~> 0.6)
|
||||
rdf-normalize (~> 0.3)
|
||||
redcarpet (~> 3.5.0)
|
||||
redis (~> 4.1)
|
||||
redis-namespace (~> 1.5)
|
||||
redis-rails (~> 5.0)
|
||||
|
|
|
@ -5,8 +5,8 @@ class Api::V1::StatusesController < Api::BaseController
|
|||
|
||||
before_action -> { authorize_if_got_token! :read, :'read:statuses' }, except: [:create, :update, :destroy]
|
||||
before_action -> { doorkeeper_authorize! :write, :'write:statuses' }, only: [:create, :update, :destroy]
|
||||
before_action :require_user!, except: [:show, :context, :card]
|
||||
before_action :set_status, only: [:show, :context, :card, :update, :revisions]
|
||||
before_action :require_user!, except: [:show, :comments, :context, :card]
|
||||
before_action :set_status, only: [:show, :comments, :context, :card, :update, :revisions]
|
||||
|
||||
respond_to :json
|
||||
|
||||
|
@ -14,6 +14,7 @@ class Api::V1::StatusesController < Api::BaseController
|
|||
# breaking backwards-compatibility. Arbitrarily high number to cover most
|
||||
# conversations as quasi-unlimited, it would be too much work to render more
|
||||
# than this anyway
|
||||
# : TODO :
|
||||
CONTEXT_LIMIT = 4_096
|
||||
|
||||
def show
|
||||
|
@ -21,6 +22,16 @@ class Api::V1::StatusesController < Api::BaseController
|
|||
render json: @status, serializer: REST::StatusSerializer
|
||||
end
|
||||
|
||||
def comments
|
||||
descendants_results = @status.descendants(CONTEXT_LIMIT, current_account)
|
||||
loaded_descendants = cache_collection(descendants_results, Status)
|
||||
|
||||
@context = Context.new(descendants: loaded_descendants)
|
||||
statuses = [@status] + @context.descendants
|
||||
|
||||
render json: @context, serializer: REST::ContextSerializer, relationships: StatusRelationshipsPresenter.new(statuses, current_user&.account_id)
|
||||
end
|
||||
|
||||
def context
|
||||
ancestors_results = @status.in_reply_to_id.nil? ? [] : @status.ancestors(CONTEXT_LIMIT, current_account)
|
||||
descendants_results = @status.descendants(CONTEXT_LIMIT, current_account)
|
||||
|
@ -42,6 +53,7 @@ class Api::V1::StatusesController < Api::BaseController
|
|||
def create
|
||||
@status = PostStatusService.new.call(current_user.account,
|
||||
text: status_params[:status],
|
||||
markdown: status_params[:markdown],
|
||||
thread: status_params[:in_reply_to_id].blank? ? nil : Status.find(status_params[:in_reply_to_id]),
|
||||
media_ids: status_params[:media_ids],
|
||||
sensitive: status_params[:sensitive],
|
||||
|
@ -93,6 +105,7 @@ class Api::V1::StatusesController < Api::BaseController
|
|||
def status_params
|
||||
params.permit(
|
||||
:status,
|
||||
:markdown,
|
||||
:in_reply_to_id,
|
||||
:quote_of_id,
|
||||
:sensitive,
|
||||
|
|
|
@ -77,10 +77,12 @@ export const ensureComposeIsVisible = (getState, routerHistory) => {
|
|||
}
|
||||
};
|
||||
|
||||
export function changeCompose(text) {
|
||||
export function changeCompose(text, markdown) {
|
||||
console.log("changeCompose:", markdown)
|
||||
return {
|
||||
type: COMPOSE_CHANGE,
|
||||
text: text,
|
||||
markdown: markdown,
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -173,7 +175,7 @@ export function submitCompose(routerHistory, group) {
|
|||
if (!me) return;
|
||||
|
||||
let status = getState().getIn(['compose', 'text'], '');
|
||||
const statusMarkdown = getState().getIn(['compose', 'text_markdown'], '');
|
||||
const markdown = getState().getIn(['compose', 'markdown'], '');
|
||||
const media = getState().getIn(['compose', 'media_attachments']);
|
||||
|
||||
// : hack :
|
||||
|
@ -182,11 +184,13 @@ export function submitCompose(routerHistory, group) {
|
|||
const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
|
||||
return hasProtocol ? match : `http://${match}`
|
||||
})
|
||||
// statusMarkdown = statusMarkdown.replace(urlRegex, (match) =>{
|
||||
// markdown = statusMarkdown.replace(urlRegex, (match) =>{
|
||||
// const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
|
||||
// return hasProtocol ? match : `http://${match}`
|
||||
// })
|
||||
|
||||
console.log("markdown:", markdown)
|
||||
|
||||
dispatch(submitComposeRequest());
|
||||
dispatch(closeModal());
|
||||
|
||||
|
@ -202,7 +206,7 @@ export function submitCompose(routerHistory, group) {
|
|||
|
||||
api(getState)[method](endpoint, {
|
||||
status,
|
||||
// statusMarkdown,
|
||||
markdown,
|
||||
scheduled_at,
|
||||
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
|
||||
quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer';
|
||||
import { fetchContext } from '../statuses'
|
||||
|
||||
export const ACCOUNT_IMPORT = 'ACCOUNT_IMPORT';
|
||||
export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
|
||||
|
@ -78,6 +79,10 @@ export function importFetchedStatuses(statuses) {
|
|||
if (status.poll && status.poll.id) {
|
||||
pushUnique(polls, normalizePoll(status.poll));
|
||||
}
|
||||
|
||||
// if (status.replies_count > 0) {
|
||||
// dispatch(fetchComments(status.id));
|
||||
// }
|
||||
}
|
||||
|
||||
statuses.forEach(processStatus);
|
||||
|
|
|
@ -62,9 +62,10 @@ export function normalizeStatus(status, normalOldStatus) {
|
|||
const spoilerText = normalStatus.spoiler_text || '';
|
||||
const searchContent = [spoilerText, status.content].join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
|
||||
const emojiMap = makeEmojiMap(normalStatus);
|
||||
const theContent = !!normalStatus.rich_content ? normalStatus.rich_content : normalStatus.content;
|
||||
|
||||
normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent;
|
||||
normalStatus.contentHtml = emojify(normalStatus.content, emojiMap);
|
||||
normalStatus.contentHtml = emojify(theContent, emojiMap);
|
||||
normalStatus.spoilerHtml = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
|
||||
normalStatus.hidden = expandSpoilers ? false : spoilerText.length > 0 || normalStatus.sensitive;
|
||||
}
|
||||
|
|
|
@ -18,6 +18,10 @@ export const CONTEXT_FETCH_REQUEST = 'CONTEXT_FETCH_REQUEST';
|
|||
export const CONTEXT_FETCH_SUCCESS = 'CONTEXT_FETCH_SUCCESS';
|
||||
export const CONTEXT_FETCH_FAIL = 'CONTEXT_FETCH_FAIL';
|
||||
|
||||
export const COMMENTS_FETCH_REQUEST = 'COMMENTS_FETCH_REQUEST';
|
||||
export const COMMENTS_FETCH_SUCCESS = 'COMMENTS_FETCH_SUCCESS';
|
||||
export const COMMENTS_FETCH_FAIL = 'COMMENTS_FETCH_FAIL';
|
||||
|
||||
export const STATUS_MUTE_REQUEST = 'STATUS_MUTE_REQUEST';
|
||||
export const STATUS_MUTE_SUCCESS = 'STATUS_MUTE_SUCCESS';
|
||||
export const STATUS_MUTE_FAIL = 'STATUS_MUTE_FAIL';
|
||||
|
@ -85,8 +89,6 @@ export function fetchStatus(id) {
|
|||
return (dispatch, getState) => {
|
||||
const skipLoading = getState().getIn(['statuses', id], null) !== null;
|
||||
|
||||
dispatch(fetchContext(id));
|
||||
|
||||
if (skipLoading) {
|
||||
return;
|
||||
}
|
||||
|
@ -205,6 +207,24 @@ export function fetchContext(id) {
|
|||
};
|
||||
};
|
||||
|
||||
export function fetchComments(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchCommentsRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/statuses/${id}/comments`).then(response => {
|
||||
dispatch(importFetchedStatuses(response.data.descendants));
|
||||
dispatch(fetchCommentsSuccess(id, response.data.descendants));
|
||||
|
||||
}).catch(error => {
|
||||
if (error.response && error.response.status === 404) {
|
||||
dispatch(deleteFromTimelines(id));
|
||||
}
|
||||
|
||||
dispatch(fetchCommentsFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchContextRequest(id) {
|
||||
return {
|
||||
type: CONTEXT_FETCH_REQUEST,
|
||||
|
@ -231,6 +251,30 @@ export function fetchContextFail(id, error) {
|
|||
};
|
||||
};
|
||||
|
||||
export function fetchCommentsRequest(id) {
|
||||
return {
|
||||
type: COMMENTS_FETCH_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchCommentsSuccess(id, descendants) {
|
||||
return {
|
||||
type: COMMENTS_FETCH_SUCCESS,
|
||||
id,
|
||||
descendants,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchCommentsFail(id, error) {
|
||||
return {
|
||||
type: COMMENTS_FETCH_FAIL,
|
||||
id,
|
||||
error,
|
||||
skipAlert: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function muteStatus(id) {
|
||||
return (dispatch, getState) => {
|
||||
if (!me) return;
|
||||
|
|
|
@ -92,7 +92,7 @@ class Account extends ImmutablePureComponent {
|
|||
onMute: PropTypes.func.isRequired,
|
||||
onMuteNotifications: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
hidden: PropTypes.bool,
|
||||
isHidden: PropTypes.bool,
|
||||
actionIcon: PropTypes.string,
|
||||
actionTitle: PropTypes.string,
|
||||
onActionClick: PropTypes.func,
|
||||
|
@ -134,7 +134,7 @@ class Account extends ImmutablePureComponent {
|
|||
const {
|
||||
account,
|
||||
intl,
|
||||
hidden,
|
||||
isHidden,
|
||||
onActionClick,
|
||||
actionIcon,
|
||||
actionTitle,
|
||||
|
@ -146,7 +146,7 @@ class Account extends ImmutablePureComponent {
|
|||
|
||||
if (!account) return null
|
||||
|
||||
if (hidden) {
|
||||
if (isHidden) {
|
||||
return (
|
||||
<Fragment>
|
||||
{account.get('display_name')}
|
||||
|
@ -207,7 +207,6 @@ class Account extends ImmutablePureComponent {
|
|||
const dismissBtn = (
|
||||
<Button
|
||||
narrow
|
||||
circle
|
||||
backgroundColor='none'
|
||||
className={_s.px5}
|
||||
onClick={dismissAction}
|
||||
|
|
|
@ -52,7 +52,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
|
|||
tokenStart: 0,
|
||||
}
|
||||
|
||||
onChange = (e, value, selectionStart) => {
|
||||
onChange = (e, value, selectionStart, markdown) => {
|
||||
if (!isObject(e)) {
|
||||
e = {
|
||||
target: {
|
||||
|
@ -60,8 +60,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
|
|||
selectionStart,
|
||||
},
|
||||
}
|
||||
|
||||
console.log("new e:", e)
|
||||
}
|
||||
|
||||
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
|
||||
|
@ -76,7 +74,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
|
|||
this.props.onSuggestionsClearRequested();
|
||||
}
|
||||
|
||||
this.props.onChange(e);
|
||||
this.props.onChange(e, markdown);
|
||||
}
|
||||
|
||||
onKeyDown = (e) => {
|
||||
|
|
|
@ -2,8 +2,12 @@ import {
|
|||
Editor,
|
||||
EditorState,
|
||||
CompositeDecorator,
|
||||
RichUtils
|
||||
RichUtils,
|
||||
convertToRaw,
|
||||
convertFromRaw
|
||||
} from 'draft-js'
|
||||
import { draftToMarkdown } from 'markdown-draft-js'
|
||||
// import draftToMarkdown from 'draftjs-to-markdown'
|
||||
import { urlRegex } from '../features/compose/util/url_regex'
|
||||
import classNames from 'classnames/bind'
|
||||
import RichTextEditorBar from './rich_text_editor_bar'
|
||||
|
@ -101,14 +105,34 @@ class Composer extends PureComponent {
|
|||
|
||||
onChange = (editorState) => {
|
||||
this.setState({ editorState })
|
||||
const text = editorState.getCurrentContent().getPlainText('\u0001')
|
||||
const content = this.state.editorState.getCurrentContent();
|
||||
const text = content.getPlainText('\u0001')
|
||||
|
||||
const selectionState = editorState.getSelection()
|
||||
const selectionStart = selectionState.getStartOffset()
|
||||
|
||||
this.props.onChange(null, text, selectionStart)
|
||||
const rawObject = convertToRaw(content);
|
||||
const markdownString = draftToMarkdown(rawObject);
|
||||
// const markdownString = draftToMarkdown(rawObject, {
|
||||
// trigger: '#',
|
||||
// separator: ' ',
|
||||
// });
|
||||
|
||||
console.log("markdownString:", markdownString)
|
||||
|
||||
this.props.onChange(null, text, selectionStart, markdownString)
|
||||
}
|
||||
|
||||
// **bold**
|
||||
// *italic*
|
||||
// __underline__
|
||||
// ~strikethrough~
|
||||
// # title
|
||||
// > quote
|
||||
// `code`
|
||||
// ```code```
|
||||
|
||||
|
||||
focus = () => {
|
||||
this.textbox.editor.focus()
|
||||
}
|
||||
|
|
|
@ -135,10 +135,7 @@ class IntersectionObserverArticle extends React.Component {
|
|||
data-id={id}
|
||||
tabIndex='0'
|
||||
>
|
||||
{
|
||||
children &&
|
||||
React.cloneElement(children, { hidden: true })
|
||||
}
|
||||
{React.cloneElement(children, { isHidden: true })}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
@ -151,10 +148,7 @@ class IntersectionObserverArticle extends React.Component {
|
|||
data-id={id}
|
||||
tabIndex='0'
|
||||
>
|
||||
{
|
||||
children &&
|
||||
React.cloneElement(children, { hidden: false })
|
||||
}
|
||||
{React.cloneElement(children, { isHidden: false, isIntersecting })}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -6,7 +6,10 @@ import ListItem from './list_item'
|
|||
export default class List extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
items: PropTypes.array,
|
||||
items: PropTypes.oneOfType([
|
||||
PropTypes.array,
|
||||
// immutatable...
|
||||
]),
|
||||
scrollKey: PropTypes.string,
|
||||
emptyMessage: PropTypes.any,
|
||||
size: PropTypes.oneOf([
|
||||
|
|
|
@ -99,9 +99,9 @@ class ModalRoot extends PureComponent {
|
|||
|
||||
componentDidUpdate(prevProps, prevState, { visible }) {
|
||||
if (visible) {
|
||||
document.body.classList.add('with-modals--active')
|
||||
document.body.classList.add(_s.overflowYHidden)
|
||||
} else {
|
||||
document.body.classList.remove('with-modals--active')
|
||||
document.body.classList.remove(_s.overflowYHidden)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,10 +10,10 @@ export default class PanelLayout extends PureComponent {
|
|||
children: PropTypes.node,
|
||||
headerButtonTitle: PropTypes.string,
|
||||
headerButtonAction: PropTypes.func,
|
||||
headerButtonTo: PropTypes.func,
|
||||
headerButtonTo: PropTypes.string,
|
||||
footerButtonTitle: PropTypes.string,
|
||||
footerButtonAction: PropTypes.func,
|
||||
footerButtonTo: PropTypes.func,
|
||||
footerButtonTo: PropTypes.string,
|
||||
noPadding: PropTypes.bool,
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { me, isStaff } from '../../initial_state'
|
||||
import PopoverLayout from './popover_layout'
|
||||
import List from '../list'
|
||||
|
||||
|
@ -22,13 +23,11 @@ const messages = defineMessages({
|
|||
cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
|
||||
cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
|
||||
like: { id: 'status.like', defaultMessage: 'Like' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
||||
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
|
||||
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
|
||||
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
||||
admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
|
||||
admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
|
||||
group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
|
||||
|
@ -40,6 +39,7 @@ export default
|
|||
class StatusOptionsPopover extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
onOpenUnauthorizedModal: PropTypes.func.isRequired,
|
||||
onOpenStatusSharePopover: PropTypes.func.isRequired,
|
||||
onReply: PropTypes.func,
|
||||
|
@ -51,47 +51,83 @@ class StatusOptionsPopover extends ImmutablePureComponent {
|
|||
onMute: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
withDismiss: PropTypes.bool,
|
||||
withGroupAdmin: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
updateOnProps = ['status', 'account']
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
}
|
||||
|
||||
handleGroupRemoveAccount = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
|
||||
}
|
||||
|
||||
handleGroupRemovePost = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.status);
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
this.props.onBlock(this.props.status);
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.context.router.history);
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
this.props.onDelete(this.props.status, this.context.router.history);
|
||||
}
|
||||
|
||||
handleEditClick = () => {
|
||||
this.props.onEdit(this.props.status);
|
||||
}
|
||||
|
||||
handleRepostClick = (e) => {
|
||||
if (me) {
|
||||
// this.props.onRepost(this.props.status, e)
|
||||
this.props.onQuote(this.props.status, this.context.router.history)
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal()
|
||||
}
|
||||
}
|
||||
|
||||
getItems = () => {
|
||||
const { status, intl, withDismiss, withGroupAdmin } = this.props
|
||||
const {
|
||||
status,
|
||||
intl,
|
||||
account,
|
||||
} = this.props
|
||||
|
||||
const mutingConversation = status.get('muted')
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
|
||||
|
||||
let menu = [];
|
||||
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.open),
|
||||
onClick: this.handleOpen
|
||||
});
|
||||
|
||||
if (publicStatus) {
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.copy),
|
||||
onClick: this.handleCopy,
|
||||
})
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.embed),
|
||||
onClick: this.handleEmbed,
|
||||
})
|
||||
}
|
||||
|
||||
if (!me) return menu
|
||||
|
||||
if (status.getIn(['account', 'id']) === me || withDismiss) {
|
||||
if (status.getIn(['account', 'id']) === me) {
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
icon: 'mute',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
|
||||
onClick: this.handleConversationMuteClick,
|
||||
|
@ -109,27 +145,75 @@ class StatusOptionsPopover extends ImmutablePureComponent {
|
|||
} else {
|
||||
if (status.get('visibility') === 'private') {
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
|
||||
onClick: this.handleRepostClick
|
||||
})
|
||||
}
|
||||
}
|
||||
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
|
||||
menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.delete),
|
||||
action: this.handleDeleteClick
|
||||
});
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.edit), action:
|
||||
this.handleEditClick
|
||||
});
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
|
||||
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
|
||||
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
|
||||
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
|
||||
menu.push({
|
||||
icon: 'comment',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleMentionClick
|
||||
});
|
||||
menu.push({
|
||||
icon: 'mute',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleMuteClick
|
||||
});
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleBlockClick
|
||||
});
|
||||
menu.push({
|
||||
icon: 'circle',
|
||||
hideArrow: true,
|
||||
title: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
|
||||
action: this.handleReport
|
||||
});
|
||||
|
||||
// if (withGroupAdmin) {
|
||||
// menu.push({
|
||||
// icon: 'circle',
|
||||
// hideArrow: true,
|
||||
// title: intl.formatMessage(messages.group_remove_account),
|
||||
// action: this.handleGroupRemoveAccount
|
||||
// });
|
||||
// menu.push({
|
||||
// icon: 'circle',
|
||||
// hideArrow: true,
|
||||
// title: intl.formatMessage(messages.group_remove_post),
|
||||
// action: this.handleGroupRemovePost
|
||||
// });
|
||||
// }
|
||||
|
||||
if (isStaff) {
|
||||
menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
|
||||
menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
|
||||
}
|
||||
|
||||
if (withGroupAdmin) {
|
||||
menu.push({ text: intl.formatMessage(messages.group_remove_account), action: this.handleGroupRemoveAccount });
|
||||
menu.push({ text: intl.formatMessage(messages.group_remove_post), action: this.handleGroupRemovePost });
|
||||
menu.push({
|
||||
title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
|
||||
href: `/admin/accounts/${status.getIn(['account', 'id'])}`
|
||||
});
|
||||
menu.push({
|
||||
title: intl.formatMessage(messages.admin_status),
|
||||
href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -121,7 +121,7 @@ export default class ScrollableList extends PureComponent {
|
|||
const { innerHeight } = this.window;
|
||||
const offset = scrollHeight - scrollTop - innerHeight;
|
||||
|
||||
if (400 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
|
||||
if (600 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
|
||||
this.props.onLoadMore();
|
||||
}
|
||||
|
||||
|
|
|
@ -80,13 +80,11 @@ export default class SidebarSectionItem extends PureComponent {
|
|||
fontSize15PX: 1,
|
||||
text: 1,
|
||||
textOverflowEllipsis: 1,
|
||||
colorSecondary: !hovering && !active && !me && !shouldShowActive,
|
||||
colorPrimary: shouldShowActive || me,
|
||||
colorPrimary: 1,
|
||||
})
|
||||
|
||||
const iconClasses = cx({
|
||||
fillColorSecondary: !hovering && !active && !shouldShowActive,
|
||||
fillColorBlack: shouldShowActive,
|
||||
fillColorBlack: 1,
|
||||
})
|
||||
|
||||
const countClasses = cx({
|
||||
|
|
|
@ -1,48 +1,51 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { injectIntl } from 'react-intl'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { HotKeys } from 'react-hotkeys'
|
||||
import classNames from 'classnames/bind'
|
||||
import { me, displayMedia } from '../initial_state';
|
||||
import { me, displayMedia } from '../initial_state'
|
||||
import StatusCard from './status_card'
|
||||
import { MediaGallery, Video } from '../features/ui/util/async_components';
|
||||
import { MediaGallery, Video } from '../features/ui/util/async_components'
|
||||
import ComposeFormContainer from '../features/compose/containers/compose_form_container'
|
||||
import StatusContent from './status_content'
|
||||
import StatusPrepend from './status_prepend'
|
||||
import StatusActionBar from './status_action_bar';
|
||||
import Poll from './poll';
|
||||
import StatusActionBar from './status_action_bar'
|
||||
import Poll from './poll'
|
||||
import StatusHeader from './status_header'
|
||||
import Text from './text'
|
||||
import CommentList from './comment_list'
|
||||
|
||||
// We use the component (and not the container) since we do not want
|
||||
// to use the progress bar to show download progress
|
||||
import Bundle from '../features/ui/util/bundle';
|
||||
import Bundle from '../features/ui/util/bundle'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export const textForScreenReader = (intl, status, rebloggedByText = false) => {
|
||||
const displayName = status.getIn(['account', 'display_name']);
|
||||
if (!intl || !status) return ''
|
||||
|
||||
const displayName = status.getIn(['account', 'display_name'])
|
||||
|
||||
// : todo :
|
||||
const values = [
|
||||
// displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
|
||||
// status.get('spoiler_text') && status.get('hidden')
|
||||
// ? status.get('spoiler_text')
|
||||
// : status.get('search_index').slice(status.get('spoiler_text').length),
|
||||
// intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
|
||||
// status.getIn(['account', 'acct']),
|
||||
];
|
||||
displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
|
||||
status.get('spoiler_text') && status.get('hidden')
|
||||
? status.get('spoiler_text')
|
||||
: status.get('search_index').slice(status.get('spoiler_text').length),
|
||||
intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
|
||||
`@${status.getIn(['account', 'acct'])}`,
|
||||
]
|
||||
|
||||
if (rebloggedByText) {
|
||||
values.push(rebloggedByText);
|
||||
values.push(rebloggedByText)
|
||||
}
|
||||
|
||||
return values.join(', ');
|
||||
};
|
||||
return values.join(', ')
|
||||
}
|
||||
|
||||
export const defaultMediaVisibility = status => {
|
||||
export const defaultMediaVisibility = (status) => {
|
||||
if (!status) return undefined
|
||||
|
||||
// console.log("status:", status)
|
||||
|
||||
if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
|
||||
status = status.get('reblog')
|
||||
}
|
||||
|
@ -50,63 +53,68 @@ export const defaultMediaVisibility = status => {
|
|||
return (displayMedia !== 'hide_all' && !status.get('sensitive')) || displayMedia === 'show_all'
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
filtered: { id: 'status.filtered', defaultMessage: 'Filtered' },
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class Status extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
status: ImmutablePropTypes.map,
|
||||
descendantsIds: ImmutablePropTypes.list,
|
||||
isChild: PropTypes.bool,
|
||||
isPromoted: PropTypes.bool,
|
||||
isFeatured: PropTypes.bool,
|
||||
isMuted: PropTypes.bool,
|
||||
isHidden: PropTypes.bool,
|
||||
isIntersecting: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onReply: PropTypes.func,
|
||||
onShowRevisions: PropTypes.func,
|
||||
onQuote: PropTypes.func,
|
||||
onFavorite: PropTypes.func,
|
||||
onRepost: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onMention: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
onOpenMedia: PropTypes.func,
|
||||
onOpenVideo: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onHeightChange: PropTypes.func,
|
||||
onToggleHidden: PropTypes.func,
|
||||
muted: PropTypes.bool,
|
||||
hidden: PropTypes.bool,
|
||||
onShare: PropTypes.func,
|
||||
onMoveUp: PropTypes.func,
|
||||
onMoveDown: PropTypes.func,
|
||||
onFetchComments: PropTypes.func,
|
||||
getScrollPosition: PropTypes.func,
|
||||
updateScrollBottom: PropTypes.func,
|
||||
cacheMediaWidth: PropTypes.func,
|
||||
cachedMediaWidth: PropTypes.number,
|
||||
group: ImmutablePropTypes.map,
|
||||
promoted: PropTypes.bool,
|
||||
onOpenProUpgradeModal: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
isChild: PropTypes.bool,
|
||||
contextType: PropTypes.string,
|
||||
}
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
// evaluate to false. See react-immutable-pure-component for usage.
|
||||
updateOnProps = ['status', 'account', 'muted', 'hidden']
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'descendantsIds',
|
||||
'isChild',
|
||||
'isPromoted',
|
||||
'isFeatured',
|
||||
'isMuted',
|
||||
'isHidden',
|
||||
'isIntersecting',
|
||||
]
|
||||
|
||||
state = {
|
||||
loadedComments: false,
|
||||
showMedia: defaultMediaVisibility(this.props.status),
|
||||
statusId: undefined,
|
||||
height: undefined,
|
||||
}
|
||||
|
||||
// Track height changes we know about to compensate scrolling
|
||||
componentDidMount() {
|
||||
this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
|
||||
const { isMuted, isHidden, status } = this.props
|
||||
this.didShowCard = !isMuted && !isHidden && status && status.get('card')
|
||||
}
|
||||
|
||||
getSnapshotBeforeUpdate() {
|
||||
|
@ -118,38 +126,100 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.loadedComments) {
|
||||
return {
|
||||
loadedComments: true
|
||||
}
|
||||
}
|
||||
|
||||
if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
|
||||
return {
|
||||
showMedia: defaultMediaVisibility(nextProps.status),
|
||||
statusId: nextProps.status.get('id'),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
// Compensate height changes
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
const doShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
|
||||
if (!prevState.loadedComments && this.state.loadedComments && this.props.status) {
|
||||
const commentCount = this.props.status.get('replies_count');
|
||||
if (commentCount > 0) {
|
||||
this.props.onFetchComments(this.props.status.get('id'))
|
||||
this._measureHeight(prevState.height !== this.state.height)
|
||||
}
|
||||
}
|
||||
|
||||
const doShowCard = !this.props.isMuted && !this.props.isHidden && this.props.status && this.props.status.get('card')
|
||||
|
||||
if (doShowCard && !this.didShowCard) {
|
||||
this.didShowCard = true;
|
||||
this.didShowCard = true
|
||||
|
||||
if (snapshot !== null && this.props.updateScrollBottom) {
|
||||
if (this.node && this.node.offsetTop < snapshot.top) {
|
||||
this.props.updateScrollBottom(snapshot.height - snapshot.top);
|
||||
this.props.updateScrollBottom(snapshot.height - snapshot.top)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleMoveUp = id => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size - 1, true);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index, true);
|
||||
} else {
|
||||
this._selectChild(index - 1, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleMoveDown = id => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size + 1, false);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index + 2, false);
|
||||
} else {
|
||||
this._selectChild(index + 1, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_selectChild(index, align_top) {
|
||||
const container = this.node;
|
||||
const element = container.querySelectorAll('.focusable')[index];
|
||||
|
||||
if (element) {
|
||||
if (align_top && container.scrollTop > element.offsetTop) {
|
||||
element.scrollIntoView(true);
|
||||
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
|
||||
element.scrollIntoView(false);
|
||||
}
|
||||
element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.node && this.props.getScrollPosition) {
|
||||
const position = this.props.getScrollPosition();
|
||||
const position = this.props.getScrollPosition()
|
||||
if (position !== null && this.node.offsetTop < position.top) {
|
||||
requestAnimationFrame(() => {
|
||||
this.props.updateScrollBottom(position.height - position.top);
|
||||
});
|
||||
this.props.updateScrollBottom(position.height - position.top)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -160,11 +230,11 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
handleClick = () => {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
return;
|
||||
this.props.onClick()
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.context.router) return;
|
||||
if (!this.context.router) return
|
||||
|
||||
this.context.router.history.push(
|
||||
`/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
|
||||
|
@ -173,57 +243,53 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
handleExpandClick = e => {
|
||||
if (e.button === 0) {
|
||||
if (!this.context.router) return;
|
||||
if (!this.context.router) return
|
||||
|
||||
this.context.router.history.push(
|
||||
`/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleExpandedToggle = () => {
|
||||
this.props.onToggleHidden(this._properStatus());
|
||||
};
|
||||
|
||||
renderLoadingMediaGallery() {
|
||||
return <div className='media_gallery' style={{ height: '110px' }} />;
|
||||
this.props.onToggleHidden(this._properStatus())
|
||||
}
|
||||
|
||||
renderLoadingVideoPlayer() {
|
||||
return <div className='media-spoiler-video' style={{ height: '110px' }} />;
|
||||
renderLoadingMedia() {
|
||||
return <div className={_s.backgroundColorPanel} style={{ height: '110px' }} />
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, startTime) => {
|
||||
this.props.onOpenVideo(media, startTime);
|
||||
};
|
||||
this.props.onOpenVideo(media, startTime)
|
||||
}
|
||||
|
||||
handleHotkeyReply = e => {
|
||||
e.preventDefault();
|
||||
this.props.onReply(this._properStatus(), this.context.router.history);
|
||||
};
|
||||
e.preventDefault()
|
||||
this.props.onReply(this._properStatus(), this.context.router.history)
|
||||
}
|
||||
|
||||
handleHotkeyFavorite = () => {
|
||||
this.props.onFavorite(this._properStatus());
|
||||
};
|
||||
this.props.onFavorite(this._properStatus())
|
||||
}
|
||||
|
||||
handleHotkeyBoost = e => {
|
||||
this.props.onRepost(this._properStatus(), e);
|
||||
};
|
||||
handleHotkeyRepost = e => {
|
||||
this.props.onQuote(this._properStatus(), e)
|
||||
}
|
||||
|
||||
handleHotkeyMention = e => {
|
||||
e.preventDefault();
|
||||
this.props.onMention(this._properStatus().get('account'), this.context.router.history);
|
||||
};
|
||||
e.preventDefault()
|
||||
this.props.onMention(this._properStatus().get('account'), this.context.router.history)
|
||||
}
|
||||
|
||||
handleHotkeyOpen = () => {
|
||||
this.context.router.history.push(
|
||||
`/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
handleHotkeyOpenProfile = () => {
|
||||
this.context.router.history.push(`/${this._properStatus().getIn(['account', 'acct'])}`);
|
||||
};
|
||||
this.context.router.history.push(`/${this._properStatus().getIn(['account', 'acct'])}`)
|
||||
}
|
||||
|
||||
handleHotkeyMoveUp = e => {
|
||||
this.props.onMoveUp(this.props.status.get('id'), e.target.getAttribute('data-featured'))
|
||||
|
@ -251,63 +317,73 @@ class Status extends ImmutablePureComponent {
|
|||
return status
|
||||
}
|
||||
|
||||
handleRef = c => {
|
||||
this.node = c
|
||||
_measureHeight (heightJustChanged) {
|
||||
try {
|
||||
scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }))
|
||||
|
||||
if (heightJustChanged) {
|
||||
this.props.onHeightChange()
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
handleOpenProUpgradeModal = () => {
|
||||
this.props.onOpenProUpgradeModal();
|
||||
handleRef = c => {
|
||||
this.node = c
|
||||
this._measureHeight()
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
hidden,
|
||||
featured,
|
||||
group,
|
||||
promoted,
|
||||
status,
|
||||
isFeatured,
|
||||
isPromoted,
|
||||
isChild,
|
||||
isHidden,
|
||||
descendantsIds,
|
||||
commentsLimited,
|
||||
} = this.props
|
||||
|
||||
let media = null
|
||||
let rebloggedByText, reblogContent
|
||||
|
||||
// rebloggedByText = intl.formatMessage(
|
||||
// { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
|
||||
// { name: status.getIn(['account', 'acct']) }
|
||||
// );
|
||||
|
||||
// reblogContent = status.get('contentHtml');
|
||||
// status = status.get('reblog');
|
||||
// }
|
||||
|
||||
const { status, ...other } = this.props;
|
||||
|
||||
if (!status) return null
|
||||
|
||||
if (hidden) {
|
||||
let media, reblogContent, rebloggedByText = null
|
||||
|
||||
if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
|
||||
rebloggedByText = intl.formatMessage(
|
||||
{ id: 'status.reposted_by', defaultMessage: '{name} reposted' },
|
||||
{ name: status.getIn(['account', 'acct']) }
|
||||
)
|
||||
reblogContent = status.get('contentHtml')
|
||||
}
|
||||
|
||||
const handlers = this.props.isMuted ? {} : {
|
||||
reply: this.handleHotkeyReply,
|
||||
favorite: this.handleHotkeyFavorite,
|
||||
repost: this.handleHotkeyRepost,
|
||||
mention: this.handleHotkeyMention,
|
||||
open: this.handleHotkeyOpen,
|
||||
openProfile: this.handleHotkeyOpenProfile,
|
||||
moveUp: this.handleHotkeyMoveUp,
|
||||
moveDown: this.handleHotkeyMoveDown,
|
||||
toggleHidden: this.handleHotkeyToggleHidden,
|
||||
toggleSensitive: this.handleHotkeyToggleSensitive,
|
||||
}
|
||||
|
||||
if (isHidden) {
|
||||
return (
|
||||
<div ref={this.handleRef}>
|
||||
<HotKeys handlers={handlers}>
|
||||
<div ref={this.handleRef} className={classNames({ focusable: !this.props.muted })} tabIndex='0'>
|
||||
{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
|
||||
{status.get('content')}
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
}
|
||||
|
||||
if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) {
|
||||
const minHandlers = this.props.muted ? {} : {
|
||||
moveUp: this.handleHotkeyMoveUp,
|
||||
moveDown: this.handleHotkeyMoveDown,
|
||||
}
|
||||
|
||||
return (
|
||||
<HotKeys handlers={minHandlers}>
|
||||
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
|
||||
<Text>{intl.formatMessage(messages.filtered)}</Text>
|
||||
</div>
|
||||
</HotKeys>
|
||||
)
|
||||
return null
|
||||
}
|
||||
|
||||
if (status.get('poll')) {
|
||||
|
@ -317,7 +393,7 @@ class Status extends ImmutablePureComponent {
|
|||
const video = status.getIn(['media_attachments', 0])
|
||||
|
||||
media = (
|
||||
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer}>
|
||||
<Bundle fetchComponent={Video} loading={this.renderLoadingMedia}>
|
||||
{Component => (
|
||||
<Component
|
||||
inline
|
||||
|
@ -339,7 +415,7 @@ class Status extends ImmutablePureComponent {
|
|||
)
|
||||
} else {
|
||||
media = (
|
||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
|
||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMedia}>
|
||||
{Component => (
|
||||
<Component
|
||||
reduced={isChild}
|
||||
|
@ -367,27 +443,16 @@ class Status extends ImmutablePureComponent {
|
|||
)
|
||||
}
|
||||
|
||||
const handlers = this.props.muted ? {} : {
|
||||
reply: this.handleHotkeyReply,
|
||||
favorite: this.handleHotkeyFavorite,
|
||||
boost: this.handleHotkeyBoost,
|
||||
mention: this.handleHotkeyMention,
|
||||
open: this.handleHotkeyOpen,
|
||||
openProfile: this.handleHotkeyOpenProfile,
|
||||
moveUp: this.handleHotkeyMoveUp,
|
||||
moveDown: this.handleHotkeyMoveDown,
|
||||
toggleHidden: this.handleHotkeyToggleHidden,
|
||||
toggleSensitive: this.handleHotkeyToggleSensitive,
|
||||
}
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
radiusSmall: !isChild,
|
||||
// mb15: !isChild,
|
||||
// backgroundColorPrimary: 1,
|
||||
pb15: featured,
|
||||
borderBottom1PX: featured && !isChild,
|
||||
borderColorSecondary: featured && !isChild,
|
||||
pb15: isFeatured,
|
||||
radiusSmall: !isChild,
|
||||
backgroundColorPrimary: !isChild,
|
||||
mb15: !isChild,
|
||||
border1PX: !isChild,
|
||||
borderBottom1PX: isFeatured && !isChild,
|
||||
borderColorSecondary: !isChild,
|
||||
})
|
||||
|
||||
const innerContainerClasses = cx({
|
||||
|
@ -406,8 +471,8 @@ class Status extends ImmutablePureComponent {
|
|||
<HotKeys handlers={handlers}>
|
||||
<div
|
||||
className={containerClasses}
|
||||
tabIndex={this.props.muted ? null : 0}
|
||||
data-featured={featured ? 'true' : null}
|
||||
tabIndex={this.props.isMuted ? null : 0}
|
||||
data-featured={isFeatured ? 'true' : null}
|
||||
aria-label={textForScreenReader(intl, status, rebloggedByText)}
|
||||
ref={this.handleRef}
|
||||
// onClick={this.handleClick}
|
||||
|
@ -416,7 +481,7 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
<div data-id={status.get('id')}>
|
||||
|
||||
<StatusPrepend status={status} promoted={promoted} featured={featured} />
|
||||
<StatusPrepend status={status} isPromoted={isPromoted} isFeatured={isFeatured} />
|
||||
|
||||
<StatusHeader status={status} reduced={isChild} />
|
||||
|
||||
|
@ -442,7 +507,13 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
{
|
||||
!isChild &&
|
||||
<StatusActionBar status={status} {...other} />
|
||||
<StatusActionBar
|
||||
status={status}
|
||||
onFavorite={this.props.onFavorite}
|
||||
onReply={this.props.onReply}
|
||||
onQuote={this.props.onQuote}
|
||||
onShare={this.props.onShare}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
|
@ -451,11 +522,24 @@ class Status extends ImmutablePureComponent {
|
|||
<ComposeFormContainer replyToId={status.get('id')} shouldCondense />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
descendantsIds && !isChild && descendantsIds.size > 0 &&
|
||||
<div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
|
||||
}
|
||||
|
||||
{
|
||||
descendantsIds && !isChild && descendantsIds.size > 0 &&
|
||||
<CommentList
|
||||
commentsLimited={commentsLimited}
|
||||
descendants={descendantsIds}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -2,66 +2,23 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import classNames from 'classnames/bind'
|
||||
import { openModal } from '../actions/modal'
|
||||
import { openPopover } from '../actions/popover'
|
||||
import { me } from '../initial_state'
|
||||
import Text from './text'
|
||||
import Button from './button'
|
||||
import StatusActionBarItem from './status_action_bar_item'
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
edit: { id: 'status.edit', defaultMessage: 'Edit' },
|
||||
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
reply: { id: 'status.reply', defaultMessage: 'Reply' },
|
||||
comment: { id: 'status.comment', defaultMessage: 'Comment' },
|
||||
more: { id: 'status.more', defaultMessage: 'More' },
|
||||
share: { id: 'status.share', defaultMessage: 'Share' },
|
||||
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
|
||||
repost: { id: 'repost', defaultMessage: 'Repost' },
|
||||
quote: { id: 'status.quote', defaultMessage: 'Quote' },
|
||||
repost_private: { id: 'status.repost_private', defaultMessage: 'Repost to original audience' },
|
||||
cancel_repost_private: { id: 'status.cancel_repost_private', defaultMessage: 'Un-repost' },
|
||||
repost: { id: 'status.repost', defaultMessage: 'Repost' },
|
||||
cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
|
||||
cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
|
||||
like: { id: 'status.like', defaultMessage: 'Like' },
|
||||
likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
|
||||
repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
|
||||
commentsLabel: { id: 'comments.label', defaultMessage: '{number, plural, one {# comment} other {# comments}}' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
||||
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
|
||||
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
|
||||
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
||||
admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
|
||||
admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
|
||||
copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
|
||||
group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
|
||||
group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove status from group' },
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenUnauthorizedModal() {
|
||||
dispatch(openModal('UNAUTHORIZED'))
|
||||
},
|
||||
onOpenStatusSharePopover(targetRef, status) {
|
||||
console.log("targetRef, status:", targetRef, status)
|
||||
dispatch(openPopover('STATUS_SHARE', {
|
||||
status,
|
||||
targetRef,
|
||||
position: 'top',
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default
|
||||
@connect(null, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class StatusActionBar extends ImmutablePureComponent {
|
||||
|
||||
|
@ -70,72 +27,43 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
onOpenUnauthorizedModal: PropTypes.func.isRequired,
|
||||
onOpenStatusSharePopover: PropTypes.func.isRequired,
|
||||
onReply: PropTypes.func,
|
||||
onQuote: PropTypes.func,
|
||||
onFavorite: PropTypes.func,
|
||||
onRepost: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onMention: PropTypes.func,
|
||||
onMute: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
withDismiss: PropTypes.bool,
|
||||
withGroupAdmin: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onFavorite: PropTypes.func.isRequired,
|
||||
onShare: PropTypes.func.isRequired,
|
||||
onReply: PropTypes.func.isRequired,
|
||||
onQuote: PropTypes.func.isRequired,
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
// evaluate to false. See react-immutable-pure-component for usage.
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'withDismiss',
|
||||
]
|
||||
updateOnProps = ['status']
|
||||
|
||||
handleReplyClick = () => {
|
||||
if (me) {
|
||||
this.props.onReply(this.props.status, this.context.router.history)
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleFavoriteClick = () => {
|
||||
if (me) {
|
||||
this.props.onFavorite(this.props.status)
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleRepostClick = e => {
|
||||
if (me) {
|
||||
handleRepostClick = (e) => {
|
||||
// this.props.onRepost(this.props.status, e)
|
||||
this.props.onQuote(this.props.status, this.context.router.history)
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleShareClick = () => {
|
||||
this.props.onOpenStatusSharePopover(this.shareButton, this.props.status)
|
||||
this.props.onShare(this.shareButton, this.props.status)
|
||||
}
|
||||
|
||||
openLikesList = () => {
|
||||
|
||||
// : todo :
|
||||
}
|
||||
|
||||
toggleCommentsVisible = () => {
|
||||
|
||||
// : todo :
|
||||
}
|
||||
|
||||
openRepostsList = () => {
|
||||
|
||||
// : todo :
|
||||
}
|
||||
|
||||
setShareButton = (n) => {
|
||||
|
@ -143,7 +71,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { status, intl: { formatMessage } } = this.props
|
||||
const { status, intl } = this.props
|
||||
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
|
||||
|
||||
|
@ -194,7 +122,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
favoriteCount > 0 &&
|
||||
<button className={interactionBtnClasses} onClick={this.openLikesList}>
|
||||
<Text color='secondary' size='small'>
|
||||
{formatMessage(messages.likesLabel, {
|
||||
{intl.formatMessage(messages.likesLabel, {
|
||||
number: favoriteCount,
|
||||
})}
|
||||
</Text>
|
||||
|
@ -204,7 +132,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
replyCount > 0 &&
|
||||
<button className={interactionBtnClasses} onClick={this.toggleCommentsVisible}>
|
||||
<Text color='secondary' size='small'>
|
||||
{formatMessage(messages.commentsLabel, {
|
||||
{intl.formatMessage(messages.commentsLabel, {
|
||||
number: replyCount,
|
||||
})}
|
||||
</Text>
|
||||
|
@ -214,7 +142,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
repostCount > 0 &&
|
||||
<button className={interactionBtnClasses} onClick={this.openRepostsList}>
|
||||
<Text color='secondary' size='small'>
|
||||
{formatMessage(messages.repostsLabel, {
|
||||
{intl.formatMessage(messages.repostsLabel, {
|
||||
number: repostCount,
|
||||
})}
|
||||
</Text>
|
||||
|
@ -225,19 +153,19 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
<div className={innerContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
|
||||
<StatusActionBarItem
|
||||
title={formatMessage(messages.like)}
|
||||
title={intl.formatMessage(messages.like)}
|
||||
icon={!!status.get('favourited') ? 'liked' : 'like'}
|
||||
active={!!status.get('favourited')}
|
||||
onClick={this.handleFavoriteClick}
|
||||
/>
|
||||
<StatusActionBarItem
|
||||
title={formatMessage(messages.comment)}
|
||||
title={intl.formatMessage(messages.comment)}
|
||||
icon='comment'
|
||||
onClick={this.handleReplyClick}
|
||||
/>
|
||||
<StatusActionBarItem
|
||||
title={formatMessage(messages.repost)}
|
||||
altTitle={!publicStatus ? formatMessage(messages.cannot_repost) : ''}
|
||||
title={intl.formatMessage(messages.repost)}
|
||||
altTitle={!publicStatus ? intl.formatMessage(messages.cannot_repost) : ''}
|
||||
icon={!publicStatus ? 'lock' : 'repost'}
|
||||
disabled={!publicStatus}
|
||||
active={!!status.get('reblogged')}
|
||||
|
@ -245,7 +173,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
/>
|
||||
<StatusActionBarItem
|
||||
buttonRef={this.setShareButton}
|
||||
title={formatMessage(messages.share)}
|
||||
title={intl.formatMessage(messages.share)}
|
||||
icon='share'
|
||||
onClick={this.handleShareClick}
|
||||
/>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { Fragment } from 'react'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import classNames from 'classnames/bind'
|
||||
import { isRtl } from '../utils/rtl'
|
||||
import Button from './button'
|
||||
|
@ -34,7 +33,6 @@ class StatusContent extends ImmutablePureComponent {
|
|||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
reblogStatus: PropTypes.string,
|
||||
expanded: PropTypes.bool,
|
||||
onExpandedToggle: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
|
@ -48,6 +46,13 @@ class StatusContent extends ImmutablePureComponent {
|
|||
collapsed: null, // `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't).
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'expanded',
|
||||
'collapsable',
|
||||
'isComment',
|
||||
]
|
||||
|
||||
_updateStatusLinks() {
|
||||
const node = this.node
|
||||
|
||||
|
|
|
@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
|
|||
import classNames from 'classnames/bind'
|
||||
import { openPopover } from '../actions/popover'
|
||||
import { openModal } from '../actions/modal'
|
||||
import { me } from '../initial_state'
|
||||
import RelativeTimestamp from './relative_timestamp'
|
||||
import DisplayName from './display_name'
|
||||
import Text from './text'
|
||||
|
@ -50,77 +51,6 @@ class StatusHeader extends ImmutablePureComponent {
|
|||
this.props.onOpenStatusRevisionsPopover(this.props.status)
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
this.props.onDelete(this.props.status, this.context.router.history);
|
||||
}
|
||||
|
||||
handleEditClick = () => {
|
||||
this.props.onEdit(this.props.status);
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.context.router.history);
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
this.props.onBlock(this.props.status);
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
|
||||
}
|
||||
|
||||
handleEmbed = () => {
|
||||
this.props.onEmbed(this.props.status);
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.status);
|
||||
}
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
}
|
||||
|
||||
handleCopy = () => {
|
||||
const url = this.props.status.get('url');
|
||||
const textarea = document.createElement('textarea');
|
||||
|
||||
textarea.textContent = url;
|
||||
textarea.style.position = 'fixed';
|
||||
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
try {
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
} catch (e) {
|
||||
//
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
|
||||
handleGroupRemoveAccount = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
|
||||
}
|
||||
|
||||
handleGroupRemovePost = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
|
||||
}
|
||||
|
||||
setStatusOptionsButton = n => {
|
||||
this.statusOptionsButton = n
|
||||
}
|
||||
|
@ -167,7 +97,7 @@ class StatusHeader extends ImmutablePureComponent {
|
|||
</NavLink>
|
||||
|
||||
{
|
||||
!reduced &&
|
||||
!reduced && !!me &&
|
||||
<Button
|
||||
text
|
||||
backgroundColor='none'
|
||||
|
|
|
@ -9,8 +9,7 @@ import { me, promotions } from '../initial_state';
|
|||
import { dequeueTimeline } from '../actions/timelines';
|
||||
import { scrollTopTimeline } from '../actions/timelines';
|
||||
import { fetchStatus } from '../actions/statuses';
|
||||
// import StatusContainer from '../containers/status_container';
|
||||
import Status from '../features/status';
|
||||
import StatusContainer from '../containers/status_container';
|
||||
import ScrollableList from './scrollable_list';
|
||||
import TimelineQueueButtonHeader from './timeline_queue_button_header';
|
||||
import ColumnIndicator from './column_indicator';
|
||||
|
@ -175,35 +174,26 @@ class StatusList extends ImmutablePureComponent {
|
|||
onClick={onLoadMore}
|
||||
/>
|
||||
) : (
|
||||
<Fragment key={statusId}>
|
||||
<Status
|
||||
<StatusContainer
|
||||
key={statusId}
|
||||
id={statusId}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
group={group}
|
||||
withGroupAdmin={withGroupAdmin}
|
||||
// : todo :
|
||||
// group={group}
|
||||
// withGroupAdmin={withGroupAdmin}
|
||||
commentsLimited
|
||||
/>
|
||||
{ /* : todo : */
|
||||
promotedStatus && index === promotion.position &&
|
||||
<Status
|
||||
id={promotion.status_id}
|
||||
contextType={timelineId}
|
||||
promoted
|
||||
commentsLimited
|
||||
/>
|
||||
}
|
||||
</Fragment>
|
||||
))
|
||||
) : null;
|
||||
|
||||
if (scrollableContent && featuredStatusIds) {
|
||||
scrollableContent = featuredStatusIds.map(statusId => (
|
||||
<Status
|
||||
<StatusContainer
|
||||
key={`f-${statusId}`}
|
||||
id={statusId}
|
||||
featured
|
||||
isFeatured
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
contextType={timelineId}
|
||||
|
|
|
@ -19,25 +19,25 @@ class StatusPrepend extends ImmutablePureComponent {
|
|||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
status: ImmutablePropTypes.map,
|
||||
featured: PropTypes.bool,
|
||||
promoted: PropTypes.bool,
|
||||
isFeatured: PropTypes.bool,
|
||||
isPromoted: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
status,
|
||||
featured,
|
||||
promoted,
|
||||
isFeatured,
|
||||
isPromoted,
|
||||
} = this.props
|
||||
|
||||
if (!status) return null
|
||||
|
||||
const isRepost = (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object')
|
||||
|
||||
if (!featured && !promoted && !isRepost) return null
|
||||
if (!isFeatured && !isPromoted && !isRepost) return null
|
||||
|
||||
const iconId = featured ? 'pin' : promoted ? 'star' : 'repost'
|
||||
const iconId = isFeatured ? 'pin' : isPromoted ? 'star' : 'repost'
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.width100PC, _s.alignItemsStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
|
@ -71,7 +71,7 @@ class StatusPrepend extends ImmutablePureComponent {
|
|||
{
|
||||
!isRepost &&
|
||||
<Text color='secondary' size='small'>
|
||||
{intl.formatMessage(featured ? messages.pinned : messages.promoted)}
|
||||
{intl.formatMessage(isFeatured ? messages.pinned : messages.promoted)}
|
||||
</Text>
|
||||
}
|
||||
</div>
|
||||
|
|
|
@ -29,19 +29,19 @@ export default class MediaContainer extends PureComponent {
|
|||
};
|
||||
|
||||
handleOpenMedia = (media, index) => {
|
||||
document.body.classList.add('with-modals--active');
|
||||
document.body.classList.add(_s.overflowYHidden);
|
||||
this.setState({ media, index });
|
||||
}
|
||||
|
||||
handleOpenVideo = (video, time) => {
|
||||
const media = ImmutableList([video]);
|
||||
|
||||
document.body.classList.add('with-modals--active');
|
||||
document.body.classList.add(_s.overflowYHidden);
|
||||
this.setState({ media, time });
|
||||
}
|
||||
|
||||
handleCloseMedia = () => {
|
||||
document.body.classList.remove('with-modals--active');
|
||||
document.body.classList.remove(_s.overflowYHidden);
|
||||
this.setState({ media: null, index: null, time: null });
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
|
@ -12,7 +13,6 @@ import {
|
|||
pin,
|
||||
unpin,
|
||||
} from '../actions/interactions';
|
||||
import { blockAccount } from '../actions/accounts';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
|
@ -20,12 +20,13 @@ import {
|
|||
editStatus,
|
||||
hideStatus,
|
||||
revealStatus,
|
||||
fetchComments,
|
||||
} from '../actions/statuses';
|
||||
import { initMuteModal } from '../actions/mutes';
|
||||
import { initReport } from '../actions/reports';
|
||||
import { openModal } from '../actions/modal';
|
||||
import { boostModal, deleteModal } from '../initial_state';
|
||||
// import { showAlertForError } from '../actions/alerts';
|
||||
import { openPopover } from '../actions/popover';
|
||||
import { me, boostModal, deleteModal } from '../initial_state';
|
||||
import {
|
||||
createRemovedAccount,
|
||||
groupRemoveStatus,
|
||||
|
@ -46,17 +47,53 @@ const messages = defineMessages({
|
|||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
status: getStatus(state, props),
|
||||
replies: state.getIn(['contexts', 'replies', props.id]),
|
||||
});
|
||||
const mapStateToProps = (state, props) => {
|
||||
const status = getStatus(state, props)
|
||||
|
||||
return mapStateToProps;
|
||||
// : todo : if is comment (i.e. if any ancestorsIds) use comment not status
|
||||
|
||||
let descendantsIds = ImmutableList()
|
||||
|
||||
if (status) {
|
||||
let indent = -1
|
||||
descendantsIds = descendantsIds.withMutations(mutable => {
|
||||
const ids = [status.get('id')]
|
||||
|
||||
while (ids.length > 0) {
|
||||
let id = ids.shift();
|
||||
const replies = state.getIn(['contexts', 'replies', id])
|
||||
|
||||
if (status.get('id') !== id) {
|
||||
mutable.push(ImmutableMap({
|
||||
statusId: id,
|
||||
indent: indent,
|
||||
}))
|
||||
}
|
||||
|
||||
if (replies) {
|
||||
replies.reverse().forEach(reply => {
|
||||
ids.unshift(reply)
|
||||
});
|
||||
indent++
|
||||
indent = Math.min(2, indent)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
status,
|
||||
descendantsIds
|
||||
}
|
||||
}
|
||||
|
||||
return mapStateToProps
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onReply (status, router) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch((_, getState) => {
|
||||
const state = getState();
|
||||
if (state.getIn(['compose', 'text']).trim().length !== 0) {
|
||||
|
@ -72,6 +109,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onQuote (status, router) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch((_, getState) => {
|
||||
const state = getState();
|
||||
if (state.getIn(['compose', 'text']).trim().length !== 0) {
|
||||
|
@ -87,6 +126,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onModalRepost (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unrepost(status));
|
||||
} else {
|
||||
|
@ -94,7 +135,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
}
|
||||
},
|
||||
|
||||
onShare(targetRef, status) {
|
||||
dispatch(openPopover('STATUS_SHARE', {
|
||||
status,
|
||||
targetRef,
|
||||
position: 'top',
|
||||
}))
|
||||
},
|
||||
|
||||
onRepost (status, e) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (e.shiftKey || !boostModal) {
|
||||
this.onModalRepost(status);
|
||||
} else {
|
||||
|
@ -103,21 +154,24 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onShowRevisions (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(openModal('STATUS_REVISION', { status }));
|
||||
},
|
||||
|
||||
onFavorite (status) {
|
||||
console.log('onFavorite...', status)
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (status.get('favourited')) {
|
||||
console.log('unfav...')
|
||||
dispatch(unfavorite(status));
|
||||
} else {
|
||||
console.log('fav...')
|
||||
dispatch(favorite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
|
@ -133,6 +187,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onDelete (status, history) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history));
|
||||
} else {
|
||||
|
@ -145,10 +201,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onEdit (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(editStatus(status));
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
|
@ -161,6 +221,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onBlock (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
const account = status.get('account')
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
|
@ -168,10 +230,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onReport (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
|
@ -184,6 +250,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onToggleHidden (status) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
if (status.get('hidden')) {
|
||||
dispatch(revealStatus(status.get('id')));
|
||||
} else {
|
||||
|
@ -192,17 +260,20 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
},
|
||||
|
||||
onGroupRemoveAccount(groupId, accountId) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(createRemovedAccount(groupId, accountId));
|
||||
},
|
||||
|
||||
onGroupRemoveStatus(groupId, statusId) {
|
||||
if (!me) return dispatch(openModal('UNAUTHORIZED'))
|
||||
|
||||
dispatch(groupRemoveStatus(groupId, statusId));
|
||||
},
|
||||
|
||||
onOpenProUpgradeModal() {
|
||||
dispatch(openModal('PRO_UPGRADE'));
|
||||
onFetchComments(statusId) {
|
||||
dispatch(fetchComments(statusId))
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
|
||||
|
|
|
@ -25,7 +25,8 @@ const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u20
|
|||
const maxPostCharacterCount = 3000
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
|
||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
|
||||
commentPlaceholder: { id: 'compose_form.comment_placeholder', defaultMessage: "Write a comment..." },
|
||||
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
|
||||
publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
|
||||
publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}' },
|
||||
|
@ -87,8 +88,8 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
showSearch: false,
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
this.props.onChange(e.target.value);
|
||||
handleChange = (e, markdown) => {
|
||||
this.props.onChange(e.target.value, markdown);
|
||||
}
|
||||
|
||||
handleComposeFocus = () => {
|
||||
|
@ -244,6 +245,7 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
const parentContainerClasses = cx({
|
||||
default: 1,
|
||||
width100PC: 1,
|
||||
flexRow: !shouldCondense,
|
||||
pb10: !shouldCondense,
|
||||
})
|
||||
|
@ -309,7 +311,7 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
<AutosuggestTextbox
|
||||
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
placeholder={intl.formatMessage(shouldCondense ? messages.commentPlaceholder : messages.placeholder)}
|
||||
disabled={disabled}
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
|
@ -327,12 +329,12 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
{
|
||||
(isUploading || anyMedia) &&
|
||||
<div className={[_s.default, _s.px15].join(' ')}>
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<UploadForm replyToId={replyToId} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /*
|
||||
{ /* : todo : for gif
|
||||
(isUploading || hasGif) &&
|
||||
<div className={[_s.default, _s.px15].join(' ')}>
|
||||
<UploadForm replyToId={replyToId} />
|
||||
|
@ -342,13 +344,19 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
{
|
||||
!edit && hasPoll &&
|
||||
<div className={[_s.default, _s.px15].join(' ')}>
|
||||
<div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
|
||||
<PollFormContainer replyToId={replyToId} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
/* : todo : quoteOfId && <StatusContainer id={quoteOfId} /> */
|
||||
quoteOfId &&
|
||||
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
|
||||
<StatusContainer
|
||||
id={quoteOfId}
|
||||
isChild
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={actionsContainerClasses}>
|
||||
|
|
|
@ -197,9 +197,9 @@ class PollForm extends ImmutablePureComponent {
|
|||
icon='add'
|
||||
iconWidth='14px'
|
||||
iconHeight='14px'
|
||||
iconClassName={[_s.fillColorBrand, _s.mr5].join(' ')}
|
||||
iconClassName={_s.mr5}
|
||||
>
|
||||
<Text color='brand'>
|
||||
<Text color='inherit'>
|
||||
{intl.formatMessage(messages.add_option)}
|
||||
</Text>
|
||||
</Button>
|
||||
|
|
|
@ -46,8 +46,8 @@ const mapStateToProps = (state, { replyToId }) => {
|
|||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
onChange(text) {
|
||||
dispatch(changeCompose(text))
|
||||
onChange(text, markdown) {
|
||||
dispatch(changeCompose(text, markdown))
|
||||
},
|
||||
|
||||
onSubmit(router, group) {
|
||||
|
|
|
@ -33,16 +33,19 @@ export default
|
|||
class ListsDirectory extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
onFetchLists: PropTypes.func.isRequired,
|
||||
lists: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
lists: ImmutablePropTypes.list,
|
||||
onFetchLists: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
fetched: false,
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
'lists'
|
||||
]
|
||||
|
||||
componentWillMount() {
|
||||
this.props.onFetchLists()
|
||||
.then(() => this.setState({ fetched: true }))
|
||||
|
|
|
@ -1,162 +0,0 @@
|
|||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
} from '../../../actions/compose';
|
||||
import {
|
||||
reblog,
|
||||
favorite,
|
||||
unreblog,
|
||||
unfavorite,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../../actions/interactions';
|
||||
import { blockAccount } from '../../../actions/accounts';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
hideStatus,
|
||||
revealStatus,
|
||||
} from '../../../actions/statuses';
|
||||
import { initMuteModal } from '../../../actions/mutes';
|
||||
import { initReport } from '../../../actions/reports';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
// import { showAlertForError } from '../../../actions/alerts';
|
||||
import { boostModal, deleteModal } from '../../../initial_state';
|
||||
import { makeGetStatus } from '../../../selectors';
|
||||
import DetailedStatus from '../components/detailed_status';
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
|
||||
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
|
||||
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
|
||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
status: getStatus(state, props),
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onReply (status, router) {
|
||||
dispatch((_, getState) => {
|
||||
const state = getState();
|
||||
if (state.getIn(['compose', 'text']).trim().length !== 0) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.replyMessage),
|
||||
confirm: intl.formatMessage(messages.replyConfirm),
|
||||
onConfirm: () => dispatch(replyCompose(status, router)),
|
||||
}));
|
||||
} else {
|
||||
dispatch(replyCompose(status, router));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onModalRepost (status) {
|
||||
dispatch(repost(status));
|
||||
},
|
||||
|
||||
onRepost (status, e) {
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unrepost(status));
|
||||
} else {
|
||||
if (e.shiftKey || !boostModal) {
|
||||
this.onModalRepost(status);
|
||||
} else {
|
||||
dispatch(openModal('BOOST', { status, onRepost: this.onModalRepost }));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFavorite (status) {
|
||||
if (status.get('favourited')) {
|
||||
dispatch(unfavorite(status));
|
||||
} else {
|
||||
dispatch(favorite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
dispatch(pin(status));
|
||||
}
|
||||
},
|
||||
|
||||
onEmbed (status) {
|
||||
// dispatch(openModal('EMBED', {
|
||||
// url: status.get('url'),
|
||||
// onError: error => dispatch(showAlertForError(error)),
|
||||
// }));
|
||||
},
|
||||
|
||||
onDelete (status, history) {
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onOpenMedia (media, index) {
|
||||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
},
|
||||
|
||||
onBlock (status) {
|
||||
const account = status.get('account')
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}))
|
||||
},
|
||||
|
||||
onReport (status) {
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
onMuteConversation (status) {
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
|
||||
onToggleHidden (status) {
|
||||
if (status.get('hidden')) {
|
||||
dispatch(revealStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(hideStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(DetailedStatus));
|
|
@ -1 +0,0 @@
|
|||
export { default } from './status'
|
|
@ -1,483 +0,0 @@
|
|||
import Immutable from 'immutable'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { HotKeys } from 'react-hotkeys'
|
||||
import { fetchStatus } from '../../actions/statuses'
|
||||
import {
|
||||
favorite,
|
||||
unfavorite,
|
||||
repost,
|
||||
unrepost,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../actions/interactions'
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
} from '../../actions/compose'
|
||||
import { blockAccount } from '../../actions/accounts'
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
hideStatus,
|
||||
revealStatus,
|
||||
} from '../../actions/statuses'
|
||||
import { initMuteModal } from '../../actions/mutes'
|
||||
import { initReport } from '../../actions/reports'
|
||||
import { openModal } from '../../actions/modal'
|
||||
import { boostModal, deleteModal, me } from '../../initial_state'
|
||||
import { makeGetStatus } from '../../selectors'
|
||||
import StatusContainer from '../../containers/status_container'
|
||||
import { textForScreenReader, defaultMediaVisibility } from '../../components/status'
|
||||
import ColumnIndicator from '../../components/column_indicator'
|
||||
import Block from '../../components/block'
|
||||
import CommentList from '../../components/comment_list'
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
|
||||
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
|
||||
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
|
||||
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
|
||||
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
|
||||
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
|
||||
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
|
||||
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
|
||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus()
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const statusId = props.id || props.params.statusId
|
||||
const username = props.params ? props.params.username : undefined
|
||||
|
||||
const status = getStatus(state, {
|
||||
id: statusId,
|
||||
username: username,
|
||||
})
|
||||
|
||||
// : todo : if is comment (i.e. if any ancestorsIds) use comment not status
|
||||
|
||||
let ancestorsIds = Immutable.List()
|
||||
let descendantsIds = Immutable.List()
|
||||
|
||||
if (status) {
|
||||
// ancestorsIds = ancestorsIds.withMutations(mutable => {
|
||||
// let id = status.get('in_reply_to_id');
|
||||
|
||||
// while (id) {
|
||||
// mutable.unshift(id);
|
||||
// id = state.getIn(['contexts', 'inReplyTos', id]);
|
||||
// }
|
||||
// });
|
||||
|
||||
// // ONLY Direct descendants
|
||||
// descendantsIds = state.getIn(['contexts', 'replies', status.get('id')])
|
||||
|
||||
let indent = -1
|
||||
descendantsIds = descendantsIds.withMutations(mutable => {
|
||||
const ids = [status.get('id')]
|
||||
|
||||
while (ids.length > 0) {
|
||||
let id = ids.shift();
|
||||
const replies = state.getIn(['contexts', 'replies', id])
|
||||
|
||||
if (status.get('id') !== id) {
|
||||
mutable.push(Immutable.Map({
|
||||
statusId: id,
|
||||
indent: indent,
|
||||
}))
|
||||
}
|
||||
|
||||
if (replies) {
|
||||
replies.reverse().forEach(reply => {
|
||||
ids.unshift(reply)
|
||||
});
|
||||
indent++
|
||||
indent = Math.min(2, indent)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// console.log("descendantsIds:", descendantsIds)
|
||||
|
||||
return {
|
||||
status,
|
||||
ancestorsIds,
|
||||
descendantsIds,
|
||||
askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(makeMapStateToProps)
|
||||
class Status extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
status: ImmutablePropTypes.map,
|
||||
ancestorsIds: ImmutablePropTypes.list,
|
||||
descendantsIds: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
askReplyConfirmation: PropTypes.bool,
|
||||
contextType: PropTypes.string,
|
||||
};
|
||||
|
||||
state = {
|
||||
fullscreen: false,
|
||||
showMedia: defaultMediaVisibility(this.props.status),
|
||||
loadedStatusId: undefined,
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
const statusId = this.props.id || this.props.params.statusId
|
||||
// console.log("statusId:", statusId)
|
||||
this.props.dispatch(fetchStatus(statusId));
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const statusId = this.props.id || this.props.params.statusId
|
||||
const nextStatusId = nextProps.id || nextProps.params.statusId
|
||||
|
||||
if (nextStatusId !== statusId && nextStatusId) {
|
||||
this._scrolledIntoView = false;
|
||||
this.props.dispatch(fetchStatus(nextStatusId));
|
||||
}
|
||||
|
||||
if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
|
||||
this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleMediaVisibility = () => {
|
||||
this.setState({ showMedia: !this.state.showMedia });
|
||||
}
|
||||
|
||||
handleFavoriteClick = (status) => {
|
||||
if (status.get('favourited')) {
|
||||
this.props.dispatch(unfavorite(status));
|
||||
} else {
|
||||
this.props.dispatch(favorite(status));
|
||||
}
|
||||
}
|
||||
|
||||
handlePin = (status) => {
|
||||
if (status.get('pinned')) {
|
||||
this.props.dispatch(unpin(status));
|
||||
} else {
|
||||
this.props.dispatch(pin(status));
|
||||
}
|
||||
}
|
||||
|
||||
handleReplyClick = (status) => {
|
||||
let { askReplyConfirmation, dispatch, intl } = this.props;
|
||||
if (askReplyConfirmation) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.replyMessage),
|
||||
confirm: intl.formatMessage(messages.replyConfirm),
|
||||
onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
|
||||
}));
|
||||
} else {
|
||||
dispatch(replyCompose(status, this.context.router.history));
|
||||
}
|
||||
}
|
||||
|
||||
handleModalRepost = (status) => {
|
||||
this.props.dispatch(repost(status));
|
||||
}
|
||||
|
||||
handleRepostClick = (status, e) => {
|
||||
if (status.get('reblogged')) {
|
||||
this.props.dispatch(unrepost(status));
|
||||
} else {
|
||||
if ((e && e.shiftKey) || !boostModal) {
|
||||
this.handleModalRepost(status);
|
||||
} else {
|
||||
this.props.dispatch(openModal('BOOST', { status, onRepost: this.handleModalRepost }));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleDeleteClick = (status, history, withRedraft = false) => {
|
||||
const { dispatch, intl } = this.props;
|
||||
|
||||
if (!deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id'), history, withRedraft));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
|
||||
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
handleMentionClick = (account, router) => {
|
||||
this.props.dispatch(mentionCompose(account, router));
|
||||
}
|
||||
|
||||
handleOpenMedia = (media, index) => {
|
||||
this.props.dispatch(openModal('MEDIA', { media, index }));
|
||||
}
|
||||
|
||||
handleOpenVideo = (media, time) => {
|
||||
this.props.dispatch(openModal('VIDEO', { media, time }));
|
||||
}
|
||||
|
||||
handleMuteClick = (account) => {
|
||||
this.props.dispatch(initMuteModal(account));
|
||||
}
|
||||
|
||||
handleConversationMuteClick = (status) => {
|
||||
if (status.get('muted')) {
|
||||
this.props.dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
this.props.dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleHidden = (status) => {
|
||||
if (status.get('hidden')) {
|
||||
this.props.dispatch(revealStatus(status.get('id')));
|
||||
} else {
|
||||
this.props.dispatch(hideStatus(status.get('id')));
|
||||
}
|
||||
}
|
||||
|
||||
handleToggleAll = () => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
|
||||
|
||||
if (status.get('hidden')) {
|
||||
this.props.dispatch(revealStatus(statusIds));
|
||||
} else {
|
||||
this.props.dispatch(hideStatus(statusIds));
|
||||
}
|
||||
}
|
||||
|
||||
handleBlockClick = (status) => {
|
||||
const { dispatch } = this.props
|
||||
const account = status.get('account')
|
||||
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}))
|
||||
}
|
||||
|
||||
handleReport = (status) => {
|
||||
this.props.dispatch(initReport(status.get('account'), status));
|
||||
}
|
||||
|
||||
handleEmbed = (status) => {
|
||||
this.props.dispatch(openModal('EMBED', { url: status.get('url') }));
|
||||
}
|
||||
|
||||
handleHotkeyMoveUp = () => {
|
||||
this.handleMoveUp(this.props.status.get('id'));
|
||||
}
|
||||
|
||||
handleHotkeyMoveDown = () => {
|
||||
this.handleMoveDown(this.props.status.get('id'));
|
||||
}
|
||||
|
||||
handleHotkeyReply = e => {
|
||||
e.preventDefault();
|
||||
this.handleReplyClick(this.props.status);
|
||||
}
|
||||
|
||||
handleHotkeyFavorite = () => {
|
||||
this.handleFavoriteClick(this.props.status);
|
||||
}
|
||||
|
||||
handleHotkeyBoost = () => {
|
||||
this.handleRepostClick(this.props.status);
|
||||
}
|
||||
|
||||
handleHotkeyMention = e => {
|
||||
e.preventDefault();
|
||||
this.handleMentionClick(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleHotkeyOpenProfile = () => {
|
||||
this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}`);
|
||||
}
|
||||
|
||||
handleHotkeyToggleHidden = () => {
|
||||
this.handleToggleHidden(this.props.status);
|
||||
}
|
||||
|
||||
handleHotkeyToggleSensitive = () => {
|
||||
this.handleToggleMediaVisibility();
|
||||
}
|
||||
|
||||
handleMoveUp = id => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size - 1, true);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index, true);
|
||||
} else {
|
||||
this._selectChild(index - 1, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleMoveDown = id => {
|
||||
const { status, ancestorsIds, descendantsIds } = this.props;
|
||||
|
||||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size + 1, false);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index + 2, false);
|
||||
} else {
|
||||
this._selectChild(index + 1, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_selectChild(index, align_top) {
|
||||
const container = this.node;
|
||||
const element = container.querySelectorAll('.focusable')[index];
|
||||
|
||||
if (element) {
|
||||
if (align_top && container.scrollTop > element.offsetTop) {
|
||||
element.scrollIntoView(true);
|
||||
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
|
||||
element.scrollIntoView(false);
|
||||
}
|
||||
element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
renderChildren(list) {
|
||||
// console.log("list:", list)
|
||||
return null
|
||||
// : todo : comments
|
||||
return list.map(id => (
|
||||
<Comment
|
||||
key={`comment-${id}`}
|
||||
id={id}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this._scrolledIntoView) return
|
||||
|
||||
const { status, ancestorsIds } = this.props
|
||||
|
||||
if (status && ancestorsIds && ancestorsIds.size > 0) {
|
||||
const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
element.scrollIntoView(true);
|
||||
});
|
||||
this._scrolledIntoView = true;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
status,
|
||||
ancestorsIds,
|
||||
descendantsIds,
|
||||
intl,
|
||||
contextType,
|
||||
commentsLimited,
|
||||
} = this.props
|
||||
|
||||
let ancestors, descendants
|
||||
|
||||
if (status === null) {
|
||||
return <ColumnIndicator type='loading' />
|
||||
}
|
||||
|
||||
// if (ancestorsIds && ancestorsIds.size > 0) {
|
||||
// ancestors = this.renderChildren(ancestorsIds)
|
||||
// }
|
||||
|
||||
if (descendantsIds && descendantsIds.size > 0) {
|
||||
descendants = this.renderChildren(descendantsIds)
|
||||
}
|
||||
|
||||
const handlers = {
|
||||
moveUp: this.handleHotkeyMoveUp,
|
||||
moveDown: this.handleHotkeyMoveDown,
|
||||
reply: this.handleHotkeyReply,
|
||||
favorite: this.handleHotkeyFavorite,
|
||||
boost: this.handleHotkeyBoost,
|
||||
mention: this.handleHotkeyMention,
|
||||
openProfile: this.handleHotkeyOpenProfile,
|
||||
toggleHidden: this.handleHotkeyToggleHidden,
|
||||
toggleSensitive: this.handleHotkeyToggleSensitive,
|
||||
};
|
||||
|
||||
console.log("descendantsIds.size > 0:", descendantsIds.size > 0)
|
||||
|
||||
return (
|
||||
<div ref={this.setRef} className={_s.mb15}>
|
||||
<Block>
|
||||
{
|
||||
/* : todo : ancestors if is comment */
|
||||
}
|
||||
|
||||
<HotKeys handlers={handlers}>
|
||||
<div className={_s.outlineNone} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
|
||||
|
||||
<StatusContainer
|
||||
id={status.get('id')}
|
||||
contextType={contextType}
|
||||
// onOpenVideo={this.handleOpenVideo}
|
||||
// onOpenMedia={this.handleOpenMedia}
|
||||
// onToggleHidden={this.handleToggleHidden}
|
||||
// showMedia={this.state.showMedia}
|
||||
// onToggleMediaVisibility={this.handleToggleMediaVisibility}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</HotKeys>
|
||||
|
||||
{
|
||||
descendantsIds && descendantsIds.size > 0 &&
|
||||
<div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
|
||||
}
|
||||
|
||||
<CommentList
|
||||
commentsLimited={commentsLimited}
|
||||
descendants={descendantsIds}
|
||||
/>
|
||||
</Block>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
|
@ -29,6 +29,6 @@ export function Notifications() { return import(/* webpackChunkName: "features/n
|
|||
export function Reposts() { return import(/* webpackChunkName: "features/reposts" */'../../reposts') }
|
||||
export function ReportModal() { return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal/report_modal') }
|
||||
export function Search() { return import(/*webpackChunkName: "features/search" */'../../search') }
|
||||
export function Status() { return import(/* webpackChunkName: "features/status" */'../../status') }
|
||||
export function Status() { return import(/* webpackChunkName: "components/status" */'../../../components/status') }
|
||||
export function StatusRevisionsModal() { return import(/* webpackChunkName: "modals/status_revisions_modal" */'../../../components/modal/status_revisions_modal') }
|
||||
export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') }
|
||||
|
|
|
@ -2,11 +2,11 @@ import isEqual from 'lodash.isequal'
|
|||
|
||||
export default class PageTitle extends PureComponent {
|
||||
static propTypes = {
|
||||
badge: PropTypes.oneOf([
|
||||
badge: PropTypes.oneOfType([
|
||||
PropTypes.number,
|
||||
PropTypes.string,
|
||||
]),
|
||||
path: PropTypes.oneOf([
|
||||
path: PropTypes.oneOfType([
|
||||
PropTypes.sting,
|
||||
PropTypes.array,
|
||||
]),
|
||||
|
|
|
@ -54,7 +54,7 @@ const initialState = ImmutableMap({
|
|||
spoiler_text: '',
|
||||
privacy: null,
|
||||
text: '',
|
||||
markdown_text: '',
|
||||
markdown: null,
|
||||
focusDate: null,
|
||||
caretPosition: null,
|
||||
preselectDate: null,
|
||||
|
@ -248,6 +248,7 @@ export default function compose(state = initialState, action) {
|
|||
case COMPOSE_CHANGE:
|
||||
return state
|
||||
.set('text', action.text)
|
||||
.set('markdown', action.markdown)
|
||||
.set('idempotencyKey', uuid());
|
||||
case COMPOSE_COMPOSING_CHANGE:
|
||||
return state.set('is_composing', action.value);
|
||||
|
|
|
@ -1,16 +1,19 @@
|
|||
import {
|
||||
ACCOUNT_BLOCK_SUCCESS,
|
||||
ACCOUNT_MUTE_SUCCESS,
|
||||
} from '../actions/accounts';
|
||||
import { CONTEXT_FETCH_SUCCESS } from '../actions/statuses';
|
||||
import { TIMELINE_DELETE, TIMELINE_UPDATE } from '../actions/timelines';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import compareId from '../utils/compare_id';
|
||||
} from '../actions/accounts'
|
||||
import {
|
||||
COMMENTS_FETCH_SUCCESS,
|
||||
CONTEXT_FETCH_SUCCESS,
|
||||
} from '../actions/statuses'
|
||||
import { TIMELINE_DELETE, TIMELINE_UPDATE } from '../actions/timelines'
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable'
|
||||
import compareId from '../utils/compare_id'
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
inReplyTos: ImmutableMap(),
|
||||
replies: ImmutableMap(),
|
||||
});
|
||||
})
|
||||
|
||||
const normalizeContext = (immutableState, id, ancestors, descendants) => immutableState.withMutations(state => {
|
||||
state.update('inReplyTos', immutableAncestors => immutableAncestors.withMutations(inReplyTos => {
|
||||
|
@ -96,6 +99,8 @@ export default function replies(state = initialState, action) {
|
|||
return filterContexts(state, action.relationship, action.statuses);
|
||||
case CONTEXT_FETCH_SUCCESS:
|
||||
return normalizeContext(state, action.id, action.ancestors, action.descendants);
|
||||
case COMMENTS_FETCH_SUCCESS:
|
||||
return normalizeContext(state, action.id, ImmutableList(), action.descendants);
|
||||
case TIMELINE_DELETE:
|
||||
return deleteFromContexts(state, [action.id]);
|
||||
case TIMELINE_UPDATE:
|
||||
|
|
|
@ -24,6 +24,37 @@ body {
|
|||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.statusContent p {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.statusContent em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.statusContent strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.statusContent strike,
|
||||
.statusContent del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.statusContent h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.statusContent ul,
|
||||
.statusContent ol {
|
||||
list-style-type: disc;
|
||||
padding-left: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dangerousContent,
|
||||
.dangerousContent * {
|
||||
margin-top: 0;
|
||||
|
@ -144,6 +175,10 @@ body {
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.overflowYHidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.textOverflowEllipsis {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
|
@ -1079,10 +1114,14 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* :global(.public-DraftEditorPlaceholder-inner) {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
} */
|
||||
|
||||
:global(.RichEditor-blockquote) {
|
||||
border-left: 5px solid #eee;
|
||||
color: #666;
|
||||
font-family: 'Hoefler Text', 'Georgia', serif;
|
||||
font-style: italic;
|
||||
margin: 16px 0;
|
||||
padding: 10px 20px;
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
require 'singleton'
|
||||
require_relative './sanitize_config'
|
||||
require 'redcarpet'
|
||||
|
||||
class Formatter
|
||||
include Singleton
|
||||
|
@ -9,8 +10,20 @@ class Formatter
|
|||
|
||||
include ActionView::Helpers::TextHelper
|
||||
|
||||
class CustomRender < Redcarpet::Render::HTML
|
||||
def paragraph(text)
|
||||
%(<p>#{text}</p>)
|
||||
end
|
||||
end
|
||||
|
||||
def format(status, **options)
|
||||
if options[:use_markdown]
|
||||
raw_content = status.markdown
|
||||
return '' if raw_content.blank?
|
||||
else
|
||||
raw_content = status.text
|
||||
end
|
||||
|
||||
raw_content = ActionController::Base.helpers.strip_tags(raw_content) if status.id <= 11063737261633602 # #TODO: Migration fix
|
||||
|
||||
if status.reblog?
|
||||
|
@ -33,9 +46,33 @@ class Formatter
|
|||
linkable_accounts << status.account
|
||||
|
||||
html = raw_content
|
||||
|
||||
# puts "BOLLI 1: " + html
|
||||
|
||||
html = encode_and_link_urls(html, linkable_accounts)
|
||||
|
||||
# puts "BOLLI 2: " + html
|
||||
|
||||
if options[:use_markdown]
|
||||
html = convert_headers(html)
|
||||
html = convert_strong(html)
|
||||
html = convert_italic(html)
|
||||
html = convert_strikethrough(html)
|
||||
html = convert_code(html)
|
||||
html = convert_codeblock(html)
|
||||
html = convert_links(html)
|
||||
html = convert_lists(html)
|
||||
html = convert_ordered_lists(html)
|
||||
# puts "BOLLI 3: " + html
|
||||
end
|
||||
|
||||
html = encode_custom_emojis(html, status.emojis, options[:autoplay]) if options[:custom_emojify]
|
||||
# puts "BOLLI 4: " + html
|
||||
|
||||
html = simple_format(html, {}, sanitize: false)
|
||||
|
||||
# puts "BOLLI 5: " + html
|
||||
|
||||
html = html.delete("\n")
|
||||
|
||||
html.html_safe # rubocop:disable Rails/OutputSafety
|
||||
|
@ -296,4 +333,80 @@ class Formatter
|
|||
def mention_html(account)
|
||||
"<a data-focusable=\"true\" role=\"link\" href=\"#{encode(TagManager.instance.url_for(account))}\" class=\"u-url mention\">@#{encode(account.acct)}</a>"
|
||||
end
|
||||
|
||||
def convert_headers(html)
|
||||
html.gsub(/^\#{1,6}.*$/) do |header|
|
||||
weight = 0
|
||||
header.split('').each do |char|
|
||||
break unless char == '#'
|
||||
weight += 1
|
||||
end
|
||||
content = header.sub(/^\#{1,6}/, '')
|
||||
"<h#{weight}>#{content}</h#{weight}>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_strong(html)
|
||||
html.gsub(/\*{2}.*\*{2}|_{2}.*_{2}/) do |strong|
|
||||
content = strong.gsub(/\*{2}|_{2}/, '')
|
||||
"<strong>#{content}</strong>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_italic(html)
|
||||
html.gsub(/\*{1}(\w|\s)+\*{1}|_{1}(\w|\s)+_{1}/) do |italic|
|
||||
content = italic.gsub(/\*{1}|_{1}/, '')
|
||||
"<em>#{content}</em>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_strikethrough(html)
|
||||
html.gsub(/~~(\w|\s)+~~/) do |strike|
|
||||
content = strike.gsub(/~~/, '')
|
||||
"<strike>#{content}</strike>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_code(html)
|
||||
html.gsub(/`(\w|\s)+`/) do |code|
|
||||
content = code.gsub(/`/, '')
|
||||
"<code>#{content}</code>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_codeblock(html)
|
||||
html.gsub(/```\w*(.*(\r\n|\r|\n))+```/) do |code|
|
||||
lang = code.match(/```\w+/)[0].gsub(/`/, '')
|
||||
content = code.gsub(/```\w+/, '```').gsub(/`/, '')
|
||||
"<pre class=\"#{lang}\"><code>#{content}</code></pre>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_links(html)
|
||||
html.gsub(/\[(\w|\s)+\]\((\w|\W)+\)/) do |anchor|
|
||||
link_text = anchor.match(/\[(\w|\s)+\]/)[0].gsub(/[\[\]]/, '')
|
||||
href = anchor.match(/\((\w|\W)+\)/)[0].gsub(/\(|\)/, '')
|
||||
"<a href=\"#{href}\">#{link_text}</a>"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_lists(html)
|
||||
html.gsub(/(\-.+(\r|\n|\r\n))+/) do |list|
|
||||
items = "<ul>\n"
|
||||
list.gsub(/\-.+/) do |li|
|
||||
items << "<li>#{li.sub(/^\-/, '').strip}</li>\n"
|
||||
end
|
||||
items << "</ul>\n"
|
||||
end
|
||||
end
|
||||
|
||||
def convert_ordered_lists(html)
|
||||
html.gsub(/(\d\..+(\r|\n|\r\n))+/) do |list|
|
||||
items = "<ol>\n"
|
||||
list.gsub(/\d.+/) do |li|
|
||||
items << "<li>#{li.sub(/^\d\./, '').strip}</li>\n"
|
||||
end
|
||||
items << "</ol>\n"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
# id :bigint(8) not null, primary key
|
||||
# uri :string
|
||||
# text :text default(""), not null
|
||||
# markdown :text
|
||||
# created_at :datetime not null
|
||||
# updated_at :datetime not null
|
||||
# in_reply_to_id :bigint(8)
|
||||
|
|
|
@ -12,6 +12,7 @@ class REST::StatusSerializer < ActiveModel::Serializer
|
|||
attribute :pinned, if: :pinnable?
|
||||
|
||||
attribute :content, unless: :source_requested?
|
||||
attribute :rich_content, unless: :source_requested?
|
||||
attribute :text, if: :source_requested?
|
||||
|
||||
belongs_to :reblog, serializer: REST::StatusSerializer
|
||||
|
@ -71,6 +72,10 @@ class REST::StatusSerializer < ActiveModel::Serializer
|
|||
Formatter.instance.format(object).strip
|
||||
end
|
||||
|
||||
def rich_content
|
||||
Formatter.instance.format(object, use_markdown: true).strip
|
||||
end
|
||||
|
||||
def url
|
||||
TagManager.instance.url_for(object)
|
||||
end
|
||||
|
|
|
@ -9,6 +9,7 @@ class PostStatusService < BaseService
|
|||
# @param [Account] account Account from which to post
|
||||
# @param [Hash] options
|
||||
# @option [String] :text Message
|
||||
# @option [String] :markdown Optional message in markdown
|
||||
# @option [Status] :thread Optional status to reply to
|
||||
# @option [Boolean] :sensitive
|
||||
# @option [String] :visibility
|
||||
|
@ -25,6 +26,7 @@ class PostStatusService < BaseService
|
|||
@account = account
|
||||
@options = options
|
||||
@text = @options[:text] || ''
|
||||
@markdown = @options[:markdown]
|
||||
@in_reply_to = @options[:thread]
|
||||
|
||||
return idempotency_duplicate if idempotency_given? && idempotency_duplicate?
|
||||
|
@ -171,6 +173,7 @@ class PostStatusService < BaseService
|
|||
def status_attributes
|
||||
{
|
||||
text: @text,
|
||||
markdown: @markdown,
|
||||
group_id: @options[:group_id],
|
||||
quote_of_id: @options[:quote_of_id],
|
||||
media_attachments: @media || [],
|
||||
|
|
|
@ -311,6 +311,7 @@ Rails.application.routes.draw do
|
|||
end
|
||||
|
||||
member do
|
||||
get :comments
|
||||
get :context
|
||||
get :card
|
||||
get :revisions
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
class AddMarkdownToStatus < ActiveRecord::Migration[5.2]
|
||||
def change
|
||||
add_column :statuses, :markdown, :text
|
||||
end
|
||||
end
|
|
@ -10,7 +10,7 @@
|
|||
#
|
||||
# It's strongly recommended that you check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema.define(version: 2020_03_10_224203) do
|
||||
ActiveRecord::Schema.define(version: 2020_04_20_223346) do
|
||||
|
||||
# These are extensions that must be enabled in order to support this database
|
||||
enable_extension "plpgsql"
|
||||
|
@ -711,6 +711,7 @@ ActiveRecord::Schema.define(version: 2020_03_10_224203) do
|
|||
t.integer "group_id"
|
||||
t.bigint "quote_of_id"
|
||||
t.datetime "revised_at"
|
||||
t.text "markdown"
|
||||
t.index ["account_id", "id", "visibility", "updated_at"], name: "index_statuses_20180106", order: { id: :desc }
|
||||
t.index ["group_id"], name: "index_statuses_on_group_id"
|
||||
t.index ["in_reply_to_account_id"], name: "index_statuses_on_in_reply_to_account_id"
|
||||
|
|
|
@ -90,6 +90,7 @@
|
|||
"detect-passive-events": "^1.0.2",
|
||||
"dotenv": "^8.0.0",
|
||||
"draft-js": "^0.11.4",
|
||||
"draftjs-to-markdown": "^0.6.0",
|
||||
"emoji-mart": "^3.0.0",
|
||||
"es6-symbol": "^3.1.1",
|
||||
"escape-html": "^1.0.3",
|
||||
|
@ -113,6 +114,7 @@
|
|||
"lodash.throttle": "^4.1.1",
|
||||
"lodash.unescape": "^4.0.1",
|
||||
"mark-loader": "^0.1.6",
|
||||
"markdown-draft-js": "^2.2.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"npmlog": "^4.1.2",
|
||||
|
|
31
yarn.lock
31
yarn.lock
|
@ -1472,7 +1472,7 @@ are-we-there-yet@~1.1.2:
|
|||
delegates "^1.0.0"
|
||||
readable-stream "^2.0.6"
|
||||
|
||||
argparse@^1.0.7:
|
||||
argparse@^1.0.10, argparse@^1.0.7:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
|
||||
integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
|
||||
|
@ -1640,6 +1640,13 @@ atob@^2.1.2:
|
|||
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
|
||||
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
|
||||
|
||||
autolinker@^3.11.0:
|
||||
version "3.14.1"
|
||||
resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-3.14.1.tgz#6ae4b812b6eaf42d4d68138b9e67757cbf2bc1e4"
|
||||
integrity sha512-yvsRHIaY51EYDml6MGlbqyJGfl4n7zezGYf+R7gvM8c5LNpRGc4SISkvgAswSS8SWxk/OrGCylKV9mJyVstz7w==
|
||||
dependencies:
|
||||
tslib "^1.9.3"
|
||||
|
||||
autoprefixer@^9.5.1:
|
||||
version "9.7.6"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.6.tgz#63ac5bbc0ce7934e6997207d5bb00d68fa8293a4"
|
||||
|
@ -3260,6 +3267,11 @@ draft-js@^0.11.4:
|
|||
immutable "~3.7.4"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
draftjs-to-markdown@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/draftjs-to-markdown/-/draftjs-to-markdown-0.6.0.tgz#78ec1850c909a8d97132c211dc4d52345c79cd90"
|
||||
integrity sha512-nmze89CrGOQCzPLd16i2hYpmVyQhZnZuIuuLK7SCuGCRCYTPSnf6PE2f9ONcvjT357G+yEdEQh3K3Ry5cNVMcQ==
|
||||
|
||||
duplexer@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
|
||||
|
@ -6086,6 +6098,13 @@ mark-loader@^0.1.6:
|
|||
resolved "https://registry.yarnpkg.com/mark-loader/-/mark-loader-0.1.6.tgz#0abb477dca7421d70e20128ff6489f5cae8676d5"
|
||||
integrity sha1-CrtHfcp0IdcOIBKP9kifXK6GdtU=
|
||||
|
||||
markdown-draft-js@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/markdown-draft-js/-/markdown-draft-js-2.2.0.tgz#1a4796c4d7907761ae417e2176ab858dfaa1166a"
|
||||
integrity sha512-OW53nd5m7KrnuXjH8jNKB3SQ5KidKD/+pHS+3daVKTsyjsiozghjUxzNH+5JLxzaBECHmJ7itE39RzMgYm5EFQ==
|
||||
dependencies:
|
||||
remarkable "2.0.0"
|
||||
|
||||
md5.js@^1.3.4:
|
||||
version "1.3.5"
|
||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||
|
@ -8205,6 +8224,14 @@ regjsparser@^0.6.4:
|
|||
dependencies:
|
||||
jsesc "~0.5.0"
|
||||
|
||||
remarkable@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-2.0.0.tgz#795f965bede8300362ce51a716edc322d9e7a4ca"
|
||||
integrity sha512-3gvKFAgL4xmmVRKAMNm6UzDo/rO2gPVkZrWagp6AXEA4JvCcMcRx9aapYbb7AJAmLLvi/u06+EhzqoS7ha9qOg==
|
||||
dependencies:
|
||||
argparse "^1.0.10"
|
||||
autolinker "^3.11.0"
|
||||
|
||||
remove-trailing-separator@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
|
||||
|
@ -9415,7 +9442,7 @@ tryer@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
|
||||
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
|
||||
|
||||
tslib@^1.9.0:
|
||||
tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.11.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
|
||||
integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
|
||||
|
|
Loading…
Reference in New Issue