OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed onboarding checklist video logo autoplay (#19967)

Browse Source 
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
This commit is contained in:
Kevin Ansfield 2024-04-02 13:55:22 +01:00 committed by GitHub
parent 50dceb23ff
commit 98ce6bf4d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View File

@ -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}}

6
ghost/admin/app/modifiers/autoplay.js Normal file
View File

@ -0,0 +1,6 @@
import {modifier} from 'ember-modifier';
export default modifier((element) => {
element.muted = true;
element.play();
}, {eager: false});