Revert "Feature - Prevents multiple audio/video attachments from being played at the same time (#24717)" (#28251)

This commit is contained in:
Claire 2023-12-19 06:08:52 +01:00 committed by GitHub
parent 8b1eeb2f90
commit 3598c2e1db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 140 deletions

View File

@ -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/);
});
});

View File

@ -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(); if (this.state.paused) {
this.setState({ paused: false }); this.setState({ paused: false }, () => this.audio.play());
} else { } else {
audio.pause(); this.setState({ paused: true }, () => this.audio.pause());
this.setState({ paused: true });
} }
});
});
if (currentMedia !== null) {
currentMedia.pause();
}
this.audio.play();
setCurrentMedia(this.audio);
}; };
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) {

View File

@ -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) => {
const button = video.nextElementSibling;
button.addEventListener('click', () => {
if (video.paused) {
videos.forEach((e) => {
if (e !== video) {
e.pause();
}
});
video.play();
this.setState({ paused: false });
} else { } else {
video.pause(); this.setState({ paused: true }, () => this.video.pause());
this.setState({ paused: true });
} }
});
});
if (currentMedia !== null) {
currentMedia.pause();
}
this.video.play();
setCurrentMedia(this.video);
}; };
toggleFullscreen = () => { toggleFullscreen = () => {

View File

@ -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: [],
}); });