Revert "Feature - Prevents multiple audio/video attachments from being played at the same time (#24717)" (#28251)
parent
8b1eeb2f90
commit
3598c2e1db
|
@ -1,80 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
|
|
||||||
import { render, fireEvent } from '@testing-library/react';
|
|
||||||
|
|
||||||
class Media extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
paused: props.paused || false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
handleMediaClick = () => {
|
|
||||||
const { onClick } = this.props;
|
|
||||||
|
|
||||||
this.setState(prevState => ({
|
|
||||||
paused: !prevState.paused,
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (typeof onClick === 'function') {
|
|
||||||
onClick();
|
|
||||||
}
|
|
||||||
|
|
||||||
const { title } = this.props;
|
|
||||||
const mediaElements = document.querySelectorAll(`div[title="${title}"]`);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
mediaElements.forEach(element => {
|
|
||||||
if (element !== this && !element.classList.contains('paused')) {
|
|
||||||
element.click();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { title } = this.props;
|
|
||||||
const { paused } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button title={title} onClick={this.handleMediaClick}>
|
|
||||||
Media Component - {paused ? 'Paused' : 'Playing'}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
Media.propTypes = {
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
paused: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('Media attachments test', () => {
|
|
||||||
let currentMedia = null;
|
|
||||||
const togglePlayMock = jest.fn();
|
|
||||||
|
|
||||||
it('plays a new media file and pauses others that were playing', () => {
|
|
||||||
const container = render(
|
|
||||||
<div>
|
|
||||||
<Media title='firstMedia' paused onClick={togglePlayMock} />
|
|
||||||
<Media title='secondMedia' paused onClick={togglePlayMock} />
|
|
||||||
</div>,
|
|
||||||
);
|
|
||||||
|
|
||||||
fireEvent.click(container.getByTitle('firstMedia'));
|
|
||||||
expect(togglePlayMock).toHaveBeenCalledTimes(1);
|
|
||||||
currentMedia = container.getByTitle('firstMedia');
|
|
||||||
expect(currentMedia.textContent).toMatch(/Playing/);
|
|
||||||
|
|
||||||
fireEvent.click(container.getByTitle('secondMedia'));
|
|
||||||
expect(togglePlayMock).toHaveBeenCalledTimes(2);
|
|
||||||
currentMedia = container.getByTitle('secondMedia');
|
|
||||||
expect(currentMedia.textContent).toMatch(/Playing/);
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -20,7 +20,6 @@ import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/featur
|
||||||
|
|
||||||
import { Blurhash } from '../../components/blurhash';
|
import { Blurhash } from '../../components/blurhash';
|
||||||
import { displayMedia, useBlurhash } from '../../initial_state';
|
import { displayMedia, useBlurhash } from '../../initial_state';
|
||||||
import { currentMedia, setCurrentMedia } from '../../reducers/media_attachments';
|
|
||||||
|
|
||||||
import Visualizer from './visualizer';
|
import Visualizer from './visualizer';
|
||||||
|
|
||||||
|
@ -166,32 +165,15 @@ class Audio extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
togglePlay = () => {
|
togglePlay = () => {
|
||||||
const audios = document.querySelectorAll('audio');
|
if (!this.audioContext) {
|
||||||
|
this._initAudioContext();
|
||||||
audios.forEach((audio) => {
|
|
||||||
const button = audio.previousElementSibling;
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
if(audio.paused) {
|
|
||||||
audios.forEach((e) => {
|
|
||||||
if (e !== audio) {
|
|
||||||
e.pause();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
audio.play();
|
|
||||||
this.setState({ paused: false });
|
|
||||||
} else {
|
|
||||||
audio.pause();
|
|
||||||
this.setState({ paused: true });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentMedia !== null) {
|
|
||||||
currentMedia.pause();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.audio.play();
|
if (this.state.paused) {
|
||||||
setCurrentMedia(this.audio);
|
this.setState({ paused: false }, () => this.audio.play());
|
||||||
|
} else {
|
||||||
|
this.setState({ paused: true }, () => this.audio.pause());
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
handleResize = debounce(() => {
|
handleResize = debounce(() => {
|
||||||
|
@ -213,7 +195,6 @@ class Audio extends PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handlePause = () => {
|
handlePause = () => {
|
||||||
this.audio.pause();
|
|
||||||
this.setState({ paused: true });
|
this.setState({ paused: true });
|
||||||
|
|
||||||
if (this.audioContext) {
|
if (this.audioContext) {
|
||||||
|
|
|
@ -22,7 +22,6 @@ import { Icon } from 'mastodon/components/icon';
|
||||||
import { playerSettings } from 'mastodon/settings';
|
import { playerSettings } from 'mastodon/settings';
|
||||||
|
|
||||||
import { displayMedia, useBlurhash } from '../../initial_state';
|
import { displayMedia, useBlurhash } from '../../initial_state';
|
||||||
import { currentMedia, setCurrentMedia } from '../../reducers/media_attachments';
|
|
||||||
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
|
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -182,7 +181,6 @@ class Video extends PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
handlePause = () => {
|
handlePause = () => {
|
||||||
this.video.pause();
|
|
||||||
this.setState({ paused: true });
|
this.setState({ paused: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -346,32 +344,11 @@ class Video extends PureComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
togglePlay = () => {
|
togglePlay = () => {
|
||||||
const videos = document.querySelectorAll('video');
|
if (this.state.paused) {
|
||||||
|
this.setState({ paused: false }, () => this.video.play());
|
||||||
videos.forEach((video) => {
|
} else {
|
||||||
const button = video.nextElementSibling;
|
this.setState({ paused: true }, () => this.video.pause());
|
||||||
button.addEventListener('click', () => {
|
|
||||||
if (video.paused) {
|
|
||||||
videos.forEach((e) => {
|
|
||||||
if (e !== video) {
|
|
||||||
e.pause();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
video.play();
|
|
||||||
this.setState({ paused: false });
|
|
||||||
} else {
|
|
||||||
video.pause();
|
|
||||||
this.setState({ paused: true });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentMedia !== null) {
|
|
||||||
currentMedia.pause();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.video.play();
|
|
||||||
setCurrentMedia(this.video);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
toggleFullscreen = () => {
|
toggleFullscreen = () => {
|
||||||
|
|
|
@ -2,13 +2,6 @@ import { Map as ImmutableMap } from 'immutable';
|
||||||
|
|
||||||
import { STORE_HYDRATE } from '../actions/store';
|
import { STORE_HYDRATE } from '../actions/store';
|
||||||
|
|
||||||
export let currentMedia = null;
|
|
||||||
|
|
||||||
export function setCurrentMedia(value) {
|
|
||||||
currentMedia = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const initialState = ImmutableMap({
|
const initialState = ImmutableMap({
|
||||||
accept_content_types: [],
|
accept_content_types: [],
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue