hyprwm
/
hyprland-website
mirror of https://github.com/hyprwm/hyprland-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Disable autoplay on Firefox (#46) 

* previewRice: disable firefox auto-play

* fix some aria hidden attr
This commit is contained in:
Visual-Dawg 2024-02-13 18:54:48 +01:00 committed by GitHub
parent e974a9e234
commit 0e4cd97802
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/PatternBackground.svelte
View File

@ -98,7 +98,7 @@
x <= clientX && y <= clientY && x + width > clientX && y + height > clientY
isMouseOver$.next(isMouseStillOver)
}}
aria-hidden
aria-hidden="true"
bind:this={wrapperElement}
>
<div

6
src/routes/FeaturesSlice.svelte
View File

@ -66,7 +66,7 @@
Smooth transitions. Great animations. High performance. Instant input.
</p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
<div class="feature-image">
<img
src={smoothDefaultImage}
@ -90,7 +90,7 @@
Live reloading config. Easy plain-text format. Sensible defaults. Great documentation.
</p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
<div class="feature-image">
<img
src={configDefaultImage}
@ -113,7 +113,7 @@
<p class="max-w-[60ch]">
Automatic tiling that just works. Supports multiple fine-tuneable layouts.
</p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
<div class="feature-image">
<img
src={tileDefaultImage}

12
src/routes/PreviewRiceSlice.svelte
View File

@ -10,9 +10,12 @@
let isManuallyPaused = false
onMount(() => {
// The inview_leave event fires at the start and Chromium reports the video as paused, even with autoplay on.
// This fixes it. Catch in case autoplay is blocked
videoElement.play().catch(() => {})
// Only autoplay on Chrome, because Firefox struggles with decoding the video
if (navigator.userAgent.toLowerCase().includes('chrome')) {
// The inview_leave event fires at the start and Chromium reports the video as paused, even with autoplay on.
// This fixes it. Catch in case autoplay is blocked
videoElement.play().catch(() => {})
}
})
</script>
@ -35,7 +38,6 @@
>
<div class="video">
<Video
autoplay
muted
sources={['/videos/end_4_rice_intro.mp4']}
bind:videoElement
@ -56,7 +58,7 @@
<style lang="postcss">
section {
@apply relative z-10 -mb-4 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] md:-mt-8 lg:px-8;
@apply animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards relative z-10 -mb-4 w-full max-w-[1400px] px-1 [animation-delay:1700ms] [animation-duration:2000ms] md:-mt-8 lg:px-8;
contain: layout style content;
}