pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

optionally blur NSFW content in lieu of placeholder image #2224

Open
kaniini wants to merge 4 commits from gitlab-mr-iid-957 into develop
pull from: gitlab-mr-iid-957
merge into: pleroma:develop
Conversation 28 Commits 4 Files changed 7 +59 -4
kaniini commented 2019-09-27 00:27:02 +00:00
Member
Copy link

This MR adds a new configuration setting nsfwUseBlur which uses a client-composited blur of the image or first video frame.

In the case of images, it also adds placeholder text that explains that the content is sensitive. For videos, the play icon is used.

In the event that attachment post-processing is available, such as when running on Mastodon BE or MFC Pleroma, the post-processed image will be used as the basis for the blur composition instead of the raw image or first video frame.

Screenshot_20190926_185134

Screenshot_20190926_191257

This MR adds a new configuration setting `nsfwUseBlur` which uses a client-composited blur of the image or first video frame. In the case of images, it also adds placeholder text that explains that the content is sensitive. For videos, the play icon is used. In the event that attachment post-processing is available, such as when running on Mastodon BE or MFC Pleroma, the post-processed image will be used as the basis for the blur composition instead of the raw image or first video frame. ![Screenshot_20190926_185134](/attachments/c95bcc85-b823-4623-af05-735234fec6a0) ![Screenshot_20190926_191257](/attachments/ae716fb6-d3b8-47be-87a9-8ca1ce7f7ae9)
Screenshot_20190926_191257.png
205 KiB
Screenshot_20190926_185134.png
286 KiB
hj commented 2019-09-27 05:04:12 +00:00
Member
Copy link

why rgba if it's fully opaque?

why `rgba` if it's fully opaque?
hj commented 2019-09-27 05:04:53 +00:00
Member
Copy link

instead of centering it with calc i'd rather center it using flex

instead of centering it with calc i'd rather center it using flex
hj commented 2019-09-27 05:06:44 +00:00
Member
Copy link

this really should be user-configurable also since filter: blur() can

a) cause performance issues
b) not work at all

this really should be user-configurable also since `filter: blur()` can a) cause performance issues b) not work at all
hj commented 2019-09-27 05:09:58 +00:00
Member
Copy link

there should be some logic to handle large_thumb_url, since if it's the same as url or falsy, the entire blur filter nullifies the "preload nsfw images" option since there would be no way to disable preloading, essentially.

there should be some logic to handle `large_thumb_url`, since if it's the same as `url` or falsy, the entire blur filter nullifies the "preload nsfw images" option since there would be no way to disable preloading, essentially.
lambadalambda commented 2020-06-18 20:04:59 +00:00
Owner
Copy link

Somewhat related to the blurhash thing that we get from mastodon.

Somewhat related to the blurhash thing that we get from mastodon.
shpuld commented 2020-06-19 10:12:31 +00:00
Member
Copy link

so can we do this without css blur? I wouldn't mind replacing nsfw image with a more neutral blurred version (not all sensitive stuff is 18+ etc), while keeping nsfw image as an option since it can create personality for the instance

so can we do this without css blur? I wouldn't mind replacing nsfw image with a more neutral blurred version (not all sensitive stuff is 18+ etc), while keeping nsfw image as an option since it can create personality for the instance
lambadalambda commented 2020-06-19 10:19:34 +00:00
Owner
Copy link

yeah, see https://blurha.sh/. Mastodon computes those and we could just pass them on, and have an option to generate them ourselves.

yeah, see https://blurha.sh/. Mastodon computes those and we could just pass them on, and have an option to generate them ourselves.
shpuld commented 2020-06-19 10:21:58 +00:00
Member
Copy link

nice, finnish tech

nice, finnish tech
hj commented 2020-06-19 12:02:21 +00:00
Member
Copy link

even if we use blurred versions we should still add a black bar or placeholder image on top of it since people also use nsfw to hide spoilers, while even blurred image or partially obscured non-blurred one could still give away what content is, spoiling the... whatever it's a spoiler for.

even if we use blurred versions we should still add a black bar or placeholder image on top of it since people also use nsfw to hide spoilers, while even blurred image or partially obscured non-blurred one could still give away what content is, spoiling the... whatever it's a spoiler for.
shpuld commented 2020-06-19 12:06:41 +00:00
Member
Copy link

if it's a blur hash then you can't really tell any of the content, but seeing colors could ruin some jokes (everyone would recognize the blurred version of tenshi eating a corndog for example) which I don't think is big enough of a reason to block it, maybe a 50% opacity or something could be enough to hide the colors of the blur.

if it's a blur hash then you can't really tell any of the content, but seeing colors could ruin some jokes (everyone would recognize the blurred version of tenshi eating a corndog for example) which I don't think is big enough of a reason to block it, maybe a 50% opacity or something could be enough to hide the colors of the blur.
hj commented 2020-06-19 12:13:59 +00:00
Member
Copy link

i mean, it's not big of an improvement for most cases and it kinda ruins one of the cases

i mean, it's not big of an improvement for most cases and it kinda ruins one of the cases
shpuld commented 2020-06-19 12:15:50 +00:00
Member
Copy link

it's an improvement over "18+" which is not accurate very often, and the alternative is an altered image or just text like "content hidden". I like how the blur looks in general

it's an improvement over "18+" which is not accurate very often, and the alternative is an altered image or just text like "content hidden". I like how the blur looks in general
hj commented 2020-06-19 12:30:59 +00:00
Member
Copy link

idk we can always change the image to be more neutral and there's an issue to allow custom image or just text

idk we can always change the image to be more neutral and there's an issue to allow custom image or just text
shpuld commented 2020-06-19 12:50:00 +00:00
Member
Copy link

which looks pretty boring, the major upside would be how much slicker it looks. there's also the benefit of being able to differentiate tagged images from reach other using the thumbnail, for example you might see a post with no description get repeated on your timeline, you don't know which post it is or if you've seen it already if all hiders look identical.

which looks pretty boring, the major upside would be how much slicker it looks. there's also the benefit of being able to differentiate tagged images from reach other using the thumbnail, for example you might see a post with no description get repeated on your timeline, you don't know which post it is or if you've seen it already if all hiders look identical.
hj commented 2020-06-19 13:31:07 +00:00
Member
Copy link

that's why i have filenames enabled (says he as he posts images like 14123aefe7668fease76544123.jpg from hydrus)

don't know about slick or boring tho, i'd say custom nsfw images some instances do look less boring but that's just stylistic preference.

something like this
image

would be a good compromise.

ability to manipulate how image is CW'd (i.e. nsfw, very nsfw, spoiler, etc) would be even better

that's why i have filenames enabled *(says he as he posts images like 14123aefe7668fease76544123.jpg from hydrus)* don't know about slick or boring tho, i'd say custom nsfw images some instances do look less boring but that's just stylistic preference. something like this ![image](/attachments/404c7c37-9860-48c6-b98b-371deac1b54e) would be a good compromise. ability to manipulate how image is CW'd (i.e. nsfw, very nsfw, spoiler, etc) would be even better
image.png
66 KiB
hj commented 2020-06-19 13:36:54 +00:00
Member
Copy link

now that i think of it it would allow instances to do something like this too
image

now that i think of it it would allow instances to do something like this too ![image](/attachments/1adc4eb3-efe7-49e4-8a8c-e725bdf45978)
image.png
146 KiB
lambadalambda commented 2020-06-20 10:25:13 +00:00
Owner
Copy link

The combined version seems much too involved. The new game one is cute, but the other one nearly looks like a bug.

The combined version seems much too involved. The new game one is cute, but the other one nearly looks like a bug.
hj commented 2020-06-20 13:22:20 +00:00
Member
Copy link

That's sorta how steam does spoilers.
image

That's sorta how steam does spoilers. ![image](/attachments/9f7de673-f527-463c-8473-e72c138c8526)
image.png
43 KiB
shpuld commented 2020-06-20 13:26:26 +00:00
Member
Copy link

looks pretty bad imo, blurring is a more elegant way imo. if we want to draw something extra on top of it, do it with transparencies instead of a big block. maybe even allow admins to set the NSFW image that gets drawn on top of blur which can use the alpha channel in clever ways

looks pretty bad imo, blurring is a more elegant way imo. if we want to draw something extra on top of it, do it with transparencies instead of a big block. maybe even allow admins to set the NSFW image that gets drawn on top of blur which can use the alpha channel in clever ways
hj commented 2020-06-20 13:42:27 +00:00
Member
Copy link

problem with blur is that it doesn't work well with spoilers. As you mentioned before anyone would figure it out if it's tenshi eating a corndog even at highest blur setting.
imageimageimageimage

problem with blur is that it doesn't work well with spoilers. As you mentioned before anyone would figure it out if it's tenshi eating a corndog even at highest blur setting. ![image](/attachments/4cc321cc-167a-4782-abd4-d36c7cb4485a)![image](/attachments/c3d5de07-9ce2-4421-b463-82fb735f777b)![image](/attachments/21600fa5-a3b5-4357-a23c-f10a39a0e618)![image](/attachments/2f8ff2d2-0a72-4677-9735-61d762e99e8b)
image.png
154 KiB
image.png
160 KiB
image.png
481 KiB
image.png
586 KiB
hj commented 2020-06-20 13:42:51 +00:00
Member
Copy link

I really feel like only-blur is "form over function" solution.

I really feel like only-blur is "form over function" solution.
shpuld commented 2020-06-20 13:43:20 +00:00
Member
Copy link

that's very different to what blurhash is doing, which blurs it much much much more

that's very different to what blurhash is doing, which blurs it much much much more
shpuld commented 2020-06-20 13:51:18 +00:00
Member
Copy link

also no one is saying only blur, you can still have some stuff over it, text or even an image or some semi transparent background colored block with text over it. the form of the blur does serve a function, but it'd be silly to hurt the form by blocking most of it (which could still be an admin decision)

also no one is saying only blur, you can still have some stuff over it, text or even an image or some semi transparent background colored block with text over it. the form of the blur does serve a function, but it'd be silly to hurt the form by blocking most of it (which could still be an admin decision)
hj commented 2020-06-20 13:54:09 +00:00
Member
Copy link

Ok, blurhash is more or less good as long as you don't go into high numbers. Questions are:

  1. are we gonna implement blurhash on clientside?
  2. if blurhash is serverside how to deal if it's disabled (because i don't want any image processing on server side)
  3. if we blur using css how to handle if blurring isn't supported by browser or we simply don't care about that?
Ok, blurhash is more or less good as long as you don't go into high numbers. Questions are: 1) are we gonna implement blurhash on clientside? 2) if blurhash is serverside how to deal if it's disabled (because i don't want any image processing on server side) 3) if we blur using css how to handle if blurring isn't supported by browser or we simply don't care about that?
shpuld commented 2020-06-20 14:05:46 +00:00
Member
Copy link
  1. if we do blurhash, decoding has to be done client-side
  2. encoding has to be done serverside, don't think you're gonna be able to avoid any image processing forever without a custom fork
  3. heavy blur in css sounds expensive, and requires the image to load first while blur hash data is only a handful of bytes that can be sent with the media object. I don't know if I'd support it at all

in any case it requires more experimentation to properly weight the benefits and drawbacks, like if the decoding is expensive then I think some alternative approach is necessary. maybe benchmarking mastodon's use of them would help

1. if we do blurhash, decoding has to be done client-side 2. encoding has to be done serverside, don't think you're gonna be able to avoid any image processing forever without a custom fork 3. heavy blur in css sounds expensive, and requires the image to load first while blur hash data is only a handful of bytes that can be sent with the media object. I don't know if I'd support it at all in any case it requires more experimentation to properly weight the benefits and drawbacks, like if the decoding is expensive then I think some alternative approach is necessary. maybe benchmarking mastodon's use of them would help
shpuld commented 2020-06-20 14:27:10 +00:00
Member
Copy link

to clarify a bit, a fallback is necessary either way I think, since the hashes are federated, not created for all incoming images

to clarify a bit, a fallback is necessary either way I think, since the hashes are federated, not created for all incoming images
hj commented 2020-06-20 15:06:19 +00:00
Member
Copy link

i was talking about encoding, blurha.sh seem to do blurhash on clientside pretty well and we already use canvas so we could do that clientside as well instead of css blur

i would really want to avoid forking pleroma-be over minor and trivial thing as lack of "don't do any image processing on server" option

i was talking about encoding, blurha.sh seem to do blurhash on clientside pretty well and we already use canvas so we could do that clientside as well instead of css blur i would really want to avoid forking pleroma-be over minor and trivial thing as lack of "don't do any image processing on server" option
lambadalambda commented 2020-06-21 11:33:05 +00:00
Owner
Copy link

We are already doing some small, optional image processing on the backend with the exif stripping, and soon with thumbnail generation. Having another option for blurhash generation would be possible. Either way, we can expose the existing blurhashes we have from other servers soon so people can start experimenting with frontend looks.

We are already doing some small, optional image processing on the backend with the exif stripping, and soon with thumbnail generation. Having another option for blurhash generation would be possible. Either way, we can expose the existing blurhashes we have from other servers soon so people can start experimenting with frontend looks.
This pull request has changes conflicting with the target branch.
  • docs/CONFIGURATION.md
  • public/static/config.json
  • src/boot/after_store.js
  • src/components/attachment/attachment.js
  • src/components/attachment/attachment.vue
  • src/i18n/en.json
  • src/modules/instance.js
View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin gitlab-mr-iid-957:gitlab-mr-iid-957
git switch gitlab-mr-iid-957

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch develop
git merge --no-ff gitlab-mr-iid-957
git switch gitlab-mr-iid-957
git rebase develop
git switch develop
git merge --ff-only gitlab-mr-iid-957
git switch gitlab-mr-iid-957
git rebase develop
git switch develop
git merge --no-ff gitlab-mr-iid-957
git switch develop
git merge --squash gitlab-mr-iid-957
git switch develop
git merge --ff-only gitlab-mr-iid-957
git switch develop
git merge gitlab-mr-iid-957
git push origin develop
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1
Instance Admin Dashboard

  
NL2
Improved Mobile Experience

  
NL4
Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility
https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident
Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe!2224
No description provided.