Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Rewrite PIP state in Typescript (#27645)

Browse source 
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Renaud Chaput 2024-03-27 16:19:33 +01:00 • committed by GitHub
parent b016f03637
commit 9fbe8d3a0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 218 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
View file

@ -210,4 +210,4 @@ class Footer extends ImmutablePureComponent {
}
export default withRouter(connect(makeMapStateToProps)(injectIntl(Footer)));
export default connect(makeMapStateToProps)(withRouter(injectIntl(Footer)));

51
app/javascript/mastodon/features/picture_in_picture/components/header.jsx
View file

@ -1,51 +0,0 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
import { IconButton } from 'mastodon/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
const mapStateToProps = (state, { accountId }) => ({
account: state.getIn(['accounts', accountId]),
});
class Header extends ImmutablePureComponent {
static propTypes = {
accountId: PropTypes.string.isRequired,
statusId: PropTypes.string.isRequired,
account: ImmutablePropTypes.record.isRequired,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { account, statusId, onClose, intl } = this.props;
return (
<div className='picture-in-picture__header'>
<Link to={`/@${account.get('acct')}/${statusId}`} className='picture-in-picture__header__account'>
<Avatar account={account} size={36} />
<DisplayName account={account} />
</Link>
<IconButton icon='times' iconComponent={CloseIcon} onClick={onClose} title={intl.formatMessage(messages.close)} />
</div>
);
}
}
export default connect(mapStateToProps)(injectIntl(Header));

46
app/javascript/mastodon/features/picture_in_picture/components/header.tsx Normal file
View file

@ -0,0 +1,46 @@
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
import { IconButton } from 'mastodon/components/icon_button';
import { useAppSelector } from 'mastodon/store';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
interface Props {
accountId: string;
statusId: string;
onClose: () => void;
}
export const Header: React.FC<Props> = ({ accountId, statusId, onClose }) => {
const account = useAppSelector((state) => state.accounts.get(accountId));
const intl = useIntl();
if (!account) return null;
return (
<div className='picture-in-picture__header'>
<Link
to={`/@${account.get('acct')}/${statusId}`}
className='picture-in-picture__header__account'
>
<Avatar account={account} size={36} />
<DisplayName account={account} />
</Link>
<IconButton
icon='times'
iconComponent={CloseIcon}
onClick={onClose}
title={intl.formatMessage(messages.close)}
/>
</div>
);
};

89
app/javascript/mastodon/features/picture_in_picture/index.jsx
View file

@ -1,89 +0,0 @@
import PropTypes from 'prop-types';
import { Component } from 'react';
import { connect } from 'react-redux';
import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
import Audio from 'mastodon/features/audio';
import Video from 'mastodon/features/video';
import Footer from './components/footer';
import Header from './components/header';
const mapStateToProps = state => ({
...state.get('picture_in_picture'),
});
class PictureInPicture extends Component {
static propTypes = {
statusId: PropTypes.string,
accountId: PropTypes.string,
type: PropTypes.string,
src: PropTypes.string,
muted: PropTypes.bool,
volume: PropTypes.number,
currentTime: PropTypes.number,
poster: PropTypes.string,
backgroundColor: PropTypes.string,
foregroundColor: PropTypes.string,
accentColor: PropTypes.string,
dispatch: PropTypes.func.isRequired,
};
handleClose = () => {
const { dispatch } = this.props;
dispatch(removePictureInPicture());
};
render () {
const { type, src, currentTime, accountId, statusId } = this.props;
if (!currentTime) {
return null;
}
let player;
if (type === 'video') {
player = (
<Video
src={src}
currentTime={this.props.currentTime}
volume={this.props.volume}
muted={this.props.muted}
autoPlay
inline
alwaysVisible
/>
);
} else if (type === 'audio') {
player = (
<Audio
src={src}
currentTime={this.props.currentTime}
volume={this.props.volume}
muted={this.props.muted}
poster={this.props.poster}
backgroundColor={this.props.backgroundColor}
foregroundColor={this.props.foregroundColor}
accentColor={this.props.accentColor}
autoPlay
/>
);
}
return (
<div className='picture-in-picture'>
<Header accountId={accountId} statusId={statusId} onClose={this.handleClose} />
{player}
<Footer statusId={statusId} />
</div>
);
}
}
export default connect(mapStateToProps)(PictureInPicture);

79
app/javascript/mastodon/features/picture_in_picture/index.tsx Normal file
View file

@ -0,0 +1,79 @@
import { useCallback } from 'react';
import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
import Audio from 'mastodon/features/audio';
import Video from 'mastodon/features/video';
import { useAppDispatch, useAppSelector } from 'mastodon/store/typed_functions';
import Footer from './components/footer';
import { Header } from './components/header';
export const PictureInPicture: React.FC = () => {
const dispatch = useAppDispatch();
const handleClose = useCallback(() => {
dispatch(removePictureInPicture());
}, [dispatch]);
const pipState = useAppSelector((s) => s.picture_in_picture);
if (pipState.type === null) {
return null;
}
const {
type,
src,
currentTime,
accountId,
statusId,
volume,
muted,
poster,
backgroundColor,
foregroundColor,
accentColor,
} = pipState;
let player;
switch (type) {
case 'video':
player = (
<Video
src={src}
currentTime={currentTime}
volume={volume}
muted={muted}
autoPlay
inline
alwaysVisible
/>
);
break;
case 'audio':
player = (
<Audio
src={src}
currentTime={currentTime}
volume={volume}
muted={muted}
poster={poster}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
accentColor={accentColor}
autoPlay
/>
);
}
return (
<div className='picture-in-picture'>
<Header accountId={accountId} statusId={statusId} onClose={handleClose} />
{player}
<Footer statusId={statusId} />
</div>
);
};

2
app/javascript/mastodon/features/ui/index.jsx
View file

@ -14,7 +14,7 @@ import { HotKeys } from 'react-hotkeys';
import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
import PictureInPicture from 'mastodon/features/picture_in_picture';
import { PictureInPicture } from 'mastodon/features/picture_in_picture';
import { layoutFromWindow } from 'mastodon/is_mobile';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';