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

app/javascript/mastodon/features/__tests__/toggle-play.jsx

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

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) {

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 = () => {

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