mirror of
https://github.com/funamitech/mastodon
synced 2024-12-13 06:09:08 +09:00
[Glitch] Fix expand video on public page
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
d8e756eda8
commit
34cc6f45ac
@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
|
|||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { IntlProvider, addLocaleData } from 'react-intl';
|
import { IntlProvider, addLocaleData } from 'react-intl';
|
||||||
import { List as ImmutableList, fromJS } from 'immutable';
|
import { fromJS } from 'immutable';
|
||||||
import { getLocale } from 'mastodon/locales';
|
import { getLocale } from 'mastodon/locales';
|
||||||
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
|
import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar';
|
||||||
import MediaGallery from 'flavours/glitch/components/media_gallery';
|
import MediaGallery from 'flavours/glitch/components/media_gallery';
|
||||||
@ -31,6 +31,7 @@ export default class MediaContainer extends PureComponent {
|
|||||||
index: null,
|
index: null,
|
||||||
time: null,
|
time: null,
|
||||||
backgroundColor: null,
|
backgroundColor: null,
|
||||||
|
options: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
handleOpenMedia = (media, index) => {
|
handleOpenMedia = (media, index) => {
|
||||||
@ -40,13 +41,15 @@ export default class MediaContainer extends PureComponent {
|
|||||||
this.setState({ media, index });
|
this.setState({ media, index });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOpenVideo = (video, time) => {
|
handleOpenVideo = (options) => {
|
||||||
const media = ImmutableList([video]);
|
const { components } = this.props;
|
||||||
|
const { media } = JSON.parse(components[options.componetIndex].getAttribute('data-props'));
|
||||||
|
const mediaList = fromJS(media);
|
||||||
|
|
||||||
document.body.classList.add('with-modals--active');
|
document.body.classList.add('with-modals--active');
|
||||||
document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
|
document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
|
||||||
|
|
||||||
this.setState({ media, time });
|
this.setState({ media: mediaList, options });
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCloseMedia = () => {
|
handleCloseMedia = () => {
|
||||||
@ -58,6 +61,7 @@ export default class MediaContainer extends PureComponent {
|
|||||||
index: null,
|
index: null,
|
||||||
time: null,
|
time: null,
|
||||||
backgroundColor: null,
|
backgroundColor: null,
|
||||||
|
options: null,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,6 +87,7 @@ export default class MediaContainer extends PureComponent {
|
|||||||
...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
|
...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
|
||||||
|
|
||||||
...(componentName === 'Video' ? {
|
...(componentName === 'Video' ? {
|
||||||
|
componetIndex: i,
|
||||||
onOpenVideo: this.handleOpenVideo,
|
onOpenVideo: this.handleOpenVideo,
|
||||||
} : {
|
} : {
|
||||||
onOpenMedia: this.handleOpenMedia,
|
onOpenMedia: this.handleOpenMedia,
|
||||||
@ -100,7 +105,9 @@ export default class MediaContainer extends PureComponent {
|
|||||||
<MediaModal
|
<MediaModal
|
||||||
media={this.state.media}
|
media={this.state.media}
|
||||||
index={this.state.index || 0}
|
index={this.state.index || 0}
|
||||||
time={this.state.time}
|
currentTime={this.state.options?.startTime}
|
||||||
|
autoPlay={this.state.options?.autoPlay}
|
||||||
|
volume={this.state.options?.defaultVolume}
|
||||||
onClose={this.handleCloseMedia}
|
onClose={this.handleCloseMedia}
|
||||||
onChangeBackgroundColor={this.setBackgroundColor}
|
onChangeBackgroundColor={this.setBackgroundColor}
|
||||||
/>
|
/>
|
||||||
|
@ -33,6 +33,9 @@ class MediaModal extends ImmutablePureComponent {
|
|||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
onChangeBackgroundColor: PropTypes.func.isRequired,
|
onChangeBackgroundColor: PropTypes.func.isRequired,
|
||||||
|
currentTime: PropTypes.number,
|
||||||
|
autoPlay: PropTypes.bool,
|
||||||
|
volume: PropTypes.number,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
@ -162,7 +165,7 @@ class MediaModal extends ImmutablePureComponent {
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else if (image.get('type') === 'video') {
|
} else if (image.get('type') === 'video') {
|
||||||
const { time } = this.props;
|
const { currentTime, autoPlay, volume } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Video
|
<Video
|
||||||
@ -171,7 +174,10 @@ class MediaModal extends ImmutablePureComponent {
|
|||||||
src={image.get('url')}
|
src={image.get('url')}
|
||||||
width={image.get('width')}
|
width={image.get('width')}
|
||||||
height={image.get('height')}
|
height={image.get('height')}
|
||||||
currentTime={time || 0}
|
frameRate={image.getIn(['meta', 'original', 'frame_rate'])}
|
||||||
|
currentTime={currentTime || 0}
|
||||||
|
autoPlay={autoPlay || false}
|
||||||
|
volume={volume || 1}
|
||||||
onCloseVideo={onClose}
|
onCloseVideo={onClose}
|
||||||
detailed
|
detailed
|
||||||
alt={image.get('description')}
|
alt={image.get('description')}
|
||||||
|
@ -123,6 +123,7 @@ class Video extends React.PureComponent {
|
|||||||
autoPlay: PropTypes.bool,
|
autoPlay: PropTypes.bool,
|
||||||
volume: PropTypes.number,
|
volume: PropTypes.number,
|
||||||
muted: PropTypes.bool,
|
muted: PropTypes.bool,
|
||||||
|
componetIndex: PropTypes.number,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
@ -515,6 +516,7 @@ class Video extends React.PureComponent {
|
|||||||
startTime: this.video.currentTime,
|
startTime: this.video.currentTime,
|
||||||
autoPlay: !this.state.paused,
|
autoPlay: !this.state.paused,
|
||||||
defaultVolume: this.state.volume,
|
defaultVolume: this.state.volume,
|
||||||
|
componetIndex: this.props.componetIndex,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user