skorotkiewicz/yosup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: Added media previewing

Browse source
This commit is contained in:
Thomas Mathews 2022-12-15 10:00:20 -08:00
parent ca3668eea7
commit 318cbe98ea
4 changed files with 48 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/css/styles.css
View file

@ -438,6 +438,29 @@ label[role="profile-nip5"] {
display: block;
}
/* Media Preview */
.bg-blur {
backdrop-filter: blur(20px);
position: absolute;
width: 100%;
height: 100%;
z-index: var(--zModal);
}
.modal .media-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
z-index: calc(var(--zModal) + 1);
}
.modal .media-container > img {
object-fit: scale-down;
object-position: center;
width: 100%;
height: 100%;
}
@media (prefers-color-scheme: dark) {
.icon.svg {
filter: invert(1);

8
web/index.html
View file

@ -147,6 +147,14 @@
<div class="flex-fill vertical-hide"></div>
</div>
<div class="modal closed" id="media-preview">
<div class="bg-blur"></div>
<div class="media-container">
<img onclick="close_media_preview()" src=""/>
</div>
<!-- TODO add loader to media preview -->
</div>
<div class="modal closed" id="reply-modal">
<div id="reply-modal-content" class="modal-content">
<header>

16
web/js/ui/util.js
View file

@ -113,3 +113,19 @@ function click_event(el) {
console.info(`thread to open: ${el.dataset.eid}`);
switch_view("thread");
}
/* open_media_preview presents a modal to display an image via "url".
*/
function open_media_preview(url, type) {
const el = find_node("#media-preview");
el.classList.remove("closed");
find_node("img", el).src = url;
// TODO handle different medias such as audio and video
// TODO add loading state & error checking
}
/* close_media_preview closes any present media modal.
*/
function close_media_preview() {
find_node("#media-preview").classList.add("closed");
}

4
web/js/util.js
View file

@ -169,9 +169,7 @@ function linkify(text, show_media) {
let html;
if (show_media && is_img_url(parsed.pathname)) {
html = `
<a target="_blank" href="${url}">
<img class="inline-img" src="${url}"/>
</a>
<img class="inline-img clickable" src="${url}" onclick="open_media_preview('${url}', 'image')"/>
`;
} else if (show_media && is_video_url(parsed.pathname)) {
html = `