this repo has no description
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
+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
+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
+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
+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