oppi.li
+4
-4
src/mixins/post.pug
+4
-4
src/mixins/post.pug
···
46
46
- var url = postThumbnail(p)
47
47
img(src=url onclick=onclick)
48
48
else if isPostVideo(p)
49
-
- var decodedVideos = decodePostVideoUrls(p)
50
-
video(data-dashjs-player="" playsinline="" autoplay="" muted="" onclick=`toggleDetails('${p.id}')` src=decodedVideos[3] poster=decodedVideos[4] width="100px" height="100px")
49
+
- var url = p.secure_media.reddit_video.scrubber_media_url
50
+
video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
51
51
else if isPostLink(p)
52
52
a(href=p.url)
53
53
| ↗
···
71
71
a(href=`/media/${p.url}`)
72
72
img(src=p.url loading="lazy")
73
73
else if isPostVideo(p)
74
-
- var decodedVideos = decodePostVideoUrls(p)
75
-
video(data-dashjs-player="" playsinline="" controls="" muted="" preload="metadata" src=decodedVideos[1] poster=decodedVideos[4])
74
+
- var url = p.secure_media.reddit_video.dash_url
75
+
video(src=url controls data-dashjs-player loading="lazy").post-media
76
76
else if isPostLink(p)
77
77
a(href=p.url)
78
78
| #{p.domain} ↗
+1
-11
src/views/media.pug
+1
-11
src/views/media.pug
···
2
2
doctype html
3
3
html
4
4
+head("home")
5
-
script(type='text/javascript').
6
-
function toggleZoom(event) {
7
-
const percentX = event.offsetX / event.target.width;
8
-
const percentY = event.offsetY / event.target.height;
9
-
Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
10
-
const moveClientX = (event.target.width * percentX) + event.target.offsetLeft - (event.view.visualViewport.width / 2)
11
-
const moveClientY = (event.target.height * percentY) + event.target.offsetTop - (event.view.visualViewport.height / 2);
12
-
event.target.parentElement.scrollTo(moveClientX, moveClientY);
13
-
}
14
-
15
5
body.media-maximized
16
6
div.media-maximized.container
17
7
if kind == 'img'
18
-
img(src=url onclick=`toggleZoom(event)`).media-maximized
8
+
img(src=url).media-maximized
19
9
else
20
10
video(src=url controls).media-maximized