From 065d1e1078a8149383adcab915bfdd5522558e19 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Sun, 8 Sep 2024 12:31:16 +1200
Subject: [PATCH] only embed youtube vids on AC power

---
 app/static/js/scripts.js                   |  9 ++++++++-
 app/static/styles.css                      |  2 +-
 app/static/styles.scss                     | 16 ++++++++--------
 app/templates/post/post_teaser/_video.html | 22 ++++++++--------------
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
index b395e218..47a36313 100644
--- a/app/static/js/scripts.js
+++ b/app/static/js/scripts.js
@@ -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();
diff --git a/app/static/styles.css b/app/static/styles.css
index b3c9d2db..57208314 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -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;
diff --git a/app/static/styles.scss b/app/static/styles.scss
index 442fcd69..9c0f51c8 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -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 {
diff --git a/app/templates/post/post_teaser/_video.html b/app/templates/post/post_teaser/_video.html
index 04cc26e3..69248d01 100644
--- a/app/templates/post/post_teaser/_video.html
+++ b/app/templates/post/post_teaser/_video.html
@@ -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>
\ No newline at end of file