michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

only embed youtube vids on AC power

Browse source
This commit is contained in:
rimu 2024-09-08 12:31:16 +12:00
parent 943bcc34cd
commit 065d1e1078
4 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/static/js/scripts.js
View file

@ -10,7 +10,14 @@ if(!setTheme) {
// fires after DOM is ready for manipulation
document.addEventListener("DOMContentLoaded", function () {
setupYouTubeLazyLoad();
if(navigator.getBattery) {
navigator.getBattery().then(function(battery) {
// Only load youtube videos in teasers if there is plenty of power available
if (battery.charging) {
setupYouTubeLazyLoad();
}
});
}
setupCommunityNameInput();
setupShowMoreLinks();
setupConfirmFirst();

2
app/static/styles.css
View file

@ -922,7 +922,6 @@ div.navbar {
/* 16:9 aspect ratio */
height: 0;
overflow: hidden;
background-color: #000;
}
.post_teaser_video_preview .video-wrapper img {
position: absolute;
@ -932,6 +931,7 @@ div.navbar {
height: 100%;
object-fit: cover;
cursor: pointer;
border-radius: 5px;
}
.post_teaser_video_preview .video-wrapper iframe {
position: absolute;

16
app/static/styles.scss
View file

@ -514,17 +514,17 @@ div.navbar {
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
background-color: #000;
}
.video-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
border-radius: 5px;
}
.video-wrapper iframe {

22
app/templates/post/post_teaser/_video.html
View file

@ -17,17 +17,9 @@
</h3>
<span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
<div class="post_teaser_video_preview">
<div class="max_width_512">
{% if low_bandwidth %}
{% if post.image_id -%}
<div class="post_teaser_video_preview{{ ' lbw' if low_bandwidth }}">
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></span>
<img src="{{ post.image.medium_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
</div>
{% endif -%}
{% else %}
{% if not low_bandwidth %}
<div class="post_teaser_video_preview">
<div class="max_width_512">
{% if post.url.endswith('.mp4') or post.url.endswith('.webm') -%}
<p>
<video class="responsive-video" controls preload="{{ 'none' if low_bandwidth else 'auto' }}" {{ 'autoplay muted' if autoplay }} {{ 'loop' if post.community.loop_videos() }}>
@ -44,14 +36,16 @@
{% endif -%}
{% if 'youtube.com' in post.url -%}
<div class="video-wrapper" data-src="https://www.youtube.com/embed/{{ post.youtube_embed() }}">
<img src="https://img.youtube.com/vi/{{ post.youtube_embed(rel=False) }}/hqdefault.jpg" alt="Video Thumbnail">
<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}">
<img src="https://img.youtube.com/vi/{{ post.youtube_embed(rel=False).replace('v=', '').replace('?', '') }}/hqdefault.jpg" alt="Video Thumbnail" width="512" height="288">
</a>
</div>
{% endif -%}
{% if 'videos/watch' in post.url -%}
<div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.peertube_embed() }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" width="100%" height="100%" frameborder="0"></iframe></div>
{% endif -%}
{% endif -%}
</div>
</div>
</div>
{% endif -%}
{% include "post/post_teaser/_utilities_bar.html" %}
</div>