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'])
+ ),
],
];