mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 12:18:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

Various adjustments for spoilers and media

Browse source 
- No more blur effects. Performance is more important
- Add background color for all media
This commit is contained in:
Lim Chee Aun 2023-12-26 17:06:52 +08:00
parent 72c5411347
commit b89463d412
4 changed files with 100 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/media-post.css
View file

@ -4,9 +4,10 @@
animation: appear-smooth 1s ease-out;
&:is(.filtered, .has-spoiler:not(.show-media)) :is(img, video) {
filter: blur(32px);
/* filter: blur(32px);
image-rendering: crisp-edges;
image-rendering: pixelated;
image-rendering: pixelated; */
opacity: 0;
animation: none !important;
}
@ -70,6 +71,7 @@
&:not(.media-audio) {
background-color: var(--average-color, var(--media-bg-color));
background-clip: padding-box;
}
@media (hover: hover) {
@ -109,4 +111,12 @@
animation-duration: var(--anim-duration, 5s);
}
}
&.has-spoiler .media:not(.media-audio) {
background-image: radial-gradient(
circle at 50% 50%,
var(--average-color, var(--bg-faded-color)),
var(--bg-color) 20em
);
}
}

13
src/components/media.jsx
View file

@ -96,7 +96,7 @@ function Media({
const videoRef = useRef();
let focalBackgroundPosition;
let focalPosition;
if (focus) {
// Convert focal point to CSS background position
// Formula from jquery-focuspoint
@ -105,7 +105,7 @@ function Media({
// x = 1, y = -1 => 100% 100%
const x = ((focus.x + 1) / 2) * 100;
const y = ((1 - focus.y) / 2) * 100;
focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
focalPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
}
const mediaRef = useRef();
@ -290,10 +290,11 @@ function Media({
data-orientation={orientation}
loading="lazy"
style={{
backgroundColor:
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
backgroundPosition: focalBackgroundPosition || 'center',
// backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
// backgroundPosition: focalBackgroundPosition || 'center',
// Duration based on width or height in pixels
objectPosition: focalPosition || 'center',
// 100px per second (rough estimate)
// Clamp between 5s and 120s
'--anim-duration': `${Math.min(
@ -302,7 +303,7 @@ function Media({
)}s`,
}}
onLoad={(e) => {
e.target.closest('.media-image').style.backgroundImage = '';
// e.target.closest('.media-image').style.backgroundImage = '';
e.target.dataset.loaded = true;
}}
onError={(e) => {

89
src/components/status.css
View file

@ -516,32 +516,84 @@
.media-figure-multiple,
.spoiler-media-button
),
~ .card .meta-container,
~ :is(.media-container, .media-figure-multiple) figcaption {
filter: blur(5px) invert(0.5);
~ .card .meta-container {
/* filter: blur(5px) invert(0.5);
image-rendering: crisp-edges;
image-rendering: pixelated;
image-rendering: pixelated; */
opacity: 0.2;
text-decoration-thickness: 1.5em;
text-decoration-line: line-through;
text-rendering: optimizeSpeed;
pointer-events: none;
user-select: none;
contain: layout;
transform: scale(0.97);
transition: transform 0.1s ease-in-out;
/* contain: layout; */
/* transform: scale(0.97);
transition: transform 0.1s ease-in-out; */
* {
text-decoration-thickness: 1.5em;
text-decoration-line: line-through;
text-rendering: optimizeSpeed;
}
img {
filter: invert(0.5);
background-color: black;
}
}
/* ~ :is(.media-container, .media-figure-multiple) .media > *, */
~ .card > img {
filter: blur(32px);
~ .card .card-image > img {
display: none;
/* filter: blur(32px);
opacity: 0;
image-rendering: crisp-edges;
image-rendering: pixelated;
animation: none !important;
animation: none !important; */
}
}
.status .content-container.has-spoiler:not(.show-media) .spoiler-media-button {
~ :is(.media-container, .media-figure-multiple) .media > * {
filter: blur(32px);
~ :is(.media-container, .media-figure-multiple) figcaption {
/* filter: blur(5px) invert(0.5);
image-rendering: crisp-edges;
image-rendering: pixelated;
animation: none !important;
image-rendering: pixelated; */
opacity: 0.2;
color: inherit;
text-decoration-thickness: 1.5em;
text-decoration-line: line-through;
text-rendering: optimizeSpeed;
pointer-events: none;
user-select: none;
/* contain: layout; */
/* transform: scale(0.97);
transition: transform 0.1s ease-in-out; */
* {
text-decoration-thickness: 1.5em;
text-decoration-line: line-through;
text-rendering: optimizeSpeed;
}
img {
opacity: 0;
}
}
~ :is(.media-container, .media-figure-multiple) .media {
background-image: radial-gradient(
circle at 50% 50%,
var(--average-color, var(--bg-faded-color)),
var(--bg-color) 20em
);
> *:not(.media-play, .alt-badge) {
/* display: none; */
/* filter: blur(32px); */
opacity: 0;
image-rendering: crisp-edges;
image-rendering: pixelated;
animation: none !important;
}
}
}
.status
@ -745,7 +797,7 @@
&:not(.media-figure-multiple .media-container) {
margin-bottom: -16px;
&.media-eq1 {
&.media-eq1:not(:has(figure)) {
text-align: center;
background-color: var(--img-bg-color);
}
@ -804,6 +856,11 @@
min-height: 80px;
border: var(--media-border-width) solid var(--outline-color);
vertical-align: top;
&:not(.media-audio) {
background-color: var(--average-color, var(--bg-faded-color));
background-clip: padding-box;
}
}
.status .media-container:not(.media-eq1) .media {
aspect-ratio: auto !important;
@ -1270,6 +1327,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
width: 35%;
position: relative;
border-inline-end: 1px solid var(--outline-color);
background-color: var(--average-color, var(--bg-faded-color));
background-clip: padding-box;
}
.card .card-image img {
position: absolute;

8
src/components/status.jsx
View file

@ -8,7 +8,7 @@ import {
MenuHeader,
MenuItem,
} from '@szhsin/react-menu';
import { decodeBlurHash } from 'fast-blurhash';
import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
import pThrottle from 'p-throttle';
import { memo } from 'preact/compat';
import {
@ -1994,6 +1994,8 @@ function Card({ card, selfReferential, instance }) {
.replace(/^www\./, '')
.replace(/\/$/, '');
let blurhashImage;
const rgbAverageColor =
image && blurhash ? getBlurHashAverageColor(blurhash) : null;
if (!image) {
const w = 44;
const h = 44;
@ -2015,6 +2017,10 @@ function Card({ card, selfReferential, instance }) {
class={`card link ${blurhashImage ? '' : size}`}
lang={language}
dir="auto"
style={{
'--average-color':
rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
}}
>
<div class="card-image">
<img