From 03a0dcd94803b7eb8b1213767d7763116a5ee8e6 Mon Sep 17 00:00:00 2001 From: flashwave Date: Sun, 29 Jan 2023 21:06:03 +0000 Subject: [PATCH] Enabled video and audio embeds in markdown. --- assets/css/misuzu/embed.css | 49 +++++++++++++++++++++------- assets/js/misuzu/embed.js | 3 +- assets/js/misuzu/iembed.js | 33 +++++++++++++++++++ src/Parsers/BBCode/Tags/AudioTag.php | 3 +- src/Parsers/BBCode/Tags/VideoTag.php | 3 +- src/Parsers/MarkdownParser.php | 7 ++-- 6 files changed, 78 insertions(+), 20 deletions(-) create mode 100644 assets/js/misuzu/iembed.js diff --git a/assets/css/misuzu/embed.css b/assets/css/misuzu/embed.css index 0a67b2c..132c6c3 100644 --- a/assets/css/misuzu/embed.css +++ b/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-weight: 400; - line-height: 1.1em; + font-size: 2em !important; + font-weight: 400 !important; + 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; - color: var(--text-colour); + text-decoration: none !important; + 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-height: 60px; + max-width: 60px !important; + 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-weight: 400; - line-height: 1.2em; + font-size: 1.4em !important; + font-weight: 400 !important; + 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; - color: var(--text-colour); + text-decoration: none !important; + 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 +} diff --git a/assets/js/misuzu/embed.js b/assets/js/misuzu/embed.js index 9af9d83..94d7cb3 100644 --- a/assets/js/misuzu/embed.js +++ b/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); } diff --git a/assets/js/misuzu/iembed.js b/assets/js/misuzu/iembed.js new file mode 100644 index 0000000..ba8c307 --- /dev/null +++ b/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; +}; diff --git a/src/Parsers/BBCode/Tags/AudioTag.php b/src/Parsers/BBCode/Tags/AudioTag.php index c78a06c..8bd821a 100644 --- a/src/Parsers/BBCode/Tags/AudioTag.php +++ b/src/Parsers/BBCode/Tags/AudioTag.php @@ -14,8 +14,7 @@ final class AudioTag extends BBCodeTag { return $matches[0]; return sprintf( - '' - . '', + '', $matches[1] ); }, diff --git a/src/Parsers/BBCode/Tags/VideoTag.php b/src/Parsers/BBCode/Tags/VideoTag.php index f2f3b0e..ea9e510 100644 --- a/src/Parsers/BBCode/Tags/VideoTag.php +++ b/src/Parsers/BBCode/Tags/VideoTag.php @@ -14,8 +14,7 @@ final class VideoTag extends BBCodeTag { return $matches[0]; return sprintf( - '' - . '', + '', $matches[1] ); }, diff --git a/src/Parsers/MarkdownParser.php b/src/Parsers/MarkdownParser.php index 7928a8e..66db348 100644 --- a/src/Parsers/MarkdownParser.php +++ b/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( + '', + htmlspecialchars($link['element']['attributes']['href']) + ), ], ];