this repo has no description
Slight adjustments to carousel modal
- Gap between media
- Gradiented backgrounds
+64
-16
+1
src/app.css
+1
src/app.css
+63
-16
src/components/media-modal.jsx
+63
-16
src/components/media-modal.jsx
···
1
1
import { Menu } from '@szhsin/react-menu';
2
2
import { getBlurHashAverageColor } from 'fast-blurhash';
3
-
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
3
+
import {
4
+
useEffect,
5
+
useLayoutEffect,
6
+
useMemo,
7
+
useRef,
8
+
useState,
9
+
} from 'preact/hooks';
4
10
import { useHotkeys } from 'react-hotkeys-hook';
5
11
6
12
import { oklab2rgb, rgb2oklab } from '../utils/color-utils';
···
102
108
return () => clearTimeout(timer);
103
109
}, []);
104
110
111
+
const mediaAccentColors = useMemo(() => {
112
+
return mediaAttachments?.map((media) => {
113
+
const { blurhash } = media;
114
+
if (blurhash) {
115
+
const averageColor = getBlurHashAverageColor(blurhash);
116
+
const labAverageColor = rgb2oklab(averageColor);
117
+
return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);
118
+
}
119
+
return null;
120
+
});
121
+
}, [mediaAttachments]);
122
+
const mediaAccentGradient = useMemo(() => {
123
+
const gap = 5;
124
+
const range = 100 / mediaAccentColors.length;
125
+
return (
126
+
mediaAccentColors
127
+
?.map((color, i) => {
128
+
const start = i * range + gap;
129
+
const end = (i + 1) * range - gap;
130
+
if (color) {
131
+
return `
132
+
rgba(${color?.join(',')}, 0.4) ${start}%,
133
+
rgba(${color?.join(',')}, 0.4) ${end}%
134
+
`;
135
+
}
136
+
137
+
return `
138
+
transparent ${start}%,
139
+
transparent ${end}%
140
+
`;
141
+
})
142
+
?.join(', ') || 'transparent'
143
+
);
144
+
}, [mediaAccentColors]);
145
+
105
146
return (
106
147
<div
107
148
class={`media-modal-container media-modal-count-${mediaAttachments?.length}`}
···
120
161
onClose();
121
162
}
122
163
}}
164
+
style={
165
+
mediaAttachments.length > 1
166
+
? {
167
+
backgroundAttachment: 'local',
168
+
backgroundImage: `linear-gradient(
169
+
to right, ${mediaAccentGradient})`,
170
+
}
171
+
: {}
172
+
}
123
173
>
124
174
{mediaAttachments?.map((media, i) => {
125
-
const { blurhash } = media;
126
-
let accentColor;
127
-
if (blurhash) {
128
-
const averageColor = getBlurHashAverageColor(blurhash);
129
-
const labAverageColor = rgb2oklab(averageColor);
130
-
accentColor = oklab2rgb([
131
-
0.6,
132
-
labAverageColor[1],
133
-
labAverageColor[2],
134
-
]);
135
-
}
175
+
const accentColor =
176
+
mediaAttachments.length === 1 ? mediaAccentColors[i] : null;
136
177
return (
137
178
<div
138
179
class="carousel-item"
139
-
style={{
140
-
'--accent-color': `rgb(${accentColor?.join(',')})`,
141
-
'--accent-alpha-color': `rgba(${accentColor?.join(',')}, 0.4)`,
142
-
}}
180
+
style={
181
+
accentColor
182
+
? {
183
+
'--accent-color': `rgb(${accentColor?.join(',')})`,
184
+
'--accent-alpha-color': `rgba(${accentColor?.join(
185
+
',',
186
+
)}, 0.4)`,
187
+
}
188
+
: {}
189
+
}
143
190
tabindex="0"
144
191
key={media.id}
145
192
ref={i === currentIndex ? carouselFocusItem : null}