diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 22098d57ed..18e0e87c83 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -97,7 +97,7 @@ class Status extends ImmutablePureComponent {
cachedMediaWidth: PropTypes.number,
scrollKey: PropTypes.string,
deployPictureInPicture: PropTypes.func,
- pictureInPicture: PropTypes.shape({
+ pictureInPicture: ImmutablePropTypes.contains({
inUse: PropTypes.bool,
available: PropTypes.bool,
}),
@@ -354,7 +354,7 @@ class Status extends ImmutablePureComponent {
status = status.get('reblog');
}
- if (pictureInPicture.inUse) {
+ if (pictureInPicture.get('inUse')) {
media = ;
} else if (status.get('media_attachments').size > 0) {
if (this.props.muted) {
@@ -381,7 +381,7 @@ class Status extends ImmutablePureComponent {
width={this.props.cachedMediaWidth}
height={110}
cacheWidth={this.props.cacheMediaWidth}
- deployPictureInPicture={pictureInPicture.available ? this.handleDeployPictureInPicture : undefined}
+ deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
/>
)}
@@ -404,7 +404,7 @@ class Status extends ImmutablePureComponent {
sensitive={status.get('sensitive')}
onOpenVideo={this.handleOpenVideo}
cacheWidth={this.props.cacheMediaWidth}
- deployPictureInPicture={pictureInPicture.available ? this.handleDeployPictureInPicture : undefined}
+ deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
/>
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index ef520b96af..d6bcb89734 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import Status from '../components/status';
-import { makeGetStatus } from '../selectors';
+import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
import {
replyCompose,
mentionCompose,
@@ -54,14 +54,11 @@ const messages = defineMessages({
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
+ const getPictureInPicture = makeGetPictureInPicture();
const mapStateToProps = (state, props) => ({
status: getStatus(state, props),
-
- pictureInPicture: {
- inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
- available: state.getIn(['meta', 'layout']) !== 'mobile',
- },
+ pictureInPicture: getPictureInPicture(state, props),
});
return mapStateToProps;
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index e20557eb33..043a749ede 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -41,7 +41,10 @@ class DetailedStatus extends ImmutablePureComponent {
domain: PropTypes.string.isRequired,
compact: PropTypes.bool,
showMedia: PropTypes.bool,
- usingPiP: PropTypes.bool,
+ pictureInPicture: ImmutablePropTypes.contains({
+ inUse: PropTypes.bool,
+ available: PropTypes.bool,
+ }),
onToggleMediaVisibility: PropTypes.func,
};
@@ -102,7 +105,7 @@ class DetailedStatus extends ImmutablePureComponent {
render () {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
const outerStyle = { boxSizing: 'border-box' };
- const { intl, compact, usingPiP } = this.props;
+ const { intl, compact, pictureInPicture } = this.props;
if (!status) {
return null;
@@ -118,7 +121,7 @@ class DetailedStatus extends ImmutablePureComponent {
outerStyle.height = `${this.state.height}px`;
}
- if (usingPiP) {
+ if (pictureInPicture.get('inUse')) {
media = ;
} else if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index c5e7ba7762..09822f372a 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -43,7 +43,7 @@ import {
import { initMuteModal } from '../../actions/mutes';
import { initBlockModal } from '../../actions/blocks';
import { initReport } from '../../actions/reports';
-import { makeGetStatus } from '../../selectors';
+import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
import { ScrollContainer } from 'react-router-scroll-4';
import ColumnBackButton from '../../components/column_back_button';
import ColumnHeader from '../../components/column_header';
@@ -72,6 +72,7 @@ const messages = defineMessages({
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
+ const getPictureInPicture = makeGetPictureInPicture();
const getAncestorsIds = createSelector([
(_, { id }) => id,
@@ -129,11 +130,12 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => {
const status = getStatus(state, { id: props.params.statusId });
- let ancestorsIds = Immutable.List();
+
+ let ancestorsIds = Immutable.List();
let descendantsIds = Immutable.List();
if (status) {
- ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
+ ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
descendantsIds = getDescendantsIds(state, { id: status.get('id') });
}
@@ -143,7 +145,7 @@ const makeMapStateToProps = () => {
descendantsIds,
askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
domain: state.getIn(['meta', 'domain']),
- usingPiP: state.get('picture_in_picture').statusId === props.params.statusId,
+ pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
};
};
@@ -168,7 +170,10 @@ class Status extends ImmutablePureComponent {
askReplyConfirmation: PropTypes.bool,
multiColumn: PropTypes.bool,
domain: PropTypes.string.isRequired,
- usingPiP: PropTypes.bool,
+ pictureInPicture: ImmutablePropTypes.contains({
+ inUse: PropTypes.bool,
+ available: PropTypes.bool,
+ }),
};
state = {
@@ -492,7 +497,7 @@ class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
- const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props;
+ const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
const { fullscreen } = this.state;
if (status === null) {
@@ -550,7 +555,7 @@ class Status extends ImmutablePureComponent {
domain={domain}
showMedia={this.state.showMedia}
onToggleMediaVisibility={this.handleToggleMediaVisibility}
- usingPiP={usingPiP}
+ pictureInPicture={pictureInPicture}
/>
state.getIn(['accounts', id], null);
@@ -121,6 +121,16 @@ export const makeGetStatus = () => {
);
};
+export const makeGetPictureInPicture = () => {
+ return createSelector([
+ (state, { id }) => state.get('picture_in_picture').statusId === id,
+ (state) => state.getIn(['meta', 'layout']) !== 'mobile',
+ ], (inUse, available) => ImmutableMap({
+ inUse: inUse && available,
+ available,
+ }));
+};
+
const getAlertsBase = state => state.get('alerts');
export const getAlerts = createSelector([getAlertsBase], (base) => {