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 bce45901e2..45d10d154e 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 {
),
- ({ onChange, settings }) => (
+ ({ intl, onChange, settings }) => (
+
+
+
),
];
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 200f2fc7f1..3e6a20faa8 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 (
-
+
{player}
diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js
index e4df22b9f6..c115cad6ba 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 7ec377bada..554ea8cd52 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%);