Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
Fix not being able to open audio modal in web UI (mastodon#15283)
Browse files Browse the repository at this point in the history 
Fix mastodon#15280

Also adds the new action bar and blurhash-based background
color to audio and video modals
  • Loading branch information
@Gargron
Gargron authored Dec 7, 2020
1 parent 59d943e commit a8c471f
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 157 deletions.
112 changes: 112 additions & 0 deletions app/javascript/mastodon/blurhash.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
const DIGIT_CHARACTERS = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z',
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n',
'o',
'p',
'q',
'r',
's',
't',
'u',
'v',
'w',
'x',
'y',
'z',
'#',
'$',
'%',
'*',
'+',
',',
'-',
'.',
':',
';',
'=',
'?',
'@',
'[',
']',
'^',
'_',
'{',
'|',
'}',
'~',
];

export const decode83 = (str) => {
let value = 0;
let c, digit;

for (let i = 0; i < str.length; i++) {
c = str[i];
digit = DIGIT_CHARACTERS.indexOf(c);
value = value * 83 + digit;
}

return value;
};

export const intToRGB = int => ({
r: Math.max(0, (int >> 16)),
g: Math.max(0, (int >> 8) & 255),
b: Math.max(0, (int & 255)),
});

export const getAverageFromBlurhash = blurhash => {
if (!blurhash) {
return null;
}

return intToRGB(decode83(blurhash.slice(2, 6)));
};
5 changes: 3 additions & 2 deletions app/javascript/mastodon/components/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,9 @@ class Status extends ImmutablePureComponent {
return <div className='audio-player' style={{ height: '110px' }} />;
}

handleOpenVideo = (media, options) => {
this.props.onOpenVideo(this._properStatus().get('id'), media, options);
handleOpenVideo = (options) => {
const status = this._properStatus();
this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), options);
}

handleOpenMedia = (media, index) => {
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/mastodon/features/status/components/detailed_status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ class DetailedStatus extends ImmutablePureComponent {
e.stopPropagation();
}

handleOpenVideo = (media, options) => {
this.props.onOpenVideo(media, options);
handleOpenVideo = (options) => {
this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), options);
}

handleExpandedToggle = () => {
Expand Down
32 changes: 11 additions & 21 deletions app/javascript/mastodon/features/ui/components/audio_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,25 @@ import PropTypes from 'prop-types';
import Audio from 'mastodon/features/audio';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import { previewState } from './video_modal';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import Footer from 'mastodon/features/picture_in_picture/components/footer';

const mapStateToProps = (state, { status }) => ({
account: state.getIn(['accounts', status.get('account')]),
const mapStateToProps = (state, { statusId }) => ({
accountStaticAvatar: state.getIn(['accounts', state.getIn(['statuses', statusId, 'account']), 'avatar_static']),
});

export default @connect(mapStateToProps)
class AudioModal extends ImmutablePureComponent {

static propTypes = {
media: ImmutablePropTypes.map.isRequired,
status: ImmutablePropTypes.map,
statusId: PropTypes.string.isRequired,
accountStaticAvatar: PropTypes.string.isRequired,
options: PropTypes.shape({
autoPlay: PropTypes.bool,
}),
account: ImmutablePropTypes.map,
onClose: PropTypes.func.isRequired,
onChangeBackgroundColor: PropTypes.func.isRequired,
};

static contextTypes = {
Expand Down Expand Up @@ -52,15 +51,8 @@ class AudioModal extends ImmutablePureComponent {
}
}

handleStatusClick = e => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
}
}

render () {
const { media, status, account } = this.props;
const { media, accountStaticAvatar, statusId, onClose } = this.props;
const options = this.props.options || {};

return (
Expand All @@ -71,19 +63,17 @@ class AudioModal extends ImmutablePureComponent {
alt={media.get('description')}
duration={media.getIn(['meta', 'original', 'duration'], 0)}
height={150}
poster={media.get('preview_url') || account.get('avatar_static')}
poster={media.get('preview_url') || accountStaticAvatar}
backgroundColor={media.getIn(['meta', 'colors', 'background'])}
foregroundColor={media.getIn(['meta', 'colors', 'foreground'])}
accentColor={media.getIn(['meta', 'colors', 'accent'])}
autoPlay={options.autoPlay}
/>
</div>

{status && (
<div className={classNames('media-modal__meta')}>
<a href={status.get('url')} onClick={this.handleStatusClick}><Icon id='comments' /> <FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
</div>
)}
<div className='media-modal__overlay'>
{statusId && <Footer statusId={statusId} withOpenButton onClose={onClose} />}
</div>
</div>
);
}
Expand Down
108 changes: 2 additions & 106 deletions app/javascript/mastodon/features/ui/components/media_modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Icon from 'mastodon/components/icon';
import GIFV from 'mastodon/components/gifv';
import { disableSwiping } from 'mastodon/initial_state';
import Footer from 'mastodon/features/picture_in_picture/components/footer';
import { getAverageFromBlurhash } from 'mastodon/blurhash';

const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
Expand All @@ -21,111 +22,6 @@ const messages = defineMessages({

export const previewState = 'previewMediaModal';

const digitCharacters = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z',
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n',
'o',
'p',
'q',
'r',
's',
't',
'u',
'v',
'w',
'x',
'y',
'z',
'#',
'$',
'%',
'*',
'+',
',',
'-',
'.',
':',
';',
'=',
'?',
'@',
'[',
']',
'^',
'_',
'{',
'|',
'}',
'~',
];

const decode83 = (str) => {
let value = 0;
let c, digit;

for (let i = 0; i < str.length; i++) {
c = str[i];
digit = digitCharacters.indexOf(c);
value = value * 83 + digit;
}

return value;
};

const decodeRGB = int => ({
r: Math.max(0, (int >> 16)),
g: Math.max(0, (int >> 8) & 255),
b: Math.max(0, (int & 255)),
});

export default @injectIntl
class MediaModal extends ImmutablePureComponent {

Expand Down Expand Up @@ -224,7 +120,7 @@ class MediaModal extends ImmutablePureComponent {
const blurhash = media.getIn([index, 'blurhash']);

if (blurhash) {
const backgroundColor = decodeRGB(decode83(blurhash.slice(2, 6)));
const backgroundColor = getAverageFromBlurhash(blurhash);
onChangeBackgroundColor(backgroundColor);
}
}
Expand Down
Loading

0 comments on commit a8c471f

Please sign in to comment.