Fix default oembed styles for twitter posts (#6581)

CHANGELOG-DEV.md

@@ -28,6 +28,7 @@ HumHub Changelog
 - Fix #6558: Avoid PHP 8.1+ deprecated null parameter on preg_replace in richtext converters
 - Fix #6544: Registration not possible with SSO and email invites if "New users can register" is disabled
 - Fix #6572: Posts count in space should be only for published content
+- Fix #3755: Fix default oembed styles for twitter posts
 
 1.15.0-beta.1 (July 31, 2023)
 -----------------------------

protected/humhub/models/UrlOembed.php

@@ -115,14 +115,14 @@ class UrlOembed extends ActiveRecord
      *
      * @return string|null
      */
-    public function getProviderUrl()
+    public function getProviderUrl(): ?string
     {
-        foreach (static::getProviders() as $provider) {
+        $provider = static::getProviderByUrl($this->url);
-            if (isset($provider['pattern']) && preg_match($provider['pattern'], $this->url)) {
+        if ($provider === null) {
-                return str_replace("%url%", urlencode($this->url), $provider['endpoint']);
+            return null;
-            }
         }
-        return null;
+
+        return str_replace("%url%", urlencode($this->url), $provider['endpoint']);
     }
 
     /**
@@ -292,7 +292,7 @@ class UrlOembed extends ActiveRecord
                 'data' => [
                     'guid' => uniqid('oembed-', true),
                     'richtext-feature' => 1,
-                    'oembed-provider' => Html::encode(static::getProviderByUrl($url)),
+                    'oembed-provider' => Html::encode(static::getProviderOptionByUrl($url, 'endpoint')),
                     'url' => Html::encode($url)
                 ],
                 'class' => 'oembed_snippet',
@@ -350,26 +350,46 @@ class UrlOembed extends ActiveRecord
      * @param string $url
      * @return boolean
      */
-    public static function hasOEmbedSupport($url)
+    public static function hasOEmbedSupport(string $url): bool
     {
-        return static::getProviderByUrl($url) != null;
+        return static::getProviderByUrl($url) !== null;
     }
 
     /**
-     * @param $url
+     * Find provider by pattern with provided URL
-     * @return mixed|null
+     *
+     * @param string $url
+     * @return array|null
      */
-    public static function getProviderByUrl($url)
+    public static function getProviderByUrl(string $url): ?array
     {
-        foreach (static::getProviders() as $provider) {
+        foreach (static::getProviders() as $name => $provider) {
             if (isset($provider['pattern']) && preg_match($provider['pattern'], $url)) {
-                return $provider['endpoint'];
+                $provider['name'] = $name;
+                return $provider;
             }
         }
 
         return null;
     }
 
+    /**
+     * Get provider option by URL
+     *
+     * @param string $url
+     * @param string $option 'name', 'pattern', 'endpoint'
+     * @return array|null
+     */
+    public static function getProviderOptionByUrl(string $url, string $option = 'name'): ?string
+    {
+        $provider = static::getProviderByUrl($url);
+        if ($provider === null) {
+            return null;
+        }
+
+        return $provider[$option] ?? null;
+    }
+
     /**
      * Executes the remote fetch call in case the [$maxUrlFetchLimit] is not reached.
      *

static/less/oembed.less

@@ -1,24 +1,24 @@
-.oembed_snippet[data-oembed-provider="youtube.com"],
 .oembed_snippet {
     margin-top: 10px;
     position: relative;
     padding-bottom: 55%;
     padding-top: 15px;
     overflow: hidden;
-}
 
-.oembed_snippet[data-oembed-provider="twitter.com"] {
+    &[data-oembed-provider="Twitter"],
-    padding-bottom: 0 !important;
+    &[data-oembed-provider*="twitter.com"] {
-    padding-top: 0;
+        padding-bottom: 0 !important;
-    margin-top: 0;
+        padding-top: 0;
-}
+        margin-top: 0;
+    }
 
-.oembed_snippet iframe {
+    iframe {
-    position: absolute;
+        position: absolute;
-    top: 0;
+        top: 0;
-    left: 0;
+        left: 0;
-    width: 100%;
+        width: 100%;
-    height: 100%;
+        height: 100%;
+    }
 }
 
 .oembed_confirmation {