flashii/misuzu
flashii/misuzu
1
1
Fork 0
Code Issues Pull requests Releases 160 Wiki Activity Actions

Enabled video and audio embeds in markdown.

Browse source
This commit is contained in:
flash 2023-01-29 21:06:03 +00:00
parent e6e5c873f6
commit 03a0dcd948
6 changed files with 78 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
assets/css/misuzu/embed.css
View file

@ -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
}

3
assets/js/misuzu/embed.js
View file

@ -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);
}

33
assets/js/misuzu/iembed.js Normal file
View file

@ -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;
};

3
src/Parsers/BBCode/Tags/AudioTag.php
View file

@ -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>'
. '<noscript><a href="%1$s" class="link" rel="noopener noreferrer">%1$s</a></noscript>',
'<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>',
$matches[1]
);
},

3
src/Parsers/BBCode/Tags/VideoTag.php
View file

@ -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>'
. '<noscript><a href="%1$s" class="link" rel="noopener noreferrer">%1$s</a></noscript>',
'<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>',
$matches[1]
);
},

7
src/Parsers/MarkdownParser.php
View file

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