this repo has no description
Finally revisiting this CW thing
Respect reading:expand:spoilers and reading:expand:media but differently than Mastodon's logic
+134
-102
+52
-59
src/components/status.css
+52
-59
src/components/status.css
···
499
499
padding-bottom: 10px;
500
500
}
501
501
502
-
.status .content-container.has-spoiler .spoiler {
502
+
.status
503
+
.content-container.has-spoiler
504
+
:is(.spoiler-button, .spoiler-media-button):not([hidden]) {
503
505
margin: 4px 0;
504
506
font-size: 90%;
505
507
border: 1px dashed var(--button-bg-color);
506
508
display: flex;
507
-
gap: 8px;
509
+
gap: 4px;
508
510
align-items: center;
509
511
}
510
-
.status
511
-
.content-container.has-spoiler:not(.show-spoiler)
512
-
.spoiler
513
-
~ *:not(.media-container, .card, .media-figure-multiple),
514
-
.status
515
-
.content-container.has-spoiler:not(.show-spoiler)
516
-
.spoiler
517
-
~ .card
518
-
.meta-container,
519
-
.status
520
-
.content-container.has-spoiler:not(.show-spoiler)
521
-
.spoiler
522
-
~ :is(.media-container, .media-figure-multiple)
523
-
figcaption {
524
-
filter: blur(5px) invert(0.5);
525
-
image-rendering: crisp-edges;
526
-
image-rendering: pixelated;
527
-
pointer-events: none;
528
-
user-select: none;
529
-
contain: layout;
530
-
transform: scale(0.97);
531
-
transition: transform 0.1s ease-in-out;
512
+
.status .content-container.has-spoiler:not(.show-spoiler) .spoiler-button {
513
+
~ *:not(
514
+
.media-container,
515
+
.card,
516
+
.media-figure-multiple,
517
+
.spoiler-media-button
518
+
),
519
+
~ .card .meta-container,
520
+
~ :is(.media-container, .media-figure-multiple) figcaption {
521
+
filter: blur(5px) invert(0.5);
522
+
image-rendering: crisp-edges;
523
+
image-rendering: pixelated;
524
+
pointer-events: none;
525
+
user-select: none;
526
+
contain: layout;
527
+
transform: scale(0.97);
528
+
transition: transform 0.1s ease-in-out;
529
+
}
530
+
531
+
/* ~ :is(.media-container, .media-figure-multiple) .media > *, */
532
+
~ .card > img {
533
+
filter: blur(32px);
534
+
image-rendering: crisp-edges;
535
+
image-rendering: pixelated;
536
+
animation: none !important;
537
+
}
538
+
}
539
+
.status .content-container.has-spoiler:not(.show-media) .spoiler-media-button {
540
+
~ :is(.media-container, .media-figure-multiple) .media > * {
541
+
filter: blur(32px);
542
+
image-rendering: crisp-edges;
543
+
image-rendering: pixelated;
544
+
animation: none !important;
545
+
}
532
546
}
533
547
.status
534
-
.content-container.has-spoiler:not(.show-spoiler)
535
-
.spoiler
536
-
~ :is(.media-container, .media-figure-multiple)
537
-
.media
538
-
> *,
539
-
.status
540
-
.content-container.has-spoiler:not(.show-spoiler)
541
-
.spoiler
542
-
~ .card
543
-
> img {
544
-
filter: blur(32px);
545
-
image-rendering: crisp-edges;
546
-
image-rendering: pixelated;
547
-
animation: none !important;
548
-
}
549
-
.status .content-container.show-spoiler .spoiler {
548
+
.content-container.show-spoiler
549
+
:is(.spoiler-button, .spoiler-media-button).spoiling {
550
550
border-style: dotted;
551
551
}
552
-
/* .status
553
-
.content-container.show-spoiler
554
-
.spoiler
555
-
~ *:not(.media-container, .card),
556
-
.status .content-container.show-spoiler .spoiler ~ .card .meta-container {
557
-
filter: none !important;
558
-
transform: none;
559
-
pointer-events: auto;
560
-
user-select: auto;
561
-
text-rendering: auto;
562
-
image-rendering: auto;
552
+
553
+
.status .content-container .spoiler-divider {
554
+
display: flex;
555
+
align-items: center;
556
+
gap: 4px;
557
+
color: var(--text-insignificant-color);
558
+
text-transform: uppercase;
559
+
font-size: 0.8em;
560
+
margin-top: 0.25em;
561
+
margin-bottom: 1em;
562
+
padding-block: 0.25em;
563
+
border-bottom: 1px dashed var(--divider-color);
563
564
}
564
-
.status .content-container.show-spoiler .spoiler ~ .media-container .media > *,
565
-
.status .content-container.show-spoiler .spoiler ~ .card > img {
566
-
filter: none;
567
-
image-rendering: auto;
568
-
} */
569
-
/* .status .content a:not(.mention):not(:has(span)) {
570
-
color: inherit;
571
-
} */
572
565
573
566
.status .content-comment-hint {
574
567
margin-top: 0.25em;
+80
-42
src/components/status.jsx
+80
-42
src/components/status.jsx
···
275
275
const prefs = store.account.get('preferences') || {};
276
276
return !!prefs['reading:expand:spoilers'];
277
277
}, []);
278
+
const readingExpandMedia = useMemo(() => {
279
+
// default | show_all | hide_all
280
+
// Ignore hide_all because it means hide *ALL* media including non-sensitive ones
281
+
const prefs = store.account.get('preferences') || {};
282
+
return prefs['reading:expand:media'] || 'default';
283
+
}, []);
284
+
// FOR TESTING:
285
+
// const readingExpandSpoilers = true;
286
+
// const readingExpandMedia = 'show_all';
278
287
const showSpoiler =
279
-
previewMode || readingExpandSpoilers || !!snapStates.spoilers[id] || false;
288
+
previewMode || readingExpandSpoilers || !!snapStates.spoilers[id];
289
+
const showSpoilerMedia =
290
+
previewMode ||
291
+
readingExpandMedia === 'show_all' ||
292
+
!!snapStates.spoilersMedia[id];
280
293
281
294
if (reblog) {
282
295
// If has statusID, means useItemID (cached in states)
···
1078
1091
);
1079
1092
if (activeStatus) {
1080
1093
const spoilerButton = activeStatus.querySelector(
1081
-
'button.spoiler:not(.spoiling)',
1094
+
'.spoiler-button:not(.spoiling)',
1082
1095
);
1083
1096
if (spoilerButton) {
1084
1097
e.stopPropagation();
1085
1098
spoilerButton.click();
1099
+
} else {
1100
+
const spoilerMediaButton = activeStatus.querySelector(
1101
+
'.spoiler-media-button:not(.spoiling)',
1102
+
);
1103
+
if (spoilerMediaButton) {
1104
+
e.stopPropagation();
1105
+
spoilerMediaButton.click();
1106
+
}
1086
1107
}
1087
1108
}
1088
1109
});
···
1487
1508
<div
1488
1509
class={`content-container ${
1489
1510
spoilerText || sensitive ? 'has-spoiler' : ''
1490
-
} ${showSpoiler ? 'show-spoiler' : ''}`}
1511
+
} ${showSpoiler ? 'show-spoiler' : ''} ${
1512
+
showSpoilerMedia ? 'show-media' : ''
1513
+
}`}
1491
1514
data-content-text-weight={contentTextWeight ? textWeight() : null}
1492
1515
style={
1493
1516
(isSizeLarge || contentTextWeight) && {
···
1508
1531
<EmojiText text={spoilerText} emojis={emojis} />
1509
1532
</p>
1510
1533
</div>
1511
-
<button
1512
-
class={`light spoiler ${showSpoiler ? 'spoiling' : ''}`}
1513
-
type="button"
1514
-
disabled={readingExpandSpoilers}
1515
-
onClick={(e) => {
1516
-
e.preventDefault();
1517
-
e.stopPropagation();
1518
-
if (showSpoiler) {
1519
-
delete states.spoilers[id];
1520
-
} else {
1521
-
states.spoilers[id] = true;
1522
-
}
1523
-
}}
1524
-
>
1525
-
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
1526
-
{readingExpandSpoilers
1527
-
? 'Content warning'
1528
-
: showSpoiler
1529
-
? 'Show less'
1530
-
: 'Show more'}
1531
-
</button>
1534
+
{readingExpandSpoilers || previewMode ? (
1535
+
<div class="spoiler-divider">
1536
+
<Icon icon="eye-open" /> Content warning
1537
+
</div>
1538
+
) : (
1539
+
<button
1540
+
class={`light spoiler-button ${
1541
+
showSpoiler ? 'spoiling' : ''
1542
+
}`}
1543
+
type="button"
1544
+
onClick={(e) => {
1545
+
e.preventDefault();
1546
+
e.stopPropagation();
1547
+
if (showSpoiler) {
1548
+
delete states.spoilers[id];
1549
+
if (!readingExpandSpoilers) {
1550
+
delete states.spoilersMedia[id];
1551
+
}
1552
+
} else {
1553
+
states.spoilers[id] = true;
1554
+
if (!readingExpandSpoilers) {
1555
+
states.spoilersMedia[id] = true;
1556
+
}
1557
+
}
1558
+
}}
1559
+
>
1560
+
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
1561
+
{showSpoiler ? 'Show less' : 'Show content'}
1562
+
</button>
1563
+
)}
1532
1564
</>
1533
1565
)}
1534
1566
{!!content && (
···
1632
1664
text={getPostText(status)}
1633
1665
/>
1634
1666
)}
1635
-
{!spoilerText && sensitive && !!mediaAttachments.length && (
1636
-
<button
1637
-
class={`plain spoiler ${showSpoiler ? 'spoiling' : ''}`}
1638
-
type="button"
1639
-
onClick={(e) => {
1640
-
e.preventDefault();
1641
-
e.stopPropagation();
1642
-
if (showSpoiler) {
1643
-
delete states.spoilers[id];
1644
-
} else {
1645
-
states.spoilers[id] = true;
1646
-
}
1647
-
}}
1648
-
>
1649
-
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
1650
-
content
1651
-
</button>
1652
-
)}
1667
+
{!previewMode &&
1668
+
sensitive &&
1669
+
!!mediaAttachments.length &&
1670
+
readingExpandMedia !== 'show_all' && (
1671
+
<button
1672
+
class={`plain spoiler-media-button ${
1673
+
showSpoilerMedia ? 'spoiling' : ''
1674
+
}`}
1675
+
type="button"
1676
+
hidden={!readingExpandSpoilers && !!spoilerText}
1677
+
onClick={(e) => {
1678
+
e.preventDefault();
1679
+
e.stopPropagation();
1680
+
if (showSpoilerMedia) {
1681
+
delete states.spoilersMedia[id];
1682
+
} else {
1683
+
states.spoilersMedia[id] = true;
1684
+
}
1685
+
}}
1686
+
>
1687
+
<Icon icon={showSpoilerMedia ? 'eye-open' : 'eye-close'} />{' '}
1688
+
{showSpoilerMedia ? 'Show less' : 'Show media'}
1689
+
</button>
1690
+
)}
1653
1691
{!!mediaAttachments.length && (
1654
1692
<MultipleMediaFigure
1655
1693
lang={language}
+1
-1
src/index.css
+1
-1
src/index.css