this repo has no description
0
fork

Configure Feed

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

Various adjustments for spoilers and media

- No more blur effects. Performance is more important
- Add background color for all media

+100 -24
+12 -2
src/components/media-post.css
··· 4 4 animation: appear-smooth 1s ease-out; 5 5 6 6 &:is(.filtered, .has-spoiler:not(.show-media)) :is(img, video) { 7 - filter: blur(32px); 7 + /* filter: blur(32px); 8 8 image-rendering: crisp-edges; 9 - image-rendering: pixelated; 9 + image-rendering: pixelated; */ 10 + opacity: 0; 10 11 animation: none !important; 11 12 } 12 13 ··· 70 71 71 72 &:not(.media-audio) { 72 73 background-color: var(--average-color, var(--media-bg-color)); 74 + background-clip: padding-box; 73 75 } 74 76 75 77 @media (hover: hover) { ··· 108 110 animation: position-object 5s ease-in-out 0.1s 5; 109 111 animation-duration: var(--anim-duration, 5s); 110 112 } 113 + } 114 + 115 + &.has-spoiler .media:not(.media-audio) { 116 + background-image: radial-gradient( 117 + circle at 50% 50%, 118 + var(--average-color, var(--bg-faded-color)), 119 + var(--bg-color) 20em 120 + ); 111 121 } 112 122 }
+7 -6
src/components/media.jsx
··· 96 96 97 97 const videoRef = useRef(); 98 98 99 - let focalBackgroundPosition; 99 + let focalPosition; 100 100 if (focus) { 101 101 // Convert focal point to CSS background position 102 102 // Formula from jquery-focuspoint ··· 105 105 // x = 1, y = -1 => 100% 100% 106 106 const x = ((focus.x + 1) / 2) * 100; 107 107 const y = ((1 - focus.y) / 2) * 100; 108 - focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`; 108 + focalPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`; 109 109 } 110 110 111 111 const mediaRef = useRef(); ··· 290 290 data-orientation={orientation} 291 291 loading="lazy" 292 292 style={{ 293 - backgroundColor: 294 - rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, 295 - backgroundPosition: focalBackgroundPosition || 'center', 293 + // backgroundColor: 294 + // rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, 295 + // backgroundPosition: focalBackgroundPosition || 'center', 296 296 // Duration based on width or height in pixels 297 + objectPosition: focalPosition || 'center', 297 298 // 100px per second (rough estimate) 298 299 // Clamp between 5s and 120s 299 300 '--anim-duration': `${Math.min( ··· 302 303 )}s`, 303 304 }} 304 305 onLoad={(e) => { 305 - e.target.closest('.media-image').style.backgroundImage = ''; 306 + // e.target.closest('.media-image').style.backgroundImage = ''; 306 307 e.target.dataset.loaded = true; 307 308 }} 308 309 onError={(e) => {
+74 -15
src/components/status.css
··· 516 516 .media-figure-multiple, 517 517 .spoiler-media-button 518 518 ), 519 - ~ .card .meta-container, 520 - ~ :is(.media-container, .media-figure-multiple) figcaption { 521 - filter: blur(5px) invert(0.5); 519 + ~ .card .meta-container { 520 + /* filter: blur(5px) invert(0.5); 522 521 image-rendering: crisp-edges; 523 - image-rendering: pixelated; 522 + image-rendering: pixelated; */ 523 + opacity: 0.2; 524 + text-decoration-thickness: 1.5em; 525 + text-decoration-line: line-through; 526 + text-rendering: optimizeSpeed; 524 527 pointer-events: none; 525 528 user-select: none; 526 - contain: layout; 527 - transform: scale(0.97); 528 - transition: transform 0.1s ease-in-out; 529 + /* contain: layout; */ 530 + /* transform: scale(0.97); 531 + transition: transform 0.1s ease-in-out; */ 532 + 533 + * { 534 + text-decoration-thickness: 1.5em; 535 + text-decoration-line: line-through; 536 + text-rendering: optimizeSpeed; 537 + } 538 + 539 + img { 540 + filter: invert(0.5); 541 + background-color: black; 542 + } 529 543 } 530 544 531 545 /* ~ :is(.media-container, .media-figure-multiple) .media > *, */ 532 - ~ .card > img { 533 - filter: blur(32px); 546 + ~ .card .card-image > img { 547 + display: none; 548 + /* filter: blur(32px); 549 + opacity: 0; 534 550 image-rendering: crisp-edges; 535 551 image-rendering: pixelated; 536 - animation: none !important; 552 + animation: none !important; */ 537 553 } 538 554 } 539 555 .status .content-container.has-spoiler:not(.show-media) .spoiler-media-button { 540 - ~ :is(.media-container, .media-figure-multiple) .media > * { 541 - filter: blur(32px); 556 + ~ :is(.media-container, .media-figure-multiple) figcaption { 557 + /* filter: blur(5px) invert(0.5); 542 558 image-rendering: crisp-edges; 543 - image-rendering: pixelated; 544 - animation: none !important; 559 + image-rendering: pixelated; */ 560 + opacity: 0.2; 561 + color: inherit; 562 + text-decoration-thickness: 1.5em; 563 + text-decoration-line: line-through; 564 + text-rendering: optimizeSpeed; 565 + pointer-events: none; 566 + user-select: none; 567 + /* contain: layout; */ 568 + /* transform: scale(0.97); 569 + transition: transform 0.1s ease-in-out; */ 570 + 571 + * { 572 + text-decoration-thickness: 1.5em; 573 + text-decoration-line: line-through; 574 + text-rendering: optimizeSpeed; 575 + } 576 + 577 + img { 578 + opacity: 0; 579 + } 580 + } 581 + 582 + ~ :is(.media-container, .media-figure-multiple) .media { 583 + background-image: radial-gradient( 584 + circle at 50% 50%, 585 + var(--average-color, var(--bg-faded-color)), 586 + var(--bg-color) 20em 587 + ); 588 + 589 + > *:not(.media-play, .alt-badge) { 590 + /* display: none; */ 591 + /* filter: blur(32px); */ 592 + opacity: 0; 593 + image-rendering: crisp-edges; 594 + image-rendering: pixelated; 595 + animation: none !important; 596 + } 545 597 } 546 598 } 547 599 .status ··· 745 797 &:not(.media-figure-multiple .media-container) { 746 798 margin-bottom: -16px; 747 799 748 - &.media-eq1 { 800 + &.media-eq1:not(:has(figure)) { 749 801 text-align: center; 750 802 background-color: var(--img-bg-color); 751 803 } ··· 804 856 min-height: 80px; 805 857 border: var(--media-border-width) solid var(--outline-color); 806 858 vertical-align: top; 859 + 860 + &:not(.media-audio) { 861 + background-color: var(--average-color, var(--bg-faded-color)); 862 + background-clip: padding-box; 863 + } 807 864 } 808 865 .status .media-container:not(.media-eq1) .media { 809 866 aspect-ratio: auto !important; ··· 1270 1327 width: 35%; 1271 1328 position: relative; 1272 1329 border-inline-end: 1px solid var(--outline-color); 1330 + background-color: var(--average-color, var(--bg-faded-color)); 1331 + background-clip: padding-box; 1273 1332 } 1274 1333 .card .card-image img { 1275 1334 position: absolute;
+7 -1
src/components/status.jsx
··· 8 8 MenuHeader, 9 9 MenuItem, 10 10 } from '@szhsin/react-menu'; 11 - import { decodeBlurHash } from 'fast-blurhash'; 11 + import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash'; 12 12 import pThrottle from 'p-throttle'; 13 13 import { memo } from 'preact/compat'; 14 14 import { ··· 1994 1994 .replace(/^www\./, '') 1995 1995 .replace(/\/$/, ''); 1996 1996 let blurhashImage; 1997 + const rgbAverageColor = 1998 + image && blurhash ? getBlurHashAverageColor(blurhash) : null; 1997 1999 if (!image) { 1998 2000 const w = 44; 1999 2001 const h = 44; ··· 2015 2017 class={`card link ${blurhashImage ? '' : size}`} 2016 2018 lang={language} 2017 2019 dir="auto" 2020 + style={{ 2021 + '--average-color': 2022 + rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, 2023 + }} 2018 2024 > 2019 2025 <div class="card-image"> 2020 2026 <img