From 7aa1d512fc00cb916b5f0c62a7809f78385e6472 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 26 Sep 2024 20:32:04 -0700
Subject: [PATCH] Photo view count tweaks

* The owner of a photo no longer counts any views on it.
* Add event handlers to mark animated GIFs viewed on the gallery page:
  if the user mouse overs or pauses the video.
---
 pkg/models/photo.go              |  5 +++++
 web/templates/photo/gallery.html | 26 ++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/pkg/models/photo.go b/pkg/models/photo.go
index db854a3..70715db 100644
--- a/pkg/models/photo.go
+++ b/pkg/models/photo.go
@@ -194,6 +194,11 @@ func PaginateUserPhotos(userID uint64, conf UserGallery, pager *Pagination) ([]*
 // View a photo, incrementing its Views count but not its UpdatedAt.
 // Debounced with a Redis key.
 func (p *Photo) View(userID uint64) error {
+	// The owner of the photo does not count views.
+	if p.UserID == userID {
+		return nil
+	}
+
 	// Debounce this.
 	var redisKey = fmt.Sprintf(config.PhotoViewDebounceRedisKey, userID, p.ID)
 	if redis.Exists(redisKey) {
diff --git a/web/templates/photo/gallery.html b/web/templates/photo/gallery.html
index 1fa19bb..6fbfa90 100644
--- a/web/templates/photo/gallery.html
+++ b/web/templates/photo/gallery.html
@@ -542,6 +542,8 @@
                         <!-- GIF video? -->
                         {{if HasSuffix .Filename ".mp4"}}
                         <video loop controls controlsList="nodownload" playsinline
+                            class="js-modal-trigger"
+                            data-url="{{PhotoURL .Filename}}" data-photo-id="{{.ID}}"
                             {{if .AltText}}title="{{.AltText}}"{{end}}
                             {{if BlurExplicit .}}class="blurred-explicit"
                             {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
@@ -550,7 +552,7 @@
                         </video>
                         {{else}}
                         <a href="/photo/view?id={{.ID}}" data-url="{{PhotoURL .Filename}}" data-photo-id="{{.ID}}" target="_blank"
-                            class="js-modal-trigger" data-target="detail-modal">
+                            class="js-modal-trigger">
                             <img src="{{PhotoURL .Filename}}" loading="lazy"
                                 {{if BlurExplicit .}}class="blurred-explicit"{{end}}
                                 {{if .AltText}}alt="{{.AltText}}" title="{{.AltText}}"{{end}}>
@@ -667,6 +669,8 @@
                                 <!-- GIF video? -->
                                 {{if HasSuffix .Filename ".mp4"}}
                                 <video loop controls controlsList="nodownload" playsinline
+                                    class="js-modal-trigger"
+                                    data-url="{{PhotoURL .Filename}}" data-photo-id="{{.ID}}"
                                     {{if .AltText}}title="{{.AltText}}"{{end}}
                                     {{if BlurExplicit .}}class="blurred-explicit"
                                     {{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
@@ -675,7 +679,7 @@
                                 </video>
                                 {{else}}
                                 <a href="/photo/view?id={{.ID}}" data-url="{{PhotoURL .Filename}}" data-photo-id="{{.ID}}" target="_blank"
-                                    class="js-modal-trigger" data-target="detail-modal">
+                                    class="js-modal-trigger">
                                     <img src="{{PhotoURL .Filename}}" loading="lazy"
                                         {{if BlurExplicit .}}class="blurred-explicit"{{end}}
                                         {{if .AltText}}alt="{{.AltText}}" title="{{.AltText}}"{{end}}>
@@ -808,8 +812,26 @@
 
         document.querySelectorAll(".js-modal-trigger").forEach(node => {
             let $img = node.getElementsByTagName("img"),
+                $video = node.tagName === 'VIDEO' ? node : null,
                 photoID = node.dataset.photoId,
                 altText = $img[0] != undefined ? $img[0].alt : '';
+
+            // Video (animated GIF) handlers.
+            if ($video !== null) {
+
+                // Log this video viewed if the user interacts with it in any way.
+                // Note: because videos don't open in the lightbox modal.
+                ['pause', 'mouseover'].forEach(event => {
+                    $video.addEventListener(event, (e) => {
+                        // Log a view of this video.
+                        markImageViewed(photoID);
+                    });
+                });
+
+                return;
+            }
+
+            // Images: open in the lightbox modal.
             node.addEventListener("click", (e) => {
                 e.preventDefault();
                 setModalImage(node.dataset.url, altText);