add instagram and tiktok embeds

master
Aevann 2024-04-09 05:39:07 +02:00
parent d27fe044bd
commit 6fb4f8474d
3 changed files with 31 additions and 3 deletions

View File

@ -7825,7 +7825,22 @@ img[src$="/e/speechbubble.webp"] {
height: auto !important;
}
#reddit-embed {
#embed {
border: none;
margin-bottom: 10px;
}
.instagram-post-embed {
height: 1050px
}
.instagram-profile-embed {
height: 562px
}
@media (max-width: 768px) {
.instagram-post-embed {
height: 930px
}
.instagram-profile-embed {
height: 411px
}
}

View File

@ -1126,7 +1126,7 @@ engine = create_engine(environ.get("DATABASE_URL").strip(), connect_args={"optio
db_session = scoped_session(sessionmaker(bind=engine, autoflush=False))
approved_embed_hosts_for_csp = ' '.join(set(x.split('/')[0] for x in approved_embed_hosts))
csp = f"default-src 'none'; frame-ancestors 'none'; form-action 'self'; manifest-src 'self'; worker-src 'self'; base-uri 'self'; font-src 'self'; style-src-elem 'self' rdrama.net watchpeopledie.tv; style-src-attr 'unsafe-inline'; style-src 'self' 'unsafe-inline'; script-src-elem 'self' challenges.cloudflare.com static.cloudflareinsights.com; script-src-attr 'none'; script-src 'self' challenges.cloudflare.com static.cloudflareinsights.com; frame-src embed.reddit.com challenges.cloudflare.com cdpn.io platform.twitter.com rumble.com player.twitch.tv; connect-src 'self' submit.watchpeopledie.tv; img-src {approved_embed_hosts_for_csp} data:; media-src *.googlevideo.com archive.org *.us.archive.org {approved_embed_hosts_for_csp};"
csp = f"default-src 'none'; frame-ancestors 'none'; form-action 'self'; manifest-src 'self'; worker-src 'self'; base-uri 'self'; font-src 'self'; style-src-elem 'self' rdrama.net watchpeopledie.tv; style-src-attr 'unsafe-inline'; style-src 'self' 'unsafe-inline'; script-src-elem 'self' challenges.cloudflare.com static.cloudflareinsights.com; script-src-attr 'none'; script-src 'self' challenges.cloudflare.com static.cloudflareinsights.com; frame-src www.tiktok.com www.instagram.com embed.reddit.com challenges.cloudflare.com cdpn.io platform.twitter.com rumble.com player.twitch.tv; connect-src 'self' submit.watchpeopledie.tv; img-src {approved_embed_hosts_for_csp} data:; media-src *.googlevideo.com archive.org *.us.archive.org {approved_embed_hosts_for_csp};"
if not IS_LOCALHOST:
csp += ' upgrade-insecure-requests;'

View File

@ -149,8 +149,21 @@
{% endif %}
{% if p.url and p.url.startswith('https://old.reddit.com/r/') %}
<iframe id="reddit-embed" src="{{p.url.replace('https://old.reddit.com/', 'https://embed.reddit.com/').split('?')[0]}}?context=1&showtitle=true{% if v.theme in DARK_THEMES %}&theme=dark{% endif %}" height="317px" width="100%" allow="clipboard-read; clipboard-write"></iframe>
<iframe id="embed" src="{{p.url.replace('https://old.reddit.com/', 'https://embed.reddit.com/').split('?')[0]}}?context=1&showtitle=true{% if v.theme in DARK_THEMES %}&theme=dark{% endif %}" height="317px" width="100%" allow="clipboard-read; clipboard-write"></iframe>
<script defer src="{{'js/reddit_embed.js' | asset}}"></script>
{% elif p.domain == 'instagram.com' %}
{% set path = p.url.split('https://instagram.com/')[1].rstrip('/') %}
{% if '/' in path %}
{% set path = path + '/embed/captioned' %}
{% set class = "instagram-post-embed" %}
{% else %}
{% set path = path + '/embed' %}
{% set class = "instagram-profile-embed" %}
{% endif %}
<iframe id="embed" class="{{class}}" src="https://www.instagram.com/{{path}}?theme=dark" style="width:calc(100% - 2px);min-width:326px;max-width:540px"></iframe>
{% elif p.domain == 'tiktok.com' %}
{% set id = p.url.split('/video/')[1] %}
<iframe id="embed" src="https://www.tiktok.com/embed/{{id}}" width="325px" height="750px"></iframe>
{% endif %}
<div id="post-text" class="{{p.award_classes(v)}}">