nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 20 Pull Requests 1 Packages Projects Releases Wiki Activity

Photo view count tweaks

Browse Source 
* 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.
This commit is contained in:
Noah Petherbridge 2024-09-26 20:32:04 -07:00
parent 9d6c299fdd
commit 7aa1d512fc
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pkg/models/photo.go
View File

@ -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) {

26
web/templates/photo/gallery.html
View File

@ -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);