Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-22 16:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

Reuse color utils for media modal background

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-25 19:19:07 +08:00
parent 5d5ab906ba
commit 8ee1c3a2e3
3 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app.css
View file

@ -1052,13 +1052,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
background-color: var(--average-color-alpha); background-color: var(--accent-alpha-color);
background-image: radial-gradient( /* background-image: radial-gradient(
closest-side, closest-side,
var(--average-color) 10%, var(--accent-color) 10%,
var(--average-color-alpha) 40%, var(--accent-alpha-color) 40%,
transparent 100% transparent 100%
); ); */
} }
.carousel .carousel-item :is(img, video) { .carousel .carousel-item :is(img, video) {
width: auto; width: auto;

21
src/components/media-modal.jsx
View file

@ -3,6 +3,8 @@ import { getBlurHashAverageColor } from 'fast-blurhash';
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
import Icon from './icon'; import Icon from './icon';
import Link from './link'; import Link from './link';
import Media from './media'; import Media from './media';
@ -112,17 +114,22 @@ function MediaModal({
> >
{mediaAttachments?.map((media, i) => { {mediaAttachments?.map((media, i) => {
const { blurhash } = media; const { blurhash } = media;
const rgbAverageColor = blurhash let accentColor;
? getBlurHashAverageColor(blurhash) if (blurhash) {
: null; const averageColor = getBlurHashAverageColor(blurhash);
const labAverageColor = rgb2oklab(averageColor);
accentColor = oklab2rgb([
0.6,
labAverageColor[1],
labAverageColor[2],
]);
}
return ( return (
<div <div
class="carousel-item" class="carousel-item"
style={{ style={{
'--average-color': `rgb(${rgbAverageColor?.join(',')})`, '--accent-color': `rgb(${accentColor?.join(',')})`,
'--average-color-alpha': `rgba(${rgbAverageColor?.join( '--accent-alpha-color': `rgba(${accentColor?.join(',')}, 0.4)`,
',',
)}, .5)`,
}} }}
tabindex="0" tabindex="0"
key={media.id} key={media.id}

2
src/index.css
View file

@ -53,7 +53,7 @@
--divider-color: rgba(0, 0, 0, 0.1); --divider-color: rgba(0, 0, 0, 0.1);
--backdrop-color: rgba(0, 0, 0, 0.05); --backdrop-color: rgba(0, 0, 0, 0.05);
--backdrop-darker-color: rgba(0, 0, 0, 0.25); --backdrop-darker-color: rgba(0, 0, 0, 0.25);
--backdrop-solid-color: #ccc; --backdrop-solid-color: #eee;
--img-bg-color: rgba(128, 128, 128, 0.2); --img-bg-color: rgba(128, 128, 128, 0.2);
--loader-color: #1c1e2199; --loader-color: #1c1e2199;
--comment-line-color: #e5e5e5; --comment-line-color: #e5e5e5;