Add local setting for pop-in player position

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>
     ),
   ];

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}

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,

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%);