From aeceb94219e8fa4c3150dbf349228af331356dac Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sun, 11 Dec 2022 14:35:57 +0800 Subject: [PATCH] Fix carousel actually not working properly - Need intersection observer to tell JS that scroll snap happened - Fix carousel dots not working - Add fancy background overlay based on image average color - Disable fade out if open in carousel --- src/app.css | 16 +++++++++++++-- src/components/status.jsx | 43 +++++++++++++++++++++++++++++---------- src/index.css | 5 ++++- 3 files changed, 50 insertions(+), 14 deletions(-) diff --git a/src/app.css b/src/app.css index 42ef6e3c..d83c3737 100644 --- a/src/app.css +++ b/src/app.css @@ -349,7 +349,8 @@ a.hashtag { pointer-events: none; } -button.carousel-button { +button.carousel-button, +button.carousel-dot { pointer-events: auto; font-weight: bold; } @@ -360,7 +361,12 @@ button.carousel-button[hidden] { } .carousel-dots { border-radius: 999px; - backdrop-filter: blur(12px); + backdrop-filter: blur(12px) invert(.25) brightness(1.5); +} +@media (prefers-color-scheme: dark) { + .carousel-dots { + backdrop-filter: blur(12px) brightness(.5); + } } button.carousel-dot { color: var(--text-insignificant-color) !important; @@ -392,6 +398,12 @@ button.carousel-dot.active { transform: translateY(0); } } +@media (prefers-color-scheme: dark) { + .carousel :is(img, video) { + /* No need fade out if inside carousel */ + filter: none; + } +} /* COMPOSE BUTTON */ diff --git a/src/components/status.jsx b/src/components/status.jsx index 11b4d758..bbf20c31 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -3,6 +3,7 @@ import './status.css'; import { getBlurHashAverageColor } from 'fast-blurhash'; import mem from 'mem'; import { useEffect, useRef, useState } from 'preact/hooks'; +import { InView } from 'react-intersection-observer'; import { useSnapshot } from 'valtio'; import Modal from '../components/modal'; @@ -477,7 +478,7 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) { const prevShowMediaModal = useRef(showMediaModal); useEffect(() => { if (showMediaModal !== false) { - carouselFocusItem.current?.scrollIntoView({ + carouselFocusItem.current?.node?.scrollIntoView({ behavior: prevShowMediaModal.current === false ? 'auto' : 'smooth', }); } @@ -498,6 +499,8 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) { const [actionsUIState, setActionsUIState] = useState(null); // boost-loading, favourite-loading, bookmark-loading + const carouselRef = useRef(null); + return (