this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Slight adjustments to carousel modal

- Gap between media
- Gradiented backgrounds

+64 -16
+1
src/app.css
··· 1135 1135 touch-action: pan-x; 1136 1136 user-select: none; 1137 1137 width: 100%; 1138 + gap: 16px; 1138 1139 } 1139 1140 .carousel::-webkit-scrollbar { 1140 1141 display: none;
+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}