From 98ce6bf4d55a9944d8dc576e2e36c34696f13c1f Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Tue, 2 Apr 2024 13:55:22 +0100
Subject: [PATCH] Fixed onboarding checklist video logo autoplay (#19967)

closes https://linear.app/tryghost/issue/IPC-117/fix-ghost-orb-logo-not-being-animated-in-chrome-or-arc

- Chrome wasn't respecting the `muted` attribute when the dashboard is loaded without any interaction resulting in the video not auto playing
- fixed by adding a `{{autoplay}}` modifier that explicitly sets the `muted` property on the video before calling `.play()` which appears to bypass the interaction-required block
---
 .../admin/app/components/dashboard/onboarding-checklist.hbs | 6 +++---
 ghost/admin/app/modifiers/autoplay.js                       | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 ghost/admin/app/modifiers/autoplay.js

diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
index dc582e1059..a28a52d137 100644
--- a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
+++ b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
@@ -1,15 +1,15 @@
 <div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
     <div class="gh-onboarding-header">
         {{#if (feature "nightShift")}}
-            <video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--dark">
+            <video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--dark" {{autoplay}}>
                 <source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
             </video>
         {{else}}
-            <video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--light">
+            <video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;" class="gh-onboarding-ghost-logo--light" {{autoplay}}>
                 <source src="assets/videos/logo-loader.mp4" type="video/mp4" />
             </video>
         {{/if}}
-        
+
         {{#if this.onboarding.allStepsCompleted}}
             <h2 class="gh-canvas-title">You’re all set.</h2>
         {{else}}
diff --git a/ghost/admin/app/modifiers/autoplay.js b/ghost/admin/app/modifiers/autoplay.js
new file mode 100644
index 0000000000..2684212188
--- /dev/null
+++ b/ghost/admin/app/modifiers/autoplay.js
@@ -0,0 +1,6 @@
+import {modifier} from 'ember-modifier';
+
+export default modifier((element) => {
+    element.muted = true;
+    element.play();
+}, {eager: false});