Merge tootsuite/master at 3023725936
commit
35fbdc36f9
230 changed files with 8544 additions and 563 deletions
@ -0,0 +1,3 @@ |
|||||||
|
[submodule "app/javascript/themes/mastodon-go"] |
||||||
|
path = app/javascript/themes/mastodon-go |
||||||
|
url = https://github.com/marrus-sh/mastodon-go |
@ -1,85 +1,10 @@ |
|||||||
![Mastodon](https://i.imgur.com/NhZc40l.png) |
# Mastodon Glitch Edition # |
||||||
======== |
|
||||||
|
|
||||||
[![Build Status](https://img.shields.io/travis/tootsuite/mastodon.svg)][travis] |
> Now with automated deploys! |
||||||
[![Code Climate](https://img.shields.io/codeclimate/maintainability/tootsuite/mastodon.svg)][code_climate] |
|
||||||
|
|
||||||
[travis]: https://travis-ci.org/tootsuite/mastodon |
[![Build Status](https://travis-ci.org/glitch-soc/mastodon.svg?branch=master)](https://travis-ci.org/glitch-soc/mastodon) |
||||||
[code_climate]: https://codeclimate.com/github/tootsuite/mastodon |
|
||||||
|
|
||||||
Mastodon is a **free, open-source social network server** based on **open web protocols** like ActivityPub and OStatus. The social focus of the project is a viable decentralized alternative to commercial social media silos that returns the control of the content distribution channels to the people. The technical focus of the project is a good user interface, a clean REST API for 3rd party apps and robust anti-abuse tools. |
So here's the deal: we all work on this code, and then it runs on dev.glitch.social and anyone who uses that does so absolutely at their own risk. can you dig it? |
||||||
|
|
||||||
Click on the screenshot below to watch a demo of the UI: |
- You can view documentation for this project at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/). |
||||||
|
- And contributing guidelines are available [here](CONTRIBUTING.md) and [here](https://glitch-soc.github.io/docs/contributing/). |
||||||
[![Screenshot](https://i.imgur.com/pG3Nnz3.jpg)][youtube_demo] |
|
||||||
|
|
||||||
[youtube_demo]: https://www.youtube.com/watch?v=YO1jQ8_rAMU |
|
||||||
|
|
||||||
**Ruby on Rails** is used for the back-end, while **React.js** and Redux are used for the dynamic front-end. A static front-end for public resources (profiles and statuses) is also provided. |
|
||||||
|
|
||||||
If you would like, you can [support the development of this project on Patreon][patreon]. Alternatively, you can donate to this BTC address: `17j2g7vpgHhLuXhN4bueZFCvdxxieyRVWd` |
|
||||||
|
|
||||||
[patreon]: https://www.patreon.com/user?u=619786 |
|
||||||
|
|
||||||
--- |
|
||||||
|
|
||||||
## Resources |
|
||||||
|
|
||||||
- [Frequently Asked Questions](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md) |
|
||||||
- [Use this tool to find Twitter friends on Mastodon](https://bridge.joinmastodon.org) |
|
||||||
- [API overview](https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md) |
|
||||||
- [List of Mastodon instances](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md) |
|
||||||
- [List of apps](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md) |
|
||||||
- [List of sponsors](https://joinmastodon.org/sponsors) |
|
||||||
|
|
||||||
## Features |
|
||||||
|
|
||||||
**No vendor lock-in: Fully interoperable with any conforming platform** |
|
||||||
|
|
||||||
It doesn't have to be Mastodon, whatever implements ActivityPub or OStatus is part of the social network! |
|
||||||
|
|
||||||
**Real-time timeline updates** |
|
||||||
|
|
||||||
See the updates of people you're following appear in real-time in the UI via WebSockets. There's a firehose view as well! |
|
||||||
|
|
||||||
**Federated thread resolving** |
|
||||||
|
|
||||||
If someone you follow replies to a user unknown to the server, the server fetches the full thread so you can view it without leaving the UI |
|
||||||
|
|
||||||
**Media attachments like images and short videos** |
|
||||||
|
|
||||||
Upload and view images and WebM/MP4 videos attached to the updates. Videos with no audio track are treated like GIFs; normal videos are looped - like vines! |
|
||||||
|
|
||||||
**OAuth2 and a straightforward REST API** |
|
||||||
|
|
||||||
Mastodon acts as an OAuth2 provider so 3rd party apps can use the API |
|
||||||
|
|
||||||
**Fast response times** |
|
||||||
|
|
||||||
Mastodon tries to be as fast and responsive as possible, so all long-running tasks are delegated to background processing |
|
||||||
|
|
||||||
**Deployable via Docker** |
|
||||||
|
|
||||||
You don't need to mess with dependencies and configuration if you want to try Mastodon, if you have Docker and Docker Compose the deployment is extremely easy |
|
||||||
|
|
||||||
--- |
|
||||||
|
|
||||||
## Development |
|
||||||
|
|
||||||
Please follow the [development guide](https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Development-guide.md) from the documentation repository. |
|
||||||
|
|
||||||
## Deployment |
|
||||||
|
|
||||||
There are guides in the documentation repository for [deploying on various platforms](https://github.com/tootsuite/documentation#running-mastodon). |
|
||||||
|
|
||||||
## Contributing |
|
||||||
|
|
||||||
You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository. [Here are the guidelines for code contributions](CONTRIBUTING.md) |
|
||||||
|
|
||||||
**IRC channel**: #mastodon on irc.freenode.net |
|
||||||
|
|
||||||
--- |
|
||||||
|
|
||||||
## Extra credits |
|
||||||
|
|
||||||
The elephant friend illustrations are created by [Dopatwo](https://mastodon.social/@dopatwo) |
|
||||||
|
@ -0,0 +1,60 @@ |
|||||||
|
# frozen_string_literal: true |
||||||
|
|
||||||
|
class Api::V1::Timelines::DirectController < Api::BaseController |
||||||
|
before_action -> { doorkeeper_authorize! :read }, only: [:show] |
||||||
|
before_action :require_user!, only: [:show] |
||||||
|
after_action :insert_pagination_headers, unless: -> { @statuses.empty? } |
||||||
|
|
||||||
|
respond_to :json |
||||||
|
|
||||||
|
def show |
||||||
|
@statuses = load_statuses |
||||||
|
render json: @statuses, each_serializer: REST::StatusSerializer, relationships: StatusRelationshipsPresenter.new(@statuses, current_user&.account_id) |
||||||
|
end |
||||||
|
|
||||||
|
private |
||||||
|
|
||||||
|
def load_statuses |
||||||
|
cached_direct_statuses |
||||||
|
end |
||||||
|
|
||||||
|
def cached_direct_statuses |
||||||
|
cache_collection direct_statuses, Status |
||||||
|
end |
||||||
|
|
||||||
|
def direct_statuses |
||||||
|
direct_timeline_statuses.paginate_by_max_id( |
||||||
|
limit_param(DEFAULT_STATUSES_LIMIT), |
||||||
|
params[:max_id], |
||||||
|
params[:since_id] |
||||||
|
) |
||||||
|
end |
||||||
|
|
||||||
|
def direct_timeline_statuses |
||||||
|
Status.as_direct_timeline(current_account) |
||||||
|
end |
||||||
|
|
||||||
|
def insert_pagination_headers |
||||||
|
set_pagination_headers(next_path, prev_path) |
||||||
|
end |
||||||
|
|
||||||
|
def pagination_params(core_params) |
||||||
|
params.permit(:local, :limit).merge(core_params) |
||||||
|
end |
||||||
|
|
||||||
|
def next_path |
||||||
|
api_v1_timelines_direct_url pagination_params(max_id: pagination_max_id) |
||||||
|
end |
||||||
|
|
||||||
|
def prev_path |
||||||
|
api_v1_timelines_direct_url pagination_params(since_id: pagination_since_id) |
||||||
|
end |
||||||
|
|
||||||
|
def pagination_max_id |
||||||
|
@statuses.last.id |
||||||
|
end |
||||||
|
|
||||||
|
def pagination_since_id |
||||||
|
@statuses.first.id |
||||||
|
end |
||||||
|
end |
@ -0,0 +1,64 @@ |
|||||||
|
# frozen_string_literal: true |
||||||
|
|
||||||
|
class Settings::KeywordMutesController < ApplicationController |
||||||
|
layout 'admin' |
||||||
|
|
||||||
|
before_action :authenticate_user! |
||||||
|
before_action :load_keyword_mute, only: [:edit, :update, :destroy] |
||||||
|
|
||||||
|
def index |
||||||
|
@keyword_mutes = paginated_keyword_mutes_for_account |
||||||
|
end |
||||||
|
|
||||||
|
def new |
||||||
|
@keyword_mute = keyword_mutes_for_account.build |
||||||
|
end |
||||||
|
|
||||||
|
def create |
||||||
|
@keyword_mute = keyword_mutes_for_account.create(keyword_mute_params) |
||||||
|
|
||||||
|
if @keyword_mute.persisted? |
||||||
|
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg') |
||||||
|
else |
||||||
|
render :new |
||||||
|
end |
||||||
|
end |
||||||
|
|
||||||
|
def update |
||||||
|
if @keyword_mute.update(keyword_mute_params) |
||||||
|
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg') |
||||||
|
else |
||||||
|
render :edit |
||||||
|
end |
||||||
|
end |
||||||
|
|
||||||
|
def destroy |
||||||
|
@keyword_mute.destroy! |
||||||
|
|
||||||
|
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg') |
||||||
|
end |
||||||
|
|
||||||
|
def destroy_all |
||||||
|
keyword_mutes_for_account.delete_all |
||||||
|
|
||||||
|
redirect_to settings_keyword_mutes_path, notice: I18n.t('generic.changes_saved_msg') |
||||||
|
end |
||||||
|
|
||||||
|
private |
||||||
|
|
||||||
|
def keyword_mutes_for_account |
||||||
|
Glitch::KeywordMute.where(account: current_account) |
||||||
|
end |
||||||
|
|
||||||
|
def load_keyword_mute |
||||||
|
@keyword_mute = keyword_mutes_for_account.find(params[:id]) |
||||||
|
end |
||||||
|
|
||||||
|
def keyword_mute_params |
||||||
|
params.require(:keyword_mute).permit(:keyword, :whole_word) |
||||||
|
end |
||||||
|
|
||||||
|
def paginated_keyword_mutes_for_account |
||||||
|
keyword_mutes_for_account.order(:keyword).page params[:page] |
||||||
|
end |
||||||
|
end |
@ -0,0 +1,2 @@ |
|||||||
|
module Settings::KeywordMutesHelper |
||||||
|
end |
@ -0,0 +1,93 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`actions/local_settings` |
||||||
|
======================== |
||||||
|
|
||||||
|
> For more information on the contents of this file, please contact: |
||||||
|
> |
||||||
|
> - kibigo! [@kibi@glitch.social] |
||||||
|
|
||||||
|
This file provides our Redux actions related to local settings. It |
||||||
|
consists of the following: |
||||||
|
|
||||||
|
- __`changesLocalSetting(key, value)` :__ |
||||||
|
Changes the local setting with the given `key` to the given |
||||||
|
`value`. `key` **MUST** be an array of strings, as required by |
||||||
|
`Immutable.Map.prototype.getIn()`. |
||||||
|
|
||||||
|
- __`saveLocalSettings()` :__ |
||||||
|
Saves the local settings to `localStorage` as a JSON object. We |
||||||
|
shouldn't ever need to call this ourselves. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Constants: |
||||||
|
---------- |
||||||
|
|
||||||
|
We provide the following constants: |
||||||
|
|
||||||
|
- __`LOCAL_SETTING_CHANGE` :__ |
||||||
|
This string constant is used to dispatch a setting change to our |
||||||
|
reducer in `reducers/local_settings`, where the setting is |
||||||
|
actually changed. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
`changeLocalSetting(key, value)`: |
||||||
|
--------------------------------- |
||||||
|
|
||||||
|
Changes the local setting with the given `key` to the given `value`. |
||||||
|
`key` **MUST** be an array of strings, as required by |
||||||
|
`Immutable.Map.prototype.getIn()`. |
||||||
|
|
||||||
|
To accomplish this, we just dispatch a `LOCAL_SETTING_CHANGE` to our |
||||||
|
reducer in `reducers/local_settings`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export function changeLocalSetting(key, value) { |
||||||
|
return dispatch => { |
||||||
|
dispatch({ |
||||||
|
type: LOCAL_SETTING_CHANGE, |
||||||
|
key, |
||||||
|
value, |
||||||
|
}); |
||||||
|
|
||||||
|
dispatch(saveLocalSettings()); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
`saveLocalSettings()`: |
||||||
|
---------------------- |
||||||
|
|
||||||
|
Saves the local settings to `localStorage` as a JSON object. |
||||||
|
`changeLocalSetting()` calls this whenever it changes a setting. We |
||||||
|
shouldn't ever need to call this ourselves. |
||||||
|
|
||||||
|
> __TODO :__ |
||||||
|
> Right now `saveLocalSettings()` doesn't keep track of which user |
||||||
|
> is currently signed in, but it might be better to give each user |
||||||
|
> their *own* local settings. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export function saveLocalSettings() { |
||||||
|
return (_, getState) => { |
||||||
|
const localSettings = getState().get('local_settings').toJS(); |
||||||
|
localStorage.setItem('mastodon-settings', JSON.stringify(localSettings)); |
||||||
|
}; |
||||||
|
}; |
@ -0,0 +1,227 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<AccountHeader>` |
||||||
|
================= |
||||||
|
|
||||||
|
> For more information on the contents of this file, please contact: |
||||||
|
> |
||||||
|
> - kibigo! [@kibi@glitch.social] |
||||||
|
|
||||||
|
Original file by @gargron@mastodon.social et al as part of |
||||||
|
tootsuite/mastodon. We've expanded it in order to handle user bio |
||||||
|
frontmatter. |
||||||
|
|
||||||
|
The `<AccountHeader>` component provides the header for account |
||||||
|
timelines. It is a fairly simple component which mostly just consists |
||||||
|
of a `render()` method. |
||||||
|
|
||||||
|
__Props:__ |
||||||
|
|
||||||
|
- __`account` (`ImmutablePropTypes.map`) :__ |
||||||
|
The account to render a header for. |
||||||
|
|
||||||
|
- __`me` (`PropTypes.number.isRequired`) :__ |
||||||
|
The id of the currently-signed-in account. |
||||||
|
|
||||||
|
- __`onFollow` (`PropTypes.func.isRequired`) :__ |
||||||
|
The function to call when the user clicks the "follow" button. |
||||||
|
|
||||||
|
- __`intl` (`PropTypes.object.isRequired`) :__ |
||||||
|
Our internationalization object, inserted by `@injectIntl`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import emojify from '../../../mastodon/features/emoji/emoji'; |
||||||
|
import IconButton from '../../../mastodon/components/icon_button'; |
||||||
|
import Avatar from '../../../mastodon/components/avatar'; |
||||||
|
import { me } from '../../../mastodon/initial_state'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import { processBio } from '../../util/bio_metadata'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Inital setup: |
||||||
|
------------- |
||||||
|
|
||||||
|
The `messages` constant is used to define any messages that we need |
||||||
|
from inside props. In our case, these are the `unfollow`, `follow`, and |
||||||
|
`requested` messages used in the `title` of our buttons. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, |
||||||
|
follow: { id: 'account.follow', defaultMessage: 'Follow' }, |
||||||
|
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, |
||||||
|
}); |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Implementation: |
||||||
|
--------------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class AccountHeader extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
account : ImmutablePropTypes.map, |
||||||
|
onFollow : PropTypes.func.isRequired, |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### `render()` |
||||||
|
|
||||||
|
The `render()` function is used to render our component. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
render () { |
||||||
|
const { account, intl } = this.props; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
If no `account` is provided, then we can't render a header. Otherwise, |
||||||
|
we get the `displayName` for the account, if available. If it's blank, |
||||||
|
then we set the `displayName` to just be the `username` of the account. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if (!account) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
let displayName = account.get('display_name_html'); |
||||||
|
let info = ''; |
||||||
|
let actionBtn = ''; |
||||||
|
let following = false; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Next, we handle the account relationships. If the account follows the |
||||||
|
user, then we add an `info` message. If the user has requested a |
||||||
|
follow, then we disable the `actionBtn` and display an hourglass. |
||||||
|
Otherwise, if the account isn't blocked, we set the `actionBtn` to the |
||||||
|
appropriate icon. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if (me !== account.get('id')) { |
||||||
|
if (account.getIn(['relationship', 'followed_by'])) { |
||||||
|
info = ( |
||||||
|
<span className='account--follows-info'> |
||||||
|
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' /> |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
|
if (account.getIn(['relationship', 'requested'])) { |
||||||
|
actionBtn = ( |
||||||
|
<div className='account--action-button'> |
||||||
|
<IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} else if (!account.getIn(['relationship', 'blocking'])) { |
||||||
|
following = account.getIn(['relationship', 'following']); |
||||||
|
actionBtn = ( |
||||||
|
<div className='account--action-button'> |
||||||
|
<IconButton |
||||||
|
size={26} |
||||||
|
icon={following ? 'user-times' : 'user-plus'} |
||||||
|
active={following ? true : false} |
||||||
|
title={intl.formatMessage(following ? messages.unfollow : messages.follow)} |
||||||
|
onClick={this.props.onFollow} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
we extract the `text` and |
||||||
|
`metadata` from our account's `note` using `processBio()`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const { text, metadata } = processBio(account.get('note')); |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Here, we render our component using all the things we've defined above. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='account__header__wrapper'> |
||||||
|
<div |
||||||
|
className='account__header' |
||||||
|
style={{ backgroundImage: `url(${account.get('header')})` }} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<a href={account.get('url')} target='_blank' rel='noopener'> |
||||||
|
<span className='account__header__avatar'> |
||||||
|
<Avatar account={account} size={90} /> |
||||||
|
</span> |
||||||
|
<span |
||||||
|
className='account__header__display-name' |
||||||
|
dangerouslySetInnerHTML={{ __html: displayName }} |
||||||
|
/> |
||||||
|
</a> |
||||||
|
<span className='account__header__username'> |
||||||
|
@{account.get('acct')} |
||||||
|
{account.get('locked') ? <i className='fa fa-lock' /> : null} |
||||||
|
</span> |
||||||
|
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} /> |
||||||
|
|
||||||
|
{info} |
||||||
|
{actionBtn} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{metadata.length && ( |
||||||
|
<table className='account__metadata'> |
||||||
|
<tbody> |
||||||
|
{(() => { |
||||||
|
let data = []; |
||||||
|
for (let i = 0; i < metadata.length; i++) { |
||||||
|
data.push( |
||||||
|
<tr key={i}> |
||||||
|
<th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th> |
||||||
|
<td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td> |
||||||
|
</tr> |
||||||
|
); |
||||||
|
} |
||||||
|
return data; |
||||||
|
})()} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
) || null} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,80 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<NotificationPurgeButtonsContainer>` |
||||||
|
========================= |
||||||
|
|
||||||
|
This container connects `<NotificationPurgeButtons>`s to the Redux store. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import NotificationPurgeButtons from './notification_purge_buttons'; |
||||||
|
import { |
||||||
|
deleteMarkedNotifications, |
||||||
|
enterNotificationClearingMode, |
||||||
|
markAllNotifications, |
||||||
|
} from '../../../../mastodon/actions/notifications'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
import { openModal } from '../../../../mastodon/actions/modal'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Dispatch mapping: |
||||||
|
----------------- |
||||||
|
|
||||||
|
The `mapDispatchToProps()` function maps dispatches to our store to the |
||||||
|
various props of our component. We only need to provide a dispatch for |
||||||
|
deleting notifications. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
clearMessage: { id: 'notifications.marked_clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all selected notifications?' }, |
||||||
|
clearConfirm: { id: 'notifications.marked_clear', defaultMessage: 'Clear selected notifications' }, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, { intl }) => ({ |
||||||
|
onEnterCleaningMode(yes) { |
||||||
|
dispatch(enterNotificationClearingMode(yes)); |
||||||
|
}, |
||||||
|
|
||||||
|
onDeleteMarked() { |
||||||
|
dispatch(openModal('CONFIRM', { |
||||||
|
message: intl.formatMessage(messages.clearMessage), |
||||||
|
confirm: intl.formatMessage(messages.clearConfirm), |
||||||
|
onConfirm: () => dispatch(deleteMarkedNotifications()), |
||||||
|
})); |
||||||
|
}, |
||||||
|
|
||||||
|
onMarkAll() { |
||||||
|
dispatch(markAllNotifications(true)); |
||||||
|
}, |
||||||
|
|
||||||
|
onMarkNone() { |
||||||
|
dispatch(markAllNotifications(false)); |
||||||
|
}, |
||||||
|
|
||||||
|
onInvert() { |
||||||
|
dispatch(markAllNotifications(null)); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
markNewForDelete: state.getIn(['notifications', 'markNewForDelete']), |
||||||
|
}); |
||||||
|
|
||||||
|
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons)); |
@ -0,0 +1,62 @@ |
|||||||
|
/** |
||||||
|
* Buttons widget for controlling the notification clearing mode. |
||||||
|
* In idle state, the cleaning mode button is shown. When the mode is active, |
||||||
|
* a Confirm and Abort buttons are shown in its place. |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' }, |
||||||
|
btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' }, |
||||||
|
btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert\nselection' }, |
||||||
|
btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Clear\nselected' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class NotificationPurgeButtons extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
onDeleteMarked : PropTypes.func.isRequired, |
||||||
|
onMarkAll : PropTypes.func.isRequired, |
||||||
|
onMarkNone : PropTypes.func.isRequired, |
||||||
|
onInvert : PropTypes.func.isRequired, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
markNewForDelete: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { intl, markNewForDelete } = this.props; |
||||||
|
|
||||||
|
//className='active'
|
||||||
|
return ( |
||||||
|
<div className='column-header__notif-cleaning-buttons'> |
||||||
|
<button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}> |
||||||
|
<b>∀</b><br />{intl.formatMessage(messages.btnAll)} |
||||||
|
</button> |
||||||
|
|
||||||
|
<button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}> |
||||||
|
<b>∅</b><br />{intl.formatMessage(messages.btnNone)} |
||||||
|
</button> |
||||||
|
|
||||||
|
<button onClick={this.props.onInvert}> |
||||||
|
<b>¬</b><br />{intl.formatMessage(messages.btnInvert)} |
||||||
|
</button> |
||||||
|
|
||||||
|
<button onClick={this.props.onDeleteMarked}> |
||||||
|
<i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,66 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<ComposeAdvancedOptionsContainer>` |
||||||
|
=================================== |
||||||
|
|
||||||
|
This container connects `<ComposeAdvancedOptions>` to the Redux store. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import ComposeAdvancedOptions from '.'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
State mapping: |
||||||
|
-------------- |
||||||
|
|
||||||
|
The `mapStateToProps()` function maps various state properties to the |
||||||
|
props of our component. The only property we care about is |
||||||
|
`compose.advanced_options`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
values: state.getIn(['compose', 'advanced_options']), |
||||||
|
}); |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Dispatch mapping: |
||||||
|
----------------- |
||||||
|
|
||||||
|
The `mapDispatchToProps()` function maps dispatches to our store to the |
||||||
|
various props of our component. We just need to provide a dispatch for |
||||||
|
when an advanced option toggle changes. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({ |
||||||
|
|
||||||
|
onChange (option) { |
||||||
|
dispatch(toggleComposeAdvancedOption(option)); |
||||||
|
}, |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions); |
@ -0,0 +1,163 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<ComposeAdvancedOptions>` |
||||||
|
========================== |
||||||
|
|
||||||
|
> For more information on the contents of this file, please contact: |
||||||
|
> |
||||||
|
> - surinna [@srn@dev.glitch.social] |
||||||
|
|
||||||
|
This adds an advanced options dropdown to the toot compose box, for |
||||||
|
toggles that don't necessarily fit elsewhere. |
||||||
|
|
||||||
|
__Props:__ |
||||||
|
|
||||||
|
- __`values` (`ImmutablePropTypes.contains(…).isRequired`) :__ |
||||||
|
An Immutable map with the following values: |
||||||
|
|
||||||
|
- __`do_not_federate` (`PropTypes.bool.isRequired`) :__ |
||||||
|
Specifies whether or not to federate the status. |
||||||
|
|
||||||
|
- __`onChange` (`PropTypes.func.isRequired`) :__ |
||||||
|
The function to call when a toggle is changed. We pass this from |
||||||
|
our container to the toggle. |
||||||
|
|
||||||
|
- __`intl` (`PropTypes.object.isRequired`) :__ |
||||||
|
Our internationalization object, inserted by `@injectIntl`. |
||||||
|
|
||||||
|
__State:__ |
||||||
|
|
||||||
|
- __`open` :__ |
||||||
|
This tells whether the dropdown is currently open or closed. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import { injectIntl, defineMessages } from 'react-intl'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import ComposeAdvancedOptionsToggle from './toggle'; |
||||||
|
import ComposeDropdown from '../dropdown/index'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Inital setup: |
||||||
|
------------- |
||||||
|
|
||||||
|
The `messages` constant is used to define any messages that we need |
||||||
|
from inside props. These are the various titles and labels on our |
||||||
|
toggles. |
||||||
|
|
||||||
|
`iconStyle` styles the icon used for the dropdown button. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
local_only_short : |
||||||
|
{ id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' }, |
||||||
|
local_only_long : |
||||||
|
{ id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' }, |
||||||
|
advanced_options_icon_title : |
||||||
|
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' }, |
||||||
|
}); |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Implementation: |
||||||
|
--------------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class ComposeAdvancedOptions extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
values : ImmutablePropTypes.contains({ |
||||||
|
do_not_federate : PropTypes.bool.isRequired, |
||||||
|
}).isRequired, |
||||||
|
onChange : PropTypes.func.isRequired, |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### `render()` |
||||||
|
|
||||||
|
`render()` actually puts our component on the screen. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
render () { |
||||||
|
const { intl, values } = this.props; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
The `options` array provides all of the available advanced options |
||||||
|
alongside their icon, text, and name. |
||||||
|
|
||||||
|
*/ |
||||||
|
const options = [ |
||||||
|
{ icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, name: 'do_not_federate' }, |
||||||
|
]; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
`anyEnabled` tells us if any of our advanced options have been enabled. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const anyEnabled = values.some((enabled) => enabled); |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
`optionElems` takes our `options` and creates |
||||||
|
`<ComposeAdvancedOptionsToggle>`s out of them. We use the `name` of the |
||||||
|
toggle as its `key` so that React can keep track of it. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const optionElems = options.map((option) => { |
||||||
|
return ( |
||||||
|
<ComposeAdvancedOptionsToggle |
||||||
|
onChange={this.props.onChange} |
||||||
|
active={values.get(option.name)} |
||||||
|
key={option.name} |
||||||
|
name={option.name} |
||||||
|
shortText={intl.formatMessage(option.shortText)} |
||||||
|
longText={intl.formatMessage(option.longText)} |
||||||
|
/> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Finally, we can render our component. |
||||||
|
|
||||||
|
*/ |
||||||
|
return ( |
||||||
|
<ComposeDropdown |
||||||
|
title={intl.formatMessage(messages.advanced_options_icon_title)} |
||||||
|
icon='home' |
||||||
|
highlight={anyEnabled} |
||||||
|
> |
||||||
|
{optionElems} |
||||||
|
</ComposeDropdown> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,103 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<ComposeAdvancedOptionsToggle>` |
||||||
|
================================ |
||||||
|
|
||||||
|
> For more information on the contents of this file, please contact: |
||||||
|
> |
||||||
|
> - surinna [@srn@dev.glitch.social] |
||||||
|
|
||||||
|
This creates the toggle used by `<ComposeAdvancedOptions>`. |
||||||
|
|
||||||
|
__Props:__ |
||||||
|
|
||||||
|
- __`onChange` (`PropTypes.func`) :__ |
||||||
|
This provides the function to call when the toggle is |
||||||
|
(de-?)activated. |
||||||
|
|
||||||
|
- __`active` (`PropTypes.bool`) :__ |
||||||
|
This prop controls whether the toggle is currently active or not. |
||||||
|
|
||||||
|
- __`name` (`PropTypes.string`) :__ |
||||||
|
This identifies the toggle, and is sent to `onChange()` when it is |
||||||
|
called. |
||||||
|
|
||||||
|
- __`shortText` (`PropTypes.string`) :__ |
||||||
|
This is a short string used as the title of the toggle. |
||||||
|
|
||||||
|
- __`longText` (`PropTypes.string`) :__ |
||||||
|
This is a longer string used as a subtitle for the toggle. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import Toggle from 'react-toggle'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Implementation: |
||||||
|
--------------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export default class ComposeAdvancedOptionsToggle extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
onChange: PropTypes.func.isRequired, |
||||||
|
active: PropTypes.bool.isRequired, |
||||||
|
name: PropTypes.string.isRequired, |
||||||
|
shortText: PropTypes.string.isRequired, |
||||||
|
longText: PropTypes.string.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### `onToggle()` |
||||||
|
|
||||||
|
The `onToggle()` function simply calls the `onChange()` prop with the |
||||||
|
toggle's `name`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
onToggle = () => { |
||||||
|
this.props.onChange(this.props.name); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### `render()` |
||||||
|
|
||||||
|
The `render()` function is used to render our component. We just render |
||||||
|
a `<Toggle>` and place next to it our text. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
render() { |
||||||
|
const { active, shortText, longText } = this.props; |
||||||
|
return ( |
||||||
|
<div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}> |
||||||
|
<div className='advanced-options-dropdown__option__toggle'> |
||||||
|
<Toggle checked={active} onChange={this.onToggle} /> |
||||||
|
</div> |
||||||
|
<div className='advanced-options-dropdown__option__content'> |
||||||
|
<strong>{shortText}</strong> |
||||||
|
{longText} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,133 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
import { injectIntl, defineMessages } from 'react-intl'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import ComposeDropdown from '../dropdown/index'; |
||||||
|
import { uploadCompose } from '../../../../mastodon/actions/compose'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
import { openModal } from '../../../../mastodon/actions/modal'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
upload : |
||||||
|
{ id: 'compose.attach.upload', defaultMessage: 'Upload a file' }, |
||||||
|
doodle : |
||||||
|
{ id: 'compose.attach.doodle', defaultMessage: 'Draw something' }, |
||||||
|
attach : |
||||||
|
{ id: 'compose.attach', defaultMessage: 'Attach...' }, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
// This horrible expression is copied from vanilla upload_button_container
|
||||||
|
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), |
||||||
|
resetFileKey: state.getIn(['compose', 'resetFileKey']), |
||||||
|
acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']), |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({ |
||||||
|
onSelectFile (files) { |
||||||
|
dispatch(uploadCompose(files)); |
||||||
|
}, |
||||||
|
onOpenDoodle () { |
||||||
|
dispatch(openModal('DOODLE', { noEsc: true })); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
@connect(mapStateToProps, mapDispatchToProps) |
||||||
|
export default class ComposeAttachOptions extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
resetFileKey: PropTypes.number, |
||||||
|
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
onSelectFile: PropTypes.func.isRequired, |
||||||
|
onOpenDoodle: PropTypes.func.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
handleItemClick = bt => { |
||||||
|
if (bt === 'upload') { |
||||||
|
this.fileElement.click(); |
||||||
|
} |
||||||
|
|
||||||
|
if (bt === 'doodle') { |
||||||
|
this.props.onOpenDoodle(); |
||||||
|
} |
||||||
|
|
||||||
|
this.dropdown.setState({ open: false }); |
||||||
|
}; |
||||||
|
|
||||||
|
handleFileChange = (e) => { |
||||||
|
if (e.target.files.length > 0) { |
||||||
|
this.props.onSelectFile(e.target.files); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setFileRef = (c) => { |
||||||
|
this.fileElement = c; |
||||||
|
} |
||||||
|
|
||||||
|
setDropdownRef = (c) => { |
||||||
|
this.dropdown = c; |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { intl, resetFileKey, disabled, acceptContentTypes } = this.props; |
||||||
|
|
||||||
|
const options = [ |
||||||
|
{ icon: 'cloud-upload', text: messages.upload, name: 'upload' }, |
||||||
|
{ icon: 'paint-brush', text: messages.doodle, name: 'doodle' }, |
||||||
|
]; |
||||||
|
|
||||||
|
const optionElems = options.map((item) => { |
||||||
|
const hdl = () => this.handleItemClick(item.name); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
role='button' |
||||||
|
tabIndex='0' |
||||||
|
key={item.name} |
||||||
|
onClick={hdl} |
||||||
|
className='privacy-dropdown__option' |
||||||
|
> |
||||||
|
<div className='privacy-dropdown__option__icon'> |
||||||
|
<i className={`fa fa-fw fa-${item.icon}`} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className='privacy-dropdown__option__content'> |
||||||
|
<strong>{intl.formatMessage(item.text)}</strong> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<ComposeDropdown |
||||||
|
title={intl.formatMessage(messages.attach)} |
||||||
|
icon='paperclip' |
||||||
|
disabled={disabled} |
||||||
|
ref={this.setDropdownRef} |
||||||
|
> |
||||||
|
{optionElems} |
||||||
|
</ComposeDropdown> |
||||||
|
<input |
||||||
|
key={resetFileKey} |
||||||
|
ref={this.setFileRef} |
||||||
|
type='file' |
||||||
|
multiple={false} |
||||||
|
accept={acceptContentTypes.toArray().join(',')} |
||||||
|
onChange={this.handleFileChange} |
||||||
|
disabled={disabled} |
||||||
|
style={{ display: 'none' }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,77 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import IconButton from '../../../../mastodon/components/icon_button'; |
||||||
|
|
||||||
|
const iconStyle = { |
||||||
|
height : null, |
||||||
|
lineHeight : '27px', |
||||||
|
}; |
||||||
|
|
||||||
|
export default class ComposeDropdown extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
title: PropTypes.string.isRequired, |
||||||
|
icon: PropTypes.string, |
||||||
|
highlight: PropTypes.bool, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
children: PropTypes.arrayOf(PropTypes.node).isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
open: false, |
||||||
|
}; |
||||||
|
|
||||||
|
onGlobalClick = (e) => { |
||||||
|
if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { |
||||||
|
this.setState({ open: false }); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
window.addEventListener('click', this.onGlobalClick); |
||||||
|
window.addEventListener('touchstart', this.onGlobalClick); |
||||||
|
} |
||||||
|
componentWillUnmount () { |
||||||
|
window.removeEventListener('click', this.onGlobalClick); |
||||||
|
window.removeEventListener('touchstart', this.onGlobalClick); |
||||||
|
} |
||||||
|
|
||||||
|
onToggleDropdown = () => { |
||||||
|
if (this.props.disabled) return; |
||||||
|
this.setState({ open: !this.state.open }); |
||||||
|
}; |
||||||
|
|
||||||
|
setRef = (c) => { |
||||||
|
this.node = c; |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { open } = this.state; |
||||||
|
let { highlight, title, icon, disabled } = this.props; |
||||||
|
|
||||||
|
if (!icon) icon = 'ellipsis-h'; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}> |
||||||
|
<div className='advanced-options-dropdown__value'> |
||||||
|
<IconButton |
||||||
|
className={'inverted'} |
||||||
|
title={title} |
||||||
|
icon={icon} active={open || highlight} |
||||||
|
size={18} |
||||||
|
style={iconStyle} |
||||||
|
disabled={disabled} |
||||||
|
onClick={this.onToggleDropdown} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='advanced-options-dropdown__dropdown'> |
||||||
|
{this.props.children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,24 @@ |
|||||||
|
// Package imports //
|
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { closeModal } from '../../../mastodon/actions/modal'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import { changeLocalSetting } from '../../../glitch/actions/local_settings'; |
||||||
|
import LocalSettings from '.'; |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
settings: state.get('local_settings'), |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({ |
||||||
|
onChange (setting, value) { |
||||||
|
dispatch(changeLocalSetting(setting, value)); |
||||||
|
}, |
||||||
|
onClose () { |
||||||
|
dispatch(closeModal()); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings); |
@ -0,0 +1,50 @@ |
|||||||
|
// Package imports
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
|
||||||
|
// Our imports
|
||||||
|
import LocalSettingsPage from './page'; |
||||||
|
import LocalSettingsNavigation from './navigation'; |
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style.scss'; |
||||||
|
|
||||||
|
export default class LocalSettings extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
onChange: PropTypes.func.isRequired, |
||||||
|
onClose: PropTypes.func.isRequired, |
||||||
|
settings: ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
currentIndex: 0, |
||||||
|
}; |
||||||
|
|
||||||
|
navigateTo = (index) => |
||||||
|
this.setState({ currentIndex: +index }); |
||||||
|
|
||||||
|
render () { |
||||||
|
|
||||||
|
const { navigateTo } = this; |
||||||
|
const { onChange, onClose, settings } = this.props; |
||||||
|
const { currentIndex } = this.state; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='glitch modal-root__modal local-settings'> |
||||||
|
<LocalSettingsNavigation |
||||||
|
index={currentIndex} |
||||||
|
onClose={onClose} |
||||||
|
onNavigate={navigateTo} |
||||||
|
/> |
||||||
|
<LocalSettingsPage |
||||||
|
index={currentIndex} |
||||||
|
onChange={onChange} |
||||||
|
settings={settings} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,74 @@ |
|||||||
|
// Package imports
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { injectIntl, defineMessages } from 'react-intl'; |
||||||
|
|
||||||
|
// Our imports
|
||||||
|
import LocalSettingsNavigationItem from './item'; |
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style.scss'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
general: { id: 'settings.general', defaultMessage: 'General' }, |
||||||
|
collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' }, |
||||||
|
media: { id: 'settings.media', defaultMessage: 'Media' }, |
||||||
|
preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' }, |
||||||
|
close: { id: 'settings.close', defaultMessage: 'Close' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class LocalSettingsNavigation extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
index : PropTypes.number, |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
onClose : PropTypes.func.isRequired, |
||||||
|
onNavigate : PropTypes.func.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
|
||||||
|
const { index, intl, onClose, onNavigate } = this.props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<nav className='glitch local-settings__navigation'> |
||||||
|
<LocalSettingsNavigationItem |
||||||
|
active={index === 0} |
||||||
|
index={0} |
||||||
|
onNavigate={onNavigate} |
||||||
|
title={intl.formatMessage(messages.general)} |
||||||
|
/> |
||||||
|
<LocalSettingsNavigationItem |
||||||
|
active={index === 1} |
||||||
|
index={1} |
||||||
|
onNavigate={onNavigate} |
||||||
|
title={intl.formatMessage(messages.collapsed)} |
||||||
|
/> |
||||||
|
<LocalSettingsNavigationItem |
||||||
|
active={index === 2} |
||||||
|
index={2} |
||||||
|
onNavigate={onNavigate} |
||||||
|
title={intl.formatMessage(messages.media)} |
||||||
|
/> |
||||||
|
<LocalSettingsNavigationItem |
||||||
|
active={index === 3} |
||||||
|
href='/settings/preferences' |
||||||
|
index={3} |
||||||
|
icon='cog' |
||||||
|
title={intl.formatMessage(messages.preferences)} |
||||||
|
/> |
||||||
|
<LocalSettingsNavigationItem |
||||||
|
active={index === 4} |
||||||
|
className='close' |
||||||
|
index={4} |
||||||
|
onNavigate={onClose} |
||||||
|
title={intl.formatMessage(messages.close)} |
||||||
|
/> |
||||||
|
</nav> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,69 @@ |
|||||||
|
// Package imports
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import classNames from 'classnames'; |
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style.scss'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
export default class LocalSettingsPage extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
active: PropTypes.bool, |
||||||
|
className: PropTypes.string, |
||||||
|
href: PropTypes.string, |
||||||
|
icon: PropTypes.string, |
||||||
|
index: PropTypes.number.isRequired, |
||||||
|
onNavigate: PropTypes.func, |
||||||
|
title: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
handleClick = (e) => { |
||||||
|
const { index, onNavigate } = this.props; |
||||||
|
if (onNavigate) { |
||||||
|
onNavigate(index); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { handleClick } = this; |
||||||
|
const { |
||||||
|
active, |
||||||
|
className, |
||||||
|
href, |
||||||
|
icon, |
||||||
|
onNavigate, |
||||||
|
title, |
||||||
|
} = this.props; |
||||||
|
|
||||||
|
const finalClassName = classNames('glitch', 'local-settings__navigation__item', { |
||||||
|
active, |
||||||
|
}, className); |
||||||
|
|
||||||
|
const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null; |
||||||
|
|
||||||
|
if (href) return ( |
||||||
|
<a |
||||||
|
href={href} |
||||||
|
className={finalClassName} |
||||||
|
> |
||||||
|
{iconElem} {title} |
||||||
|
</a> |
||||||
|
); |
||||||
|
else if (onNavigate) return ( |
||||||
|
<a |
||||||
|
onClick={handleClick} |
||||||
|
role='button' |
||||||
|
tabIndex='0' |
||||||
|
className={finalClassName} |
||||||
|
> |
||||||
|
{iconElem} {title} |
||||||
|
</a> |
||||||
|
); |
||||||
|
else return null; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
@import 'styles/mastodon/variables'; |
||||||
|
|
||||||
|
.glitch.local-settings__navigation__item { |
||||||
|
display: block; |
||||||
|
padding: 15px 20px; |
||||||
|
color: inherit; |
||||||
|
background: $primary-text-color; |
||||||
|
border-bottom: 1px $ui-primary-color solid; |
||||||
|
cursor: pointer; |
||||||
|
text-decoration: none; |
||||||
|
outline: none; |
||||||
|
transition: background .3s; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: $ui-secondary-color; |
||||||
|
} |
||||||
|
|
||||||
|
&.active { |
||||||
|
background: $ui-highlight-color; |
||||||
|
color: $primary-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
&.close, &.close:hover { |
||||||
|
background: $error-value-color; |
||||||
|
color: $primary-text-color; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,10 @@ |
|||||||
|
@import 'styles/mastodon/variables'; |
||||||
|
|
||||||
|
.glitch.local-settings__navigation { |
||||||
|
background: $primary-text-color; |
||||||
|
color: $ui-base-color; |
||||||
|
width: 200px; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 20px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
@ -0,0 +1,212 @@ |
|||||||
|
// Package imports
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; |
||||||
|
|
||||||
|
// Our imports
|
||||||
|
import LocalSettingsPageItem from './item'; |
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style.scss'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, |
||||||
|
layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, |
||||||
|
layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, |
||||||
|
side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class LocalSettingsPage extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
index : PropTypes.number, |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
onChange : PropTypes.func.isRequired, |
||||||
|
settings : ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
pages = [ |
||||||
|
({ intl, onChange, settings }) => ( |
||||||
|
<div className='glitch local-settings__page general'> |
||||||
|
<h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['layout']} |
||||||
|
id='mastodon-settings--layout' |
||||||
|
options={[ |
||||||
|
{ value: 'auto', message: intl.formatMessage(messages.layout_auto) }, |
||||||
|
{ value: 'multiple', message: intl.formatMessage(messages.layout_desktop) }, |
||||||
|
{ value: 'single', message: intl.formatMessage(messages.layout_mobile) }, |
||||||
|
]} |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.layout' defaultMessage='Layout:' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['stretch']} |
||||||
|
id='mastodon-settings--stretch' |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['navbar_under']} |
||||||
|
id='mastodon-settings--navbar_under' |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<section> |
||||||
|
<h2><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box options' /></h2> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['side_arm']} |
||||||
|
id='mastodon-settings--side_arm' |
||||||
|
options={[ |
||||||
|
{ value: 'none', message: intl.formatMessage(messages.side_arm_none) }, |
||||||
|
{ value: 'direct', message: intl.formatMessage({ id: 'privacy.direct.short' }) }, |
||||||
|
{ value: 'private', message: intl.formatMessage({ id: 'privacy.private.short' }) }, |
||||||
|
{ value: 'unlisted', message: intl.formatMessage({ id: 'privacy.unlisted.short' }) }, |
||||||
|
{ value: 'public', message: intl.formatMessage({ id: 'privacy.public.short' }) }, |
||||||
|
]} |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.side_arm' defaultMessage='Secondary toot button:' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
), |
||||||
|
({ onChange, settings }) => ( |
||||||
|
<div className='glitch local-settings__page collapsed'> |
||||||
|
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'enabled']} |
||||||
|
id='mastodon-settings--collapsed-enabled' |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<section> |
||||||
|
<h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'all']} |
||||||
|
id='mastodon-settings--collapsed-auto-all' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'notifications']} |
||||||
|
id='mastodon-settings--collapsed-auto-notifications' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
dependsOnNot={[['collapsed', 'auto', 'all']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'lengthy']} |
||||||
|
id='mastodon-settings--collapsed-auto-lengthy' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
dependsOnNot={[['collapsed', 'auto', 'all']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'reblogs']} |
||||||
|
id='mastodon-settings--collapsed-auto-reblogs' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
dependsOnNot={[['collapsed', 'auto', 'all']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_reblogs' defaultMessage='Boosts' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'replies']} |
||||||
|
id='mastodon-settings--collapsed-auto-replies' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
dependsOnNot={[['collapsed', 'auto', 'all']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'auto', 'media']} |
||||||
|
id='mastodon-settings--collapsed-auto-media' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
dependsOnNot={[['collapsed', 'auto', 'all']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
</section> |
||||||
|
<section> |
||||||
|
<h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'backgrounds', 'user_backgrounds']} |
||||||
|
id='mastodon-settings--collapsed-user-backgrouns' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['collapsed', 'backgrounds', 'preview_images']} |
||||||
|
id='mastodon-settings--collapsed-preview-images' |
||||||
|
onChange={onChange} |
||||||
|
dependsOn={[['collapsed', 'enabled']]} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
), |
||||||
|
({ onChange, settings }) => ( |
||||||
|
<div className='glitch local-settings__page media'> |
||||||
|
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['media', 'letterbox']} |
||||||
|
id='mastodon-settings--media-letterbox' |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
<LocalSettingsPageItem |
||||||
|
settings={settings} |
||||||
|
item={['media', 'fullwidth']} |
||||||
|
id='mastodon-settings--media-fullwidth' |
||||||
|
onChange={onChange} |
||||||
|
> |
||||||
|
<FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' /> |
||||||
|
</LocalSettingsPageItem> |
||||||
|
</div> |
||||||
|
), |
||||||
|
]; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { pages } = this; |
||||||
|
const { index, intl, onChange, settings } = this.props; |
||||||
|
const CurrentPage = pages[index] || pages[0]; |
||||||
|
|
||||||
|
return <CurrentPage intl={intl} onChange={onChange} settings={settings} />; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,90 @@ |
|||||||
|
// Package imports
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
|
||||||
|
// Stylesheet imports
|
||||||
|
import './style.scss'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
export default class LocalSettingsPageItem extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
children: PropTypes.element.isRequired, |
||||||
|
dependsOn: PropTypes.array, |
||||||
|
dependsOnNot: PropTypes.array, |
||||||
|
id: PropTypes.string.isRequired, |
||||||
|
item: PropTypes.array.isRequired, |
||||||
|
onChange: PropTypes.func.isRequired, |
||||||
|
options: PropTypes.arrayOf(PropTypes.shape({ |
||||||
|
value: PropTypes.string.isRequired, |
||||||
|
message: PropTypes.string.isRequired, |
||||||
|
})), |
||||||
|
settings: ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
handleChange = e => { |
||||||
|
const { target } = e; |
||||||
|
const { item, onChange, options } = this.props; |
||||||
|
if (options && options.length > 0) onChange(item, target.value); |
||||||
|
else onChange(item, target.checked); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { handleChange } = this; |
||||||
|
const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props; |
||||||
|
let enabled = true; |
||||||
|
|
||||||
|
if (dependsOn) { |
||||||
|
for (let i = 0; i < dependsOn.length; i++) { |
||||||
|
enabled = enabled && settings.getIn(dependsOn[i]); |
||||||
|
} |
||||||
|
} |
||||||
|
if (dependsOnNot) { |
||||||
|
for (let i = 0; i < dependsOnNot.length; i++) { |
||||||
|
enabled = enabled && !settings.getIn(dependsOnNot[i]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (options && options.length > 0) { |
||||||
|
const currentValue = settings.getIn(item); |
||||||
|
const optionElems = options && options.length > 0 && options.map((opt) => ( |
||||||
|
<option |
||||||
|
key={opt.value} |
||||||
|
value={opt.value} |
||||||
|
> |
||||||
|
{opt.message} |
||||||
|
</option> |
||||||
|
)); |
||||||
|
return ( |
||||||
|
<label className='glitch local-settings__page__item' htmlFor={id}> |
||||||
|
<p>{children}</p> |
||||||
|
<p> |
||||||
|
<select |
||||||
|
id={id} |
||||||
|
disabled={!enabled} |
||||||
|
onBlur={handleChange} |
||||||
|
onChange={handleChange} |
||||||
|
value={currentValue} |
||||||
|
> |
||||||
|
{optionElems} |
||||||
|
</select> |
||||||
|
</p> |
||||||
|
</label> |
||||||
|
); |
||||||
|
} else return ( |
||||||
|
<label className='glitch local-settings__page__item' htmlFor={id}> |
||||||
|
<input |
||||||
|
id={id} |
||||||
|
type='checkbox' |
||||||
|
checked={settings.getIn(item)} |
||||||
|
onChange={handleChange} |
||||||
|
disabled={!enabled} |
||||||
|
/> |
||||||
|
{children} |
||||||
|
</label> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
@import 'styles/mastodon/variables'; |
||||||
|
|
||||||
|
.glitch.local-settings__page__item { |
||||||
|
select { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
@import 'styles/mastodon/variables'; |
||||||
|
|
||||||
|
.glitch.local-settings__page { |
||||||
|
display: block; |
||||||
|
flex: auto; |
||||||
|
padding: 15px 20px 15px 20px; |
||||||
|
width: 360px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
@ -0,0 +1,34 @@ |
|||||||
|
@import 'styles/mastodon/variables'; |
||||||
|
|
||||||
|
.glitch.local-settings { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
background: $ui-secondary-color; |
||||||
|
color: $ui-base-color; |
||||||
|
border-radius: 8px; |
||||||
|
height: 80vh; |
||||||
|
width: 80vw; |
||||||
|
max-width: 740px; |
||||||
|
max-height: 450px; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
label { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 24px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,48 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<NotificationContainer>` |
||||||
|
========================= |
||||||
|
|
||||||
|
This container connects `<Notification>`s to the Redux store. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import Notification from '.'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const mapStateToProps = (state, props) => { |
||||||
|
// replace account id with object
|
||||||
|
let leNotif = props.notification.set('account', state.getIn(['accounts', props.notification.get('account')])); |
||||||
|
|
||||||
|
// populate markedForDelete from state - is mysteriously lost somewhere
|
||||||
|
for (let n of state.getIn(['notifications', 'items'])) { |
||||||
|
if (n.get('id') === props.notification.get('id')) { |
||||||
|
leNotif = leNotif.set('markedForDelete', n.get('markedForDelete')); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ({ |
||||||
|
notification: leNotif, |
||||||
|
settings: state.get('local_settings'), |
||||||
|
notifCleaning: state.getIn(['notifications', 'cleaningMode']), |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Notification); |
@ -0,0 +1,72 @@ |
|||||||
|
// `<NotificationFollow>`
|
||||||
|
// ======================
|
||||||
|
|
||||||
|
// * * * * * * * //
|
||||||
|
|
||||||
|
// Imports
|
||||||
|
// -------
|
||||||
|
|
||||||
|
// Package imports.
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { FormattedMessage } from 'react-intl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports.
|
||||||
|
import Permalink from '../../../mastodon/components/permalink'; |
||||||
|
import AccountContainer from '../../../mastodon/containers/account_container'; |
||||||
|
|
||||||
|
// Our imports.
|
||||||
|
import NotificationOverlayContainer from '../notification/overlay/container'; |
||||||
|
|
||||||
|
// * * * * * * * //
|
||||||
|
|
||||||
|
// Implementation
|
||||||
|
// --------------
|
||||||
|
|
||||||
|
export default class NotificationFollow extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
id : PropTypes.string.isRequired, |
||||||
|
account : ImmutablePropTypes.map.isRequired, |
||||||
|
notification : ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
render () { |
||||||
|
const { account, notification } = this.props; |
||||||
|
|
||||||
|
// Links to the display name.
|
||||||
|
const displayName = account.get('display_name_html') || account.get('username'); |
||||||
|
const link = ( |
||||||
|
<Permalink |
||||||
|
className='notification__display-name' |
||||||
|
href={account.get('url')} |
||||||
|
title={account.get('acct')} |
||||||
|
to={`/accounts/${account.get('id')}`} |
||||||
|
dangerouslySetInnerHTML={{ __html: displayName }} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
// Renders.
|
||||||
|
return ( |
||||||
|
<div className='notification notification-follow'> |
||||||
|
<div className='notification__message'> |
||||||
|
<div className='notification__favourite-icon-wrapper'> |
||||||
|
<i className='fa fa-fw fa-user-plus' /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<FormattedMessage |
||||||
|
id='notification.follow' |
||||||
|
defaultMessage='{name} followed you' |
||||||
|
values={{ name: link }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<AccountContainer id={account.get('id')} withNote={false} /> |
||||||
|
<NotificationOverlayContainer notification={notification} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,82 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import StatusContainer from '../status/container'; |
||||||
|
import NotificationFollow from './follow'; |
||||||
|
|
||||||
|
export default class Notification extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
notification: ImmutablePropTypes.map.isRequired, |
||||||
|
settings: ImmutablePropTypes.map.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
renderFollow (notification) { |
||||||
|
return ( |
||||||
|
<NotificationFollow |
||||||
|
id={notification.get('id')} |
||||||
|
account={notification.get('account')} |
||||||
|
notification={notification} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
renderMention (notification) { |
||||||
|
return ( |
||||||
|
<StatusContainer |
||||||
|
id={notification.get('status')} |
||||||
|
notification={notification} |
||||||
|
withDismiss |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
renderFavourite (notification) { |
||||||
|
return ( |
||||||
|
<StatusContainer |
||||||
|
id={notification.get('status')} |
||||||
|
account={notification.get('account')} |
||||||
|
prepend='favourite' |
||||||
|
muted |
||||||
|
notification={notification} |
||||||
|
withDismiss |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
renderReblog (notification) { |
||||||
|
return ( |
||||||
|
<StatusContainer |
||||||
|
id={notification.get('status')} |
||||||
|
account={notification.get('account')} |
||||||
|
prepend='reblog' |
||||||
|
muted |
||||||
|
notification={notification} |
||||||
|
withDismiss |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { notification } = this.props; |
||||||
|
|
||||||
|
switch(notification.get('type')) { |
||||||
|
case 'follow': |
||||||
|
return this.renderFollow(notification); |
||||||
|
case 'mention': |
||||||
|
return this.renderMention(notification); |
||||||
|
case 'favourite': |
||||||
|
return this.renderFavourite(notification); |
||||||
|
case 'reblog': |
||||||
|
return this.renderReblog(notification); |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,49 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<NotificationOverlayContainer>` |
||||||
|
========================= |
||||||
|
|
||||||
|
This container connects `<NotificationOverlay>`s to the Redux store. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import NotificationOverlay from './notification_overlay'; |
||||||
|
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Dispatch mapping: |
||||||
|
----------------- |
||||||
|
|
||||||
|
The `mapDispatchToProps()` function maps dispatches to our store to the |
||||||
|
various props of our component. We only need to provide a dispatch for |
||||||
|
deleting notifications. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({ |
||||||
|
onMarkForDelete(id, yes) { |
||||||
|
dispatch(markNotificationForDelete(id, yes)); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
show: state.getIn(['notifications', 'cleaningMode']), |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay); |
@ -0,0 +1,61 @@ |
|||||||
|
/** |
||||||
|
* Notification overlay |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class NotificationOverlay extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
notification : ImmutablePropTypes.map.isRequired, |
||||||
|
onMarkForDelete : PropTypes.func.isRequired, |
||||||
|
show : PropTypes.bool.isRequired, |
||||||
|
intl : PropTypes.object.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
onToggleMark = () => { |
||||||
|
const mark = !this.props.notification.get('markedForDelete'); |
||||||
|
const id = this.props.notification.get('id'); |
||||||
|
this.props.onMarkForDelete(id, mark); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { notification, show, intl } = this.props; |
||||||
|
|
||||||
|
const active = notification.get('markedForDelete'); |
||||||
|
const label = intl.formatMessage(messages.markForDeletion); |
||||||
|
|
||||||
|
return show ? ( |
||||||
|
<div |
||||||
|
aria-label={label} |
||||||
|
role='checkbox' |
||||||
|
aria-checked={active} |
||||||
|
tabIndex={0} |
||||||
|
className={`notification__dismiss-overlay ${active ? 'active' : ''}`} |
||||||
|
onClick={this.onToggleMark} |
||||||
|
> |
||||||
|
<div className='wrappy'> |
||||||
|
<div className='ckbox' aria-hidden='true' title={label}> |
||||||
|
{active ? (<i className='fa fa-check' />) : ''} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,187 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import RelativeTimestamp from '../../../mastodon/components/relative_timestamp'; |
||||||
|
import IconButton from '../../../mastodon/components/icon_button'; |
||||||
|
import DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container'; |
||||||
|
import { me } from '../../../mastodon/initial_state'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
delete: { id: 'status.delete', defaultMessage: 'Delete' }, |
||||||
|
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' }, |
||||||
|
share: { id: 'status.share', defaultMessage: 'Share' }, |
||||||
|
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' }, |
||||||
|
reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, |
||||||
|
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' }, |
||||||
|
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, |
||||||
|
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' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class StatusActionBar extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
router: PropTypes.object, |
||||||
|
}; |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
status: ImmutablePropTypes.map.isRequired, |
||||||
|
onReply: PropTypes.func, |
||||||
|
onFavourite: PropTypes.func, |
||||||
|
onReblog: 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, |
||||||
|
intl: PropTypes.object.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', |
||||||
|
] |
||||||
|
|
||||||
|
handleReplyClick = () => { |
||||||
|
this.props.onReply(this.props.status, this.context.router.history); |
||||||
|
} |
||||||
|
|
||||||
|
handleShareClick = () => { |
||||||
|
navigator.share({ |
||||||
|
text: this.props.status.get('search_index'), |
||||||
|
url: this.props.status.get('url'), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
handleFavouriteClick = () => { |
||||||
|
this.props.onFavourite(this.props.status); |
||||||
|
} |
||||||
|
|
||||||
|
handleReblogClick = (e) => { |
||||||
|
this.props.onReblog(this.props.status, e); |
||||||
|
} |
||||||
|
|
||||||
|
handleDeleteClick = () => { |
||||||
|
this.props.onDelete(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.get('account')); |
||||||
|
} |
||||||
|
|
||||||
|
handleOpen = () => { |
||||||
|
this.context.router.history.push(`/statuses/${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); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { status, intl, withDismiss } = this.props; |
||||||
|
|
||||||
|
const mutingConversation = status.get('muted'); |
||||||
|
const anonymousAccess = !me; |
||||||
|
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); |
||||||
|
|
||||||
|
let menu = []; |
||||||
|
let reblogIcon = 'retweet'; |
||||||
|
let replyIcon; |
||||||
|
let replyTitle; |
||||||
|
|
||||||
|
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); |
||||||
|
|
||||||
|
if (publicStatus) { |
||||||
|
menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); |
||||||
|
} |
||||||
|
|
||||||
|
menu.push(null); |
||||||
|
|
||||||
|
if (status.getIn(['account', 'id']) === me || withDismiss) { |
||||||
|
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); |
||||||
|
menu.push(null); |
||||||
|
} |
||||||
|
|
||||||
|
if (status.getIn(['account', 'id']) === me) { |
||||||
|
if (publicStatus) { |
||||||
|
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); |
||||||
|
} |
||||||
|
|
||||||
|
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); |
||||||
|
} else { |
||||||
|
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); |
||||||
|
menu.push(null); |
||||||
|
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 }); |
||||||
|
} |
||||||
|
|
||||||
|
if (status.get('in_reply_to_id', null) === null) { |
||||||
|
replyIcon = 'reply'; |
||||||
|
replyTitle = intl.formatMessage(messages.reply); |
||||||
|
} else { |
||||||
|
replyIcon = 'reply-all'; |
||||||
|
replyTitle = intl.formatMessage(messages.replyAll); |
||||||
|
} |
||||||
|
|
||||||
|
const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && ( |
||||||
|
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} /> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='status__action-bar'> |
||||||
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> |
||||||
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> |
||||||
|
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> |
||||||
|
{shareButton} |
||||||
|
|
||||||
|
<div className='status__action-bar-dropdown'> |
||||||
|
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,263 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<StatusContainer>` |
||||||
|
=================== |
||||||
|
|
||||||
|
Original file by @gargron@mastodon.social et al as part of |
||||||
|
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code |
||||||
|
detecting reblogs has been moved here from <Status>. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
import { |
||||||
|
defineMessages, |
||||||
|
injectIntl, |
||||||
|
FormattedMessage, |
||||||
|
} from 'react-intl'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { makeGetStatus } from '../../../mastodon/selectors'; |
||||||
|
import { |
||||||
|
replyCompose, |
||||||
|
mentionCompose, |
||||||
|
} from '../../../mastodon/actions/compose'; |
||||||
|
import { |
||||||
|
reblog, |
||||||
|
favourite, |
||||||
|
unreblog, |
||||||
|
unfavourite, |
||||||
|
pin, |
||||||
|
unpin, |
||||||
|
} from '../../../mastodon/actions/interactions'; |
||||||
|
import { blockAccount } from '../../../mastodon/actions/accounts'; |
||||||
|
import { initMuteModal } from '../../../mastodon/actions/mutes'; |
||||||
|
import { |
||||||
|
muteStatus, |
||||||
|
unmuteStatus, |
||||||
|
deleteStatus, |
||||||
|
} from '../../../mastodon/actions/statuses'; |
||||||
|
import { initReport } from '../../../mastodon/actions/reports'; |
||||||
|
import { openModal } from '../../../mastodon/actions/modal'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import Status from '.'; |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Inital setup: |
||||||
|
------------- |
||||||
|
|
||||||
|
The `messages` constant is used to define any messages that we will |
||||||
|
need in our component. In our case, these are the various confirmation |
||||||
|
messages used with statuses. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
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?', |
||||||
|
}, |
||||||
|
blockConfirm : { |
||||||
|
id : 'confirmations.block.confirm', |
||||||
|
defaultMessage : 'Block', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
State mapping: |
||||||
|
-------------- |
||||||
|
|
||||||
|
The `mapStateToProps()` function maps various state properties to the |
||||||
|
props of our component. We wrap this in a `makeMapStateToProps()` |
||||||
|
function to give us closure and preserve `getStatus()` across function |
||||||
|
calls. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const makeMapStateToProps = () => { |
||||||
|
const getStatus = makeGetStatus(); |
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => { |
||||||
|
|
||||||
|
let status = getStatus(state, ownProps.id); |
||||||
|
|
||||||
|
if(status === null) { |
||||||
|
console.error(`ERROR! NULL STATUS! ${ownProps.id}`); |
||||||
|
// work-around: find first good status
|
||||||
|
for (let k of state.get('statuses').keys()) { |
||||||
|
status = getStatus(state, k); |
||||||
|
if (status !== null) break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let reblogStatus = status.get('reblog', null); |
||||||
|
let account = undefined; |
||||||
|
let prepend = undefined; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Here we process reblogs. If our status is a reblog, then we create a |
||||||
|
`prependMessage` to pass along to our `<Status>` along with the |
||||||
|
reblogger's `account`, and set `coreStatus` (the one we will actually |
||||||
|
render) to the status which has been reblogged. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if (reblogStatus !== null && typeof reblogStatus === 'object') { |
||||||
|
account = status.get('account'); |
||||||
|
status = reblogStatus; |
||||||
|
prepend = 'reblogged_by'; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Here are the props we pass to `<Status>`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
return { |
||||||
|
status : status, |
||||||
|
account : account || ownProps.account, |
||||||
|
settings : state.get('local_settings'), |
||||||
|
prepend : prepend || ownProps.prepend, |
||||||
|
reblogModal : state.getIn(['meta', 'boost_modal']), |
||||||
|
deleteModal : state.getIn(['meta', 'delete_modal']), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
return mapStateToProps; |
||||||
|
}; |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Dispatch mapping: |
||||||
|
----------------- |
||||||
|
|
||||||
|
The `mapDispatchToProps()` function maps dispatches to our store to the |
||||||
|
various props of our component. We need to provide dispatches for all |
||||||
|
of the things you can do with a status: reply, reblog, favourite, et |
||||||
|
cetera. |
||||||
|
|
||||||
|
For a few of these dispatches, we open up confirmation modals; the rest |
||||||
|
just immediately execute their corresponding actions. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, { intl }) => ({ |
||||||
|
|
||||||
|
onReply (status, router) { |
||||||
|
dispatch(replyCompose(status, router)); |
||||||
|
}, |
||||||
|
|
||||||
|
onModalReblog (status) { |
||||||
|
dispatch(reblog(status)); |
||||||
|
}, |
||||||
|
|
||||||
|
onReblog (status, e) { |
||||||
|
if (status.get('reblogged')) { |
||||||
|
dispatch(unreblog(status)); |
||||||
|
} else { |
||||||
|
if (e.shiftKey || !this.reblogModal) { |
||||||
|
this.onModalReblog(status); |
||||||
|
} else { |
||||||
|
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog })); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onFavourite (status) { |
||||||
|
if (status.get('favourited')) { |
||||||
|
dispatch(unfavourite(status)); |
||||||
|
} else { |
||||||
|
dispatch(favourite(status)); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onPin (status) { |
||||||
|
if (status.get('pinned')) { |
||||||
|
dispatch(unpin(status)); |
||||||
|
} else { |
||||||
|
dispatch(pin(status)); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onEmbed (status) { |
||||||
|
dispatch(openModal('EMBED', { url: status.get('url') })); |
||||||
|
}, |
||||||
|
|
||||||
|
onDelete (status) { |
||||||
|
if (!this.deleteModal) { |
||||||
|
dispatch(deleteStatus(status.get('id'))); |
||||||
|
} else { |
||||||
|
dispatch(openModal('CONFIRM', { |
||||||
|
message: intl.formatMessage(messages.deleteMessage), |
||||||
|
confirm: intl.formatMessage(messages.deleteConfirm), |
||||||
|
onConfirm: () => dispatch(deleteStatus(status.get('id'))), |
||||||
|
})); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onMention (account, router) { |
||||||
|
dispatch(mentionCompose(account, router)); |
||||||
|
}, |
||||||
|
|
||||||
|
onOpenMedia (media, index) { |
||||||
|
dispatch(openModal('MEDIA', { media, index })); |
||||||
|
}, |
||||||
|
|
||||||
|
onOpenVideo (media, time) { |
||||||
|
dispatch(openModal('VIDEO', { media, time })); |
||||||
|
}, |
||||||
|
|
||||||
|
onBlock (account) { |
||||||
|
dispatch(openModal('CONFIRM', { |
||||||
|
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, |
||||||
|
confirm: intl.formatMessage(messages.blockConfirm), |
||||||
|
onConfirm: () => dispatch(blockAccount(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'))); |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default injectIntl( |
||||||
|
connect(makeMapStateToProps, mapDispatchToProps)(Status) |
||||||
|
); |
@ -0,0 +1,241 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { FormattedMessage } from 'react-intl'; |
||||||
|
import classnames from 'classnames'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { isRtl } from '../../../mastodon/rtl'; |
||||||
|
import Permalink from '../../../mastodon/components/permalink'; |
||||||
|
|
||||||
|
export default class StatusContent extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
status: ImmutablePropTypes.map.isRequired, |
||||||
|
expanded: PropTypes.oneOf([true, false, null]), |
||||||
|
setExpansion: PropTypes.func, |
||||||
|
onHeightUpdate: PropTypes.func, |
||||||
|
media: PropTypes.element, |
||||||
|
mediaIcon: PropTypes.string, |
||||||
|
parseClick: PropTypes.func, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
hidden: true, |
||||||
|
}; |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
const node = this.node; |
||||||
|
const links = node.querySelectorAll('a'); |
||||||
|
|
||||||
|
for (let i = 0; i < links.length; ++i) { |
||||||
|
let link = links[i]; |
||||||
|
let mention = this.props.status.get('mentions').find(item => link.href === item.get('url')); |
||||||
|
|
||||||
|
if (mention) { |
||||||
|
link.addEventListener('click', this.onMentionClick.bind(this, mention), false); |
||||||
|
link.setAttribute('title', mention.get('acct')); |
||||||
|
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) { |
||||||
|
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false); |
||||||
|
} else { |
||||||
|
link.addEventListener('click', this.onLinkClick.bind(this), false); |
||||||
|
link.setAttribute('title', link.href); |
||||||
|
} |
||||||
|
|
||||||
|
link.setAttribute('target', '_blank'); |
||||||
|
link.setAttribute('rel', 'noopener'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentDidUpdate () { |
||||||
|
if (this.props.onHeightUpdate) { |
||||||
|
this.props.onHeightUpdate(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onLinkClick = (e) => { |
||||||
|
if (this.props.expanded === false) { |
||||||
|
if (this.props.parseClick) this.props.parseClick(e); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMentionClick = (mention, e) => { |
||||||
|
if (this.props.parseClick) { |
||||||
|
this.props.parseClick(e, `/accounts/${mention.get('id')}`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onHashtagClick = (hashtag, e) => { |
||||||
|
hashtag = hashtag.replace(/^#/, '').toLowerCase(); |
||||||
|
|
||||||
|
if (this.props.parseClick) { |
||||||
|
this.props.parseClick(e, `/timelines/tag/${hashtag}`); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleMouseDown = (e) => { |
||||||
|
this.startXY = [e.clientX, e.clientY]; |
||||||
|
} |
||||||
|
|
||||||
|
handleMouseUp = (e) => { |
||||||
|
const { parseClick } = this.props; |
||||||
|
|
||||||
|
if (!this.startXY) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const [ startX, startY ] = this.startXY; |
||||||
|
const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]; |
||||||
|
|
||||||
|
if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (deltaX + deltaY < 5 && e.button === 0 && parseClick) { |
||||||
|
parseClick(e); |
||||||
|
} |
||||||
|
|
||||||
|
this.startXY = null; |
||||||
|
} |
||||||
|
|
||||||
|
handleSpoilerClick = (e) => { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
if (this.props.setExpansion) { |
||||||
|
this.props.setExpansion(this.props.expanded ? null : true); |
||||||
|
} else { |
||||||
|
this.setState({ hidden: !this.state.hidden }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setRef = (c) => { |
||||||
|
this.node = c; |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
status, |
||||||
|
media, |
||||||
|
mediaIcon, |
||||||
|
parseClick, |
||||||
|
disabled, |
||||||
|
} = this.props; |
||||||
|
|
||||||
|
const hidden = ( |
||||||
|
this.props.setExpansion ? |
||||||
|
!this.props.expanded : |
||||||
|
this.state.hidden |
||||||
|
); |
||||||
|
|
||||||
|
const content = { __html: status.get('contentHtml') }; |
||||||
|
const spoilerContent = { __html: status.get('spoilerHtml') }; |
||||||
|
const directionStyle = { direction: 'ltr' }; |
||||||
|
const classNames = classnames('status__content', { |
||||||
|
'status__content--with-action': parseClick && !disabled, |
||||||
|
}); |
||||||
|
|
||||||
|
if (isRtl(status.get('search_index'))) { |
||||||
|
directionStyle.direction = 'rtl'; |
||||||
|
} |
||||||
|
|
||||||
|
if (status.get('spoiler_text').length > 0) { |
||||||
|
let mentionsPlaceholder = ''; |
||||||
|
|
||||||
|
const mentionLinks = status.get('mentions').map(item => ( |
||||||
|
<Permalink |
||||||
|
to={`/accounts/${item.get('id')}`} |
||||||
|
href={item.get('url')} |
||||||
|
key={item.get('id')} |
||||||
|
className='mention' |
||||||
|
> |
||||||
|
@<span>{item.get('username')}</span> |
||||||
|
</Permalink> |
||||||
|
)).reduce((aggregate, item) => [...aggregate, item, ' '], []); |
||||||
|
|
||||||
|
const toggleText = hidden ? [ |
||||||
|
<FormattedMessage |
||||||
|
id='status.show_more' |
||||||
|
defaultMessage='Show more' |
||||||
|
key='0' |
||||||
|
/>, |
||||||
|
mediaIcon ? ( |
||||||
|
<i |
||||||
|
className={ |
||||||
|
`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon` |
||||||
|
} |
||||||
|
aria-hidden='true' |
||||||
|
key='1' |
||||||
|
/> |
||||||
|
) : null, |
||||||
|
] : [ |
||||||
|
<FormattedMessage |
||||||
|
id='status.show_less' |
||||||
|
defaultMessage='Show less' |
||||||
|
key='0' |
||||||
|
/>, |
||||||
|
]; |
||||||
|
|
||||||
|
if (hidden) { |
||||||
|
mentionsPlaceholder = <div>{mentionLinks}</div>; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classNames}> |
||||||
|
<p |
||||||
|
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} |
||||||
|
onMouseDown={this.handleMouseDown} |
||||||
|
onMouseUp={this.handleMouseUp} |
||||||
|
> |
||||||
|
<span dangerouslySetInnerHTML={spoilerContent} /> |
||||||
|
{' '} |
||||||
|
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> |
||||||
|
{toggleText} |
||||||
|
</button> |
||||||
|
</p> |
||||||
|
|
||||||
|
{mentionsPlaceholder} |
||||||
|
|
||||||
|
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}> |
||||||
|
<div |
||||||
|
ref={this.setRef} |
||||||
|
style={directionStyle} |
||||||
|
onMouseDown={this.handleMouseDown} |
||||||
|
onMouseUp={this.handleMouseUp} |
||||||
|
dangerouslySetInnerHTML={content} |
||||||
|
/> |
||||||
|
{media} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} else if (parseClick) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={classNames} |
||||||
|
style={directionStyle} |
||||||
|
> |
||||||
|
<div |
||||||
|
ref={this.setRef} |
||||||
|
onMouseDown={this.handleMouseDown} |
||||||
|
onMouseUp={this.handleMouseUp} |
||||||
|
dangerouslySetInnerHTML={content} |
||||||
|
/> |
||||||
|
{media} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} else { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className='status__content' |
||||||
|
style={directionStyle} |
||||||
|
> |
||||||
|
<div ref={this.setRef} dangerouslySetInnerHTML={content} /> |
||||||
|
{media} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,79 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import IconButton from '../../../../mastodon/components/icon_button'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import StatusGalleryItem from './item'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class StatusGallery extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
sensitive: PropTypes.bool, |
||||||
|
media: ImmutablePropTypes.list.isRequired, |
||||||
|
letterbox: PropTypes.bool, |
||||||
|
fullwidth: PropTypes.bool, |
||||||
|
height: PropTypes.number.isRequired, |
||||||
|
onOpenMedia: PropTypes.func.isRequired, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
autoPlayGif: PropTypes.bool.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
visible: !this.props.sensitive, |
||||||
|
}; |
||||||
|
|
||||||
|
handleOpen = () => { |
||||||
|
this.setState({ visible: !this.state.visible }); |
||||||
|
} |
||||||
|
|
||||||
|
handleClick = (index) => { |
||||||
|
this.props.onOpenMedia(this.props.media, index); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { media, intl, sensitive, letterbox, fullwidth } = this.props; |
||||||
|
|
||||||
|
let children; |
||||||
|
|
||||||
|
if (!this.state.visible) { |
||||||
|
let warning; |
||||||
|
|
||||||
|
if (sensitive) { |
||||||
|
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />; |
||||||
|
} else { |
||||||
|
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />; |
||||||
|
} |
||||||
|
|
||||||
|
children = ( |
||||||
|
<div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}> |
||||||
|
<span className='media-spoiler__warning'>{warning}</span> |
||||||
|
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} else { |
||||||
|
const size = media.take(4).size; |
||||||
|
children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}> |
||||||
|
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}> |
||||||
|
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
{children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,158 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { isIOS } from '../../../../mastodon/is_mobile'; |
||||||
|
|
||||||
|
export default class StatusGalleryItem extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
attachment: ImmutablePropTypes.map.isRequired, |
||||||
|
index: PropTypes.number.isRequired, |
||||||
|
size: PropTypes.number.isRequired, |
||||||
|
letterbox: PropTypes.bool, |
||||||
|
onClick: PropTypes.func.isRequired, |
||||||
|
autoPlayGif: PropTypes.bool.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
handleMouseEnter = (e) => { |
||||||
|
if (this.hoverToPlay()) { |
||||||
|
e.target.play(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleMouseLeave = (e) => { |
||||||
|
if (this.hoverToPlay()) { |
||||||
|
e.target.pause(); |
||||||
|
e.target.currentTime = 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
hoverToPlay () { |
||||||
|
const { attachment, autoPlayGif } = this.props; |
||||||
|
return !autoPlayGif && attachment.get('type') === 'gifv'; |
||||||
|
} |
||||||
|
|
||||||
|
handleClick = (e) => { |
||||||
|
const { index, onClick } = this.props; |
||||||
|
|
||||||
|
if (e.button === 0) { |
||||||
|
e.preventDefault(); |
||||||
|
onClick(index); |
||||||
|
} |
||||||
|
|
||||||
|
e.stopPropagation(); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { attachment, index, size, letterbox } = this.props; |
||||||
|
|
||||||
|
let width = 50; |
||||||
|
let height = 100; |
||||||
|
let top = 'auto'; |
||||||
|
let left = 'auto'; |
||||||
|
let bottom = 'auto'; |
||||||
|
let right = 'auto'; |
||||||
|
|
||||||
|
if (size === 1) { |
||||||
|
width = 100; |
||||||
|
} |
||||||
|
|
||||||
|
if (size === 4 || (size === 3 && index > 0)) { |
||||||
|
height = 50; |
||||||
|
} |
||||||
|
|
||||||
|
if (size === 2) { |
||||||
|
if (index === 0) { |
||||||
|
right = '2px'; |
||||||
|
} else { |
||||||
|
left = '2px'; |
||||||
|
} |
||||||
|
} else if (size === 3) { |
||||||
|
if (index === 0) { |
||||||
|
right = '2px'; |
||||||
|
} else if (index > 0) { |
||||||
|
left = '2px'; |
||||||
|
} |
||||||
|
|
||||||
|
if (index === 1) { |
||||||
|
bottom = '2px'; |
||||||
|
} else if (index > 1) { |
||||||
|
top = '2px'; |
||||||
|
} |
||||||
|
} else if (size === 4) { |
||||||
|
if (index === 0 || index === 2) { |
||||||
|
right = '2px'; |
||||||
|
} |
||||||
|
|
||||||
|
if (index === 1 || index === 3) { |
||||||
|
left = '2px'; |
||||||
|
} |
||||||
|
|
||||||
|
if (index < 2) { |
||||||
|
bottom = '2px'; |
||||||
|
} else { |
||||||
|
top = '2px'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let thumbnail = ''; |
||||||
|
|
||||||
|
if (attachment.get('type') === 'image') { |
||||||
|
const previewUrl = attachment.get('preview_url'); |
||||||
|
const previewWidth = attachment.getIn(['meta', 'small', 'width']); |
||||||
|
|
||||||
|
const originalUrl = attachment.get('url'); |
||||||
|
const originalWidth = attachment.getIn(['meta', 'original', 'width']); |
||||||
|
|
||||||
|
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`; |
||||||
|
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`; |
||||||
|
|
||||||
|
thumbnail = ( |
||||||
|
<a |
||||||
|
className='media-gallery__item-thumbnail' |
||||||
|
href={attachment.get('remote_url') || originalUrl} |
||||||
|
onClick={this.handleClick} |
||||||
|
target='_blank' |
||||||
|
> |
||||||
|
<img |
||||||
|
className={letterbox ? 'letterbox' : ''} |
||||||
|
src={previewUrl} srcSet={srcSet} |
||||||
|
sizes={sizes} |
||||||
|
alt={attachment.get('description')} |
||||||
|
title={attachment.get('description')} |
||||||
|
/> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} else if (attachment.get('type') === 'gifv') { |
||||||
|
const autoPlay = !isIOS() && this.props.autoPlayGif; |
||||||
|
|
||||||
|
thumbnail = ( |
||||||
|
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}> |
||||||
|
<video |
||||||
|
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`} |
||||||
|
role='application' |
||||||
|
src={attachment.get('url')} |
||||||
|
onClick={this.handleClick} |
||||||
|
onMouseEnter={this.handleMouseEnter} |
||||||
|
onMouseLeave={this.handleMouseLeave} |
||||||
|
autoPlay={autoPlay} |
||||||
|
loop |
||||||
|
muted |
||||||
|
/> |
||||||
|
|
||||||
|
<span className='media-gallery__gifv__label'>GIF</span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> |
||||||
|
{thumbnail} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,146 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<StatusHeader>` |
||||||
|
================ |
||||||
|
|
||||||
|
Originally a part of `<Status>`, but extracted into a separate |
||||||
|
component for better documentation and maintainance by |
||||||
|
@kibi@glitch.social as a part of glitch-soc/mastodon. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * //
|
||||||
|
|
||||||
|
// Imports
|
||||||
|
// -------
|
||||||
|
|
||||||
|
// Package imports.
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
|
||||||
|
// Mastodon imports.
|
||||||
|
import Avatar from '../../../mastodon/components/avatar'; |
||||||
|
import AvatarOverlay from '../../../mastodon/components/avatar_overlay'; |
||||||
|
import DisplayName from '../../../mastodon/components/display_name'; |
||||||
|
import IconButton from '../../../mastodon/components/icon_button'; |
||||||
|
import VisibilityIcon from './visibility_icon'; |
||||||
|
|
||||||
|
// * * * * * * * //
|
||||||
|
|
||||||
|
// Initial setup
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
// Messages for use with internationalization stuff.
|
||||||
|
const messages = defineMessages({ |
||||||
|
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, |
||||||
|
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, |
||||||
|
public: { id: 'privacy.public.short', defaultMessage: 'Public' }, |
||||||
|
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, |
||||||
|
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, |
||||||
|
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, |
||||||
|
}); |
||||||
|
|
||||||
|
// * * * * * * * //
|
||||||
|
|
||||||
|
// The component
|
||||||
|
// -------------
|
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class StatusHeader extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
status: ImmutablePropTypes.map.isRequired, |
||||||
|
friend: ImmutablePropTypes.map, |
||||||
|
mediaIcon: PropTypes.string, |
||||||
|
collapsible: PropTypes.bool, |
||||||
|
collapsed: PropTypes.bool, |
||||||
|
parseClick: PropTypes.func.isRequired, |
||||||
|
setExpansion: PropTypes.func.isRequired, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
// Handles clicks on collapsed button
|
||||||
|
handleCollapsedClick = (e) => { |
||||||
|
const { collapsed, setExpansion } = this.props; |
||||||
|
if (e.button === 0) { |
||||||
|
setExpansion(collapsed ? null : false); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Handles clicks on account name/image
|
||||||
|
handleAccountClick = (e) => { |
||||||
|
const { status, parseClick } = this.props; |
||||||
|
parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`); |
||||||
|
} |
||||||
|
|
||||||
|
// Rendering.
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
status, |
||||||
|
friend, |
||||||
|
mediaIcon, |
||||||
|
collapsible, |
||||||
|
collapsed, |
||||||
|
intl, |
||||||
|
} = this.props; |
||||||
|
|
||||||
|
const account = status.get('account'); |
||||||
|
|
||||||
|
return ( |
||||||
|
<header className='status__info'> |
||||||
|
<a |
||||||
|
href={account.get('url')} |
||||||
|
target='_blank' |
||||||
|
className='status__avatar' |
||||||
|
onClick={this.handleAccountClick} |
||||||
|
> |
||||||
|
{ |
||||||
|
friend ? ( |
||||||
|
<AvatarOverlay account={account} friend={friend} /> |
||||||
|
) : ( |
||||||
|
<Avatar account={account} size={48} /> |
||||||
|
) |
||||||
|
} |
||||||
|
</a> |
||||||
|
<a |
||||||
|
href={account.get('url')} |
||||||
|
target='_blank' |
||||||
|
className='status__display-name' |
||||||
|
onClick={this.handleAccountClick} |
||||||
|
> |
||||||
|
<DisplayName account={account} /> |
||||||
|
</a> |
||||||
|
<div className='status__info__icons'> |
||||||
|
{mediaIcon ? ( |
||||||
|
<i |
||||||
|
className={`fa fa-fw fa-${mediaIcon}`} |
||||||
|
aria-hidden='true' |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
{( |
||||||
|
<VisibilityIcon visibility={status.get('visibility')} /> |
||||||
|
)} |
||||||
|
{collapsible ? ( |
||||||
|
<IconButton |
||||||
|
className='status__collapse-button' |
||||||
|
animate flip |
||||||
|
active={collapsed} |
||||||
|
title={ |
||||||
|
collapsed ? |
||||||
|
intl.formatMessage(messages.uncollapse) : |
||||||
|
intl.formatMessage(messages.collapse) |
||||||
|
} |
||||||
|
icon='angle-double-up' |
||||||
|
onClick={this.handleCollapsedClick} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
|
||||||
|
</header> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,760 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<Status>` |
||||||
|
========== |
||||||
|
|
||||||
|
Original file by @gargron@mastodon.social et al as part of |
||||||
|
tootsuite/mastodon. *Heavily* rewritten (and documented!) by |
||||||
|
@kibi@glitch.social as a part of glitch-soc/mastodon. The following |
||||||
|
features have been added: |
||||||
|
|
||||||
|
- Better separating the "guts" of statuses from their wrapper(s) |
||||||
|
- Collapsing statuses |
||||||
|
- Moving images inside of CWs |
||||||
|
|
||||||
|
A number of aspects of this original file have been split off into |
||||||
|
their own components for better maintainance; for these, see: |
||||||
|
|
||||||
|
- <StatusHeader> |
||||||
|
- <StatusPrepend> |
||||||
|
|
||||||
|
…And, of course, the other <Status>-related components as well. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task'; |
||||||
|
import { autoPlayGif } from '../../../mastodon/initial_state'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import StatusPrepend from './prepend'; |
||||||
|
import StatusHeader from './header'; |
||||||
|
import StatusContent from './content'; |
||||||
|
import StatusActionBar from './action_bar'; |
||||||
|
import StatusGallery from './gallery'; |
||||||
|
import StatusPlayer from './player'; |
||||||
|
import NotificationOverlayContainer from '../notification/overlay/container'; |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
The `<Status>` component: |
||||||
|
------------------------- |
||||||
|
|
||||||
|
The `<Status>` component is a container for statuses. It consists of a |
||||||
|
few parts: |
||||||
|
|
||||||
|
- The `<StatusPrepend>`, which contains tangential information about |
||||||
|
the status, such as who reblogged it. |
||||||
|
- The `<StatusHeader>`, which contains the avatar and username of the |
||||||
|
status author, as well as a media icon and the "collapse" toggle. |
||||||
|
- The `<StatusContent>`, which contains the content of the status. |
||||||
|
- The `<StatusActionBar>`, which provides actions to be performed |
||||||
|
on statuses, like reblogging or sending a reply. |
||||||
|
|
||||||
|
### Context |
||||||
|
|
||||||
|
- __`router` (`PropTypes.object`) :__ |
||||||
|
We need to get our router from the surrounding React context. |
||||||
|
|
||||||
|
### Props |
||||||
|
|
||||||
|
- __`id` (`PropTypes.number`) :__ |
||||||
|
The id of the status. |
||||||
|
|
||||||
|
- __`status` (`ImmutablePropTypes.map`) :__ |
||||||
|
The status object, straight from the store. |
||||||
|
|
||||||
|
- __`account` (`ImmutablePropTypes.map`) :__ |
||||||
|
Don't be confused by this one! This is **not** the account which |
||||||
|
posted the status, but the associated account with any further |
||||||
|
action (eg, a reblog or a favourite). |
||||||
|
|
||||||
|
- __`settings` (`ImmutablePropTypes.map`) :__ |
||||||
|
These are our local settings, fetched from our store. We need this |
||||||
|
to determine how best to collapse our statuses, among other things. |
||||||
|
|
||||||
|
- __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`, |
||||||
|
`onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
|
||||||
|
`onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__ |
||||||
|
These are all functions passed through from the |
||||||
|
`<StatusContainer>`. We don't deal with them directly here. |
||||||
|
|
||||||
|
- __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__ |
||||||
|
These tell whether or not the user has modals activated for |
||||||
|
reblogging and deleting statuses. They are used by the `onReblog` |
||||||
|
and `onDelete` functions, but we don't deal with them here. |
||||||
|
|
||||||
|
- __`muted` (`PropTypes.bool`) :__ |
||||||
|
This has nothing to do with a user or conversation mute! "Muted" is |
||||||
|
what Mastodon internally calls the subdued look of statuses in the |
||||||
|
notifications column. This should be `true` for notifications, and |
||||||
|
`false` otherwise. |
||||||
|
|
||||||
|
- __`collapse` (`PropTypes.bool`) :__ |
||||||
|
This prop signals a directive from a higher power to (un)collapse |
||||||
|
a status. Most of the time it should be `undefined`, in which case |
||||||
|
we do nothing. |
||||||
|
|
||||||
|
- __`prepend` (`PropTypes.string`) :__ |
||||||
|
The type of prepend: `'reblogged_by'`, `'reblog'`, or |
||||||
|
`'favourite'`. |
||||||
|
|
||||||
|
- __`withDismiss` (`PropTypes.bool`) :__ |
||||||
|
Whether or not the status can be dismissed. Used for notifications. |
||||||
|
|
||||||
|
- __`intersectionObserverWrapper` (`PropTypes.object`) :__ |
||||||
|
This holds our intersection observer. In Mastodon parlance, |
||||||
|
an "intersection" is just when the status is viewable onscreen. |
||||||
|
|
||||||
|
### State |
||||||
|
|
||||||
|
- __`isExpanded` :__ |
||||||
|
Should be either `true`, `false`, or `null`. The meanings of |
||||||
|
these values are as follows: |
||||||
|
|
||||||
|
- __`true` :__ The status contains a CW and the CW is expanded. |
||||||
|
- __`false` :__ The status is collapsed. |
||||||
|
- __`null` :__ The status is not collapsed or expanded. |
||||||
|
|
||||||
|
- __`isIntersecting` :__ |
||||||
|
This boolean tells us whether or not the status is currently |
||||||
|
onscreen. |
||||||
|
|
||||||
|
- __`isHidden` :__ |
||||||
|
This boolean tells us if the status has been unrendered to save |
||||||
|
CPUs. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export default class Status extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
router : PropTypes.object, |
||||||
|
}; |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
id : PropTypes.string, |
||||||
|
status : ImmutablePropTypes.map, |
||||||
|
account : ImmutablePropTypes.map, |
||||||
|
settings : ImmutablePropTypes.map, |
||||||
|
notification : ImmutablePropTypes.map, |
||||||
|
onFavourite : PropTypes.func, |
||||||
|
onReblog : PropTypes.func, |
||||||
|
onModalReblog : PropTypes.func, |
||||||
|
onDelete : PropTypes.func, |
||||||
|
onPin : PropTypes.func, |
||||||
|
onMention : PropTypes.func, |
||||||
|
onMute : PropTypes.func, |
||||||
|
onMuteConversation : PropTypes.func, |
||||||
|
onBlock : PropTypes.func, |
||||||
|
onEmbed : PropTypes.func, |
||||||
|
onHeightChange : PropTypes.func, |
||||||
|
onReport : PropTypes.func, |
||||||
|
onOpenMedia : PropTypes.func, |
||||||
|
onOpenVideo : PropTypes.func, |
||||||
|
reblogModal : PropTypes.bool, |
||||||
|
deleteModal : PropTypes.bool, |
||||||
|
muted : PropTypes.bool, |
||||||
|
collapse : PropTypes.bool, |
||||||
|
prepend : PropTypes.string, |
||||||
|
withDismiss : PropTypes.bool, |
||||||
|
intersectionObserverWrapper : PropTypes.object, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
isExpanded : null, |
||||||
|
isIntersecting : true, |
||||||
|
isHidden : false, |
||||||
|
markedForDelete : false, |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### Implementation |
||||||
|
|
||||||
|
#### `updateOnProps` and `updateOnStates`. |
||||||
|
|
||||||
|
`updateOnProps` and `updateOnStates` tell the component when to update. |
||||||
|
We specify them explicitly because some of our props are dynamically= |
||||||
|
generated functions, which would otherwise always trigger an update. |
||||||
|
Of course, this means that if we add an important prop, we will need |
||||||
|
to remember to specify it here. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
updateOnProps = [ |
||||||
|
'status', |
||||||
|
'account', |
||||||
|
'settings', |
||||||
|
'prepend', |
||||||
|
'boostModal', |
||||||
|
'muted', |
||||||
|
'collapse', |
||||||
|
'notification', |
||||||
|
] |
||||||
|
|
||||||
|
updateOnStates = [ |
||||||
|
'isExpanded', |
||||||
|
'markedForDelete', |
||||||
|
] |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `componentWillReceiveProps()`. |
||||||
|
|
||||||
|
If our settings have changed to disable collapsed statuses, then we |
||||||
|
need to make sure that we uncollapse every one. We do that by watching |
||||||
|
for changes to `settings.collapsed.enabled` in |
||||||
|
`componentWillReceiveProps()`. |
||||||
|
|
||||||
|
We also need to watch for changes on the `collapse` prop---if this |
||||||
|
changes to anything other than `undefined`, then we need to collapse or |
||||||
|
uncollapse our status accordingly. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
componentWillReceiveProps (nextProps) { |
||||||
|
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { |
||||||
|
if (this.state.isExpanded === false) { |
||||||
|
this.setExpansion(null); |
||||||
|
} |
||||||
|
} else if ( |
||||||
|
nextProps.collapse !== this.props.collapse && |
||||||
|
nextProps.collapse !== undefined |
||||||
|
) this.setExpansion(nextProps.collapse ? false : null); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `componentDidMount()`. |
||||||
|
|
||||||
|
When mounting, we just check to see if our status should be collapsed, |
||||||
|
and collapse it if so. We don't need to worry about whether collapsing |
||||||
|
is enabled here, because `setExpansion()` already takes that into |
||||||
|
account. |
||||||
|
|
||||||
|
The cases where a status should be collapsed are: |
||||||
|
|
||||||
|
- The `collapse` prop has been set to `true` |
||||||
|
- The user has decided in local settings to collapse all statuses. |
||||||
|
- The user has decided to collapse all notifications ('muted' |
||||||
|
statuses). |
||||||
|
- The user has decided to collapse long statuses and the status is |
||||||
|
over 400px (without media, or 650px with). |
||||||
|
- The status is a reply and the user has decided to collapse all |
||||||
|
replies. |
||||||
|
- The status contains media and the user has decided to collapse all |
||||||
|
statuses with media. |
||||||
|
|
||||||
|
We also start up our intersection observer to monitor our statuses. |
||||||
|
`componentMounted` lets us know that everything has been set up |
||||||
|
properly and our intersection observer is good to go. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
const { node, handleIntersection } = this; |
||||||
|
const { |
||||||
|
status, |
||||||
|
settings, |
||||||
|
collapse, |
||||||
|
muted, |
||||||
|
id, |
||||||
|
intersectionObserverWrapper, |
||||||
|
prepend, |
||||||
|
} = this.props; |
||||||
|
const autoCollapseSettings = settings.getIn(['collapsed', 'auto']); |
||||||
|
|
||||||
|
if ( |
||||||
|
collapse || |
||||||
|
autoCollapseSettings.get('all') || ( |
||||||
|
autoCollapseSettings.get('notifications') && muted |
||||||
|
) || ( |
||||||
|
autoCollapseSettings.get('lengthy') && |
||||||
|
node.clientHeight > ( |
||||||
|
status.get('media_attachments').size && !muted ? 650 : 400 |
||||||
|
) |
||||||
|
) || ( |
||||||
|
autoCollapseSettings.get('reblogs') && |
||||||
|
prepend === 'reblogged_by' |
||||||
|
) || ( |
||||||
|
autoCollapseSettings.get('replies') && |
||||||
|
status.get('in_reply_to_id', null) !== null |
||||||
|
) || ( |
||||||
|
autoCollapseSettings.get('media') && |
||||||
|
!(status.get('spoiler_text').length) && |
||||||
|
status.get('media_attachments').size |
||||||
|
) |
||||||
|
) this.setExpansion(false); |
||||||
|
|
||||||
|
if (!intersectionObserverWrapper) return; |
||||||
|
else intersectionObserverWrapper.observe( |
||||||
|
id, |
||||||
|
node, |
||||||
|
handleIntersection |
||||||
|
); |
||||||
|
|
||||||
|
this.componentMounted = true; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `shouldComponentUpdate()`. |
||||||
|
|
||||||
|
If the status is about to be both offscreen (not intersecting) and |
||||||
|
hidden, then we only need to update it if it's not that way currently. |
||||||
|
If the status is moving from offscreen to onscreen, then we *have* to |
||||||
|
re-render, so that we can unhide the element if necessary. |
||||||
|
|
||||||
|
If neither of these cases are true, we can leave it up to our |
||||||
|
`updateOnProps` and `updateOnStates` arrays. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
shouldComponentUpdate (nextProps, nextState) { |
||||||
|
switch (true) { |
||||||
|
case !nextState.isIntersecting && nextState.isHidden: |
||||||
|
return this.state.isIntersecting || !this.state.isHidden; |
||||||
|
case nextState.isIntersecting && !this.state.isIntersecting: |
||||||
|
return true; |
||||||
|
default: |
||||||
|
return super.shouldComponentUpdate(nextProps, nextState); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `componentDidUpdate()`. |
||||||
|
|
||||||
|
If our component is being rendered for any reason and an update has |
||||||
|
triggered, this will save its height. |
||||||
|
|
||||||
|
This is, frankly, a bit overkill, as the only instance when we |
||||||
|
actually *need* to update the height right now should be when the |
||||||
|
value of `isExpanded` has changed. But it makes for more readable |
||||||
|
code and prevents bugs in the future where the height isn't set |
||||||
|
properly after some change. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
componentDidUpdate () { |
||||||
|
if ( |
||||||
|
this.state.isIntersecting || !this.state.isHidden |
||||||
|
) this.saveHeight(); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `componentWillUnmount()`. |
||||||
|
|
||||||
|
If our component is about to unmount, then we'd better unset |
||||||
|
`this.componentMounted`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
componentWillUnmount () { |
||||||
|
this.componentMounted = false; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `handleIntersection()`. |
||||||
|
|
||||||
|
`handleIntersection()` either hides the status (if it is offscreen) or |
||||||
|
unhides it (if it is onscreen). It's called by |
||||||
|
`intersectionObserverWrapper.observe()`. |
||||||
|
|
||||||
|
If our status isn't intersecting, we schedule an idle task (using the |
||||||
|
aptly-named `scheduleIdleTask()`) to hide the status at the next |
||||||
|
available opportunity. |
||||||
|
|
||||||
|
tootsuite/mastodon left us with the following enlightening comment |
||||||
|
regarding this function: |
||||||
|
|
||||||
|
> Edge 15 doesn't support isIntersecting, but we can infer it |
||||||
|
|
||||||
|
It then implements a polyfill (intersectionRect.height > 0) which isn't |
||||||
|
actually sufficient. The short answer is, this behaviour isn't really |
||||||
|
supported on Edge but we can get kinda close. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
handleIntersection = (entry) => { |
||||||
|
const isIntersecting = ( |
||||||
|
typeof entry.isIntersecting === 'boolean' ? |
||||||
|
entry.isIntersecting : |
||||||
|
entry.intersectionRect.height > 0 |
||||||
|
); |
||||||
|
this.setState( |
||||||
|
(prevState) => { |
||||||
|
if (prevState.isIntersecting && !isIntersecting) { |
||||||
|
scheduleIdleTask(this.hideIfNotIntersecting); |
||||||
|
} |
||||||
|
return { |
||||||
|
isIntersecting : isIntersecting, |
||||||
|
isHidden : false, |
||||||
|
}; |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `hideIfNotIntersecting()`. |
||||||
|
|
||||||
|
This function will hide the status if we're still not intersecting. |
||||||
|
Hiding the status means that it will just render an empty div instead |
||||||
|
of actual content, which saves RAMS and CPUs or some such. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
hideIfNotIntersecting = () => { |
||||||
|
if (!this.componentMounted) return; |
||||||
|
this.setState( |
||||||
|
(prevState) => ({ isHidden: !prevState.isIntersecting }) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `saveHeight()`. |
||||||
|
|
||||||
|
`saveHeight()` saves the height of our status so that when whe hide it |
||||||
|
we preserve its dimensions. We only want to store our height, though, |
||||||
|
if our status has content (otherwise, it would imply that it is |
||||||
|
already hidden). |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
saveHeight = () => { |
||||||
|
if (this.node && this.node.children.length) { |
||||||
|
this.height = this.node.getBoundingClientRect().height; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `setExpansion()`. |
||||||
|
|
||||||
|
`setExpansion()` sets the value of `isExpanded` in our state. It takes |
||||||
|
one argument, `value`, which gives the desired value for `isExpanded`. |
||||||
|
The default for this argument is `null`. |
||||||
|
|
||||||
|
`setExpansion()` automatically checks for us whether toot collapsing |
||||||
|
is enabled, so we don't have to. |
||||||
|
|
||||||
|
We use a `switch` statement to simplify our code. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
setExpansion = (value) => { |
||||||
|
switch (true) { |
||||||
|
case value === undefined || value === null: |
||||||
|
this.setState({ isExpanded: null }); |
||||||
|
break; |
||||||
|
case !value && this.props.settings.getIn(['collapsed', 'enabled']): |
||||||
|
this.setState({ isExpanded: false }); |
||||||
|
break; |
||||||
|
case !!value: |
||||||
|
this.setState({ isExpanded: true }); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `handleRef()`. |
||||||
|
|
||||||
|
`handleRef()` just saves a reference to our status node to `this.node`. |
||||||
|
It also saves our height, in case the height of our node has changed. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
handleRef = (node) => { |
||||||
|
this.node = node; |
||||||
|
this.saveHeight(); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `parseClick()`. |
||||||
|
|
||||||
|
`parseClick()` takes a click event and responds appropriately. |
||||||
|
If our status is collapsed, then clicking on it should uncollapse it. |
||||||
|
If `Shift` is held, then clicking on it should collapse it. |
||||||
|
Otherwise, we open the url handed to us in `destination`, if |
||||||
|
applicable. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
parseClick = (e, destination) => { |
||||||
|
const { router } = this.context; |
||||||
|
const { status } = this.props; |
||||||
|
const { isExpanded } = this.state; |
||||||
|
if (!router) return; |
||||||
|
if (destination === undefined) { |
||||||
|
destination = `/statuses/${ |
||||||
|
status.getIn(['reblog', 'id'], status.get('id')) |
||||||
|
}`;
|
||||||
|
} |
||||||
|
if (e.button === 0) { |
||||||
|
if (isExpanded === false) this.setExpansion(null); |
||||||
|
else if (e.shiftKey) { |
||||||
|
this.setExpansion(false); |
||||||
|
document.getSelection().removeAllRanges(); |
||||||
|
} else router.history.push(destination); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `render()`. |
||||||
|
|
||||||
|
`render()` actually puts our element on the screen. The particulars of |
||||||
|
this operation are further explained in the code below. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
parseClick, |
||||||
|
setExpansion, |
||||||
|
saveHeight, |
||||||
|
handleRef, |
||||||
|
} = this; |
||||||
|
const { router } = this.context; |
||||||
|
const { |
||||||
|
status, |
||||||
|
account, |
||||||
|
settings, |
||||||
|
collapsed, |
||||||
|
muted, |
||||||
|
prepend, |
||||||
|
intersectionObserverWrapper, |
||||||
|
onOpenVideo, |
||||||
|
onOpenMedia, |
||||||
|
notification, |
||||||
|
...other |
||||||
|
} = this.props; |
||||||
|
const { isExpanded, isIntersecting, isHidden } = this.state; |
||||||
|
let background = null; |
||||||
|
let attachments = null; |
||||||
|
let media = null; |
||||||
|
let mediaIcon = null; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
If we don't have a status, then we don't render anything. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if (status === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
If our status is offscreen and hidden, then we render an empty <div> in |
||||||
|
its place. We fill it with "content" but note that opacity is set to 0. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if (!isIntersecting && isHidden) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={this.handleRef} |
||||||
|
data-id={status.get('id')} |
||||||
|
style={{ |
||||||
|
height : `${this.height}px`, |
||||||
|
opacity : 0, |
||||||
|
overflow : 'hidden', |
||||||
|
}} |
||||||
|
> |
||||||
|
{ |
||||||
|
status.getIn(['account', 'display_name']) || |
||||||
|
status.getIn(['account', 'username']) |
||||||
|
} |
||||||
|
{status.get('content')} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
If user backgrounds for collapsed statuses are enabled, then we |
||||||
|
initialize our background accordingly. This will only be rendered if |
||||||
|
the status is collapsed. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
if ( |
||||||
|
settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds']) |
||||||
|
) background = status.getIn(['account', 'header']); |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
This handles our media attachments. Note that we don't show media on |
||||||
|
muted (notification) statuses. If the media type is unknown, then we |
||||||
|
simply ignore it. |
||||||
|
|
||||||
|
After we have generated our appropriate media element and stored it in |
||||||
|
`media`, we snatch the thumbnail to use as our `background` if media |
||||||
|
backgrounds for collapsed statuses are enabled. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
attachments = status.get('media_attachments'); |
||||||
|
if (attachments.size && !muted) { |
||||||
|
if (attachments.some((item) => item.get('type') === 'unknown')) { |
||||||
|
|
||||||
|
} else if ( |
||||||
|
attachments.getIn([0, 'type']) === 'video' |
||||||
|
) { |
||||||
|
media = ( // Media type is 'video'
|
||||||
|
<StatusPlayer |
||||||
|
media={attachments.get(0)} |
||||||
|
sensitive={status.get('sensitive')} |
||||||
|
letterbox={settings.getIn(['media', 'letterbox'])} |
||||||
|
fullwidth={settings.getIn(['media', 'fullwidth'])} |
||||||
|
height={250} |
||||||
|
onOpenVideo={onOpenVideo} |
||||||
|
/> |
||||||
|
); |
||||||
|
mediaIcon = 'video-camera'; |
||||||
|
} else { // Media type is 'image' or 'gifv'
|
||||||
|
media = ( |
||||||
|
<StatusGallery |
||||||
|
media={attachments} |
||||||
|
sensitive={status.get('sensitive')} |
||||||
|
letterbox={settings.getIn(['media', 'letterbox'])} |
||||||
|
fullwidth={settings.getIn(['media', 'fullwidth'])} |
||||||
|
height={250} |
||||||
|
onOpenMedia={onOpenMedia} |
||||||
|
autoPlayGif={autoPlayGif} |
||||||
|
/> |
||||||
|
); |
||||||
|
mediaIcon = 'picture-o'; |
||||||
|
} |
||||||
|
|
||||||
|
if ( |
||||||
|
!status.get('sensitive') && |
||||||
|
!(status.get('spoiler_text').length > 0) && |
||||||
|
settings.getIn(['collapsed', 'backgrounds', 'preview_images']) |
||||||
|
) background = attachments.getIn([0, 'preview_url']); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Here we prepare extra data-* attributes for CSS selectors. |
||||||
|
Users can use those for theming, hiding avatars etc via UserStyle |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const selectorAttribs = { |
||||||
|
'data-status-by': `@${status.getIn(['account', 'acct'])}`, |
||||||
|
}; |
||||||
|
|
||||||
|
if (prepend && account) { |
||||||
|
const notifKind = { |
||||||
|
favourite: 'favourited', |
||||||
|
reblog: 'boosted', |
||||||
|
reblogged_by: 'boosted', |
||||||
|
}[prepend]; |
||||||
|
|
||||||
|
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Finally, we can render our status. We just put the pieces together |
||||||
|
from above. We only render the action bar if the status isn't |
||||||
|
collapsed. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
return ( |
||||||
|
<article |
||||||
|
className={ |
||||||
|
`status${ |
||||||
|
muted ? ' muted' : '' |
||||||
|
} status-${status.get('visibility')}${ |
||||||
|
isExpanded === false ? ' collapsed' : '' |
||||||
|
}${ |
||||||
|
isExpanded === false && background ? ' has-background' : '' |
||||||
|
}${ |
||||||
|
this.state.markedForDelete ? ' marked-for-delete' : '' |
||||||
|
}` |
||||||
|
} |
||||||
|
style={{ |
||||||
|
backgroundImage: ( |
||||||
|
isExpanded === false && background ? |
||||||
|
`url(${background})` : |
||||||
|
'none' |
||||||
|
), |
||||||
|
}} |
||||||
|
ref={handleRef} |
||||||
|
{...selectorAttribs} |
||||||
|
> |
||||||
|
{prepend && account ? ( |
||||||
|
<StatusPrepend |
||||||
|
type={prepend} |
||||||
|
account={account} |
||||||
|
parseClick={parseClick} |
||||||
|
notificationId={this.props.notificationId} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
<StatusHeader |
||||||
|
status={status} |
||||||
|
friend={account} |
||||||
|
mediaIcon={mediaIcon} |
||||||
|
collapsible={settings.getIn(['collapsed', 'enabled'])} |
||||||
|
collapsed={isExpanded === false} |
||||||
|
parseClick={parseClick} |
||||||
|
setExpansion={setExpansion} |
||||||
|
/> |
||||||
|
<StatusContent |
||||||
|
status={status} |
||||||
|
media={media} |
||||||
|
mediaIcon={mediaIcon} |
||||||
|
expanded={isExpanded} |
||||||
|
setExpansion={setExpansion} |
||||||
|
onHeightUpdate={saveHeight} |
||||||
|
parseClick={parseClick} |
||||||
|
disabled={!router} |
||||||
|
/> |
||||||
|
{isExpanded !== false ? ( |
||||||
|
<StatusActionBar |
||||||
|
{...other} |
||||||
|
status={status} |
||||||
|
account={status.get('account')} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
{notification ? ( |
||||||
|
<NotificationOverlayContainer |
||||||
|
notification={notification} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
</article> |
||||||
|
); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,203 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import IconButton from '../../../mastodon/components/icon_button'; |
||||||
|
import { isIOS } from '../../../mastodon/is_mobile'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }, |
||||||
|
toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' }, |
||||||
|
expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class StatusPlayer extends React.PureComponent { |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
router: PropTypes.object, |
||||||
|
}; |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
media: ImmutablePropTypes.map.isRequired, |
||||||
|
letterbox: PropTypes.bool, |
||||||
|
fullwidth: PropTypes.bool, |
||||||
|
height: PropTypes.number, |
||||||
|
sensitive: PropTypes.bool, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
autoplay: PropTypes.bool, |
||||||
|
onOpenVideo: PropTypes.func.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
static defaultProps = { |
||||||
|
height: 110, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
visible: !this.props.sensitive, |
||||||
|
preview: true, |
||||||
|
muted: true, |
||||||
|
hasAudio: true, |
||||||
|
videoError: false, |
||||||
|
}; |
||||||
|
|
||||||
|
handleClick = () => { |
||||||
|
this.setState({ muted: !this.state.muted }); |
||||||
|
} |
||||||
|
|
||||||
|
handleVideoClick = (e) => { |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
const node = this.video; |
||||||
|
|
||||||
|
if (node.paused) { |
||||||
|
node.play(); |
||||||
|
} else { |
||||||
|
node.pause(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleOpen = () => { |
||||||
|
this.setState({ preview: !this.state.preview }); |
||||||
|
} |
||||||
|
|
||||||
|
handleVisibility = () => { |
||||||
|
this.setState({ |
||||||
|
visible: !this.state.visible, |
||||||
|
preview: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
handleExpand = () => { |
||||||
|
this.video.pause(); |
||||||
|
this.props.onOpenVideo(this.props.media, this.video.currentTime); |
||||||
|
} |
||||||
|
|
||||||
|
setRef = (c) => { |
||||||
|
this.video = c; |
||||||
|
} |
||||||
|
|
||||||
|
handleLoadedData = () => { |
||||||
|
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) { |
||||||
|
this.setState({ hasAudio: false }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleVideoError = () => { |
||||||
|
this.setState({ videoError: true }); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
if (!this.video) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.video.addEventListener('loadeddata', this.handleLoadedData); |
||||||
|
this.video.addEventListener('error', this.handleVideoError); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidUpdate () { |
||||||
|
if (!this.video) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.video.addEventListener('loadeddata', this.handleLoadedData); |
||||||
|
this.video.addEventListener('error', this.handleVideoError); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillUnmount () { |
||||||
|
if (!this.video) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.video.removeEventListener('loadeddata', this.handleLoadedData); |
||||||
|
this.video.removeEventListener('error', this.handleVideoError); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props; |
||||||
|
|
||||||
|
let spoilerButton = ( |
||||||
|
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}> |
||||||
|
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
let expandButton = !this.context.router ? '' : ( |
||||||
|
<div className='status__video-player-expand'> |
||||||
|
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
let muteButton = ''; |
||||||
|
|
||||||
|
if (this.state.hasAudio) { |
||||||
|
muteButton = ( |
||||||
|
<div className='status__video-player-mute'> |
||||||
|
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
if (!this.state.visible) { |
||||||
|
if (sensitive) { |
||||||
|
return ( |
||||||
|
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}> |
||||||
|
{spoilerButton} |
||||||
|
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> |
||||||
|
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} else { |
||||||
|
return ( |
||||||
|
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}> |
||||||
|
{spoilerButton} |
||||||
|
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span> |
||||||
|
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (this.state.preview && !autoplay) { |
||||||
|
return ( |
||||||
|
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}> |
||||||
|
{spoilerButton} |
||||||
|
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.state.videoError) { |
||||||
|
return ( |
||||||
|
<div style={{ height: `${height}px` }} className='video-error-cover' > |
||||||
|
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}> |
||||||
|
{spoilerButton} |
||||||
|
{muteButton} |
||||||
|
{expandButton} |
||||||
|
|
||||||
|
<video |
||||||
|
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`} |
||||||
|
role='button' |
||||||
|
tabIndex='0' |
||||||
|
ref={this.setRef} |
||||||
|
src={media.get('url')} |
||||||
|
autoPlay={!isIOS()} |
||||||
|
loop |
||||||
|
muted={this.state.muted} |
||||||
|
onClick={this.handleVideoClick} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,159 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`<StatusPrepend>` |
||||||
|
================= |
||||||
|
|
||||||
|
Originally a part of `<Status>`, but extracted into a separate |
||||||
|
component for better documentation and maintainance by |
||||||
|
@kibi@glitch.social as a part of glitch-soc/mastodon. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
import { FormattedMessage } from 'react-intl'; |
||||||
|
|
||||||
|
/* * * * */ |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
The `<StatusPrepend>` component: |
||||||
|
-------------------------------- |
||||||
|
|
||||||
|
The `<StatusPrepend>` component holds a status's prepend, ie the text |
||||||
|
that says “X reblogged this,” etc. It is represented by an `<aside>` |
||||||
|
element. |
||||||
|
|
||||||
|
### Props |
||||||
|
|
||||||
|
- __`type` (`PropTypes.string`) :__ |
||||||
|
The type of prepend. One of `'reblogged_by'`, `'reblog'`, |
||||||
|
`'favourite'`. |
||||||
|
|
||||||
|
- __`account` (`ImmutablePropTypes.map`) :__ |
||||||
|
The account associated with the prepend. |
||||||
|
|
||||||
|
- __`parseClick` (`PropTypes.func.isRequired`) :__ |
||||||
|
Our click parsing function. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export default class StatusPrepend extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
type: PropTypes.string.isRequired, |
||||||
|
account: ImmutablePropTypes.map.isRequired, |
||||||
|
parseClick: PropTypes.func.isRequired, |
||||||
|
notificationId: PropTypes.number, |
||||||
|
}; |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
### Implementation |
||||||
|
|
||||||
|
#### `handleClick()`. |
||||||
|
|
||||||
|
This is just a small wrapper for `parseClick()` that gets fired when |
||||||
|
an account link is clicked. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
handleClick = (e) => { |
||||||
|
const { account, parseClick } = this.props; |
||||||
|
parseClick(e, `/accounts/${+account.get('id')}`); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `<Message>`. |
||||||
|
|
||||||
|
`<Message>` is a quick functional React component which renders the |
||||||
|
actual prepend message based on our provided `type`. First we create a |
||||||
|
`link` for the account's name, and then use `<FormattedMessage>` to |
||||||
|
generate the message. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
Message = () => { |
||||||
|
const { type, account } = this.props; |
||||||
|
let link = ( |
||||||
|
<a |
||||||
|
onClick={this.handleClick} |
||||||
|
href={account.get('url')} |
||||||
|
className='status__display-name' |
||||||
|
> |
||||||
|
<b |
||||||
|
dangerouslySetInnerHTML={{ |
||||||
|
__html : account.get('display_name_html') || account.get('username'), |
||||||
|
}} |
||||||
|
/> |
||||||
|
</a> |
||||||
|
); |
||||||
|
switch (type) { |
||||||
|
case 'reblogged_by': |
||||||
|
return ( |
||||||
|
<FormattedMessage |
||||||
|
id='status.reblogged_by' |
||||||
|
defaultMessage='{name} boosted' |
||||||
|
values={{ name : link }} |
||||||
|
/> |
||||||
|
); |
||||||
|
case 'favourite': |
||||||
|
return ( |
||||||
|
<FormattedMessage |
||||||
|
id='notification.favourite' |
||||||
|
defaultMessage='{name} favourited your status' |
||||||
|
values={{ name : link }} |
||||||
|
/> |
||||||
|
); |
||||||
|
case 'reblog': |
||||||
|
return ( |
||||||
|
<FormattedMessage |
||||||
|
id='notification.reblog' |
||||||
|
defaultMessage='{name} boosted your status' |
||||||
|
values={{ name : link }} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
#### `render()`. |
||||||
|
|
||||||
|
Our `render()` is incredibly simple; we just render the icon and then |
||||||
|
the `<Message>` inside of an <aside>. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
render () { |
||||||
|
const { Message } = this; |
||||||
|
const { type } = this.props; |
||||||
|
|
||||||
|
return !type ? null : ( |
||||||
|
<aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}> |
||||||
|
<div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}> |
||||||
|
<i |
||||||
|
className={`fa fa-fw fa-${ |
||||||
|
type === 'favourite' ? 'star star-icon' : 'retweet' |
||||||
|
} status__prepend-icon`}
|
||||||
|
/> |
||||||
|
</div> |
||||||
|
<Message /> |
||||||
|
</aside> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,48 @@ |
|||||||
|
// Package imports //
|
||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { defineMessages, injectIntl } from 'react-intl'; |
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
public: { id: 'privacy.public.short', defaultMessage: 'Public' }, |
||||||
|
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, |
||||||
|
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, |
||||||
|
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, |
||||||
|
}); |
||||||
|
|
||||||
|
@injectIntl |
||||||
|
export default class VisibilityIcon extends ImmutablePureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
visibility: PropTypes.string, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
withLabel: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
render() { |
||||||
|
const { withLabel, visibility, intl } = this.props; |
||||||
|
|
||||||
|
const visibilityClass = { |
||||||
|
public: 'globe', |
||||||
|
unlisted: 'unlock-alt', |
||||||
|
private: 'lock', |
||||||
|
direct: 'envelope', |
||||||
|
}[visibility]; |
||||||
|
|
||||||
|
const label = intl.formatMessage(messages[visibility]); |
||||||
|
|
||||||
|
const icon = (<i |
||||||
|
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`} |
||||||
|
title={label} |
||||||
|
aria-hidden='true' |
||||||
|
/>); |
||||||
|
|
||||||
|
if (withLabel) { |
||||||
|
return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>); |
||||||
|
} else { |
||||||
|
return icon; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,44 @@ |
|||||||
|
{ |
||||||
|
"getting_started.open_source_notice": "Glitchsoc is free open source software forked from {Mastodon}. You can contribute or report issues on GitHub at {github}.", |
||||||
|
"layout.auto": "Auto", |
||||||
|
"layout.current_is": "Your current layout is:", |
||||||
|
"layout.desktop": "Desktop", |
||||||
|
"layout.mobile": "Mobile", |
||||||
|
"navigation_bar.app_settings": "App settings", |
||||||
|
"getting_started.onboarding": "Show me around", |
||||||
|
"onboarding.page_one.federation": "{domain} is an 'instance' of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.", |
||||||
|
"onboarding.page_one.welcome": "Welcome to {domain}!", |
||||||
|
"onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}, and is compatible with any Mastodon instance or app. Glitchsoc is entirely free and open-source. You can report bugs, request features, or contribute to the code on {github}.", |
||||||
|
"settings.auto_collapse": "Automatic collapsing", |
||||||
|
"settings.auto_collapse_all": "Everything", |
||||||
|
"settings.auto_collapse_lengthy": "Lengthy toots", |
||||||
|
"settings.auto_collapse_media": "Toots with media", |
||||||
|
"settings.auto_collapse_notifications": "Notifications", |
||||||
|
"settings.auto_collapse_reblogs": "Boosts", |
||||||
|
"settings.auto_collapse_replies": "Replies", |
||||||
|
"settings.close": "Close", |
||||||
|
"settings.collapsed_statuses": "Collapsed toots", |
||||||
|
"settings.enable_collapsed": "Enable collapsed toots", |
||||||
|
"settings.general": "General", |
||||||
|
"settings.image_backgrounds": "Image backgrounds", |
||||||
|
"settings.image_backgrounds_media": "Preview collapsed toot media", |
||||||
|
"settings.image_backgrounds_users": "Give collapsed toots an image background", |
||||||
|
"settings.media": "Media", |
||||||
|
"settings.media_letterbox": "Letterbox media", |
||||||
|
"settings.media_fullwidth": "Full-width media previews", |
||||||
|
"settings.preferences": "User preferences", |
||||||
|
"settings.wide_view": "Wide view (Desktop mode only)", |
||||||
|
"settings.navbar_under": "Navbar at the bottom (Mobile only)", |
||||||
|
"status.collapse": "Collapse", |
||||||
|
"status.uncollapse": "Uncollapse", |
||||||
|
|
||||||
|
"notification.markForDeletion": "Mark for deletion", |
||||||
|
"notifications.clear": "Clear all my notifications", |
||||||
|
"notifications.marked_clear_confirmation": "Are you sure you want to permanently clear all selected notifications?", |
||||||
|
"notifications.marked_clear": "Clear selected notifications", |
||||||
|
|
||||||
|
"notification_purge.btn_all": "Select\nall", |
||||||
|
"notification_purge.btn_none": "Select\nnone", |
||||||
|
"notification_purge.btn_invert": "Invert\nselection", |
||||||
|
"notification_purge.btn_apply": "Clear\nselected" |
||||||
|
} |
@ -0,0 +1,126 @@ |
|||||||
|
/* |
||||||
|
|
||||||
|
`reducers/local_settings` |
||||||
|
======================== |
||||||
|
|
||||||
|
> For more information on the contents of this file, please contact: |
||||||
|
> |
||||||
|
> - kibigo! [@kibi@glitch.social] |
||||||
|
|
||||||
|
This file provides our Redux reducers related to local settings. The |
||||||
|
associated actions are: |
||||||
|
|
||||||
|
- __`STORE_HYDRATE` :__ |
||||||
|
Used to hydrate the store with its initial values. |
||||||
|
|
||||||
|
- __`LOCAL_SETTING_CHANGE` :__ |
||||||
|
Used to change the value of a local setting in the store. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Imports: |
||||||
|
-------- |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
// Package imports //
|
||||||
|
import { Map as ImmutableMap } from 'immutable'; |
||||||
|
|
||||||
|
// Mastodon imports //
|
||||||
|
import { STORE_HYDRATE } from '../../mastodon/actions/store'; |
||||||
|
|
||||||
|
// Our imports //
|
||||||
|
import { LOCAL_SETTING_CHANGE } from '../actions/local_settings'; |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
initialState: |
||||||
|
------------- |
||||||
|
|
||||||
|
You can see the default values for all of our local settings here. |
||||||
|
These are only used if no previously-saved values exist. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const initialState = ImmutableMap({ |
||||||
|
layout : 'auto', |
||||||
|
stretch : true, |
||||||
|
navbar_under : false, |
||||||
|
side_arm : 'none', |
||||||
|
collapsed : ImmutableMap({ |
||||||
|
enabled : true, |
||||||
|
auto : ImmutableMap({ |
||||||
|
all : false, |
||||||
|
notifications : true, |
||||||
|
lengthy : true, |
||||||
|
reblogs : false, |
||||||
|
replies : false, |
||||||
|
media : false, |
||||||
|
}), |
||||||
|
backgrounds : ImmutableMap({ |
||||||
|
user_backgrounds : false, |
||||||
|
preview_images : false, |
||||||
|
}), |
||||||
|
}), |
||||||
|
media : ImmutableMap({ |
||||||
|
letterbox : true, |
||||||
|
fullwidth : true, |
||||||
|
}), |
||||||
|
}); |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
Helper functions: |
||||||
|
----------------- |
||||||
|
|
||||||
|
### `hydrate(state, localSettings)` |
||||||
|
|
||||||
|
`hydrate()` is used to hydrate the `local_settings` part of our store |
||||||
|
with its initial values. The `state` will probably just be the |
||||||
|
`initialState`, and the `localSettings` should be whatever we pulled |
||||||
|
from `localStorage`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
const hydrate = (state, localSettings) => state.mergeDeep(localSettings); |
||||||
|
|
||||||
|
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
`localSettings(state = initialState, action)`: |
||||||
|
---------------------------------------------- |
||||||
|
|
||||||
|
This function holds our actual reducer. |
||||||
|
|
||||||
|
If our action is `STORE_HYDRATE`, then we call `hydrate()` with the |
||||||
|
`local_settings` property of the provided `action.state`. |
||||||
|
|
||||||
|
If our action is `LOCAL_SETTING_CHANGE`, then we set `action.key` in |
||||||
|
our state to the provided `action.value`. Note that `action.key` MUST |
||||||
|
be an array, since we use `setIn()`. |
||||||
|
|
||||||
|
> __Note :__ |
||||||
|
> We call this function `localSettings`, but its associated object |
||||||
|
> in the store is `local_settings`. |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
export default function localSettings(state = initialState, action) { |
||||||
|
switch(action.type) { |
||||||
|
case STORE_HYDRATE: |
||||||
|
return hydrate(state, action.state.get('local_settings')); |
||||||
|
case LOCAL_SETTING_CHANGE: |
||||||
|
return state.setIn(action.key, action.value); |
||||||
|
default: |
||||||
|
return state; |
||||||
|
} |
||||||
|
}; |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,17 @@ |
|||||||
|
import { connect } from 'react-redux'; |
||||||
|
import ColumnSettings from '../../community_timeline/components/column_settings'; |
||||||
|
import { changeSetting } from '../../../actions/settings'; |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
settings: state.getIn(['settings', 'direct']), |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({ |
||||||
|
|
||||||
|
onChange (key, checked) { |
||||||
|
dispatch(changeSetting(['direct', ...key], checked)); |
||||||
|
}, |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings); |
@ -0,0 +1,107 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import StatusListContainer from '../ui/containers/status_list_container'; |
||||||
|
import Column from '../../components/column'; |
||||||
|
import ColumnHeader from '../../components/column_header'; |
||||||
|
import { |
||||||
|
refreshDirectTimeline, |
||||||
|
expandDirectTimeline, |
||||||
|
} from '../../actions/timelines'; |
||||||
|
import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; |
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||||
|
import ColumnSettingsContainer from './containers/column_settings_container'; |
||||||
|
import { connectDirectStream } from '../../actions/streaming'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
title: { id: 'column.direct', defaultMessage: 'Direct messages' }, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
hasUnread: state.getIn(['timelines', 'direct', 'unread']) > 0, |
||||||
|
}); |
||||||
|
|
||||||
|
@connect(mapStateToProps) |
||||||
|
@injectIntl |
||||||
|
export default class DirectTimeline extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
dispatch: PropTypes.func.isRequired, |
||||||
|
columnId: PropTypes.string, |
||||||
|
intl: PropTypes.object.isRequired, |
||||||
|
hasUnread: PropTypes.bool, |
||||||
|
multiColumn: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
handlePin = () => { |
||||||
|
const { columnId, dispatch } = this.props; |
||||||
|
|
||||||
|
if (columnId) { |
||||||
|
dispatch(removeColumn(columnId)); |
||||||
|
} else { |
||||||
|
dispatch(addColumn('DIRECT', {})); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
handleMove = (dir) => { |
||||||
|
const { columnId, dispatch } = this.props; |
||||||
|
dispatch(moveColumn(columnId, dir)); |
||||||
|
} |
||||||
|
|
||||||
|
handleHeaderClick = () => { |
||||||
|
this.column.scrollTop(); |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
const { dispatch } = this.props; |
||||||
|
|
||||||
|
dispatch(refreshDirectTimeline()); |
||||||
|
this.disconnect = dispatch(connectDirectStream()); |
||||||
|
} |
||||||
|
|
||||||
|
componentWillUnmount () { |
||||||
|
if (this.disconnect) { |
||||||
|
this.disconnect(); |
||||||
|
this.disconnect = null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setRef = c => { |
||||||
|
this.column = c; |
||||||
|
} |
||||||
|
|
||||||
|
handleLoadMore = () => { |
||||||
|
this.props.dispatch(expandDirectTimeline()); |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { intl, hasUnread, columnId, multiColumn } = this.props; |
||||||
|
const pinned = !!columnId; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Column ref={this.setRef}> |
||||||
|
<ColumnHeader |
||||||
|
icon='envelope' |
||||||
|
active={hasUnread} |
||||||
|
title={intl.formatMessage(messages.title)} |
||||||
|
onPin={this.handlePin} |
||||||
|
onMove={this.handleMove} |
||||||
|
onClick={this.handleHeaderClick} |
||||||
|
pinned={pinned} |
||||||
|
multiColumn={multiColumn} |
||||||
|
> |
||||||
|
<ColumnSettingsContainer /> |
||||||
|
</ColumnHeader> |
||||||
|
|
||||||
|
<StatusListContainer |
||||||
|
trackScroll={!pinned} |
||||||
|
scrollKey={`direct_timeline-${columnId}`} |
||||||
|
timelineId='direct' |
||||||
|
loadMore={this.handleLoadMore} |
||||||
|
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />} |
||||||
|
/> |
||||||
|
</Column> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue