From 9a817fe12f0d2faa69394cf4eeb3333f9cf4011d Mon Sep 17 00:00:00 2001
From: mrilyew <99399973+mrilyew@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:31:12 +0300
Subject: [PATCH] add gif play on click

---
 Web/Models/Entities/Document.php              |  5 ++++
 .../templates/Documents/components/image.xml  | 10 +++++--
 .../templates/components/attachment.xml       |  2 +-
 Web/static/css/main.css                       | 27 ++++++++++++++++---
 Web/static/js/al_docs.js                      |  4 +++
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/Web/Models/Entities/Document.php b/Web/Models/Entities/Document.php
index 93156720..54d647d3 100644
--- a/Web/Models/Entities/Document.php
+++ b/Web/Models/Entities/Document.php
@@ -166,6 +166,11 @@ class Document extends Media
         return in_array($this->getVKAPIType(), [3, 4]);
     }
 
+    function isGif(): bool
+    {
+        return $this->getVKAPIType() == 3;
+    }
+
     function isCopiedBy($user = NULL): bool
     {
         if(!$user)
diff --git a/Web/Presenters/templates/Documents/components/image.xml b/Web/Presenters/templates/Documents/components/image.xml
index 9ea2cf35..c5c39938 100644
--- a/Web/Presenters/templates/Documents/components/image.xml
+++ b/Web/Presenters/templates/Documents/components/image.xml
@@ -2,8 +2,14 @@
 {var $copied = !isset($club) ? $doc->isCopiedBy($thisUser) : $doc->isCopiedBy($club)}
 {var $modifiable = $doc->canBeModifiedBy($thisUser)}
 
-<a href="/doc{$doc->getPrettyId()}?key={$doc->getAccessKey()}" n:class="docMainItem, viewerOpener, docGalleryItem, $scroll_context ? scroll_node" data-id="{$doc->getPrettiestId()}">
-    <img loading="lazy" src="{$preview->getURLBySizeId('medium')}" alt="gallery photo">
+<a href="/doc{$doc->getPrettyId()}?key={$doc->getAccessKey()}" n:class="docMainItem, viewerOpener, docGalleryItem, $scroll_context ? scroll_node, $embed ? embeddable" data-id="{$doc->getPrettiestId()}">
+    <img class="docGalleryItem_main_preview" loading="lazy" src="{$preview->getURLBySizeId('medium')}" alt="gallery photo">
+    {if $embed}
+        <div class="play-button">
+            <div class="play-button-ico"></div>
+        </div>
+        <img class="docGalleryItem_gif_preview" loading="lazy" src="{$doc->getURL()}" alt="gif photo view">
+    {/if}
 
     <div class="doc_top_panel doc_shown_by_hover">
         <div class="doc_volume_action" n:if="!$modifiable" id="report_icon"></div>
diff --git a/Web/Presenters/templates/components/attachment.xml b/Web/Presenters/templates/components/attachment.xml
index bf03717f..4639fb01 100644
--- a/Web/Presenters/templates/components/attachment.xml
+++ b/Web/Presenters/templates/components/attachment.xml
@@ -78,7 +78,7 @@
             </div>
         </div>
         {if $attachment->isImage()}
-            {include "../Documents/components/image.xml", doc => $attachment, copyImportance => true, showInfo => true}
+            {include "../Documents/components/image.xml", doc => $attachment, copyImportance => true, showInfo => true, embed => $attachment->isGif()}
         {else}
             {include "../Documents/components/doc.xml", doc => $attachment, copyImportance => true, noTags => true}
         {/if}
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 6ede9f50..94381e14 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -2577,7 +2577,7 @@ a.poll-retract-vote {
     min-height: 63px;
 }
 
-.post-horizontal .upload-item .play-button, .compact_video .play-button {
+.post-horizontal .upload-item .play-button, .compact_video .play-button, .docGalleryItem .play-button {
     position: absolute;
     height: 30px;
     width: 30px;
@@ -2588,7 +2588,7 @@ a.poll-retract-vote {
     align-items: center;
 }
 
-.post-horizontal .upload-item .play-button .play-button-ico, .compact_video .play-button .play-button-ico {
+.post-horizontal .upload-item .play-button .play-button-ico, .compact_video .play-button .play-button-ico, .docGalleryItem .play-button .play-button-ico {
     background: url(/assets/packages/static/openvk/img/wall.png) no-repeat 1px 0;
     display: inline-block;
     height: 15px;
@@ -4038,6 +4038,25 @@ hr {
     /*width: 200px;*/
 }
 
+.attachments .docGalleryItem.embeddable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /*background: black;*/
+}
+
+.attachments .docGalleryItem.embeddable .docGalleryItem_gif_preview {
+    object-fit: contain;
+}
+
+.attachments .docGalleryItem.embeddable.playing .play-button, .attachments .docGalleryItem.embeddable.playing .doc_bottom_panel, .docGalleryItem .docGalleryItem_gif_preview, .attachments .docGalleryItem.embeddable.playing .docGalleryItem_main_preview {
+    display: none;
+}
+
+.attachments .docGalleryItem.embeddable.playing .docGalleryItem_gif_preview {
+    display: block;
+}
+
 .docGalleryItem img {
     width: 100%;
     height: 100%;
@@ -4223,8 +4242,8 @@ hr {
 
 .attachments .docGalleryItem {
     display: block;
-    min-width: 130px;
-    height: 150px;
+    min-width: 170px;
+    height: 170px;
     width: 50%;
     margin-bottom: 4px;
 }
diff --git a/Web/static/js/al_docs.js b/Web/static/js/al_docs.js
index d9eacd21..553cfd90 100644
--- a/Web/static/js/al_docs.js
+++ b/Web/static/js/al_docs.js
@@ -269,6 +269,10 @@ u(document).on("click", ".docListViewItem a.viewerOpener, a.docGalleryItem", asy
 
     const target = u(e.target)
     const link   = target.closest('a')
+    if(target.closest(".embeddable").length > 0) {
+        target.closest(".embeddable").toggleClass("playing")
+        return
+    }
 
     CMessageBox.toggleLoader()
     const url = link.nodes[0].href