tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change media modals look in web UI

Browse Source 
Port 1e89e2ed98 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2020-11-27 03:24:11 +01:00
committed by Claire
parent d30dd5b1db
commit 50b100df00
13 changed files with 332 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/flavours/glitch/components/modal_root.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import 'wicg-inert';
import { createBrowserHistory } from 'history';
import { normal } from 'color-blend';
export default class ModalRoot extends React.PureComponent {
static contextTypes = {
@@ -11,6 +12,11 @@ export default class ModalRoot extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
backgroundColor: PropTypes.shape({
r: PropTypes.number,
g: PropTypes.number,
b: PropTypes.number,
}),
noEsc: PropTypes.bool,
};
@@ -68,9 +74,7 @@ export default class ModalRoot extends React.PureComponent {
Promise.resolve().then(() => {
this.activeElement.focus({ preventScroll: true });
this.activeElement = null;
}).catch((error) => {
console.error(error);
});
}).catch(console.error);
this.handleModalClose();
}
@@ -120,10 +124,16 @@ export default class ModalRoot extends React.PureComponent {
);
}
let backgroundColor = null;
if (this.props.backgroundColor) {
backgroundColor = normal({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.3 });
}
return (
<div className='modal-root' ref={this.setRef}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.7)` : null }} />
<div role='dialog' className='modal-root__container'>{children}</div>
</div>
</div>

19
app/javascript/flavours/glitch/components/status.js
View File

@@ -379,21 +379,24 @@ class Status extends ImmutablePureComponent {
};
handleOpenVideo = (media, options) => {
this.props.onOpenVideo(media, options);
this.props.onOpenVideo(this.props.status.get('id'), media, options);
}
handleOpenMedia = (media, index) => {
this.props.onOpenMedia(this.props.status.get('id'), media, index);
}
handleHotkeyOpenMedia = e => {
const { status, onOpenMedia, onOpenVideo } = this.props;
const statusId = status.get('id');
e.preventDefault();
if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
// TODO: toggle play/paused?
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
onOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
onOpenVideo(statusId, status.getIn(['media_attachments', 0]), { startTime: 0 });
} else {
onOpenMedia(status.get('media_attachments'), 0);
onOpenMedia(statusId, status.get('media_attachments'), 0);
}
}
}
@@ -657,7 +660,7 @@ class Status extends ImmutablePureComponent {
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
hidden={isCollapsed || !isExpanded}
onOpenMedia={this.props.onOpenMedia}
onOpenMedia={this.handleOpenMedia}
cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth}
visible={this.state.showMedia}
@@ -675,7 +678,7 @@ class Status extends ImmutablePureComponent {
} else if (status.get('card') && settings.get('inline_preview_cards')) {
media = (
<Card
onOpenMedia={this.props.onOpenMedia}
onOpenMedia={this.handleOpenMedia}
card={status.get('card')}
compact
cacheWidth={this.props.cacheMediaWidth}