lasers
/
libreddit
mirror of https://github.com/spikecodes/libreddit
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Blur nsfw previews

This commit is contained in:
NKIPSC 2022-04-10 14:31:51 +02:00
parent 3facaefb53
commit 2226bc6cd9
3 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/style.css
View File

@ -828,22 +828,39 @@ a.search_subreddit:hover {
font-weight: bold;
}
.post_media_image, .post .__NoScript_PlaceHolder__, .post_media_video, .gallery {
.post_media_content, .post .__NoScript_PlaceHolder__, .gallery {
max-width: calc(100% - 40px);
grid-area: post_media;
margin: 15px auto 5px auto;
width: auto;
height: auto;
overflow: hidden;
}
.post_media_video.short {
max-height: 512px;
.post_media_video {
width: auto;
height: auto;
max-width: 100%;
max-height: 512px;
display: block;
margin: auto;
}
.post_media_image.short svg, .post_media_image.short img{
max-height: 512px;
width: auto;
height: auto;
max-width: 100%;
max-height: 512px;
display: block;
margin: auto;
}
.post_nsfw_blur {
filter: blur(1.5rem);
}
.post_nsfw_blur:hover {
filter: none;
}
.post_media_image svg{

38
templates/post.html
View File

@ -68,27 +68,33 @@
<!-- POST MEDIA -->
<!-- post_type: {{ post.post_type }} -->
{% if post.post_type == "image" %}
<a href="{{ post.media.url }}" class="post_media_image" >
<svg
width="{{ post.media.width }}px"
height="{{ post.media.height }}px"
xmlns="http://www.w3.org/2000/svg">
<image width="100%" height="100%" href="{{ post.media.url }}"/>
<desc>
<img loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
</desc>
</svg>
</a>
<div class="post_media_content">
<a href="{{ post.media.url }}" class="post_media_image" >
<svg
width="{{ post.media.width }}px"
height="{{ post.media.height }}px"
xmlns="http://www.w3.org/2000/svg">
<image width="100%" height="100%" href="{{ post.media.url }}"/>
<desc>
<img loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
</desc>
</svg>
</a>
</div>
{% else if post.post_type == "video" || post.post_type == "gif" %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<script src="/hls.min.js"></script>
<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls>
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
<div class="post_media_content">
<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls>
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
</div>
<script src="/playHLSVideo.js"></script>
{% else %}
<video class="post_media_video" src="{{ post.media.url }}" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %} loop><a href={{ post.media.url }}>Video</a></video>
<div class="post_media_content">
<video class="post_media_video" src="{{ post.media.url }}" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %} loop><a href={{ post.media.url }}>Video</a></video>
</div>
{% call utils::render_hls_notification(post.permalink[1..]) %}
{% endif %}
{% else if post.post_type == "gallery" %}

42
templates/utils.html
View File

@ -94,27 +94,35 @@
</p>
<!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "image" %}
<a href="{{ post.media.url }}" class="post_media_image {% if post.media.height / post.media.width < 2 %}short{% endif %}" >
<svg
width="{{ post.media.width }}px"
height="{{ post.media.height }}px"
xmlns="http://www.w3.org/2000/svg">
<image width="100%" height="100%" href="{{ post.media.url }}"/>
<desc>
<img loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
</desc>
</svg>
</a>
<div class="post_media_content">
<a href="{{ post.media.url }}" class="post_media_image {%if post.flags.nsfw %}post_nsfw_blur{% endif %} {% if post.media.height / post.media.width < 2 %}short{% endif %}" >
<svg
width="{{ post.media.width }}px"
height="{{ post.media.height }}px"
xmlns="http://www.w3.org/2000/svg">
<image width="100%" height="100%" href="{{ post.media.url }}"/>
<desc>
<img loading="lazy" alt="Post image" src="{{ post.media.url }}"/>
</desc>
</svg>
</a>
</div>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "gif" %}
<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls loop {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
<div class="post_media_content">
<video class="post_media_video short {%if post.flags.nsfw %}post_nsfw_blur{% endif %}" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls loop {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
</div>
{% else if (prefs.layout.is_empty() || prefs.layout == "card") && post.post_type == "video" %}
{% if prefs.use_hls == "on" && !post.media.alt_url.is_empty() %}
<video class="post_media_video short {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" controls preload="none">
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
<div class="post_media_content">
<video class="post_media_video short {%if post.flags.nsfw %}post_nsfw_blur{% endif %} {% if prefs.autoplay_videos == "on" %}hls_autoplay{% endif %}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" controls preload="none">
<source src="{{ post.media.alt_url }}" type="application/vnd.apple.mpegurl" />
<source src="{{ post.media.url }}" type="video/mp4" />
</video>
</div>
{% else %}
<video class="post_media_video short" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
<div class="post_media_content">
<video class="post_media_video short {%if post.flags.nsfw %}post_nsfw_blur{% endif %}" src="{{ post.media.url }}" width="{{ post.media.width }}" height="{{ post.media.height }}" poster="{{ post.media.poster }}" preload="none" controls {% if prefs.autoplay_videos == "on" %}autoplay{% endif %}><a href={{ post.media.url }}>Video</a></video>
</div>
{% call render_hls_notification(format!("{}%23{}", &self.url[1..].replace("&", "%26").replace("+", "%2B"), post.id)) %}
{% endif %}
{% else if post.post_type != "self" %}