kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Media: prefer V2 media API when available
rodzic
ddad49480b
commit
a6f5cf33d0
|
@ -1,11 +1,34 @@
|
||||||
import api from '../api';
|
import api from '../api';
|
||||||
|
import { getFeatures } from 'soapbox/utils/features';
|
||||||
|
|
||||||
const noOp = () => {};
|
const noOp = () => {};
|
||||||
|
|
||||||
export function uploadMedia(data, onUploadProgress = noOp) {
|
export function uploadMediaV1(data, onUploadProgress = noOp) {
|
||||||
return function(dispatch, getState) {
|
return (dispatch, getState) => {
|
||||||
return api(getState).post('/api/v1/media', data, {
|
return api(getState).post('/api/v1/media', data, {
|
||||||
onUploadProgress: onUploadProgress,
|
onUploadProgress: onUploadProgress,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function uploadMediaV2(data, onUploadProgress = noOp) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
return api(getState).post('/api/v2/media', data, {
|
||||||
|
onUploadProgress: onUploadProgress,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function uploadMedia(data, onUploadProgress = noOp) {
|
||||||
|
return (dispatch, getState) => {
|
||||||
|
const state = getState();
|
||||||
|
const instance = state.get('instance');
|
||||||
|
const features = getFeatures(instance);
|
||||||
|
|
||||||
|
if (features.mediaV2) {
|
||||||
|
return dispatch(uploadMediaV2(data, onUploadProgress));
|
||||||
|
} else {
|
||||||
|
return dispatch(uploadMediaV1(data, onUploadProgress));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
@ -140,7 +140,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
||||||
: <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
|
: <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
|
||||||
</div>
|
</div>
|
||||||
{text && <span className='icon_button__text'>{text}</span>}
|
{text && <span className='icon-button__text'>{text}</span>}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -169,7 +169,7 @@ export default class IconButton extends React.PureComponent {
|
||||||
? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
|
||||||
: <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
|
: <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
|
||||||
</div>
|
</div>
|
||||||
{text && <span className='icon_button__text'>{text}</span>}
|
{text && <span className='icon-button__text'>{text}</span>}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</Motion>
|
</Motion>
|
||||||
|
|
|
@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Icon from 'soapbox/components/icon';
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import IconButton from 'soapbox/components/icon_button';
|
||||||
import Blurhash from 'soapbox/components/blurhash';
|
import Blurhash from 'soapbox/components/blurhash';
|
||||||
|
|
||||||
const MIMETYPE_ICONS = {
|
const MIMETYPE_ICONS = {
|
||||||
|
@ -153,8 +154,20 @@ class Upload extends ImmutablePureComponent {
|
||||||
backgroundPosition: `${x}% ${y}%` }}
|
backgroundPosition: `${x}% ${y}%` }}
|
||||||
>
|
>
|
||||||
<div className={classNames('compose-form__upload__actions', { active })}>
|
<div className={classNames('compose-form__upload__actions', { active })}>
|
||||||
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
|
<IconButton
|
||||||
{mediaType !== 'unknown' && <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>}
|
onClick={this.handleUndoClick}
|
||||||
|
src={require('@tabler/icons/icons/x.svg')}
|
||||||
|
text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Only display the "Preview" button for a valid attachment with a URL */}
|
||||||
|
{(mediaType !== 'unknown' && Boolean(media.get('url'))) && (
|
||||||
|
<IconButton
|
||||||
|
onClick={this.handleOpenModal}
|
||||||
|
src={require('@tabler/icons/icons/zoom-in.svg')}
|
||||||
|
text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={classNames('compose-form__upload-description', { active })}>
|
<div className={classNames('compose-form__upload-description', { active })}>
|
||||||
|
|
|
@ -26,6 +26,10 @@ export const getFeatures = createSelector([
|
||||||
suggestions: v.software === MASTODON && gte(v.compatVersion, '2.4.3'),
|
suggestions: v.software === MASTODON && gte(v.compatVersion, '2.4.3'),
|
||||||
suggestionsV2: v.software === MASTODON && gte(v.compatVersion, '3.4.0'),
|
suggestionsV2: v.software === MASTODON && gte(v.compatVersion, '3.4.0'),
|
||||||
trends: v.software === MASTODON && gte(v.compatVersion, '3.0.0'),
|
trends: v.software === MASTODON && gte(v.compatVersion, '3.0.0'),
|
||||||
|
mediaV2: any([
|
||||||
|
v.software === MASTODON && gte(v.compatVersion, '3.1.3'),
|
||||||
|
v.software === PLEROMA && gte(v.version, '2.1.0'),
|
||||||
|
]),
|
||||||
emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
|
emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
|
||||||
emojiReactsRGI: v.software === PLEROMA && gte(v.version, '2.2.49'),
|
emojiReactsRGI: v.software === PLEROMA && gte(v.version, '2.2.49'),
|
||||||
attachmentLimit: v.software === PLEROMA ? Infinity : 4,
|
attachmentLimit: v.software === PLEROMA ? Infinity : 4,
|
||||||
|
|
|
@ -86,7 +86,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.icon_button__text {
|
&__text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
.icon-button {
|
.icon-button {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -12,6 +13,10 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
Ładowanie…
Reference in New Issue