Add local setting for pop-in player position
This commit is contained in:
parent
ea5298ab9b
commit
49ee69f75f
|
@ -28,6 +28,8 @@ const messages = defineMessages({
|
|||
rewrite_mentions_no: { id: 'settings.rewrite_mentions_no', defaultMessage: 'Do not rewrite mentions' },
|
||||
rewrite_mentions_acct: { id: 'settings.rewrite_mentions_acct', defaultMessage: 'Rewrite with username and domain (when the account is remote)' },
|
||||
rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage: 'Rewrite with username' },
|
||||
pop_in_left: { id: 'settings.pop_in_left', defaultMessage: 'Left' },
|
||||
pop_in_right: { id: 'settings.pop_in_right', defaultMessage: 'Right' },
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
|
@ -384,7 +386,7 @@ class LocalSettingsPage extends React.PureComponent {
|
|||
</section>
|
||||
</div>
|
||||
),
|
||||
({ onChange, settings }) => (
|
||||
({ intl, onChange, settings }) => (
|
||||
<div className='glitch local-settings__page media'>
|
||||
<h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
|
||||
<LocalSettingsPageItem
|
||||
|
@ -428,6 +430,19 @@ class LocalSettingsPage extends React.PureComponent {
|
|||
>
|
||||
<FormattedMessage id='settings.pop_in_player' defaultMessage='Enable pop-in player' />
|
||||
</LocalSettingsPageItem>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={['media', 'pop_in_position']}
|
||||
id='mastodon-settings--pop-in-position'
|
||||
options={[
|
||||
{ value: 'left', message: intl.formatMessage(messages.pop_in_left) },
|
||||
{ value: 'right', message: intl.formatMessage(messages.pop_in_right) },
|
||||
]}
|
||||
onChange={onChange}
|
||||
dependsOn={[['media', 'pop_in_player']]}
|
||||
>
|
||||
<FormattedMessage id='settings.pop_in_position' defaultMessage='Pop-in player position:' />
|
||||
</LocalSettingsPageItem>
|
||||
</div>
|
||||
),
|
||||
];
|
||||
|
|
|
@ -6,9 +6,11 @@ import Audio from 'flavours/glitch/features/audio';
|
|||
import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
|
||||
import Header from './components/header';
|
||||
import Footer from './components/footer';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
...state.get('picture_in_picture'),
|
||||
left: state.getIn(['local_settings', 'media', 'pop_in_position']) === 'left',
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
|
@ -27,6 +29,7 @@ class PictureInPicture extends React.Component {
|
|||
foregroundColor: PropTypes.string,
|
||||
accentColor: PropTypes.string,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
left: PropTypes.bool,
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
|
@ -35,7 +38,7 @@ class PictureInPicture extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { type, src, currentTime, accountId, statusId } = this.props;
|
||||
const { type, src, currentTime, accountId, statusId, left } = this.props;
|
||||
|
||||
if (!currentTime) {
|
||||
return null;
|
||||
|
@ -72,7 +75,7 @@ class PictureInPicture extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='picture-in-picture'>
|
||||
<div className={classNames('picture-in-picture', { left })}>
|
||||
<Header accountId={accountId} statusId={statusId} onClose={this.handleClose} />
|
||||
|
||||
{player}
|
||||
|
|
|
@ -50,6 +50,7 @@ const initialState = ImmutableMap({
|
|||
fullwidth : true,
|
||||
reveal_behind_cw : false,
|
||||
pop_in_player : true,
|
||||
pop_in_position : 'right',
|
||||
}),
|
||||
notifications : ImmutableMap({
|
||||
favicon_badge : false,
|
||||
|
|
|
@ -1066,6 +1066,11 @@ a.status-card.compact:hover {
|
|||
right: 20px;
|
||||
width: 300px;
|
||||
|
||||
&.left {
|
||||
right: unset;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-radius: 0 0 4px 4px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
|
Loading…
Reference in New Issue