From ac8a788370012656cde08b2aea2bd927f0748422 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Fri, 19 Jun 2020 19:18:47 +0200
Subject: [PATCH 01/19] Fix functional user requirements in whitelist mode
 (#14093)

Fixes #14092
---
 app/controllers/accounts_controller.rb           | 2 +-
 app/controllers/api/base_controller.rb           | 2 +-
 app/controllers/directories_controller.rb        | 2 +-
 app/controllers/follower_accounts_controller.rb  | 2 +-
 app/controllers/following_accounts_controller.rb | 2 +-
 app/controllers/media_controller.rb              | 2 +-
 app/controllers/remote_interaction_controller.rb | 2 +-
 app/controllers/statuses_controller.rb           | 2 +-
 app/controllers/tags_controller.rb               | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
index 62c862d36bf..db77b628c9f 100644
--- a/app/controllers/accounts_controller.rb
+++ b/app/controllers/accounts_controller.rb
@@ -11,7 +11,7 @@ class AccountsController < ApplicationController
   before_action :set_body_classes
 
   skip_around_action :set_locale, if: -> { [:json, :rss].include?(request.format&.to_sym) }
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def show
     respond_to do |format|
diff --git a/app/controllers/api/base_controller.rb b/app/controllers/api/base_controller.rb
index 153ade253d6..045e7dd2666 100644
--- a/app/controllers/api/base_controller.rb
+++ b/app/controllers/api/base_controller.rb
@@ -7,7 +7,7 @@ class Api::BaseController < ApplicationController
   include RateLimitHeaders
 
   skip_before_action :store_current_location
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   before_action :require_authenticated_user!, if: :disallow_unauthenticated_api_access?
   before_action :set_cache_headers
diff --git a/app/controllers/directories_controller.rb b/app/controllers/directories_controller.rb
index 750c835ddab..f198ad5ba5b 100644
--- a/app/controllers/directories_controller.rb
+++ b/app/controllers/directories_controller.rb
@@ -9,7 +9,7 @@ class DirectoriesController < ApplicationController
   before_action :set_tag, only: :show
   before_action :set_accounts
 
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def index
     render :index
diff --git a/app/controllers/follower_accounts_controller.rb b/app/controllers/follower_accounts_controller.rb
index 14e22dd1ec1..ab074996340 100644
--- a/app/controllers/follower_accounts_controller.rb
+++ b/app/controllers/follower_accounts_controller.rb
@@ -8,7 +8,7 @@ class FollowerAccountsController < ApplicationController
   before_action :set_cache_headers
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def index
     respond_to do |format|
diff --git a/app/controllers/following_accounts_controller.rb b/app/controllers/following_accounts_controller.rb
index 95849ffb983..918bdac0a82 100644
--- a/app/controllers/following_accounts_controller.rb
+++ b/app/controllers/following_accounts_controller.rb
@@ -8,7 +8,7 @@ class FollowingAccountsController < ApplicationController
   before_action :set_cache_headers
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def index
     respond_to do |format|
diff --git a/app/controllers/media_controller.rb b/app/controllers/media_controller.rb
index 1d166d6e73b..ce015dd1b21 100644
--- a/app/controllers/media_controller.rb
+++ b/app/controllers/media_controller.rb
@@ -4,7 +4,7 @@ class MediaController < ApplicationController
   include Authorization
 
   skip_before_action :store_current_location
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   before_action :authenticate_user!, if: :whitelist_mode?
   before_action :set_media_attachment
diff --git a/app/controllers/remote_interaction_controller.rb b/app/controllers/remote_interaction_controller.rb
index 3b9202a5c71..6c29a2b9ffe 100644
--- a/app/controllers/remote_interaction_controller.rb
+++ b/app/controllers/remote_interaction_controller.rb
@@ -10,7 +10,7 @@ class RemoteInteractionController < ApplicationController
   before_action :set_status
   before_action :set_body_classes
 
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def new
     @remote_follow = RemoteFollow.new(session_params)
diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb
index 67a6cc2ec72..17ddd31fbbf 100644
--- a/app/controllers/statuses_controller.rb
+++ b/app/controllers/statuses_controller.rb
@@ -19,7 +19,7 @@ class StatusesController < ApplicationController
   before_action :set_autoplay, only: :embed
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!, only: [:show, :embed]
+  skip_before_action :require_functional!, only: [:show, :embed], unless: :whitelist_mode?
 
   content_security_policy only: :embed do |p|
     p.frame_ancestors(false)
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb
index 7e86d4f1ae7..234a0c41174 100644
--- a/app/controllers/tags_controller.rb
+++ b/app/controllers/tags_controller.rb
@@ -15,7 +15,7 @@ class TagsController < ApplicationController
   before_action :set_body_classes
   before_action :set_instance_presenter
 
-  skip_before_action :require_functional!
+  skip_before_action :require_functional!, unless: :whitelist_mode?
 
   def show
     respond_to do |format|

From a279acc73071b3fb2f8381fc5051de5b70e879ef Mon Sep 17 00:00:00 2001
From: fuyu <54523771+mfmfuyu@users.noreply.github.com>
Date: Sat, 20 Jun 2020 20:30:13 +0900
Subject: [PATCH 02/19] Fix not working I18n on 2FA and Sign in token page
 (#14087)

---
 app/controllers/concerns/localized.rb                     | 4 ++--
 .../concerns/sign_in_token_authentication_concern.rb      | 8 +++++---
 .../concerns/two_factor_authentication_concern.rb         | 8 +++++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/controllers/concerns/localized.rb b/app/controllers/concerns/localized.rb
index d1384ed56ff..fe1142f3453 100644
--- a/app/controllers/concerns/localized.rb
+++ b/app/controllers/concerns/localized.rb
@@ -7,8 +7,6 @@ module Localized
     around_action :set_locale
   end
 
-  private
-
   def set_locale
     locale   = current_user.locale if respond_to?(:user_signed_in?) && user_signed_in?
     locale ||= session[:locale] ||= default_locale
@@ -19,6 +17,8 @@ module Localized
     end
   end
 
+  private
+
   def default_locale
     if ENV['DEFAULT_LOCALE'].present?
       I18n.default_locale
diff --git a/app/controllers/concerns/sign_in_token_authentication_concern.rb b/app/controllers/concerns/sign_in_token_authentication_concern.rb
index a177aacafa5..91f813acc35 100644
--- a/app/controllers/concerns/sign_in_token_authentication_concern.rb
+++ b/app/controllers/concerns/sign_in_token_authentication_concern.rb
@@ -42,8 +42,10 @@ module SignInTokenAuthenticationConcern
       UserMailer.sign_in_token(user, request.remote_ip, request.user_agent, Time.now.utc.to_s).deliver_later!
     end
 
-    session[:attempt_user_id] = user.id
-    @body_classes = 'lighter'
-    render :sign_in_token
+    set_locale do
+      session[:attempt_user_id] = user.id
+      @body_classes = 'lighter'
+      render :sign_in_token
+    end
   end
 end
diff --git a/app/controllers/concerns/two_factor_authentication_concern.rb b/app/controllers/concerns/two_factor_authentication_concern.rb
index cdd8d14afed..daafe56f460 100644
--- a/app/controllers/concerns/two_factor_authentication_concern.rb
+++ b/app/controllers/concerns/two_factor_authentication_concern.rb
@@ -40,8 +40,10 @@ module TwoFactorAuthenticationConcern
   end
 
   def prompt_for_two_factor(user)
-    session[:attempt_user_id] = user.id
-    @body_classes = 'lighter'
-    render :two_factor
+    set_locale do
+      session[:attempt_user_id] = user.id
+      @body_classes = 'lighter'
+      render :two_factor
+    end
   end
 end

From cb3c6d17804da67d3c0ff233a9ca1c1902f6926f Mon Sep 17 00:00:00 2001
From: fuyu <54523771+mfmfuyu@users.noreply.github.com>
Date: Sat, 20 Jun 2020 20:30:27 +0900
Subject: [PATCH 03/19] Fix unnecessary gap under of video modal (#14098)

---
 app/javascript/styles/mastodon/components.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index acd4b93b541..79ae5874e82 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5361,6 +5361,7 @@ a.status-card.compact:hover {
   }
 
   video {
+    display: block;
     max-width: 100vw;
     max-height: 80vh;
     z-index: 1;

From 434a6d0b15ff413c6e4d7e0c3763af6429ad25b6 Mon Sep 17 00:00:00 2001
From: Takeshi Umeda <noel.yoshiba@gmail.com>
Date: Sat, 20 Jun 2020 20:30:40 +0900
Subject: [PATCH 04/19] Fix modifier key to keep the EmojiPicker on macOS
 (#14096)

---
 .../features/compose/components/emoji_picker_dropdown.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index a6186010b4f..360a7af6ab9 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -203,7 +203,7 @@ class EmojiPickerMenu extends React.PureComponent {
     if (!emoji.native) {
       emoji.native = emoji.colons;
     }
-    if (!event.ctrlKey) {
+    if (!(event.ctrlKey || event.metaKey)) {
       this.props.onClose();
     }
     this.props.onPick(emoji);

From d22931454e343712c0b058a84dbdb82b15411557 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:25:05 +0900
Subject: [PATCH 05/19] Bump caniuse-lite from 1.0.30001078 to 1.0.30001084
 (#14083)

Bumps [caniuse-lite](https://github.com/ben-eb/caniuse-lite) from 1.0.30001078 to 1.0.30001084.
- [Release notes](https://github.com/ben-eb/caniuse-lite/releases)
- [Changelog](https://github.com/ben-eb/caniuse-lite/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ben-eb/caniuse-lite/compare/v1.0.30001078...v1.0.30001084)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 97e468b7265..a2d3d800fef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2722,9 +2722,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
-  version "1.0.30001078"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001078.tgz#e1b6e2ae327b6a1ec11f65ec7a0dde1e7093074c"
-  integrity sha512-sF12qXe9VMm32IEf/+NDvmTpwJaaU7N1igpiH2FdI4DyABJSsOqG3ZAcFvszLkoLoo1y6VJLMYivukUAxaMASw==
+  version "1.0.30001084"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz#00e471931eaefbeef54f46aa2203914d3c165669"
+  integrity sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==
 
 capture-exit@^2.0.0:
   version "2.0.0"

From 3bf3b4cb225374476ef1337debeb027d5dd4c1cc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:26:21 +0900
Subject: [PATCH 06/19] Bump electron-to-chromium from 1.3.448 to 1.3.475
 (#14068)

Bumps [electron-to-chromium](https://github.com/kilian/electron-to-chromium) from 1.3.448 to 1.3.475.
- [Release notes](https://github.com/kilian/electron-to-chromium/releases)
- [Changelog](https://github.com/Kilian/electron-to-chromium/blob/master/CHANGELOG.md)
- [Commits](https://github.com/kilian/electron-to-chromium/compare/v1.3.448...v1.3.475)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a2d3d800fef..a172515a0cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3911,9 +3911,9 @@ ejs@^2.3.4, ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.413:
-  version "1.3.448"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.448.tgz#682831ecf3ce505231978f7c795a2813740cae7c"
-  integrity sha512-WOr3SrZ55lUFYugA6sUu3H3ZoxVIH5o3zTSqYS+2DOJJP4hnHmBiD1w432a2YFW/H2G5FIxE6DB06rv+9dUL5g==
+  version "1.3.475"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.475.tgz#67688cc82c342f39594a412286e975eda45d8412"
+  integrity sha512-vcTeLpPm4+ccoYFXnepvkFt0KujdyrBU19KNEO40Pnkhta6mUi2K0Dn7NmpRcNz7BvysnSqeuIYScP003HWuYg==
 
 elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.2"

From 02fc97928c72fe344f8d20314c33f301754b20c5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:27:50 +0900
Subject: [PATCH 07/19] Bump nearley from 2.19.3 to 2.19.4 (#14075)

Bumps [nearley](https://github.com/hardmath123/nearley) from 2.19.3 to 2.19.4.
- [Release notes](https://github.com/hardmath123/nearley/releases)
- [Commits](https://github.com/hardmath123/nearley/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a172515a0cd..3ed06e7ea67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7468,9 +7468,9 @@ natural-compare@^1.4.0:
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
 nearley@^2.7.10:
-  version "2.19.3"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.3.tgz#ae3b040e27616b5348102c436d1719209476a5a1"
-  integrity sha512-FpAy1PmTsUpOtgxr23g4jRNvJHYzZEW2PixXeSzksLR/ykPfwKhAodc2+9wQhY+JneWLcvkDw6q7FJIsIdF/aQ==
+  version "2.19.4"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.19.4.tgz#7518cbdd7d0e8e08b5f82841b9edb0126239c8b1"
+  integrity sha512-oqj3m4oqwKsN77pETa9IPvxHHHLW68KrDc2KYoWMUOhDlrNUo7finubwffQMBRnwNCOXc4kRxCZO0Rvx4L6Zrw==
   dependencies:
     commander "^2.19.0"
     moo "^0.5.0"

From 25cd4998fe97bf255af1a09e4f59bb6863176af8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:28:45 +0900
Subject: [PATCH 08/19] Bump aws-sdk-core from 3.99.2 to 3.100.0 (#14072)

Bumps [aws-sdk-core](https://github.com/aws/aws-sdk-ruby) from 3.99.2 to 3.100.0.
- [Release notes](https://github.com/aws/aws-sdk-ruby/releases)
- [Changelog](https://github.com/aws/aws-sdk-ruby/blob/master/gems/aws-sdk-core/CHANGELOG.md)
- [Commits](https://github.com/aws/aws-sdk-ruby/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index af770f43502..1b3846bfb81 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -93,7 +93,7 @@ GEM
       cocaine (~> 0.5.3)
     aws-eventstream (1.1.0)
     aws-partitions (1.329.0)
-    aws-sdk-core (3.99.2)
+    aws-sdk-core (3.100.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.239.0)
       aws-sigv4 (~> 1.1)

From 1b29574a54e47145c36e653dd8e8edf27e157aa0 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:30:09 +0900
Subject: [PATCH 09/19] Bump sass from 1.26.5 to 1.26.8 (#14078)

Bumps [sass](https://github.com/sass/dart-sass) from 1.26.5 to 1.26.8.
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.26.5...1.26.8)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a21429d6cb0..c0c6844f6f5 100644
--- a/package.json
+++ b/package.json
@@ -151,7 +151,7 @@
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.5",
+    "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
diff --git a/yarn.lock b/yarn.lock
index 3ed06e7ea67..b37b9a902c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9773,10 +9773,10 @@ sass-loader@^8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sass@^1.26.5:
-  version "1.26.5"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.5.tgz#2d7aecfbbabfa298567c8f06615b6e24d2d68099"
-  integrity sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==
+sass@^1.26.8:
+  version "1.26.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325"
+  integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q==
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 

From 975c943432796fcfe9685328fdb42e2eb780dcf4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:32:02 +0900
Subject: [PATCH 10/19] Bump fast-glob from 3.2.2 to 3.2.4 (#14079)

Bumps [fast-glob](https://github.com/mrmlnc/fast-glob) from 3.2.2 to 3.2.4.
- [Release notes](https://github.com/mrmlnc/fast-glob/releases)
- [Commits](https://github.com/mrmlnc/fast-glob/compare/3.2.2...3.2.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b37b9a902c5..7972a2a867a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4667,9 +4667,9 @@ fast-deep-equal@^3.1.1:
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
 fast-glob@^3.1.1, fast-glob@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
-  integrity sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
+  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"

From f111b71d1c302435d8bdc577784b4a12d8e305ee Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2020 08:32:23 +0900
Subject: [PATCH 11/19] Bump eslint-import-resolver-node from 0.3.3 to 0.3.4
 (#14081)

Bumps [eslint-import-resolver-node](https://github.com/benmosher/eslint-plugin-import) from 0.3.3 to 0.3.4.
- [Release notes](https://github.com/benmosher/eslint-plugin-import/releases)
- [Changelog](https://github.com/benmosher/eslint-plugin-import/blob/master/CHANGELOG.md)
- [Commits](https://github.com/benmosher/eslint-plugin-import/compare/resolvers/node/v0.3.3...resolvers/node/v0.3.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 7972a2a867a..61ab698520c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4215,9 +4215,9 @@ escope@^3.6.0:
     estraverse "^4.1.1"
 
 eslint-import-resolver-node@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz#dbaa52b6b2816b50bc6711af75422de808e98404"
-  integrity sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
   dependencies:
     debug "^2.6.9"
     resolve "^1.13.1"

From 75a2b8f8153ce3a6496fcaf6eedf9f2bb7c729e6 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 21 Jun 2020 02:27:19 +0200
Subject: [PATCH 12/19] Change design of audio players in web UI (#14095)

---
 app/javascript/mastodon/components/status.js  |   3 +
 .../mastodon/features/audio/index.js          | 608 +++++++++++++++---
 .../status/components/detailed_status.js      |   1 +
 .../styles/mastodon/components.scss           |  54 +-
 4 files changed, 560 insertions(+), 106 deletions(-)

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index f99ccd39a63..4ed8cbdd9f7 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -345,9 +345,12 @@ class Status extends ImmutablePureComponent {
               <Component
                 src={attachment.get('url')}
                 alt={attachment.get('description')}
+                poster={status.getIn(['account', 'avatar_static'])}
                 duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
                 peaks={[0]}
+                width={this.props.cachedMediaWidth}
                 height={70}
+                cacheWidth={this.props.cacheMediaWidth}
               />
             )}
           </Bundle>
diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js
index baad1c0e56e..5f5d85b95f6 100644
--- a/app/javascript/mastodon/features/audio/index.js
+++ b/app/javascript/mastodon/features/audio/index.js
@@ -1,11 +1,135 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import WaveSurfer from 'wavesurfer.js';
 import { defineMessages, injectIntl } from 'react-intl';
 import { formatTime } from 'mastodon/features/video';
 import Icon from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { throttle } from 'lodash';
+import { encode, decode } from 'blurhash';
+import { getPointerPosition } from 'mastodon/features/video';
+
+const digitCharacters = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'p',
+  'q',
+  'r',
+  's',
+  't',
+  'u',
+  'v',
+  'w',
+  'x',
+  'y',
+  'z',
+  '#',
+  '$',
+  '%',
+  '*',
+  '+',
+  ',',
+  '-',
+  '.',
+  ':',
+  ';',
+  '=',
+  '?',
+  '@',
+  '[',
+  ']',
+  '^',
+  '_',
+  '{',
+  '|',
+  '}',
+  '~',
+];
+
+const decode83 = (str) => {
+  let value = 0;
+  let c, digit;
+
+  for (let i = 0; i < str.length; i++) {
+    c = str[i];
+    digit = digitCharacters.indexOf(c);
+    value = value * 83 + digit;
+  }
+
+  return value;
+};
+
+const decodeRGB = int => ({
+  r: Math.max(0, (int >> 16)),
+  g: Math.max(0, (int >> 8) & 255),
+  b: Math.max(0, (int & 255)),
+});
+
+const luma = ({ r, g, b }) => 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+const adjustColor = ({ r, g, b }, lumaThreshold = 100) => {
+  let delta;
+
+  if (luma({ r, g, b }) >= lumaThreshold) {
+    delta = -80;
+  } else {
+    delta = 80;
+  }
+
+  return {
+    r: r + delta,
+    g: g + delta,
+    b: b + delta,
+  };
+};
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
@@ -15,26 +139,36 @@ const messages = defineMessages({
   download: { id: 'video.download', defaultMessage: 'Download file' },
 });
 
+const TICK_SIZE = 10;
+const PADDING = 180;
+
 export default @injectIntl
 class Audio extends React.PureComponent {
 
   static propTypes = {
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
+    poster: PropTypes.string,
     duration: PropTypes.number,
     peaks: PropTypes.arrayOf(PropTypes.number),
+    width: PropTypes.number,
     height: PropTypes.number,
     preload: PropTypes.bool,
     editable: PropTypes.bool,
     intl: PropTypes.object.isRequired,
+    cacheWidth: PropTypes.func,
   };
 
   state = {
+    width: this.props.width,
     currentTime: 0,
+    buffer: 0,
     duration: null,
     paused: true,
     muted: false,
     volume: 0.5,
+    dragging: false,
+    color: { r: 255, g: 255, b: 255 },
   };
 
   // Hard coded in components.scss
@@ -48,99 +182,122 @@ class Audio extends React.PureComponent {
     return (offset > 110) ? 110 : offset;
   }
 
+  setPlayerRef = c => {
+    this.player = c;
+
+    if (c) {
+      const width  = c.offsetWidth;
+      const height = width / (16/9);
+
+      if (this.props.cacheWidth) {
+        this.props.cacheWidth(width);
+      }
+
+      this.setState({ width, height });
+    }
+  }
+
+  setSeekRef = c => {
+    this.seek = c;
+  }
+
   setVolumeRef = c => {
     this.volume = c;
   }
 
-  setWaveformRef = c => {
-    this.waveform = c;
+  setAudioRef = c => {
+    this.audio = c;
+
+    if (this.audio) {
+      this.setState({ volume: this.audio.volume, muted: this.audio.muted });
+    }
+  }
+
+  setBlurhashCanvasRef = c => {
+    this.blurhashCanvas = c;
+  }
+
+  setCanvasRef = c => {
+    this.canvas = c;
+
+    if (c) {
+      this.canvasContext = c.getContext('2d');
+    }
   }
 
   componentDidMount () {
-    if (this.waveform) {
-      this._updateWaveform();
-    }
-
     window.addEventListener('scroll', this.handleScroll);
+
+    const img = new Image();
+    img.onload = () => this.handlePosterLoad(img);
+    img.src = this.props.poster;
   }
 
-  componentDidUpdate (prevProps) {
-    if (this.waveform && prevProps.src !== this.props.src) {
-      this._updateWaveform();
+  componentDidUpdate (prevProps, prevState) {
+    if (prevProps.poster !== this.props.poster) {
+      const img = new Image();
+      img.onload = () => this.handlePosterLoad(img);
+      img.src = this.props.poster;
     }
+
+    if (prevState.blurhash !== this.state.blurhash) {
+      const context = this.blurhashCanvas.getContext('2d');
+      const pixels = decode(this.state.blurhash, 32, 32);
+      const outputImageData = new ImageData(pixels, 32, 32);
+
+      context.putImageData(outputImageData, 0, 0);
+    }
+
+    this._clear();
+    this._draw();
   }
 
   componentWillUnmount () {
     window.removeEventListener('scroll', this.handleScroll);
-
-    if (this.wavesurfer) {
-      this.wavesurfer.destroy();
-      this.wavesurfer = null;
-    }
-  }
-
-  _updateWaveform () {
-    const { src, height, duration, peaks, preload } = this.props;
-
-    const progressColor = window.getComputedStyle(document.querySelector('.audio-player__progress-placeholder')).getPropertyValue('background-color');
-    const waveColor     = window.getComputedStyle(document.querySelector('.audio-player__wave-placeholder')).getPropertyValue('background-color');
-
-    if (this.wavesurfer) {
-      this.wavesurfer.destroy();
-      this.loaded = false;
-    }
-
-    const wavesurfer = WaveSurfer.create({
-      container: this.waveform,
-      height,
-      barWidth: 3,
-      cursorWidth: 0,
-      progressColor,
-      waveColor,
-      backend: 'MediaElement',
-      interact: preload,
-    });
-
-    wavesurfer.setVolume(this.state.volume);
-
-    if (preload) {
-      wavesurfer.load(src);
-      this.loaded = true;
-    } else {
-      wavesurfer.load(src, peaks, 'none', duration);
-      this.loaded = false;
-    }
-
-    wavesurfer.on('ready', () => this.setState({ duration: Math.floor(wavesurfer.getDuration()) }));
-    wavesurfer.on('audioprocess', () => this.setState({ currentTime: Math.floor(wavesurfer.getCurrentTime()) }));
-    wavesurfer.on('pause', () => this.setState({ paused: true }));
-    wavesurfer.on('play', () => this.setState({ paused: false }));
-    wavesurfer.on('volume', volume => this.setState({ volume }));
-    wavesurfer.on('mute', muted => this.setState({ muted }));
-
-    this.wavesurfer = wavesurfer;
   }
 
   togglePlay = () => {
     if (this.state.paused) {
-      if (!this.props.preload && !this.loaded) {
-        this.wavesurfer.createBackend();
-        this.wavesurfer.createPeakCache();
-        this.wavesurfer.load(this.props.src);
-        this.wavesurfer.toggleInteraction();
-        this.wavesurfer.setVolume(this.state.volume);
-        this.loaded = true;
-      }
-
-      this.setState({ paused: false }, () => this.wavesurfer.play());
+      this.setState({ paused: false }, () => this.audio.play());
     } else {
-      this.setState({ paused: true }, () => this.wavesurfer.pause());
+      this.setState({ paused: true }, () => this.audio.pause());
+    }
+  }
+
+  handlePlay = () => {
+    this.setState({ paused: false });
+
+    if (this.canvas && !this.audioContext) {
+      this._initAudioContext();
+    }
+
+    if (this.audioContext && this.audioContext.state === 'suspended') {
+      this.audioContext.resume();
+    }
+
+    this._renderCanvas();
+  }
+
+  handlePause = () => {
+    this.setState({ paused: true });
+
+    if (this.audioContext) {
+      this.audioContext.suspend();
+    }
+  }
+
+  handleProgress = () => {
+    if (this.audio.buffered.length > 0) {
+      this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 });
     }
   }
 
   toggleMute = () => {
     const muted = !this.state.muted;
-    this.setState({ muted }, () => this.wavesurfer.setMute(muted));
+
+    this.setState({ muted }, () => {
+      this.audio.muted = muted;
+    });
   }
 
   handleVolumeMouseDown = e => {
@@ -162,6 +319,48 @@ class Audio extends React.PureComponent {
     document.removeEventListener('touchend', this.handleVolumeMouseUp, true);
   }
 
+  handleMouseDown = e => {
+    document.addEventListener('mousemove', this.handleMouseMove, true);
+    document.addEventListener('mouseup', this.handleMouseUp, true);
+    document.addEventListener('touchmove', this.handleMouseMove, true);
+    document.addEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({ dragging: true });
+    this.audio.pause();
+    this.handleMouseMove(e);
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  handleMouseUp = () => {
+    document.removeEventListener('mousemove', this.handleMouseMove, true);
+    document.removeEventListener('mouseup', this.handleMouseUp, true);
+    document.removeEventListener('touchmove', this.handleMouseMove, true);
+    document.removeEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({ dragging: false });
+    this.audio.play();
+  }
+
+  handleMouseMove = throttle(e => {
+    const { x } = getPointerPosition(this.seek, e);
+    const currentTime = Math.floor(this.audio.duration * x);
+
+    if (!isNaN(currentTime)) {
+      this.setState({ currentTime }, () => {
+        this.audio.currentTime = currentTime;
+      });
+    }
+  }, 60);
+
+  handleTimeUpdate = () => {
+    this.setState({
+      currentTime: Math.floor(this.audio.currentTime),
+      duration: Math.floor(this.audio.duration),
+    });
+  }
+
   handleMouseVolSlide = throttle(e => {
     const rect = this.volume.getBoundingClientRect();
     const x    = (e.clientX - rect.left) / this.volWidth; // x position within the element.
@@ -175,43 +374,280 @@ class Audio extends React.PureComponent {
         slideamt = 0;
       }
 
-      this.wavesurfer.setVolume(slideamt);
+      this.setState({ volume: slideamt }, () => {
+        this.audio.volume = slideamt;
+      });
     }
   }, 60);
 
   handleScroll = throttle(() => {
-    if (!this.waveform || !this.wavesurfer) {
+    if (!this.canvas || !this.audio) {
       return;
     }
 
-    const { top, height } = this.waveform.getBoundingClientRect();
+    const { top, height } = this.canvas.getBoundingClientRect();
     const inView = (top <= (window.innerHeight || document.documentElement.clientHeight)) && (top + height >= 0);
 
     if (!this.state.paused && !inView) {
-      this.setState({ paused: true }, () => this.wavesurfer.pause());
+      this.setState({ paused: true }, () => this.audio.pause());
     }
-  }, 150, { trailing: true })
+  }, 150, { trailing: true });
+
+  _initAudioContext () {
+    const context  = new AudioContext();
+    const analyser = context.createAnalyser();
+    const source   = context.createMediaElementSource(this.audio);
+
+    analyser.smoothingTimeConstant = 0.6;
+    analyser.fftSize = 2048;
+
+    source.connect(analyser);
+    source.connect(context.destination);
+
+    this.audioContext = context;
+    this.analyser = analyser;
+  }
+
+  handlePosterLoad = image => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    canvas.width  = image.width;
+    canvas.height = image.height;
+
+    context.drawImage(image, 0, 0);
+
+    const inputImageData = context.getImageData(0, 0, image.width, image.height);
+    const blurhash = encode(inputImageData.data, image.width, image.height, 4, 4);
+    const averageColor = decodeRGB(decode83(blurhash.slice(2, 6)));
+
+    this.setState({
+      blurhash,
+      color: adjustColor(averageColor),
+      darkText: luma(averageColor) >= 165,
+    });
+  }
+
+  _renderCanvas () {
+    requestAnimationFrame(() => {
+      this._clear();
+      this._draw();
+
+      if (!this.state.paused) {
+        this._renderCanvas();
+      }
+    });
+  }
+
+  _clear () {
+    this.canvasContext.clearRect(0, 0, this.state.width, this.state.height);
+  }
+
+  _draw () {
+    this.canvasContext.save();
+
+    const ticks = this._getTicks(360 * this._getScaleCoefficient(), TICK_SIZE);
+
+    ticks.forEach(tick => {
+      this._drawTick(tick.x1, tick.y1, tick.x2, tick.y2);
+    });
+
+    this.canvasContext.restore();
+  }
+
+  _getRadius () {
+    return parseInt(((this.state.height || this.props.height) - (PADDING * this._getScaleCoefficient()) * 2) / 2);
+  }
+
+  _getScaleCoefficient () {
+    return (this.state.height || this.props.height) / 982;
+  }
+
+  _getTicks (count, size, animationParams = [0, 90]) {
+    const radius = this._getRadius();
+    const ticks = this._getTickPoints(count);
+    const lesser = 200;
+    const m = [];
+    const bufferLength = this.analyser ? this.analyser.frequencyBinCount : 0;
+    const frequencyData = new Uint8Array(bufferLength);
+    const allScales = [];
+    const scaleCoefficient = this._getScaleCoefficient();
+
+    if (this.analyser) {
+      this.analyser.getByteFrequencyData(frequencyData);
+    }
+
+    ticks.forEach((tick, i) => {
+      const coef = 1 - i / (ticks.length * 2.5);
+
+      let delta = ((frequencyData[i] || 0) - lesser * coef) * scaleCoefficient;
+
+      if (delta < 0) {
+        delta = 0;
+      }
+
+      let k;
+
+      if (animationParams[0] <= tick.angle && tick.angle <= animationParams[1]) {
+        k = radius / (radius - this._getSize(tick.angle, animationParams[0], animationParams[1]) - delta);
+      } else {
+        k = radius / (radius - (size + delta));
+      }
+
+      const x1 = tick.x * (radius - size);
+      const y1 = tick.y * (radius - size);
+      const x2 = x1 * k;
+      const y2 = y1 * k;
+
+      m.push({ x1, y1, x2, y2 });
+
+      if (i < 20) {
+        let scale = delta / (200 * scaleCoefficient);
+        scale = scale < 1 ? 1 : scale;
+        allScales.push(scale);
+      }
+    });
+
+    const scale = allScales.reduce((pv, cv) => pv + cv, 0) / allScales.length;
+
+    return m.map(({ x1, y1, x2, y2 }) => ({
+      x1: x1,
+      y1: y1,
+      x2: x2 * scale,
+      y2: y2 * scale,
+    }));
+  }
+
+  _getSize (angle, l, r) {
+    const scaleCoefficient = this._getScaleCoefficient();
+    const maxTickSize = TICK_SIZE * 9 * scaleCoefficient;
+    const m = (r - l) / 2;
+    const x = (angle - l);
+
+    let h;
+
+    if (x === m) {
+      return maxTickSize;
+    }
+
+    const d = Math.abs(m - x);
+    const v = 40 * Math.sqrt(1 / d);
+
+    if (v > maxTickSize) {
+      h = maxTickSize;
+    } else {
+      h = Math.max(TICK_SIZE, v);
+    }
+
+    return h;
+  }
+
+  _getTickPoints (count) {
+    const PI = 360;
+    const coords = [];
+    const step = PI / count;
+
+    let rad;
+
+    for(let deg = 0; deg < PI; deg += step) {
+      rad = deg * Math.PI / (PI / 2);
+      coords.push({ x: Math.cos(rad), y: -Math.sin(rad), angle: deg });
+    }
+
+    return coords;
+  }
+
+  _drawTick (x1, y1, x2, y2) {
+    const radius = this._getRadius();
+    const cx = parseInt(this.state.width / 2);
+    const cy = parseInt(radius + (PADDING * this._getScaleCoefficient()));
+
+    const dx1 = parseInt(cx + x1);
+    const dy1 = parseInt(cy + y1);
+    const dx2 = parseInt(cx + x2);
+    const dy2 = parseInt(cy + y2);
+
+    const gradient = this.canvasContext.createLinearGradient(dx1, dy1, dx2, dy2);
+
+    const mainColor = `rgb(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b})`;
+    const lastColor = `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, 0)`;
+
+    gradient.addColorStop(0, mainColor);
+    gradient.addColorStop(0.6, mainColor);
+    gradient.addColorStop(1, lastColor);
+
+    this.canvasContext.beginPath();
+    this.canvasContext.strokeStyle = gradient;
+    this.canvasContext.lineWidth = 2;
+    this.canvasContext.moveTo(dx1, dy1);
+    this.canvasContext.lineTo(dx2, dy2);
+    this.canvasContext.stroke();
+  }
+
+  _getColor () {
+    return `rgb(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b})`;
+  }
 
   render () {
-    const { height, intl, alt, editable } = this.props;
-    const { paused, muted, volume, currentTime } = this.state;
+    const { src, intl, alt, editable } = this.props;
+    const { paused, muted, volume, currentTime, duration, buffer, darkText, dragging } = this.state;
 
     const volumeWidth     = muted ? 0 : volume * this.volWidth;
     const volumeHandleLoc = muted ? this.volHandleOffset(0) : this.volHandleOffset(volume);
+    const progress        = (currentTime / duration) * 100;
 
     return (
-      <div className={classNames('audio-player', { editable })}>
-        <div className='audio-player__progress-placeholder' style={{ display: 'none' }} />
-        <div className='audio-player__wave-placeholder' style={{ display: 'none' }} />
+      <div className={classNames('audio-player', { editable, 'with-light-background': darkText })} ref={this.setPlayerRef} style={{ width: '100%', height: this.state.height || this.props.height }}>
+        <audio
+          src={src}
+          ref={this.setAudioRef}
+          preload='none'
+          onPlay={this.handlePlay}
+          onPause={this.handlePause}
+          onProgress={this.handleProgress}
+          onTimeUpdate={this.handleTimeUpdate}
+        />
 
-        <div
-          className='audio-player__waveform'
+        <canvas
+          className='audio-player__background'
+          onClick={this.togglePlay}
+          width='32'
+          height='32'
+          style={{ width: this.state.width, height: this.state.height, position: 'absolute', top: 0, left: 0 }}
+          ref={this.setBlurhashCanvasRef}
           aria-label={alt}
           title={alt}
-          style={{ height }}
-          ref={this.setWaveformRef}
+          role='button'
+          tabIndex='0'
         />
 
+        <canvas
+          className='audio-player__canvas'
+          width={this.state.width}
+          height={this.state.height}
+          style={{ width: '100%', position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+          ref={this.setCanvasRef}
+        />
+
+        <img
+          src={this.props.poster}
+          alt=''
+          width={(this._getRadius() - TICK_SIZE) * 2}
+          height={(this._getRadius() - TICK_SIZE) * 2}
+          style={{ position: 'absolute', left: parseInt(this.state.width / 2), top: parseInt(this._getRadius() + (PADDING * this._getScaleCoefficient())), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
+        />
+
+        <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
+          <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
+          <div className='video-player__seek__progress' style={{ width: `${progress}%`, backgroundColor: this._getColor() }} />
+
+          <span
+            className={classNames('video-player__seek__handle', { active: dragging })}
+            tabIndex='0'
+            style={{ left: `${progress}%`, backgroundColor: this._getColor() }}
+          />
+        </div>
+
         <div className='video-player__controls active'>
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
@@ -220,12 +656,12 @@ class Audio extends React.PureComponent {
 
               <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
                 &nbsp;
-                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px`, backgroundColor: this._getColor() }} />
 
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px` }}
+                  style={{ left: `${volumeHandleLoc}px`, backgroundColor: this._getColor() }}
                 />
               </div>
 
@@ -239,7 +675,7 @@ class Audio extends React.PureComponent {
             <div className='video-player__buttons right'>
               <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)}>
                 <a className='video-player__download__icon' href={this.props.src} download>
-                  <Icon id={'download'} fixedWidth />
+                  <Icon id='download' fixedWidth />
                 </a>
               </button>
             </div>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 2ac47677ed7..6ccc281a3fd 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -117,6 +117,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             src={attachment.get('url')}
             alt={attachment.get('description')}
             duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+            poster={status.getIn(['account', 'avatar_static'])}
             height={110}
             preload
           />
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 79ae5874e82..65e07503747 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5296,6 +5296,7 @@ a.status-card.compact:hover {
 }
 
 .audio-player {
+  overflow: hidden;
   box-sizing: border-box;
   position: relative;
   background: darken($ui-base-color, 8%);
@@ -5308,37 +5309,50 @@ a.status-card.compact:hover {
     height: 100%;
   }
 
-  &__waveform {
-    padding: 15px 0;
-    position: relative;
-    overflow: hidden;
+  &.with-light-background {
+    .video-player__seek::before {
+      color: rgba($black, 0.35);
+    }
 
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      border-top: 1px solid lighten($ui-base-color, 4%);
-      width: 100%;
-      height: 0;
-      left: 0;
-      top: calc(50% + 1px);
+    .video-player__seek__seek {
+      color: rgba($black, 0.2);
+    }
+
+    .video-player__buttons button {
+      color: rgba($black, 0.75);
+
+      &:active,
+      &:hover,
+      &:focus {
+        color: $black;
+      }
+    }
+
+    .video-player__time-sep,
+    .video-player__time-total,
+    .video-player__time-current {
+      color: $black;
+    }
+
+    .video-player__volume::before {
+      background: rgba($black, 0.35);
     }
   }
 
-  &__progress-placeholder {
-    background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
+  .video-player__seek::before,
+  .video-player__seek__buffer,
+  .video-player__seek__progress {
+    top: 0;
   }
 
-  &__wave-placeholder {
-    background-color: lighten($ui-base-color, 16%);
+  .video-player__seek__handle {
+    top: -4px;
   }
 
   .video-player__controls {
     padding: 0 15px;
     padding-top: 10px;
-    background: darken($ui-base-color, 8%);
-    border-top: 1px solid lighten($ui-base-color, 4%);
-    border-radius: 0 0 4px 4px;
+    background: transparent;
   }
 }
 

From c6904c0d3766a2ea8a81ab025c127169ecb51373 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 21 Jun 2020 12:41:38 +0200
Subject: [PATCH 13/19] Fix unique username constraint for local users not
 being enforced in database (#14099)

This should not be an issue in practice because of the Rails-level uniqueness
check, but local accounts having a NULL domain means the uniqueness constraint
did not apply to them (since no two NULL values are considered equal).
---
 ...64023_add_fixed_lowercase_index_to_accounts.rb | 15 +++++++++++++++
 db/schema.rb                                      |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 db/migrate/20200620164023_add_fixed_lowercase_index_to_accounts.rb

diff --git a/db/migrate/20200620164023_add_fixed_lowercase_index_to_accounts.rb b/db/migrate/20200620164023_add_fixed_lowercase_index_to_accounts.rb
new file mode 100644
index 00000000000..c5688681fc0
--- /dev/null
+++ b/db/migrate/20200620164023_add_fixed_lowercase_index_to_accounts.rb
@@ -0,0 +1,15 @@
+class AddFixedLowercaseIndexToAccounts < ActiveRecord::Migration[5.2]
+  disable_ddl_transaction!
+
+  def up
+    rename_index :accounts, 'index_accounts_on_username_and_domain_lower', 'old_index_accounts_on_username_and_domain_lower' unless index_name_exists?(:accounts, 'old_index_accounts_on_username_and_domain_lower')
+    add_index :accounts, "lower (username), COALESCE(lower(domain), '')", name: 'index_accounts_on_username_and_domain_lower', unique: true, algorithm: :concurrently
+    remove_index :accounts, name: 'old_index_accounts_on_username_and_domain_lower'
+  end
+
+  def down
+    add_index :accounts, 'lower (username), lower(domain)', name: 'old_index_accounts_on_username_and_domain_lower', unique: true, algorithm: :concurrently
+    remove_index :accounts, name: 'index_accounts_on_username_and_domain_lower'
+    rename_index :accounts, 'old_index_accounts_on_username_and_domain_lower', 'index_accounts_on_username_and_domain_lower'
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index df5d48f44c4..acc4ffb1abe 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_06_08_113046) do
+ActiveRecord::Schema.define(version: 2020_06_20_164023) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -176,7 +176,7 @@ ActiveRecord::Schema.define(version: 2020_06_08_113046) do
     t.integer "header_storage_schema_version"
     t.string "devices_url"
     t.index "(((setweight(to_tsvector('simple'::regconfig, (display_name)::text), 'A'::\"char\") || setweight(to_tsvector('simple'::regconfig, (username)::text), 'B'::\"char\")) || setweight(to_tsvector('simple'::regconfig, (COALESCE(domain, ''::character varying))::text), 'C'::\"char\")))", name: "search_index", using: :gin
-    t.index "lower((username)::text), lower((domain)::text)", name: "index_accounts_on_username_and_domain_lower", unique: true
+    t.index "lower((username)::text), COALESCE(lower((domain)::text), ''::text)", name: "index_accounts_on_username_and_domain_lower", unique: true
     t.index ["moved_to_account_id"], name: "index_accounts_on_moved_to_account_id"
     t.index ["uri"], name: "index_accounts_on_uri"
     t.index ["url"], name: "index_accounts_on_url"

From aaf91abffae590b2db1b9e6a7dd2a9e2b06b06ca Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Mon, 22 Jun 2020 19:24:16 +0200
Subject: [PATCH 14/19] Fix audio player not working when media files are
 hosted on a different domain (#14118)

---
 app/javascript/mastodon/features/audio/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js
index 5f5d85b95f6..029750d850f 100644
--- a/app/javascript/mastodon/features/audio/index.js
+++ b/app/javascript/mastodon/features/audio/index.js
@@ -229,6 +229,7 @@ class Audio extends React.PureComponent {
     window.addEventListener('scroll', this.handleScroll);
 
     const img = new Image();
+    img.crossOrigin = 'anonymous';
     img.onload = () => this.handlePosterLoad(img);
     img.src = this.props.poster;
   }
@@ -236,6 +237,7 @@ class Audio extends React.PureComponent {
   componentDidUpdate (prevProps, prevState) {
     if (prevProps.poster !== this.props.poster) {
       const img = new Image();
+      img.crossOrigin = 'anonymous';
       img.onload = () => this.handlePosterLoad(img);
       img.src = this.props.poster;
     }
@@ -606,6 +608,7 @@ class Audio extends React.PureComponent {
           onPause={this.handlePause}
           onProgress={this.handleProgress}
           onTimeUpdate={this.handleTimeUpdate}
+          crossOrigin='anonymous'
         />
 
         <canvas

From 419ad6248beb192f34ef581306138c3ff0d600a9 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 23 Jun 2020 12:20:14 +0200
Subject: [PATCH 15/19] Change volume control and download buttons in web UI
 (#14122)

* Fix audio download button not starting download in web UI

* Fix volume controls on audio and video players in web UI

* Remove download button from video player in web UI
---
 app/javascript/mastodon/components/status.js  |  3 +-
 .../mastodon/features/audio/index.js          | 80 +++++++++----------
 .../status/components/detailed_status.js      |  3 +-
 .../mastodon/features/video/index.js          | 50 ++++--------
 .../styles/mastodon/components.scss           | 63 +++++++++++----
 5 files changed, 105 insertions(+), 94 deletions(-)

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 4ed8cbdd9f7..5f42534bacf 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -347,9 +347,8 @@ class Status extends ImmutablePureComponent {
                 alt={attachment.get('description')}
                 poster={status.getIn(['account', 'avatar_static'])}
                 duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
-                peaks={[0]}
                 width={this.props.cachedMediaWidth}
-                height={70}
+                height={110}
                 cacheWidth={this.props.cacheMediaWidth}
               />
             )}
diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js
index 029750d850f..cde2357ac06 100644
--- a/app/javascript/mastodon/features/audio/index.js
+++ b/app/javascript/mastodon/features/audio/index.js
@@ -6,7 +6,7 @@ import Icon from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { throttle } from 'lodash';
 import { encode, decode } from 'blurhash';
-import { getPointerPosition } from 'mastodon/features/video';
+import { getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
 
 const digitCharacters = [
   '0',
@@ -140,7 +140,7 @@ const messages = defineMessages({
 });
 
 const TICK_SIZE = 10;
-const PADDING = 180;
+const PADDING   = 180;
 
 export default @injectIntl
 class Audio extends React.PureComponent {
@@ -150,10 +150,8 @@ class Audio extends React.PureComponent {
     alt: PropTypes.string,
     poster: PropTypes.string,
     duration: PropTypes.number,
-    peaks: PropTypes.arrayOf(PropTypes.number),
     width: PropTypes.number,
     height: PropTypes.number,
-    preload: PropTypes.bool,
     editable: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     cacheWidth: PropTypes.func,
@@ -171,17 +169,6 @@ class Audio extends React.PureComponent {
     color: { r: 255, g: 255, b: 255 },
   };
 
-  // Hard coded in components.scss
-  // Any way to get ::before values programatically?
-  volWidth  = 50;
-  volOffset = 70;
-
-  volHandleOffset = v => {
-    const offset = v * this.volWidth + this.volOffset;
-
-    return (offset > 110) ? 110 : offset;
-  }
-
   setPlayerRef = c => {
     this.player = c;
 
@@ -364,20 +351,11 @@ class Audio extends React.PureComponent {
   }
 
   handleMouseVolSlide = throttle(e => {
-    const rect = this.volume.getBoundingClientRect();
-    const x    = (e.clientX - rect.left) / this.volWidth; // x position within the element.
+    const { x } = getPointerPosition(this.volume, e);
 
     if(!isNaN(x)) {
-      let slideamt = x;
-
-      if (x > 1) {
-        slideamt = 1;
-      } else if(x < 0) {
-        slideamt = 0;
-      }
-
-      this.setState({ volume: slideamt }, () => {
-        this.audio.volume = slideamt;
+      this.setState({ volume: x }, () => {
+        this.audio.volume = x;
       });
     }
   }, 60);
@@ -395,6 +373,14 @@ class Audio extends React.PureComponent {
     }
   }, 150, { trailing: true });
 
+  handleMouseEnter = () => {
+    this.setState({ hovered: true });
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ hovered: false });
+  }
+
   _initAudioContext () {
     const context  = new AudioContext();
     const analyser = context.createAnalyser();
@@ -430,6 +416,24 @@ class Audio extends React.PureComponent {
     });
   }
 
+  handleDownload = () => {
+    fetch(this.props.src).then(res => res.blob()).then(blob => {
+      const element   = document.createElement('a');
+      const objectURL = URL.createObjectURL(blob);
+
+      element.setAttribute('href', objectURL);
+      element.setAttribute('download', fileNameFromURL(this.props.src));
+
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+
+      URL.revokeObjectURL(objectURL);
+    }).catch(err => {
+      console.error(err);
+    });
+  }
+
   _renderCanvas () {
     requestAnimationFrame(() => {
       this._clear();
@@ -593,13 +597,10 @@ class Audio extends React.PureComponent {
   render () {
     const { src, intl, alt, editable } = this.props;
     const { paused, muted, volume, currentTime, duration, buffer, darkText, dragging } = this.state;
-
-    const volumeWidth     = muted ? 0 : volume * this.volWidth;
-    const volumeHandleLoc = muted ? this.volHandleOffset(0) : this.volHandleOffset(volume);
-    const progress        = (currentTime / duration) * 100;
+    const progress = (currentTime / duration) * 100;
 
     return (
-      <div className={classNames('audio-player', { editable, 'with-light-background': darkText })} ref={this.setPlayerRef} style={{ width: '100%', height: this.state.height || this.props.height }}>
+      <div className={classNames('audio-player', { editable, 'with-light-background': darkText })} ref={this.setPlayerRef} style={{ width: '100%', height: this.state.height || this.props.height }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <audio
           src={src}
           ref={this.setAudioRef}
@@ -657,18 +658,17 @@ class Audio extends React.PureComponent {
               <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
               <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
-              <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                &nbsp;
-                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px`, backgroundColor: this._getColor() }} />
+              <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
+                <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getColor() }} />
 
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px`, backgroundColor: this._getColor() }}
+                  style={{ left: `${volume * 100}%`, backgroundColor: this._getColor() }}
                 />
               </div>
 
-              <span>
+              <span className='video-player__time'>
                 <span className='video-player__time-current'>{formatTime(currentTime)}</span>
                 <span className='video-player__time-sep'>/</span>
                 <span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span>
@@ -676,11 +676,7 @@ class Audio extends React.PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)}>
-                <a className='video-player__download__icon' href={this.props.src} download>
-                  <Icon id='download' fixedWidth />
-                </a>
-              </button>
+              <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} onClick={this.handleDownload}><Icon id='download' fixedWidth /></button>
             </div>
           </div>
         </div>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 6ccc281a3fd..72d15ddf710 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -118,8 +118,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             alt={attachment.get('description')}
             duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
             poster={status.getIn(['account', 'avatar_static'])}
-            height={110}
-            preload
+            height={150}
           />
         );
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 95e107618ec..72c23bc0c6d 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -19,7 +19,6 @@ const messages = defineMessages({
   close: { id: 'video.close', defaultMessage: 'Close video' },
   fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
   exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
-  download: { id: 'video.download', defaultMessage: 'Download file' },
 });
 
 export const formatTime = secondsNum => {
@@ -87,6 +86,14 @@ export const getPointerPosition = (el, event) => {
   return position;
 };
 
+export const fileNameFromURL = str => {
+  const url      = new URL(str);
+  const pathname = url.pathname;
+  const index    = pathname.lastIndexOf('/');
+
+  return pathname.substring(index + 1);
+};
+
 export default @injectIntl
 class Video extends React.PureComponent {
 
@@ -126,17 +133,6 @@ class Video extends React.PureComponent {
     revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
   };
 
-  // Hard-coded in components.scss
-  // Any way to get ::before values programatically?
-  volWidth  = 50;
-  volOffset = 70;
-
-  volHandleOffset = v => {
-    const offset = v * this.volWidth + this.volOffset;
-
-    return (offset > 110) ? 110 : offset;
-  }
-
   setPlayerRef = c => {
     this.player = c;
 
@@ -206,20 +202,12 @@ class Video extends React.PureComponent {
   }
 
   handleMouseVolSlide = throttle(e => {
-    const rect = this.volume.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / this.volWidth; //x position within the element.
+    const { x } = getPointerPosition(this.volume, e);
 
     if(!isNaN(x)) {
-      let slideamt = x;
-
-      if(x > 1) {
-        slideamt = 1;
-      } else if(x < 0) {
-        slideamt = 0;
-      }
-
-      this.video.volume = slideamt;
-      this.setState({ volume: slideamt });
+      this.setState({ volume: x }, () => {
+        this.video.volume = x;
+      });
     }
   }, 60);
 
@@ -421,9 +409,6 @@ class Video extends React.PureComponent {
     const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, editable } = this.props;
     const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
     const progress = (currentTime / duration) * 100;
-
-    const volumeWidth = (muted) ? 0 : volume * this.volWidth;
-    const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume);
     const playerStyle = {};
 
     let { width, height } = this.props;
@@ -510,18 +495,18 @@ class Video extends React.PureComponent {
               <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay} autoFocus={detailed}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
               <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
-              <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                &nbsp;
-                <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} />
+              <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
+                <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
+
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex='0'
-                  style={{ left: `${volumeHandleLoc}px` }}
+                  style={{ left: `${volume * 100}%` }}
                 />
               </div>
 
               {(detailed || fullscreen) && (
-                <span>
+                <span className='video-player__time'>
                   <span className='video-player__time-current'>{formatTime(currentTime)}</span>
                   <span className='video-player__time-sep'>/</span>
                   <span className='video-player__time-total'>{formatTime(duration)}</span>
@@ -535,7 +520,6 @@ class Video extends React.PureComponent {
               {(!onCloseVideo && !editable && !fullscreen) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
               {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>}
               {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>}
-              <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)}><a className='video-player__download__icon' href={this.props.src} download><Icon id={'download'} fixedWidth /></a></button>
               <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button>
             </div>
           </div>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 65e07503747..8554c19eb6e 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5309,13 +5309,21 @@ a.status-card.compact:hover {
     height: 100%;
   }
 
+  .video-player__volume::before,
+  .video-player__seek::before {
+    background: rgba($white, 0.15);
+  }
+
   &.with-light-background {
+    color: $black;
+
+    .video-player__volume::before,
     .video-player__seek::before {
-      color: rgba($black, 0.35);
+      background: rgba($black, 0.15);
     }
 
-    .video-player__seek__seek {
-      color: rgba($black, 0.2);
+    .video-player__seek__buffer {
+      background: rgba($black, 0.2);
     }
 
     .video-player__buttons button {
@@ -5333,10 +5341,6 @@ a.status-card.compact:hover {
     .video-player__time-current {
       color: $black;
     }
-
-    .video-player__volume::before {
-      background: rgba($black, 0.35);
-    }
   }
 
   .video-player__seek::before,
@@ -5364,6 +5368,7 @@ a.status-card.compact:hover {
   border-radius: 4px;
   box-sizing: border-box;
   direction: ltr;
+  color: $white;
 
   &.editable {
     border-radius: 0;
@@ -5476,6 +5481,10 @@ a.status-card.compact:hover {
   }
 
   &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
     font-size: 16px;
     white-space: nowrap;
     overflow: hidden;
@@ -5494,6 +5503,7 @@ a.status-card.compact:hover {
     }
 
     button {
+      flex: 0 0 auto;
       background: transparent;
       padding: 2px 10px;
       font-size: 16px;
@@ -5508,6 +5518,13 @@ a.status-card.compact:hover {
     }
   }
 
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__time-sep,
   &__time-total,
   &__time-current {
@@ -5517,7 +5534,6 @@ a.status-card.compact:hover {
 
   &__time-current {
     color: $white;
-    margin-left: 60px;
   }
 
   &__time-sep {
@@ -5531,9 +5547,22 @@ a.status-card.compact:hover {
   }
 
   &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
     cursor: pointer;
     height: 24px;
-    display: inline;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-right: 10px;
+    }
 
     &::before {
       content: "";
@@ -5543,8 +5572,9 @@ a.status-card.compact:hover {
       display: block;
       position: absolute;
       height: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
     }
 
     &__current {
@@ -5552,8 +5582,9 @@ a.status-card.compact:hover {
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
       background: lighten($ui-highlight-color, 8%);
     }
 
@@ -5563,8 +5594,10 @@ a.status-card.compact:hover {
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      bottom: 16px;
-      left: 70px;
+      top: 50%;
+      left: 0;
+      margin-left: -6px;
+      transform: translate(0, -50%);
       transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);

From 791402af7c33da5c8f60200b389701400f73fde8 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 23 Jun 2020 16:01:34 +0200
Subject: [PATCH 16/19] never filter own posts from timeline (#14128)

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

Co-authored-by: ash lea <example@thisismyactual.email>
---
 .../mastodon/features/ui/containers/status_list_container.js    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js
index 9f6cbf988ef..4ce4ac6c8c9 100644
--- a/app/javascript/mastodon/features/ui/containers/status_list_container.js
+++ b/app/javascript/mastodon/features/ui/containers/status_list_container.js
@@ -17,6 +17,8 @@ const makeGetStatusIds = (pending = false) => createSelector([
     const statusForId = statuses.get(id);
     let showStatus    = true;
 
+    if (statusForId.get('account') === me) return true;
+
     if (columnSettings.getIn(['shows', 'reblog']) === false) {
       showStatus = showStatus && statusForId.get('reblog') === null;
     }

From 01a99f7ec7ce892a3d953a6792515882a04ffee3 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 23 Jun 2020 16:40:01 +0200
Subject: [PATCH 17/19] Fix crash in MergeWorker (#14129)

Similarly to #12324, the code is passing an Account object where an id
is expected.
---
 app/lib/feed_manager.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/lib/feed_manager.rb b/app/lib/feed_manager.rb
index 94872d050fa..efb4f6e2c21 100644
--- a/app/lib/feed_manager.rb
+++ b/app/lib/feed_manager.rb
@@ -106,7 +106,7 @@ class FeedManager
     crutches = build_crutches(into_account.id, statuses)
 
     statuses.each do |status|
-      next if filter_from_home?(status, into_account, crutches)
+      next if filter_from_home?(status, into_account.id, crutches)
 
       add_to_feed(:home, into_account.id, status, aggregate)
     end

From d469247083dbbe5d4f09cc9d13a3ebd400e6068e Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 23 Jun 2020 17:24:29 +0200
Subject: [PATCH 18/19] Fix very wide media attachments resulting in too thin a
 thumbnail (#14127)

Fixes #14094
---
 app/javascript/styles/mastodon/components.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 8554c19eb6e..4e084b6c3cf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5203,6 +5203,7 @@ a.status-card.compact:hover {
   border-radius: 4px;
   position: relative;
   width: 100%;
+  min-height: 64px;
 }
 
 .media-gallery__item {

From bb9ca8a587ee5a3ec8778e72828aca0ba8871327 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 24 Jun 2020 10:25:32 +0200
Subject: [PATCH 19/19] Fix audio/video/images/cards not reacting to window
 resizes in web UI (#14130)

* Fix audio/video/images/cards not reacting to window resizes in web UI

* Update app/javascript/mastodon/features/audio/index.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
---
 .../mastodon/components/media_gallery.js      | 44 ++++++++++++---
 .../mastodon/features/audio/index.js          | 56 +++++++++++++------
 .../features/status/components/card.js        | 33 ++++++++++-
 .../mastodon/features/video/index.js          | 32 ++++++++---
 .../styles/mastodon/components.scss           | 19 +++++--
 5 files changed, 143 insertions(+), 41 deletions(-)

diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index a31de206b43..0ec8661380c 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -8,10 +8,10 @@ import { isIOS } from '../is_mobile';
 import classNames from 'classnames';
 import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
 import { decode } from 'blurhash';
+import { debounce } from 'lodash';
 
 const messages = defineMessages({
-  toggle_visible: { id: 'media_gallery.toggle_visible',
-    defaultMessage: 'Hide {number, plural, one {image} other {images}}' },
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide {number, plural, one {image} other {images}}' },
 });
 
 class Item extends React.PureComponent {
@@ -267,6 +267,14 @@ class MediaGallery extends React.PureComponent {
     width: this.props.defaultWidth,
   };
 
+  componentDidMount () {
+    window.addEventListener('resize', this.handleResize, { passive: true });
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   componentWillReceiveProps (nextProps) {
     if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
       this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
@@ -275,6 +283,14 @@ class MediaGallery extends React.PureComponent {
     }
   }
 
+  handleResize = debounce(() => {
+    if (this.node) {
+      this._setDimensions();
+    }
+  }, 250, {
+    trailing: true,
+  });
+
   handleOpen = () => {
     if (this.props.onToggleVisibility) {
       this.props.onToggleVisibility();
@@ -287,17 +303,27 @@ class MediaGallery extends React.PureComponent {
     this.props.onOpenMedia(this.props.media, index);
   }
 
-  handleRef = (node) => {
-    if (node) {
-      // offsetWidth triggers a layout, so only calculate when we need to
-      if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
+  handleRef = c => {
+    this.node = c;
 
-      this.setState({
-        width: node.offsetWidth,
-      });
+    if (this.node) {
+      this._setDimensions();
     }
   }
 
+  _setDimensions () {
+    const width = this.node.offsetWidth;
+
+    // offsetWidth triggers a layout, so only calculate when we need to
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
+    }
+
+    this.setState({
+      width: width,
+    });
+  }
+
   isFullSizeEligible() {
     const { media } = this.props;
     return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
diff --git a/app/javascript/mastodon/features/audio/index.js b/app/javascript/mastodon/features/audio/index.js
index cde2357ac06..9da143c96e2 100644
--- a/app/javascript/mastodon/features/audio/index.js
+++ b/app/javascript/mastodon/features/audio/index.js
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { throttle } from 'lodash';
 import { encode, decode } from 'blurhash';
 import { getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
+import { debounce } from 'lodash';
 
 const digitCharacters = [
   '0',
@@ -172,18 +173,22 @@ class Audio extends React.PureComponent {
   setPlayerRef = c => {
     this.player = c;
 
-    if (c) {
-      const width  = c.offsetWidth;
-      const height = width / (16/9);
-
-      if (this.props.cacheWidth) {
-        this.props.cacheWidth(width);
-      }
-
-      this.setState({ width, height });
+    if (this.player) {
+      this._setDimensions();
     }
   }
 
+  _setDimensions () {
+    const width  = this.player.offsetWidth;
+    const height = width / (16/9);
+
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
+    }
+
+    this.setState({ width, height });
+  }
+
   setSeekRef = c => {
     this.seek = c;
   }
@@ -214,6 +219,7 @@ class Audio extends React.PureComponent {
 
   componentDidMount () {
     window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('resize', this.handleResize, { passive: true });
 
     const img = new Image();
     img.crossOrigin = 'anonymous';
@@ -243,6 +249,7 @@ class Audio extends React.PureComponent {
 
   componentWillUnmount () {
     window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.handleResize);
   }
 
   togglePlay = () => {
@@ -253,6 +260,14 @@ class Audio extends React.PureComponent {
     }
   }
 
+  handleResize = debounce(() => {
+    if (this.player) {
+      this._setDimensions();
+    }
+  }, 250, {
+    trailing: true,
+  });
+
   handlePlay = () => {
     this.setState({ paused: false });
 
@@ -564,14 +579,13 @@ class Audio extends React.PureComponent {
   }
 
   _drawTick (x1, y1, x2, y2) {
-    const radius = this._getRadius();
-    const cx = parseInt(this.state.width / 2);
-    const cy = parseInt(radius + (PADDING * this._getScaleCoefficient()));
+    const cx = this._getCX();
+    const cy = this._getCY();
 
-    const dx1 = parseInt(cx + x1);
-    const dy1 = parseInt(cy + y1);
-    const dx2 = parseInt(cx + x2);
-    const dy2 = parseInt(cy + y2);
+    const dx1 = Math.ceil(cx + x1);
+    const dy1 = Math.ceil(cy + y1);
+    const dx2 = Math.ceil(cx + x2);
+    const dy2 = Math.ceil(cy + y2);
 
     const gradient = this.canvasContext.createLinearGradient(dx1, dy1, dx2, dy2);
 
@@ -590,6 +604,14 @@ class Audio extends React.PureComponent {
     this.canvasContext.stroke();
   }
 
+  _getCX() {
+    return Math.floor(this.state.width / 2);
+  }
+
+  _getCY() {
+    return Math.floor(this._getRadius() + (PADDING * this._getScaleCoefficient()));
+  }
+
   _getColor () {
     return `rgb(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b})`;
   }
@@ -638,7 +660,7 @@ class Audio extends React.PureComponent {
           alt=''
           width={(this._getRadius() - TICK_SIZE) * 2}
           height={(this._getRadius() - TICK_SIZE) * 2}
-          style={{ position: 'absolute', left: parseInt(this.state.width / 2), top: parseInt(this._getRadius() + (PADDING * this._getScaleCoefficient())), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
+          style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
         />
 
         <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js
index 630e99f2cbf..4442ab4951d 100644
--- a/app/javascript/mastodon/features/status/components/card.js
+++ b/app/javascript/mastodon/features/status/components/card.js
@@ -9,6 +9,7 @@ import Icon from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { useBlurhash } from 'mastodon/initial_state';
 import { decode } from 'blurhash';
+import { debounce } from 'lodash';
 
 const IDNA_PREFIX = 'xn--';
 
@@ -92,13 +93,20 @@ export default class Card extends React.PureComponent {
   }
 
   componentDidMount () {
+    window.addEventListener('resize', this.handleResize, { passive: true });
+
     if (this.props.card && this.props.card.get('blurhash')) {
       this._decode();
     }
   }
 
+  componentWillUnmount () {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   componentDidUpdate (prevProps) {
     const { card } = this.props;
+
     if (card.get('blurhash') && (!prevProps.card || prevProps.card.get('blurhash') !== card.get('blurhash'))) {
       this._decode();
     }
@@ -118,6 +126,24 @@ export default class Card extends React.PureComponent {
     }
   }
 
+  _setDimensions () {
+    const width = this.node.offsetWidth;
+
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
+    }
+
+    this.setState({ width });
+  }
+
+  handleResize = debounce(() => {
+    if (this.node) {
+      this._setDimensions();
+    }
+  }, 250, {
+    trailing: true,
+  });
+
   handlePhotoClick = () => {
     const { card, onOpenMedia } = this.props;
 
@@ -150,9 +176,10 @@ export default class Card extends React.PureComponent {
   }
 
   setRef = c => {
-    if (c) {
-      if (this.props.cacheWidth) this.props.cacheWidth(c.offsetWidth);
-      this.setState({ width: c.offsetWidth });
+    this.node = c;
+
+    if (this.node) {
+      this._setDimensions();
     }
   }
 
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 72c23bc0c6d..1f85375ffab 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { fromJS, is } from 'immutable';
-import { throttle } from 'lodash';
+import { throttle, debounce } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 import { displayMedia, useBlurhash } from '../../initial_state';
@@ -136,15 +136,23 @@ class Video extends React.PureComponent {
   setPlayerRef = c => {
     this.player = c;
 
-    if (c) {
-      if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
-
-      this.setState({
-        containerWidth: c.offsetWidth,
-      });
+    if (this.player) {
+      this._setDimensions();
     }
   }
 
+  _setDimensions () {
+    const width = this.player.offsetWidth;
+
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
+    }
+
+    this.setState({
+      containerWidth: width,
+    });
+  }
+
   setVideoRef = c => {
     this.video = c;
 
@@ -268,6 +276,7 @@ class Video extends React.PureComponent {
     document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
 
     window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('resize', this.handleResize, { passive: true });
 
     if (this.props.blurhash) {
       this._decode();
@@ -276,6 +285,7 @@ class Video extends React.PureComponent {
 
   componentWillUnmount () {
     window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('resize', this.handleResize);
 
     document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
     document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
@@ -313,6 +323,14 @@ class Video extends React.PureComponent {
     }
   }
 
+  handleResize = debounce(() => {
+    if (this.player) {
+      this._setDimensions();
+    }
+  }, 250, {
+    trailing: true,
+  });
+
   handleScroll = throttle(() => {
     if (!this.video) {
       return;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 4e084b6c3cf..fb9dca41b4f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5562,7 +5562,7 @@ a.status-card.compact:hover {
     &.active {
       overflow: visible;
       width: 50px;
-      margin-right: 10px;
+      margin-right: 16px;
     }
 
     &::before {
@@ -5599,10 +5599,17 @@ a.status-card.compact:hover {
       left: 0;
       margin-left: -6px;
       transform: translate(0, -50%);
-      transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+      opacity: 0;
+
+      .no-reduce-motion & {
+        transition: opacity 100ms linear;
+      }
+    }
+
+    &.active &__handle {
+      opacity: 1;
     }
   }
 
@@ -5662,10 +5669,12 @@ a.status-card.compact:hover {
       height: 12px;
       top: 6px;
       margin-left: -6px;
-      transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-      pointer-events: none;
+
+      .no-reduce-motion & {
+        transition: opacity .1s ease;
+      }
 
       &.active {
         opacity: 1;