Commit 9fbbecb1 authored by Alain St-Denis's avatar Alain St-Denis
Browse files

Set selected sites video embed aspect ratio with fitvids, plus some minor changes.

A site default language can now be set with SOCIALHOME_LANGUAGE_CODE.
parent b5ad70f0
......@@ -144,7 +144,7 @@ DATABASES["default"]["ATOMIC_REQUESTS"] = True
TIME_ZONE = env("DJANGO_TIMEZONE", default="UTC")
# See: https://docs.djangoproject.com/en/dev/ref/settings/#language-code
LANGUAGE_CODE = "en-us"
LANGUAGE_CODE = env("SOCIALHOME_LANGUAGE_CODE", default="en-us")
# See: https://docs.djangoproject.com/en/dev/ref/settings/#site-id
SITE_ID = 1
......
......@@ -12,6 +12,10 @@ Added
Changed
.......
* Use `fitvids <https://github.com/rosszurowski/fitvids>`_ to set selected site
aspect ratio for oembed videos. This requires leaving the width and height unchanged
as fitvids relies on it to compute the aspect ratio.
Fixed
.....
......
......@@ -125,11 +125,14 @@ def fetch_oembed_preview(content, urls):
continue
if not oembed:
continue
# Keep height if width = 100%
if not re.search(r'\s+width="100%"', oembed):
oembed = re.sub(r'\s+height="[0-9]+"', " ", oembed)
# Ensure width is 100% not fixed
oembed = re.sub(r'\s+width="[0-9]+"', ' width="100%"', oembed)
# Keep width and height for some sites embedded videos
video_sites = ["youtube.com", "youtu.be", "vimeo.com", "kickstarter.com"]
if not any(site in oembed for site in video_sites):
# Keep height if width = 100%
if not re.search(r'\s+width="100%"', oembed):
oembed = re.sub(r'\s+height="[0-9]+"', " ", oembed)
# Ensure width is 100% not fixed
oembed = re.sub(r'\s+width="[0-9]+"', ' width="100%"', oembed)
# Wordpress sites use a random token and message events to identify the right iframe in order
# to set the rendered height. For this to work within a masonry grid, the parent script
# must already be loaded. Since in that context the parent script which updates the iframe
......
......@@ -9,7 +9,7 @@
<div class="opengraph-card-text">
<p class="card-text">
{% if opengraph.title %}
{{ opengraph.title }}
<b>{{ opengraph.title }}</b>
{% endif %}
{% if opengraph.description and opengraph.description != opengraph.title %}
<br>{{ opengraph.description }}
......
......@@ -16,6 +16,7 @@
"bootstrap": "<5",
"bootstrap-vue": "2.21.2",
"easymde": "^2.15.0",
"fitvids": "^2.1.1",
"fork-awesome": "^1.1.7",
"js-cookie": "^3.0.0",
"lodash": "^4.17.21",
......
......@@ -8,10 +8,10 @@
<nsfw-shield v-if="content.is_nsfw" :tags="content.tags">
<!-- eslint-disable-next-line vue/no-v-html -->
<div :id="content.id" v-html="content.rendered" />
<div :id="`c${content.id}`" v-html="content.rendered" />
</nsfw-shield>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-else :id="content.id" v-html="content.rendered" />
<div v-else :id="`c${content.id}`" v-html="content.rendered" />
<reactions-bar :content="content">
<div v-if="!showAuthorBar" class="stream-element-content-timestamp mr-2">
......@@ -33,6 +33,7 @@
<script>
import Vue from "vue"
import fitvids from "fitvids"
import AuthorBar from "@/components/streams/AuthorBar.vue"
import ContentTimestamp from "@/components/streams/ContentTimestamp"
......@@ -81,6 +82,9 @@ const StreamElement = {
mounted() {
this.layoutAfterDOMChange()
this.layoutAfterTwitterOEmbeds()
if (this.content.show_preview) {
fitvids(`#c${this.content.id}`)
}
if (!this.$store.state.stream.stream.single) {
this.$redrawVueMasonry()
}
......@@ -92,7 +96,7 @@ const StreamElement = {
},
methods: {
layoutAfterDOMChange() {
const post = document.getElementById(this.content.id)
const post = document.getElementById(`c${this.content.id}`)
if (post) {
const redraw = this.$redrawVueMasonry
// eslint-disable-next-line prefer-arrow-callback
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment