Merge commit '23e32a4b3031d1da8b911e0145d61b4dd47c4f96' into glitch-soc/merge-upstream

Conflicts:
- `Gemfile.lock`:
  Conflict because we had updated the `json-ld` gem to fix a yanked dependency.
  Kept our version of `json-ld` while updating other dependencies.

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap

@@ -13,7 +13,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
   }
 >
   <img
-    alt="alice"
+    alt=""
     src="/animated/alice.gif"
   />
 </div>
@@ -32,7 +32,7 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
   }
 >
   <img
-    alt="alice"
+    alt=""
     src="/static/alice.jpg"
   />
 </div>

app/javascript/mastodon/components/avatar.tsx

@@ -42,7 +42,7 @@ export const Avatar: React.FC<Props> = ({
       onMouseLeave={handleMouseLeave}
       style={style}
     >
-      {src && <img src={src} alt={account?.get('acct')} />}
+      {src && <img src={src} alt='' />}
     </div>
   );
 };

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

@@ -0,0 +1,80 @@
+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/account_timeline/containers/header_container.jsx

@@ -178,7 +178,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       modalType: 'IMAGE',
       modalProps: {
         src: account.get('avatar'),
-        alt: account.get('acct'),
+        alt: '',
       },
     }));
   },

app/javascript/mastodon/features/audio/index.jsx

@@ -20,6 +20,7 @@ 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';
 
@@ -165,15 +166,32 @@ class Audio extends PureComponent {
   }
 
   togglePlay = () => {
-    if (!this.audioContext) {
-      this._initAudioContext();
+    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.state.paused) {
-      this.setState({ paused: false }, () => this.audio.play());
-    } else {
-      this.setState({ paused: true }, () => this.audio.pause());
-    }
+    this.audio.play();
+    setCurrentMedia(this.audio);
   };
 
   handleResize = debounce(() => {
@@ -195,6 +213,7 @@ class Audio extends PureComponent {
   };
 
   handlePause = () => {
+    this.audio.pause();
     this.setState({ paused: true });
 
     if (this.audioContext) {

app/javascript/mastodon/features/video/index.jsx

@@ -19,8 +19,10 @@ import { throttle } from 'lodash';
 
 import { Blurhash } from 'mastodon/components/blurhash';
 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({
@@ -180,6 +182,7 @@ class Video extends PureComponent {
   };
 
   handlePause = () => {
+    this.video.pause();
     this.setState({ paused: true });
   };
 
@@ -226,8 +229,8 @@ class Video extends PureComponent {
 
     if(!isNaN(x)) {
       this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => {
-        this.video.volume = x;
-        this.video.muted = this.state.muted;
+        this._syncVideoToVolumeState(x);
+        this._saveVolumeState(x);
       });
     }
   }, 15);
@@ -343,11 +346,32 @@ class Video extends PureComponent {
   };
 
   togglePlay = () => {
-    if (this.state.paused) {
-      this.setState({ paused: false }, () => this.video.play());
-    } else {
-      this.setState({ paused: true }, () => this.video.pause());
+    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();
     }
+
+    this.video.play();
+    setCurrentMedia(this.video);
   };
 
   toggleFullscreen = () => {
@@ -365,6 +389,8 @@ class Video extends PureComponent {
     document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
 
     window.addEventListener('scroll', this.handleScroll);
+
+    this._syncVideoFromLocalStorage();
   }
 
   componentWillUnmount () {
@@ -437,8 +463,24 @@ class Video extends PureComponent {
     const muted = !(this.video.muted || this.state.volume === 0);
 
     this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => {
-      this.video.volume = this.state.volume;
-      this.video.muted = this.state.muted;
+      this._syncVideoToVolumeState();
+      this._saveVolumeState();
+    });
+  };
+
+  _syncVideoToVolumeState = (volume = null, muted = null) => {
+    this.video.volume = volume ?? this.state.volume;
+    this.video.muted = muted ?? this.state.muted;
+  };
+
+  _saveVolumeState = (volume = null, muted = null) => {
+    playerSettings.set('volume', volume ?? this.state.volume);
+    playerSettings.set('muted', muted ?? this.state.muted);
+  };
+
+  _syncVideoFromLocalStorage = () => {
+    this.setState({ volume: playerSettings.get('volume') ?? 0.5, muted: playerSettings.get('muted') ?? false }, () => {
+      this._syncVideoToVolumeState();
     });
   };
 
@@ -480,6 +522,7 @@ class Video extends PureComponent {
 
   handleVolumeChange = () => {
     this.setState({ volume: this.video.volume, muted: this.video.muted });
+    this._saveVolumeState(this.video.volume, this.video.muted);
   };
 
   handleOpenVideo = () => {

app/javascript/mastodon/reducers/media_attachments.js

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

app/javascript/mastodon/settings.js

@@ -46,4 +46,5 @@ export default class Settings {
 export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
 export const tagHistory = new Settings('mastodon_tag_history');
 export const bannerSettings = new Settings('mastodon_banner_settings');
-export const searchHistory = new Settings('mastodon_search_history');
+export const searchHistory = new Settings('mastodon_search_history');
+export const playerSettings = new Settings('mastodon_player');