Enabled video and audio embeds in markdown.

assets/css/misuzu/embed.css

@@ -51,6 +51,9 @@
     height: 100%;
     display: inline-block;
     transition: transform .2s, filter .2s;
+    box-sizing: border-box !important;
+    max-width: initial !important;
+    max-height: initial !important;
 }
 .embedph-fg {
     width: 100%;
@@ -87,11 +90,14 @@
     margin-left: 5px;
 }
 .embedph-info-title {
-    font-size: 2em;
+    font-size: 2em !important;
-    font-weight: 400;
+    font-weight: 400 !important;
-    line-height: 1.1em;
+    line-height: 1.2em !important;
     margin-bottom: 5px;
     word-break: break-word;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-width: 0 !important;
 }
 .embedph-info-desc {
     line-height: 1.4em;
@@ -134,8 +140,8 @@
     padding: 5px 10px;
     font-size: 1.2em;
     line-height: 1.5em;
-    text-decoration: none;
+    text-decoration: none !important;
-    color: var(--text-colour);
+    color: var(--text-colour) !important;
     background-color: var(--background-colour-translucent-6);
     border-radius: 5px;
     backdrop-filter: blur(10px);
@@ -250,6 +256,9 @@
     display: inline-block;
     transform: scale(1.1);
     filter: blur(10px) brightness(80%);
+    box-sizing: border-box !important;
+    max-width: initial !important;
+    max-height: initial !important;
 }
 .aembedph-fg {
     width: 100%;
@@ -275,10 +284,11 @@
     height: 100%;
 }
 .aembedph-info-cover img {
-    max-width: 60px;
+    max-width: 60px !important;
-    max-height: 60px;
+    max-height: 60px !important;
     display: inline-block;
     vertical-align: middle;
+    box-sizing: border-box !important;
 }
 .aembedph-info-cover-none img {
     display: none;
@@ -287,13 +297,16 @@
     padding: 0 5px;
 }
 .aembedph-info-title {
-    font-size: 1.4em;
+    font-size: 1.4em !important;
-    font-weight: 400;
+    font-weight: 400 !important;
-    line-height: 1.2em;
+    line-height: 1.2em !important;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 430px;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-width: 0 !important;
 }
 .aembedph-info-title-artist {
     max-width: 200px;
@@ -348,8 +361,8 @@
 .aembedph-play-external-link {
     padding: 2px 5px;
     line-height: 1.5em;
-    text-decoration: none;
+    text-decoration: none !important;
-    color: var(--text-colour);
+    color: var(--text-colour) !important;
     background-color: var(--background-colour-translucent-6);
     border-radius: 5px;
     backdrop-filter: blur(10px);
@@ -363,3 +376,15 @@
 .aembedph-play-external-link:active {
     background-color: var(--background-colour-translucent-5);
 }
+
+.iembed {
+    display: inline-block;
+    overflow: hidden;
+    text-shadow: initial;
+    vertical-align: baseline;
+}
+.iembed img {
+    vertical-align: middle;
+    max-width: 100%;
+    max-height: 900px
+}

assets/js/misuzu/embed.js

@@ -102,6 +102,7 @@ var MszEmbed = (function() {
                         options.player = MszAudioEmbedPlayer;
                         options.nativeControls = true;
                     } else if(metadata.is_image) {
+                        phc = MszImageEmbed;
                         options.type = 'external';
                     }
 
@@ -109,7 +110,7 @@ var MszEmbed = (function() {
                         return;
 
                     for(const target of targets) {
-                        const placeholder = new phc(metadata, options);
+                        const placeholder = new phc(metadata, options, target);
                         if(placeholder !== undefined)
                             placeholder.replaceElement(target);
                     }

assets/js/misuzu/iembed.js

@@ -0,0 +1,33 @@
+const MszImageEmbed = function(metadata, options, target) {
+    options = options || {};
+
+    const image = $e({
+        tag: 'img',
+        attrs: {
+            alt: target.dataset.mszEmbedAlt || '',
+            src: metadata.url,
+        },
+    });
+
+    const pub = {
+        getElement: function() {
+            return image;
+        },
+        appendTo: function(target) {
+            target.appendChild(image);
+        },
+        insertBefore: function(ref) {
+            $ib(ref, image);
+        },
+        nuke: function() {
+            $r(image);
+        },
+        replaceElement(target) {
+            $ib(target, image);
+            $r(target);
+        },
+        getType: function() { return 'external'; },
+    };
+
+    return pub;
+};

src/Parsers/BBCode/Tags/AudioTag.php

@@ -14,8 +14,7 @@ final class AudioTag extends BBCodeTag {
                     return $matches[0];
 
                 return sprintf(
-                    '<span class="js-msz-embed-media" data-msz-embed-url="%1$s"></span>'
+                    '<span class="js-msz-embed-media" data-msz-embed-url="%1$s"><noscript><a href="%1$s" target="_blank" class="link" rel="noopener noreferrer">%1$s</a></noscript></span>',
-                    . '<noscript><a href="%1$s" class="link" rel="noopener noreferrer">%1$s</a></noscript>',
                     $matches[1]
                 );
             },

src/Parsers/BBCode/Tags/VideoTag.php

@@ -14,8 +14,7 @@ final class VideoTag extends BBCodeTag {
                     return $matches[0];
 
                 return sprintf(
-                    '<span class="js-msz-embed-media" data-msz-embed-url="%1$s"></span>'
+                    '<span class="js-msz-embed-media" data-msz-embed-url="%1$s"><noscript><a href="%1$s" target="_blank" class="link" rel="noopener noreferrer">%1$s</a></noscript></span>',
-                    . '<noscript><a href="%1$s" class="link" rel="noopener noreferrer">%1$s</a></noscript>',
                     $matches[1]
                 );
             },

src/Parsers/MarkdownParser.php

@@ -13,9 +13,6 @@ class MarkdownParser extends Parsedown implements ParserInterface {
     }
 
     protected function inlineImage($excerpt) {
-        // remove this line when media detection works entirely as expected
-        return parent::inlineImage($excerpt);
-
         if(!isset($excerpt['text'][1]) || $excerpt['text'][1] !== '[')
             return;
 
@@ -34,6 +31,10 @@ class MarkdownParser extends Parsedown implements ParserInterface {
                     'data-msz-embed-url' => $link['element']['attributes']['href'],
                     'data-msz-embed-alt' => $link['element']['text'],
                 ],
+                'rawHtml' => sprintf(
+                    '<noscript><a href="%1$s" target="_blank" class="link" rel="noopener noreferrer">%1$s</a></noscript>',
+                    htmlspecialchars($link['element']['attributes']['href'])
+                ),
             ],
         ];