From 8f950e540b83e13748c0df9bc30afbb06ef26f3e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 28 Sep 2020 13:29:43 +0200 Subject: [Glitch] Add pop-out player for audio/video in web UI port d88a79b4566869ede24958fbff946e357bbb3cb9 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/reducers/index.js | 2 ++ .../flavours/glitch/reducers/picture_in_picture.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 app/javascript/flavours/glitch/reducers/picture_in_picture.js (limited to 'app/javascript/flavours/glitch/reducers') diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.js index cadbd01a3..b1ddb769e 100644 --- a/app/javascript/flavours/glitch/reducers/index.js +++ b/app/javascript/flavours/glitch/reducers/index.js @@ -38,6 +38,7 @@ import trends from './trends'; import announcements from './announcements'; import markers from './markers'; import account_notes from './account_notes'; +import picture_in_picture from './picture_in_picture'; const reducers = { announcements, @@ -79,6 +80,7 @@ const reducers = { trends, markers, account_notes, + picture_in_picture, }; export default combineReducers(reducers); diff --git a/app/javascript/flavours/glitch/reducers/picture_in_picture.js b/app/javascript/flavours/glitch/reducers/picture_in_picture.js new file mode 100644 index 000000000..f552a59c2 --- /dev/null +++ b/app/javascript/flavours/glitch/reducers/picture_in_picture.js @@ -0,0 +1,22 @@ +import { PICTURE_IN_PICTURE_DEPLOY, PICTURE_IN_PICTURE_REMOVE } from 'flavours/glitch/actions/picture_in_picture'; + +const initialState = { + statusId: null, + accountId: null, + type: null, + src: null, + muted: false, + volume: 0, + currentTime: 0, +}; + +export default function pictureInPicture(state = initialState, action) { + switch(action.type) { + case PICTURE_IN_PICTURE_DEPLOY: + return { statusId: action.statusId, accountId: action.accountId, type: action.playerType, ...action.props }; + case PICTURE_IN_PICTURE_REMOVE: + return { ...initialState }; + default: + return state; + } +}; -- cgit From ea5298ab9b4b989119218807281b68d19756cd7a Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 26 Oct 2020 20:11:35 +0100 Subject: Add setting to disable the pop-in player --- app/javascript/flavours/glitch/containers/status_container.js | 6 +++++- .../flavours/glitch/features/local_settings/page/index.js | 8 ++++++++ app/javascript/flavours/glitch/reducers/local_settings.js | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/reducers') diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index 48b0d8255..ac423c58d 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -248,7 +248,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ }, deployPictureInPicture (status, type, mediaProps) { - dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps)); + dispatch((_, getState) => { + if (getState().getIn(['local_settings', 'media', 'pop_in_player'])) { + dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps)); + } + }); }, }); 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 0b3428027..bce45901e 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -420,6 +420,14 @@ class LocalSettingsPage extends React.PureComponent { > + + + ), ]; diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index 3d94d665c..e4df22b9f 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -49,6 +49,7 @@ const initialState = ImmutableMap({ letterbox : true, fullwidth : true, reveal_behind_cw : false, + pop_in_player : true, }), notifications : ImmutableMap({ favicon_badge : false, -- cgit From 49ee69f75f24ef13f36cb177d5278fcc3a5f3d37 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 26 Oct 2020 20:45:25 +0100 Subject: Add local setting for pop-in player position --- .../glitch/features/local_settings/page/index.js | 17 ++++++++++++++++- .../glitch/features/picture_in_picture/index.js | 7 +++++-- .../flavours/glitch/reducers/local_settings.js | 1 + .../flavours/glitch/styles/components/status.scss | 5 +++++ 4 files changed, 27 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours/glitch/reducers') 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 { ), - ({ 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 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 ( -
+
{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%); -- cgit