85 lines
4.7 KiB
PHP
85 lines
4.7 KiB
PHP
|
|
|
|
|
|
@php
|
|
|
|
$isSameAsNext = ($message?->sendable_id === $nextMessage?->sendable_id) && ($message?->sendable_type === $nextMessage?->sendable_type);
|
|
$isNotSameAsNext = !$isSameAsNext;
|
|
$isSameAsPrevious = ($message?->sendable_id === $previousMessage?->sendable_id) && ($message?->sendable_type === $previousMessage?->sendable_type);
|
|
$isNotSameAsPrevious = !$isSameAsPrevious;
|
|
@endphp
|
|
|
|
|
|
|
|
@php
|
|
$isQr = str_starts_with($attachment?->mime_type ?? '', 'image/svg');
|
|
$appUrl = rtrim(config('app.url'), '/');
|
|
$msgBody = trim($message?->body ?? '');
|
|
$transactionLinkPattern = '#^' . preg_quote($appUrl, '#') . '/[a-z]{2}/[a-z\-]+/(\d+)$#';
|
|
$isTransactionBody = $isQr && preg_match($transactionLinkPattern, $msgBody, $qrMatches);
|
|
$transactionLinkId = $isTransactionBody ? $qrMatches[1] : null;
|
|
$attachmentUrl = $attachment ? route('wirechat.attachment.serve', $attachment) : null;
|
|
@endphp
|
|
<div x-data="{ open: false }" class="inline-block">
|
|
@if ($isQr)
|
|
<div @class([
|
|
'bg-white p-3 overflow-hidden rounded-xl',
|
|
'rounded-br-md rounded-tr-2xl' => ($isSameAsNext && $isNotSameAsPrevious && $belongsToAuth),
|
|
'rounded-r-md' => ($isSameAsPrevious && $belongsToAuth),
|
|
'rounded-br-xl rounded-r-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && $belongsToAuth),
|
|
'rounded-br-2xl' => ($isNotSameAsNext && $belongsToAuth),
|
|
'rounded-bl-md rounded-tl-2xl' => ($isSameAsNext && $isNotSameAsPrevious && !$belongsToAuth),
|
|
'rounded-l-md' => ($isSameAsPrevious && !$belongsToAuth),
|
|
'rounded-bl-xl rounded-l-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && !$belongsToAuth),
|
|
'rounded-bl-2xl' => ($isNotSameAsNext && !$belongsToAuth),
|
|
])>
|
|
<div class="flex flex-col items-center">
|
|
<img loading="lazy" src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
|
|
class="h-[100px] w-[100px] object-contain rounded-none cursor-pointer" @click="open = true">
|
|
@if ($isTransactionBody)
|
|
<a href="{{ $msgBody }}" class="text-center text-base text-gray-700 underline px-4 pt-3 pb-1 hover:text-theme-brand transition-colors">
|
|
{{ __('View transaction') }} #{{ $transactionLinkId }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@else
|
|
<img @class([
|
|
'max-w-max h-[200px] min-h-[210px] bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] object-scale-down grow-0 shrink overflow-hidden rounded-3xl cursor-pointer',
|
|
'rounded-br-md rounded-tr-2xl' => ($isSameAsNext && $isNotSameAsPrevious && $belongsToAuth),
|
|
'rounded-r-md' => ($isSameAsPrevious && $belongsToAuth),
|
|
'rounded-br-xl rounded-r-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && $belongsToAuth),
|
|
'rounded-br-2xl' => ($isNotSameAsNext && $belongsToAuth),
|
|
'rounded-bl-md rounded-tl-2xl' => ($isSameAsNext && $isNotSameAsPrevious && !$belongsToAuth),
|
|
'rounded-l-md' => ($isSameAsPrevious && !$belongsToAuth),
|
|
'rounded-bl-xl rounded-l-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && !$belongsToAuth),
|
|
'rounded-bl-2xl' => ($isNotSameAsNext && !$belongsToAuth),
|
|
])
|
|
loading="lazy" src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
|
|
@click="open = true">
|
|
@endif
|
|
|
|
{{-- Fullscreen lightbox --}}
|
|
<template x-teleport="body">
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-[9999] flex items-center justify-center cursor-zoom-out {{ $isQr ? 'bg-white' : 'bg-black' }}"
|
|
style="display: none;">
|
|
@if ($isQr)
|
|
<img src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
|
|
class="max-h-screen max-w-screen w-full h-full object-contain select-none p-8">
|
|
@else
|
|
<img src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
|
|
class="max-h-screen max-w-screen object-contain select-none">
|
|
@endif
|
|
</div>
|
|
</template>
|
|
</div>
|