Enhance media inlays with consistent styling and structure for images, videos, and audio
This commit is contained in:
@@ -248,7 +248,15 @@ html, body{
|
|||||||
@apply w-full flex justify-center
|
@apply w-full flex justify-center
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-risu-risu-inlay-image > img{
|
.x-risu-risu-inlay-image img{
|
||||||
|
@apply rounded-lg focus:outline-none max-w-80 w-full
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-risu-risu-inlay-image video{
|
||||||
|
@apply rounded-lg focus:outline-none max-w-80 w-full
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-risu-risu-inlay-image audio{
|
||||||
@apply rounded-lg focus:outline-none max-w-80 w-full
|
@apply rounded-lg focus:outline-none max-w-80 w-full
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -435,13 +435,13 @@ async function parseInlayAssets(data:string){
|
|||||||
const id = inlay.substring(9, inlay.length - 2)
|
const id = inlay.substring(9, inlay.length - 2)
|
||||||
const asset = await getInlayAsset(id)
|
const asset = await getInlayAsset(id)
|
||||||
if(asset?.type === 'image'){
|
if(asset?.type === 'image'){
|
||||||
data = data.replace(inlay, `<img src="${asset.data}"/>`)
|
data = data.replace(inlay, `<div class="risu-inlay-image"><img src="${asset.data}"/></div>`)
|
||||||
}
|
}
|
||||||
if(asset?.type === 'video'){
|
if(asset?.type === 'video'){
|
||||||
data = data.replace(inlay, `<video controls><source src="${asset.data}" type="video/mp4"></video>`)
|
data = data.replace(inlay, `<div class="risu-inlay-image"><video controls><source src="${asset.data}" type="video/mp4"></video></div>`)
|
||||||
}
|
}
|
||||||
if(asset?.type === 'audio'){
|
if(asset?.type === 'audio'){
|
||||||
data = data.replace(inlay, `<audio controls><source src="${asset.data}" type="audio/mpeg"></audio>`)
|
data = data.replace(inlay, `<div class="risu-inlay-image"><audio controls><source src="${asset.data}" type="audio/mpeg"></audio></div>`)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user