Add local setting for pop-in player position

th-downstream
Thibaut Girka 4 years ago
parent 1b724e0738
commit a984e2c4cb

@ -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…
Cancel
Save