Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2025-01-22 15:54:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

add gif play on click

Browse source
This commit is contained in:
mrilyew 2025-01-16 23:31:12 +03:00
parent a5aa09d554
commit 9a817fe12f
5 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Web/Models/Entities/Document.php
View file

@ -166,6 +166,11 @@ class Document extends Media
return in_array($this->getVKAPIType(), [3, 4]); return in_array($this->getVKAPIType(), [3, 4]);
} }
function isGif(): bool
{
return $this->getVKAPIType() == 3;
}
function isCopiedBy($user = NULL): bool function isCopiedBy($user = NULL): bool
{ {
if(!$user) if(!$user)

10
Web/Presenters/templates/Documents/components/image.xml
View file

@ -2,8 +2,14 @@
{var $copied = !isset($club) ? $doc->isCopiedBy($thisUser) : $doc->isCopiedBy($club)} {var $copied = !isset($club) ? $doc->isCopiedBy($thisUser) : $doc->isCopiedBy($club)}
{var $modifiable = $doc->canBeModifiedBy($thisUser)} {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()}"> <a href="/doc{$doc->getPrettyId()}?key={$doc->getAccessKey()}" n:class="docMainItem, viewerOpener, docGalleryItem, $scroll_context ? scroll_node, $embed ? embeddable" data-id="{$doc->getPrettiestId()}">
<img loading="lazy" src="{$preview->getURLBySizeId('medium')}" alt="gallery photo"> <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_top_panel doc_shown_by_hover">
<div class="doc_volume_action" n:if="!$modifiable" id="report_icon"></div> <div class="doc_volume_action" n:if="!$modifiable" id="report_icon"></div>

2
Web/Presenters/templates/components/attachment.xml
View file

@ -78,7 +78,7 @@
</div> </div>
</div> </div>
{if $attachment->isImage()} {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} {else}
{include "../Documents/components/doc.xml", doc => $attachment, copyImportance => true, noTags => true} {include "../Documents/components/doc.xml", doc => $attachment, copyImportance => true, noTags => true}
{/if} {/if}

27
Web/static/css/main.css
View file

@ -2577,7 +2577,7 @@ a.poll-retract-vote {
min-height: 63px; 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; position: absolute;
height: 30px; height: 30px;
width: 30px; width: 30px;
@ -2588,7 +2588,7 @@ a.poll-retract-vote {
align-items: center; 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; background: url(/assets/packages/static/openvk/img/wall.png) no-repeat 1px 0;
display: inline-block; display: inline-block;
height: 15px; height: 15px;
@ -4038,6 +4038,25 @@ hr {
/*width: 200px;*/ /*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 { .docGalleryItem img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -4223,8 +4242,8 @@ hr {
.attachments .docGalleryItem { .attachments .docGalleryItem {
display: block; display: block;
min-width: 130px; min-width: 170px;
height: 150px; height: 170px;
width: 50%; width: 50%;
margin-bottom: 4px; margin-bottom: 4px;
} }

4
Web/static/js/al_docs.js
View file

@ -269,6 +269,10 @@ u(document).on("click", ".docListViewItem a.viewerOpener, a.docGalleryItem", asy
const target = u(e.target) const target = u(e.target)
const link = target.closest('a') const link = target.closest('a')
if(target.closest(".embeddable").length > 0) {
target.closest(".embeddable").toggleClass("playing")
return
}
CMessageBox.toggleLoader() CMessageBox.toggleLoader()
const url = link.nodes[0].href const url = link.nodes[0].href