From 7ab53804d10bf3e86f6b0c9e581310c0167f8272 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Fri, 6 Sep 2024 22:39:27 +1200
Subject: [PATCH] larger images and videos

---
 app/static/styles.css                        | 49 ++++++++++++++++++++
 app/static/styles.scss                       | 49 ++++++++++++++++++++
 app/templates/post/post_teaser/_article.html |  5 ++
 app/templates/post/post_teaser/_image.html   | 18 ++-----
 app/templates/post/post_teaser/_link.html    | 10 ++--
 app/templates/post/post_teaser/_video.html   | 20 ++------
 app/utils.py                                 |  8 ++++
 pyfedi.py                                    |  3 +-
 8 files changed, 126 insertions(+), 36 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index e7afbf8f..24654673 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -867,6 +867,55 @@ div.navbar {
   padding-bottom: 32px;
 }
 
+.post_teaser_article_preview {
+  position: relative;
+  max-height: 100px;
+  overflow: hidden;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+.post_teaser_article_preview p {
+  margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  /* Limits the text to a specific number of lines */
+  line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+.post_teaser_image_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.post_teaser_image_preview img {
+  max-width: 100%;
+  padding-right: 4px;
+}
+
+.post_teaser_video_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+}
+.post_teaser_video_preview img {
+  max-width: 100%;
+  padding-right: 4px;
+}
+.post_teaser_video_preview .fe-video {
+  position: absolute;
+  left: 43%;
+  top: 40%;
+  width: 13%;
+  font-size: 64px;
+  background-color: white;
+  opacity: 0.5;
+}
+
 .post_utilities_bar_wrapper {
   position: absolute;
   bottom: -7px;
diff --git a/app/static/styles.scss b/app/static/styles.scss
index b8329d6f..0312e724 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -459,6 +459,55 @@ div.navbar {
   padding-bottom: 32px;
 }
 
+.post_teaser_article_preview {
+  position: relative;
+  max-height: 100px;
+  overflow: hidden;
+  padding-left: 3px;
+  padding-right: 3px;
+
+  p {
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; /* Limits the text to a specific number of lines */
+    line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+  }
+}
+
+.post_teaser_image_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  img {
+    max-width: 100%;
+    padding-right: 4px;
+  }
+}
+
+.post_teaser_video_preview {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  img {
+    max-width: 100%;
+    padding-right: 4px;
+  }
+  .fe-video {
+    position: absolute;
+    left: 43%;
+    top: 40%;
+    width: 13%;
+    font-size: 64px;
+    background-color: white;
+    opacity: 0.5;
+  }
+}
+
 .post_utilities_bar_wrapper {
   position: absolute;
   bottom: -7px;
diff --git a/app/templates/post/post_teaser/_article.html b/app/templates/post/post_teaser/_article.html
index ad309764..467c0f16 100644
--- a/app/templates/post/post_teaser/_article.html
+++ b/app/templates/post/post_teaser/_article.html
@@ -9,6 +9,11 @@
     </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>
+    {% if post.body_html -%}
+        <div class="post_teaser_article_preview">
+            {{ first_paragraph(post.body_html) | safe }}
+        </div>
+    {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
 {% if post.image_id -%}
diff --git a/app/templates/post/post_teaser/_image.html b/app/templates/post/post_teaser/_image.html
index a3c9a19c..550195bd 100644
--- a/app/templates/post/post_teaser/_image.html
+++ b/app/templates/post/post_teaser/_image.html
@@ -12,19 +12,11 @@
     </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>
-    {% include "post/post_teaser/_utilities_bar.html" %}
-</div>
-<div class="col col-2 col_thumbnail">
-    {% if post.image_id -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span></a>
-            {% else -%}
-                {% if post.image_id -%}
-                    <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span><img src="{{ post.image.thumbnail_url() }}"
+    {% if post.image_id and not low_bandwidth -%}
+        <div class="post_teaser_image_preview">
+            <a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><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>
-                {% endif -%}
-            {% endif -%}
         </div>
     {% endif -%}
-</div>
\ No newline at end of file
+    {% include "post/post_teaser/_utilities_bar.html" %}
+</div>
diff --git a/app/templates/post/post_teaser/_link.html b/app/templates/post/post_teaser/_link.html
index e6818d0b..33a14bce 100644
--- a/app/templates/post/post_teaser/_link.html
+++ b/app/templates/post/post_teaser/_link.html
@@ -17,8 +17,8 @@
                     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>
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
+{% if post.image_id -%}
 <div class="col col-2 col_thumbnail">
-    {% if post.image_id -%}
         <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
             {% if low_bandwidth -%}
                 <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
@@ -27,9 +27,5 @@
                          alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
             {% endif -%}
         </div>
-    {% else -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-link"></span></a>
-        </div>
-    {% endif -%}
-</div>
\ No newline at end of file
+</div>
+{% endif -%}
\ No newline at end of file
diff --git a/app/templates/post/post_teaser/_video.html b/app/templates/post/post_teaser/_video.html
index 4a5e1829..32d4e59f 100644
--- a/app/templates/post/post_teaser/_video.html
+++ b/app/templates/post/post_teaser/_video.html
@@ -17,21 +17,11 @@
     </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>
-    {% include "post/post_teaser/_utilities_bar.html" %}
-</div>
-<div class="col col-2 col_thumbnail">
-    {% if post.image_id -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
-            {% else -%}
-                <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.thumbnail_url() }}"
-                         alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-            {% endif -%}
-        </div>
-    {% else -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-
+    {% if post.image_id and not low_bandwidth -%}
+        <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 -%}
+    {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
\ No newline at end of file
diff --git a/app/utils.py b/app/utils.py
index fdcb062b..024836b7 100644
--- a/app/utils.py
+++ b/app/utils.py
@@ -381,6 +381,14 @@ def microblog_content_to_title(html: str) -> str:
     return title.strip()
 
 
+def first_paragraph(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    first_paragraph = soup.find('p')
+    if first_paragraph:
+        return f'<p>{first_paragraph.text}</p>'
+    else:
+        return ''
+
 def community_link_to_href(link: str) -> str:
     pattern = r"!([a-zA-Z0-9_.-]*)@([a-zA-Z0-9_.-]*)\b"
     server = r'<a href=https://' + current_app.config['SERVER_NAME'] + r'/community/lookup/'
diff --git a/pyfedi.py b/pyfedi.py
index 4d2993d8..c93b6f96 100644
--- a/pyfedi.py
+++ b/pyfedi.py
@@ -13,7 +13,7 @@ from app.constants import POST_TYPE_LINK, POST_TYPE_IMAGE, POST_TYPE_ARTICLE, PO
 from app.models import Site
 from app.utils import getmtime, gibberish, shorten_string, shorten_url, digits, user_access, community_membership, \
     can_create_post, can_upvote, can_downvote, shorten_number, ap_datetime, current_theme, community_link_to_href, \
-    in_sorted_list, role_access
+    in_sorted_list, role_access, first_paragraph
 
 app = create_app()
 cli.register(app)
@@ -52,6 +52,7 @@ with app.app_context():
     app.jinja_env.globals['in_sorted_list'] = in_sorted_list
     app.jinja_env.globals['theme'] = current_theme
     app.jinja_env.globals['file_exists'] = os.path.exists
+    app.jinja_env.globals['first_paragraph'] = first_paragraph
     app.jinja_env.filters['community_links'] = community_link_to_href
     app.jinja_env.filters['shorten'] = shorten_string
     app.jinja_env.filters['shorten_url'] = shorten_url