From 3598c2e1dbf9eafff3fc91b607c6b1b1f00c3675 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 19 Dec 2023 06:08:52 +0100 Subject: [PATCH] Revert "Feature - Prevents multiple audio/video attachments from being played at the same time (#24717)" (#28251) --- .../features/__tests__/toggle-play.jsx | 80 ------------------- .../mastodon/features/audio/index.jsx | 33 ++------ .../mastodon/features/video/index.jsx | 31 +------ .../mastodon/reducers/media_attachments.js | 7 -- 4 files changed, 11 insertions(+), 140 deletions(-) delete mode 100644 app/javascript/mastodon/features/__tests__/toggle-play.jsx diff --git a/app/javascript/mastodon/features/__tests__/toggle-play.jsx b/app/javascript/mastodon/features/__tests__/toggle-play.jsx deleted file mode 100644 index 9c999db8677..00000000000 --- a/app/javascript/mastodon/features/__tests__/toggle-play.jsx +++ /dev/null @@ -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 ( - - ); - } - -} - -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( -
- - -
, - ); - - 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/); - }); -}); diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index fac43416c96..7a7d0910fa8 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/app/javascript/mastodon/features/audio/index.jsx @@ -20,7 +20,6 @@ import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/featur import { Blurhash } from '../../components/blurhash'; import { displayMedia, useBlurhash } from '../../initial_state'; -import { currentMedia, setCurrentMedia } from '../../reducers/media_attachments'; import Visualizer from './visualizer'; @@ -166,32 +165,15 @@ class Audio extends PureComponent { } togglePlay = () => { - const audios = document.querySelectorAll('audio'); - - 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(); + if (!this.audioContext) { + this._initAudioContext(); } - this.audio.play(); - setCurrentMedia(this.audio); + if (this.state.paused) { + this.setState({ paused: false }, () => this.audio.play()); + } else { + this.setState({ paused: true }, () => this.audio.pause()); + } }; handleResize = debounce(() => { @@ -213,7 +195,6 @@ class Audio extends PureComponent { }; handlePause = () => { - this.audio.pause(); this.setState({ paused: true }); if (this.audioContext) { diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx index 9ff6d3589ef..e908715e911 100644 --- a/app/javascript/mastodon/features/video/index.jsx +++ b/app/javascript/mastodon/features/video/index.jsx @@ -22,7 +22,6 @@ import { Icon } from 'mastodon/components/icon'; import { playerSettings } from 'mastodon/settings'; import { displayMedia, useBlurhash } from '../../initial_state'; -import { currentMedia, setCurrentMedia } from '../../reducers/media_attachments'; import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen'; const messages = defineMessages({ @@ -182,7 +181,6 @@ class Video extends PureComponent { }; handlePause = () => { - this.video.pause(); this.setState({ paused: true }); }; @@ -346,32 +344,11 @@ class Video extends PureComponent { }; togglePlay = () => { - const videos = document.querySelectorAll('video'); - - 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 { - video.pause(); - this.setState({ paused: true }); - } - }); - }); - - if (currentMedia !== null) { - currentMedia.pause(); + if (this.state.paused) { + this.setState({ paused: false }, () => this.video.play()); + } else { + this.setState({ paused: true }, () => this.video.pause()); } - - this.video.play(); - setCurrentMedia(this.video); }; toggleFullscreen = () => { diff --git a/app/javascript/mastodon/reducers/media_attachments.js b/app/javascript/mastodon/reducers/media_attachments.js index f145e1dcaac..cbb4933bc7e 100644 --- a/app/javascript/mastodon/reducers/media_attachments.js +++ b/app/javascript/mastodon/reducers/media_attachments.js @@ -2,13 +2,6 @@ import { Map as ImmutableMap } from 'immutable'; import { STORE_HYDRATE } from '../actions/store'; -export let currentMedia = null; - -export function setCurrentMedia(value) { - currentMedia = value; -} - - const initialState = ImmutableMap({ accept_content_types: [], });