Experiment to rebuild Diffuse using web applets.
0
fork

Configure Feed

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

feat: artwork controller tweaks

+67 -65
+67 -65
src/pages/constituents/blur/artwork-controller/_applet.astro
··· 9 9 --- 10 10 11 11 <main> 12 + <section class="artwork"></section> 13 + 12 14 <section class="controller"> 13 15 <div class="gradient-blur"> 14 16 <div></div> ··· 21 23 <div></div> 22 24 </div> 23 25 26 + <div class="controller__background"></div> 27 + 24 28 <!-- Content --> 25 29 <section class="controller__inner"></section> 26 30 </section> ··· 30 34 main { 31 35 background: var(--color-3); 32 36 color: white; 37 + display: flex; 38 + flex-direction: column; 33 39 font-size: var(--fs-sm); 34 40 height: 100vh; 35 - max-width: var(--container-3xs); 41 + max-width: var(--container-2xs); 36 42 overflow: hidden; 37 43 position: relative; 38 44 transition: ··· 43 49 /* Artwork */ 44 50 45 51 .artwork { 46 - aspect-ratio: 1 / 1; 47 - height: 90%; 48 - left: 50%; 52 + flex: 1; 53 + pointer-events: none; 54 + position: relative; 55 + } 56 + 57 + .artwork img { 58 + height: 100%; 59 + left: 0; 49 60 object-fit: cover; 50 - pointer-events: none; 51 61 position: absolute; 52 62 top: 0; 53 - transform: translateX(-50%); 54 63 width: 100%; 55 - z-index: 0; 56 64 } 57 65 58 66 /* Progress bars */ ··· 81 89 /* Controller */ 82 90 83 91 .controller { 84 - bottom: 0; 85 - left: 0; 92 + flex-shrink: 0; 86 93 padding: var(--space-md); 94 + position: relative; 95 + } 96 + 97 + .controller__background { 98 + inset: 0; 99 + opacity: 0.5; 87 100 position: absolute; 88 - right: 0; 89 - z-index: 10; 101 + transition: background-color 500ms; 102 + z-index: 1; 90 103 } 91 104 92 105 .controller__inner { ··· 171 184 172 185 .gradient-blur { 173 186 bottom: 0; 174 - height: 200%; 187 + height: 125%; 175 188 left: 0; 176 189 pointer-events: none; 177 190 position: absolute; 178 191 right: 0; 179 - z-index: 0; 192 + z-index: 2; 180 193 } 181 194 182 195 .gradient-blur > div { ··· 185 198 } 186 199 187 200 .gradient-blur > div:nth-of-type(1) { 188 - backdrop-filter: blur(0.5px); 201 + backdrop-filter: blur(1px); 189 202 mask: linear-gradient( 190 203 to bottom, 191 204 rgba(0, 0, 0, 0) 0%, 192 - rgba(0, 0, 0, 1) 12.5%, 193 - rgba(0, 0, 0, 1) 25%, 194 - rgba(0, 0, 0, 0) 37.5% 205 + rgba(0, 0, 0, 1) 4.166666665%, 206 + rgba(0, 0, 0, 1) 8.333333332%, 207 + rgba(0, 0, 0, 0) 12.499999999% 195 208 ); 196 209 z-index: 1; 197 210 } 198 211 199 212 .gradient-blur > div:nth-of-type(2) { 200 - backdrop-filter: blur(1px); 213 + backdrop-filter: blur(2px); 201 214 mask: linear-gradient( 202 215 to bottom, 203 - rgba(0, 0, 0, 0) 12.5%, 204 - rgba(0, 0, 0, 1) 25%, 205 - rgba(0, 0, 0, 1) 37.5%, 206 - rgba(0, 0, 0, 0) 50% 216 + rgba(0, 0, 0, 0) 4.166666665%, 217 + rgba(0, 0, 0, 1) 8.333333332%, 218 + rgba(0, 0, 0, 1) 12.499999999%, 219 + rgba(0, 0, 0, 0) 16.666666666% 207 220 ); 208 221 z-index: 2; 209 222 } 210 223 211 224 .gradient-blur > div:nth-of-type(3) { 212 - backdrop-filter: blur(2px); 225 + backdrop-filter: blur(4px); 213 226 mask: linear-gradient( 214 227 to bottom, 215 - rgba(0, 0, 0, 0) 25%, 216 - rgba(0, 0, 0, 1) 37.5%, 217 - rgba(0, 0, 0, 1) 50%, 218 - rgba(0, 0, 0, 0) 62.5% 228 + rgba(0, 0, 0, 0) 8.333333332%, 229 + rgba(0, 0, 0, 1) 12.499999999%, 230 + rgba(0, 0, 0, 1) 16.666666666%, 231 + rgba(0, 0, 0, 0) 20.833333333% 219 232 ); 220 233 z-index: 3; 221 234 } 222 235 223 236 .gradient-blur > div:nth-of-type(4) { 224 - backdrop-filter: blur(4px); 237 + backdrop-filter: blur(8px); 225 238 mask: linear-gradient( 226 239 to bottom, 227 - rgba(0, 0, 0, 0) 37.5%, 228 - rgba(0, 0, 0, 1) 50%, 229 - rgba(0, 0, 0, 1) 62.5%, 230 - rgba(0, 0, 0, 0) 75% 240 + rgba(0, 0, 0, 0) 12.499999999%, 241 + rgba(0, 0, 0, 1) 16.666666666%, 242 + rgba(0, 0, 0, 1) 20.833333333%, 243 + rgba(0, 0, 0, 0) 25% 231 244 ); 232 245 z-index: 4; 233 246 } 234 247 235 248 .gradient-blur > div:nth-of-type(5) { 236 - backdrop-filter: blur(8px); 249 + backdrop-filter: blur(16px); 237 250 mask: linear-gradient( 238 251 to bottom, 239 - rgba(0, 0, 0, 0) 50%, 240 - rgba(0, 0, 0, 1) 62.5%, 241 - rgba(0, 0, 0, 1) 75%, 242 - rgba(0, 0, 0, 0) 87.5% 252 + rgba(0, 0, 0, 0) 16.666666666%, 253 + rgba(0, 0, 0, 1) 20.833333333%, 254 + rgba(0, 0, 0, 1) 25%, 255 + rgba(0, 0, 0, 0) 100% 243 256 ); 244 257 z-index: 5; 245 258 } 246 259 247 260 .gradient-blur > div:nth-of-type(6) { 248 - backdrop-filter: blur(16px); 249 - mask: linear-gradient( 250 - to bottom, 251 - rgba(0, 0, 0, 0) 62.5%, 252 - rgba(0, 0, 0, 1) 75%, 253 - rgba(0, 0, 0, 1) 87.5%, 254 - rgba(0, 0, 0, 0) 100% 255 - ); 256 - z-index: 6; 257 - } 258 - 259 - .gradient-blur > div:nth-of-type(7) { 260 261 backdrop-filter: blur(32px); 261 262 mask: linear-gradient( 262 263 to bottom, 263 - rgba(0, 0, 0, 0) 75%, 264 - rgba(0, 0, 0, 1) 87.5%, 264 + rgba(0, 0, 0, 0) 20.833333333%, 265 + rgba(0, 0, 0, 1) 25%, 265 266 rgba(0, 0, 0, 1) 100% 266 267 ); 267 - z-index: 7; 268 + z-index: 6; 268 269 } 269 270 270 - .gradient-blur > div:nth-of-type(8) { 271 + .gradient-blur > div:nth-of-type(7) { 271 272 backdrop-filter: blur(64px); 272 - mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%); 273 - z-index: 8; 273 + mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%); 274 + z-index: 7; 274 275 } 275 276 </style> 276 277 ··· 316 317 const context = register(); 317 318 318 319 // Stored state 319 - const STORE_PREFIX = "@applets/constituents/blur/artwork-controller"; 320 + const STORE_PREFIX = `@applets/constituents/blur/artwork-controller/${context.groupId || "main"}`; 320 321 const STATE_KEY = `${STORE_PREFIX}/state`; 321 322 const stored = localStorage.getItem(STATE_KEY); 322 323 ··· 462 463 //////////////////////////////////////////// 463 464 // UI 464 465 //////////////////////////////////////////// 466 + const bg = document.body.querySelector<HTMLElement>(".controller__background"); 467 + const controller = document.body.querySelector<HTMLElement>(".controller__inner"); 465 468 const main = document.body.querySelector("main"); 466 - const controller = document.body.querySelector(".controller__inner"); 469 + const showcase = document.body.querySelector<HTMLElement>(".artwork"); 467 470 468 - if (!main || !controller) throw new Error("Missing DOM elements"); 471 + if (!bg || !controller || !main || !showcase) throw new Error("Missing DOM elements"); 469 472 470 473 const h = ( 471 474 tag: string, ··· 481 484 const art = artwork(); 482 485 483 486 // TODO: Remove existing art? 484 - if (art.length === 0) return; 487 + if (art.length === 0) { 488 + return; 489 + } 485 490 486 491 // Show artwork 487 492 const blob = new Blob([art[0].bytes], { type: art[0].mime }); ··· 489 494 490 495 // Remove existing artwork 491 496 // TODO: Fade in new artwork and then remove other 492 - const existingArtwork = document.querySelector(".artwork"); 493 - existingArtwork?.remove(); 497 + showcase.innerHTML = ""; 494 498 495 499 // Create img for new artwork 496 500 const img = h("img", { src: url, className: "artwork" }); ··· 500 504 const fac = new FastAverageColor(); 501 505 const color = fac.getColor(img as HTMLImageElement); 502 506 main.style.backgroundColor = color.rgba; 507 + bg.style.backgroundColor = color.rgba; 503 508 }; 504 509 505 - // TODO: Switch to dark/light based on color? 506 - // USE color.isDark OR color.isLight 507 - 508 510 // Insert new artwork 509 - main.appendChild(img); 511 + showcase.appendChild(img); 510 512 }); 511 513 512 514 ////////////////////////////////////////////