tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'development'

Browse Source
This commit is contained in:
Eugen Rochko
2016-11-23 19:01:12 +01:00
parent d74cef45aa 79a0135869
commit 3373ae02de
17 changed files with 362 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/components/actions/compose.jsx
View File

@@ -22,6 +22,8 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT';
export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
export function changeCompose(text) {
return {
type: COMPOSE_CHANGE,
@@ -62,7 +64,8 @@ export function submitCompose() {
api(getState).post('/api/v1/statuses', {
status: getState().getIn(['compose', 'text'], ''),
in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id'))
media_ids: getState().getIn(['compose', 'media_attachments']).map(item => item.get('id')),
sensitive: getState().getIn(['compose', 'sensitive'])
}).then(function (response) {
dispatch(submitComposeSuccess(response.data));
dispatch(updateTimeline('home', response.data));
@@ -197,3 +200,10 @@ export function unmountCompose() {
type: COMPOSE_UNMOUNT
};
};
export function changeComposeSensitivity(checked) {
return {
type: COMPOSE_SENSITIVITY_CHANGE,
checked
};
};

168
app/assets/javascripts/components/components/media_gallery.jsx
View File

@@ -1,9 +1,47 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import { FormattedMessage } from 'react-intl';
const outerStyle = {
marginTop: '8px',
overflow: 'hidden',
width: '100%',
boxSizing: 'border-box'
};
const spoilerStyle = {
background: '#000',
color: '#fff',
textAlign: 'center',
height: '100%',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
};
const spoilerSpanStyle = {
display: 'block',
fontSize: '14px',
};
const spoilerSubSpanStyle = {
display: 'block',
fontSize: '11px',
fontWeight: '500'
};
const MediaGallery = React.createClass({
getInitialState () {
return {
visible: false
};
},
propTypes: {
sensitive: React.PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
height: React.PropTypes.number.isRequired,
onOpenMedia: React.PropTypes.func.isRequired
@@ -20,69 +58,85 @@ const MediaGallery = React.createClass({
e.stopPropagation();
},
handleOpen () {
this.setState({ visible: true });
},
render () {
var children = this.props.media.take(4);
var size = children.size;
const { media, sensitive } = this.props;
children = children.map((attachment, i) => {
let width = 50;
let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
let children;
if (size === 1) {
width = 100;
}
if (size === 4 || (size === 3 && i > 0)) {
height = 50;
}
if (size === 2) {
if (i === 0) {
right = '2px';
} else {
left = '2px';
}
} else if (size === 3) {
if (i === 0) {
right = '2px';
} else if (i > 0) {
left = '2px';
}
if (i === 1) {
bottom = '2px';
} else if (i > 1) {
top = '2px';
}
} else if (size === 4) {
if (i === 0 || i === 2) {
right = '2px';
}
if (i === 1 || i === 3) {
left = '2px';
}
if (i < 2) {
bottom = '2px';
} else {
top = '2px';
}
}
return (
<div key={attachment.get('id')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', border: 'none', display: 'block', width: `${width}%`, height: `${height}%` }}>
<a href={attachment.get('url')} onClick={this.handleClick.bind(this, attachment.get('url'))} target='_blank' style={{ display: 'block', width: '100%', height: '100%', background: `url(${attachment.get('preview_url')}) no-repeat center`, textDecoration: 'none', backgroundSize: 'cover', cursor: 'zoom-in' }} />
if (sensitive && !this.state.visible) {
children = (
<div style={spoilerStyle} onClick={this.handleOpen}>
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><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) => {
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 && i > 0)) {
height = 50;
}
if (size === 2) {
if (i === 0) {
right = '2px';
} else {
left = '2px';
}
} else if (size === 3) {
if (i === 0) {
right = '2px';
} else if (i > 0) {
left = '2px';
}
if (i === 1) {
bottom = '2px';
} else if (i > 1) {
top = '2px';
}
} else if (size === 4) {
if (i === 0 || i === 2) {
right = '2px';
}
if (i === 1 || i === 3) {
left = '2px';
}
if (i < 2) {
bottom = '2px';
} else {
top = '2px';
}
}
return (
<div key={attachment.get('id')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', border: 'none', display: 'block', width: `${width}%`, height: `${height}%` }}>
<a href={attachment.get('url')} onClick={this.handleClick.bind(this, attachment.get('url'))} target='_blank' style={{ display: 'block', width: '100%', height: '100%', background: `url(${attachment.get('preview_url')}) no-repeat center`, textDecoration: 'none', backgroundSize: 'cover', cursor: 'zoom-in' }} />
</div>
);
});
}
return (
<div style={{ marginTop: '8px', overflow: 'hidden', width: '100%', height: `${this.props.height}px`, boxSizing: 'border-box' }}>
<div style={{ ...outerStyle, height: `${this.props.height}px` }}>
{children}
</div>
);

4
app/assets/javascripts/components/components/status.jsx
View File

@@ -83,9 +83,9 @@ const Status = React.createClass({
if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />;
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} />;
} else {
media = <MediaGallery media={status.get('media_attachments')} height={110} onOpenMedia={this.props.onOpenMedia} />;
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} />;
}
}

42
app/assets/javascripts/components/components/video_player.jsx
View File

@@ -1,7 +1,7 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import IconButton from './icon_button';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
const messages = defineMessages({
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }
@@ -25,6 +25,30 @@ const muteStyle = {
zIndex: '5'
};
const spoilerStyle = {
marginTop: '8px',
background: '#000',
color: '#fff',
textAlign: 'center',
height: '100%',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
};
const spoilerSpanStyle = {
display: 'block',
fontSize: '14px'
};
const spoilerSubSpanStyle = {
display: 'block',
fontSize: '11px',
fontWeight: '500'
};
const VideoPlayer = React.createClass({
propTypes: {
media: ImmutablePropTypes.map.isRequired,
@@ -41,6 +65,7 @@ const VideoPlayer = React.createClass({
getInitialState () {
return {
visible: false,
muted: true
};
},
@@ -63,8 +88,21 @@ const VideoPlayer = React.createClass({
}
},
handleOpen () {
this.setState({ visible: true });
},
render () {
const { media, intl, width, height } = this.props;
const { media, intl, width, height, sensitive } = this.props;
if (sensitive && !this.state.visible) {
return (
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleOpen}>
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
}
return (
<div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>

14
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View File

@@ -9,6 +9,7 @@ import AutosuggestAccountContainer from '../../compose/containers/autosuggest_ac
import { debounce } from 'react-decoration';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl';
import Toggle from 'react-toggle';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -67,6 +68,7 @@ const ComposeForm = React.createClass({
text: React.PropTypes.string.isRequired,
suggestion_token: React.PropTypes.string,
suggestions: React.PropTypes.array,
sensitive: React.PropTypes.bool,
is_submitting: React.PropTypes.bool,
is_uploading: React.PropTypes.bool,
in_reply_to: ImmutablePropTypes.map,
@@ -75,7 +77,8 @@ const ComposeForm = React.createClass({
onCancelReply: React.PropTypes.func.isRequired,
onClearSuggestions: React.PropTypes.func.isRequired,
onFetchSuggestions: React.PropTypes.func.isRequired,
onSuggestionSelected: React.PropTypes.func.isRequired
onSuggestionSelected: React.PropTypes.func.isRequired,
onChangeSensitivity: React.PropTypes.func.isRequired
},
mixins: [PureRenderMixin],
@@ -139,6 +142,10 @@ const ComposeForm = React.createClass({
this.autosuggest = c;
},
handleChangeSensitivity (e) {
this.props.onChangeSensitivity(e.target.checked);
},
render () {
const { intl } = this.props;
let replyArea = '';
@@ -178,6 +185,11 @@ const ComposeForm = React.createClass({
<div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={this.props.text} /></div>
<UploadButtonContainer style={{ paddingTop: '4px' }} />
</div>
<label style={{ display: 'block', lineHeight: '24px', verticalAlign: 'middle', marginTop: '10px', borderTop: '1px solid #616b86', paddingTop: '10px' }}>
<Toggle checked={this.props.sensitive} onChange={this.handleChangeSensitivity} />
<span style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: '14px', marginLeft: '8px', color: '#9baec8' }}>Sensitive content</span>
</label>
</div>
);
}

8
app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx
View File

@@ -6,7 +6,8 @@ import {
cancelReplyCompose,
clearComposeSuggestions,
fetchComposeSuggestions,
selectComposeSuggestion
selectComposeSuggestion,
changeComposeSensitivity
} from '../../../actions/compose';
import { makeGetStatus } from '../../../selectors';
@@ -18,6 +19,7 @@ const makeMapStateToProps = () => {
text: state.getIn(['compose', 'text']),
suggestion_token: state.getIn(['compose', 'suggestion_token']),
suggestions: state.getIn(['compose', 'suggestions']).toJS(),
sensitive: state.getIn(['compose', 'sensitive']),
is_submitting: state.getIn(['compose', 'is_submitting']),
is_uploading: state.getIn(['compose', 'is_uploading']),
in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to']))
@@ -51,6 +53,10 @@ const mapDispatchToProps = function (dispatch) {
onSuggestionSelected (position, accountId) {
dispatch(selectComposeSuggestion(position, accountId));
},
onChangeSensitivity (checked) {
dispatch(changeComposeSensitivity(checked));
}
}
};

4
app/assets/javascripts/components/features/status/components/detailed_status.jsx
View File

@@ -36,9 +36,9 @@ const DetailedStatus = React.createClass({
if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />;
media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={317} height={178} />;
} else {
media = <MediaGallery media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
}
}

6
app/assets/javascripts/components/reducers/compose.jsx
View File

@@ -15,7 +15,8 @@ import {
COMPOSE_UPLOAD_PROGRESS,
COMPOSE_SUGGESTIONS_CLEAR,
COMPOSE_SUGGESTIONS_READY,
COMPOSE_SUGGESTION_SELECT
COMPOSE_SUGGESTION_SELECT,
COMPOSE_SENSITIVITY_CHANGE
} from '../actions/compose';
import { TIMELINE_DELETE } from '../actions/timelines';
import { ACCOUNT_SET_SELF } from '../actions/accounts';
@@ -23,6 +24,7 @@ import Immutable from 'immutable';
const initialState = Immutable.Map({
mounted: false,
sensitive: false,
text: '',
in_reply_to: null,
is_submitting: false,
@@ -87,6 +89,8 @@ export default function compose(state = initialState, action) {
return state.set('mounted', true);
case COMPOSE_UNMOUNT:
return state.set('mounted', false);
case COMPOSE_SENSITIVITY_CHANGE:
return state.set('sensitive', action.checked);
case COMPOSE_CHANGE:
return state.set('text', action.text);
case COMPOSE_REPLY:

106
app/assets/stylesheets/components.scss
View File

@@ -405,3 +405,109 @@
text-decoration: underline;
}
}
.react-toggle {
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
cursor: not-allowed;
opacity: 0.5;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #282c37;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: darken(#282c37, 10%);
}
.react-toggle--checked .react-toggle-track {
background-color: #2b90d9;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: lighten(#2b90d9, 10%);
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid #282c37;
border-radius: 50%;
background-color: #FAFAFA;
box-sizing: border-box;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #2b90d9;
}

22
app/controllers/api/v1/accounts_controller.rb
View File

@@ -57,7 +57,8 @@ class Api::V1::AccountsController < ApiController
end
def statuses
@statuses = @account.statuses.with_includes.paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]).to_a
@statuses = @account.statuses.paginate_by_max_id(DEFAULT_STATUSES_LIMIT, params[:max_id], params[:since_id]).to_a
@statuses = cache(@statuses)
set_maps(@statuses)
set_counters_maps(@statuses)
@@ -120,4 +121,23 @@ class Api::V1::AccountsController < ApiController
@followed_by = Account.followed_by_map([@account.id], current_user.account_id)
@blocking = Account.blocking_map([@account.id], current_user.account_id)
end
def cache(raw)
uncached_ids = []
cached_keys_with_value = Rails.cache.read_multi(*raw.map(&:cache_key))
raw.each do |status|
uncached_ids << status.id unless cached_keys_with_value.key?(status.cache_key)
end
unless uncached_ids.empty?
uncached = Status.where(id: uncached_ids).with_includes.map { |s| [s.id, s] }.to_h
uncached.values.each do |status|
Rails.cache.write(status.cache_key, status)
end
end
raw.map { |status| cached_keys_with_value[status.cache_key] || uncached[status.id] }
end
end

4
app/controllers/api/v1/statuses_controller.rb
View File

@@ -9,6 +9,8 @@ class Api::V1::StatusesController < ApiController
respond_to :json
def show
cached = Rails.cache.read(@status.cache_key)
@status = cached unless cached.nil?
end
def context
@@ -50,7 +52,7 @@ class Api::V1::StatusesController < ApiController
end
def create
@status = PostStatusService.new.call(current_user.account, params[:status], params[:in_reply_to_id].blank? ? nil : Status.find(params[:in_reply_to_id]), params[:media_ids])
@status = PostStatusService.new.call(current_user.account, params[:status], params[:in_reply_to_id].blank? ? nil : Status.find(params[:in_reply_to_id]), media_ids: params[:media_ids], sensitive: params[:sensitive])
render action: :show
end

10
app/services/post_status_service.rb
View File

@@ -5,11 +5,13 @@ class PostStatusService < BaseService
# @param [Account] account Account from which to post
# @param [String] text Message
# @param [Status] in_reply_to Optional status to reply to
# @param [Enumerable] media_ids Optional array of media IDs to attach
# @param [Hash] options
# @option [Boolean] :sensitive
# @option [Enumerable] :media_ids Optional array of media IDs to attach
# @return [Status]
def call(account, text, in_reply_to = nil, media_ids = nil)
status = account.statuses.create!(text: text, thread: in_reply_to)
attach_media(status, media_ids)
def call(account, text, in_reply_to = nil, options = {})
status = account.statuses.create!(text: text, thread: in_reply_to, sensitive: options[:sensitive])
attach_media(status, options[:media_ids])
process_mentions_service.call(status)
process_hashtags_service.call(status)
DistributionWorker.perform_async(status.id)

2
app/views/api/v1/statuses/_show.rabl
View File

@@ -1,4 +1,4 @@
attributes :id, :created_at, :in_reply_to_id
attributes :id, :created_at, :in_reply_to_id, :sensitive
node(:uri) { |status| TagManager.instance.uri_for(status) }
node(:content) { |status| Formatter.instance.format(status) }