mirror of
https://codeberg.org/rimu/pyfedi
synced 2025-02-03 00:31:25 -08:00
show videos in teaser
This commit is contained in:
rimu
parent
503f6719ad
commit
dba016e05e
5 changed files with 63 additions and 20 deletions
|
|
@ -867,20 +867,20 @@ div.navbar {
|
|||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.post_teaser_article_preview {
|
||||
.post_teaser_article_preview, .post_teaser_link_preview {
|
||||
position: relative;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.post_teaser_article_preview p {
|
||||
.post_teaser_article_preview p, .post_teaser_link_preview p {
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-line-clamp: 2;
|
||||
/* Limits the text to a specific number of lines */
|
||||
line-clamp: 1;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
|
|
@ -902,10 +902,6 @@ div.navbar {
|
|||
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%;
|
||||
|
|
@ -916,6 +912,12 @@ div.navbar {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.max_width_512 {
|
||||
max-width: 512px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post_utilities_bar_wrapper {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
|
|
|
|||
|
|
@ -459,7 +459,7 @@ div.navbar {
|
|||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.post_teaser_article_preview {
|
||||
.post_teaser_article_preview, .post_teaser_link_preview {
|
||||
position: relative;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
|
|
@ -470,8 +470,8 @@ div.navbar {
|
|||
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;
|
||||
-webkit-line-clamp: 2; /* Limits the text to a specific number of lines */
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
|
|
@ -493,10 +493,7 @@ div.navbar {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
img {
|
||||
max-width: 100%;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.fe-video {
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
|
|
@ -508,6 +505,12 @@ div.navbar {
|
|||
}
|
||||
}
|
||||
|
||||
.max_width_512 {
|
||||
max-width: 512px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post_utilities_bar_wrapper {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
|
|
|
|||
|
|
@ -18,5 +18,10 @@
|
|||
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
|
||||
</div>
|
||||
{% endif -%}
|
||||
{% if post.body_html -%}
|
||||
<div class="post_teaser_link_preview">
|
||||
{{ first_paragraph(post.body_html) | safe }}
|
||||
</div>
|
||||
{% endif -%}
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,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_link_preview">
|
||||
{{ first_paragraph(post.body_html) | safe }}
|
||||
</div>
|
||||
{% endif -%}
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
{% if post.image_id -%}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,39 @@
|
|||
</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.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 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 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() }}>
|
||||
{% if post.url.endswith('.mp4') -%}
|
||||
<source src="{{ post.url }}" type="video/mp4" />
|
||||
{% elif post.url.endswith('.webm') -%}
|
||||
<source src="{{ post.url }}" type="video/webm" />
|
||||
{% endif -%}
|
||||
</video></p>
|
||||
{% elif post.url.startswith('https://streamable.com') -%}
|
||||
<div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('streamable.com/', 'streamable.com/e/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" width="100%" height="100%" frameborder="0"></iframe></div>
|
||||
{% elif post.url.startswith('https://www.redgifs.com/watch/') -%}
|
||||
<div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.url.replace('redgifs.com/watch/', 'redgifs.com/ifr/') }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" width="100%" height="100%" frameborder="0"></iframe></div>
|
||||
{% endif -%}
|
||||
{% if 'youtube.com' in post.url -%}
|
||||
<div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="https://www.youtube.com/embed/{{ post.youtube_embed() }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" width="100%" height="100%" frameborder="0"></iframe></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>
|
||||
{% endif -%}
|
||||
</div>
|
||||
{% include "post/post_teaser/_utilities_bar.html" %}
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue