2 files changed, 25 insertions, 19 deletions

diff --git a/src/views/comments.pug b/src/views/comments.pug
index 1caf65a..1265609 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -47,23 +47,24 @@ html
         h2.post-title
           != post.title
 
-        if isPostGallery(post)
-          div.gallery
-            each item in postGalleryItems(post)
-              div.gallery-item
-                div.gallery-item-idx
-                  | #{`${item.idx}/${item.total}`}
-                a(href=`/media/${item.url}`)
-                  img(src=item.url loading="lazy")
-        else if isPostImage(post)
-          a(href=`/media/${post.url}`)
-            img(src=post.url).post-media
-        else if isPostVideo(post)
-          - var url = post.secure_media.reddit_video.dash_url
-          video(controls data-dashjs-player src=`${url}`).post-media
-        else if isPostLink(post)
-          a(href=post.url)
-            | #{post.url}
+        div.image-viewer.main-content
+          if isPostGallery(post)
+            div.gallery
+              each item in postGalleryItems(post)
+                div.gallery-item
+                  a(href=`/media/${item.url}`)
+                    img(src=item.url loading="lazy")
+                  div.gallery-item-idx
+                    | #{`${item.idx}/${item.total}`}
+          else if isPostImage(post)
+            a(href=`/media/${post.url}`)
+              img(src=post.url).post-media
+          else if isPostVideo(post)
+            - var url = post.secure_media.reddit_video.dash_url
+            video(controls data-dashjs-player src=`${url}`).post-media
+          else if isPostLink(post)
+            a(href=post.url)
+              | #{post.domain} ↗
 
         if post.selftext_html
           div.self-text
diff --git a/src/views/media.pug b/src/views/media.pug
index e945704..3a59542 100644
--- a/src/views/media.pug
+++ b/src/views/media.pug
@@ -3,13 +3,18 @@ doctype html
 html
   +head("home")
   script(type='text/javascript').
-    function toggleZoom() {
+    function toggleZoom(event) {
+      const percentX = event.offsetX / event.target.width;
+      const percentY = event.offsetY / event.target.height;
       Array.from(document.getElementsByClassName('media-maximized')).forEach(element => element.classList.toggle('zoom'));
+      const moveClientX = (event.target.width * percentX) + event.target.offsetLeft - (event.view.visualViewport.width / 2)
+      const moveClientY = (event.target.height * percentY) + event.target.offsetTop - (event.view.visualViewport.height / 2);
+      event.target.parentElement.scrollTo(moveClientX, moveClientY);
     }
 
   body.media-maximized
     div.media-maximized.container
       if kind == 'img'
-        img(src=url onclick=`toggleZoom()`).media-maximized
+        img(src=url onclick=`toggleZoom(event)`).media-maximized
       else
         video(src=url controls).media-maximized