diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2020-09-28 13:29:43 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-09-28 13:29:43 +0200 |
commit | d88a79b4566869ede24958fbff946e357bbb3cb9 (patch) | |
tree | a8a38995b2f23b6a4800fa13c4c43eb20d1a72b0 /app/javascript/mastodon/features/status | |
parent | 5bbc9a4f78cce2ba519b061e77b166417b044235 (diff) |
Add pop-out player for audio/video in web UI (#14870)
Fix #11160
Diffstat (limited to 'app/javascript/mastodon/features/status')
-rw-r--r-- | app/javascript/mastodon/features/status/components/detailed_status.js | 8 | ||||
-rw-r--r-- | app/javascript/mastodon/features/status/index.js | 5 |
2 files changed, 10 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index b1ae0b2cc..c2b883f7f 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -15,6 +15,7 @@ import scheduleIdleTask from '../../ui/util/schedule_idle_task'; import classNames from 'classnames'; import Icon from 'mastodon/components/icon'; import AnimatedNumber from 'mastodon/components/animated_number'; +import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder'; const messages = defineMessages({ public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, @@ -40,6 +41,7 @@ class DetailedStatus extends ImmutablePureComponent { domain: PropTypes.string.isRequired, compact: PropTypes.bool, showMedia: PropTypes.bool, + usingPiP: PropTypes.bool, onToggleMediaVisibility: PropTypes.func, }; @@ -100,7 +102,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 } = this.props; + const { intl, compact, usingPiP } = this.props; if (!status) { return null; @@ -116,7 +118,9 @@ class DetailedStatus extends ImmutablePureComponent { outerStyle.height = `${this.state.height}px`; } - if (status.get('media_attachments').size > 0) { + if (usingPiP) { + media = <PictureInPicturePlaceholder />; + } else if (status.get('media_attachments').size > 0) { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { const attachment = status.getIn(['media_attachments', 0]); diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js index 179df53a1..cf3a5fa44 100644 --- a/app/javascript/mastodon/features/status/index.js +++ b/app/javascript/mastodon/features/status/index.js @@ -143,6 +143,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, }; }; @@ -167,6 +168,7 @@ class Status extends ImmutablePureComponent { askReplyConfirmation: PropTypes.bool, multiColumn: PropTypes.bool, domain: PropTypes.string.isRequired, + usingPiP: PropTypes.bool, }; state = { @@ -492,7 +494,7 @@ class Status extends ImmutablePureComponent { render () { let ancestors, descendants; - const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props; + const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props; const { fullscreen } = this.state; if (status === null) { @@ -550,6 +552,7 @@ class Status extends ImmutablePureComponent { domain={domain} showMedia={this.state.showMedia} onToggleMediaVisibility={this.handleToggleMediaVisibility} + usingPiP={usingPiP} /> <ActionBar |