diff options
Diffstat (limited to 'app/javascript/flavours')
4 files changed, 27 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index bce45901e..45d10d154 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -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> ), ]; diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/index.js b/app/javascript/flavours/glitch/features/picture_in_picture/index.js index 200f2fc7f..3e6a20faa 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/index.js +++ b/app/javascript/flavours/glitch/features/picture_in_picture/index.js @@ -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} diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index e4df22b9f..c115cad6b 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -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, diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 7ec377bad..554ea8cd5 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -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%); |