Initial commit
This commit is contained in:
4
resources/views/vendor/wirechat/components/actions/close-modal.blade.php
vendored
Normal file
4
resources/views/vendor/wirechat/components/actions/close-modal.blade.php
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
<div onclick="Livewire.dispatch('closeWireChatModal')">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
11
resources/views/vendor/wirechat/components/actions/new-chat.blade.php
vendored
Normal file
11
resources/views/vendor/wirechat/components/actions/new-chat.blade.php
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
@props([
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
|
||||
<x-wirechat::actions.open-modal
|
||||
component="wirechat.new.chat"
|
||||
:widget="$widget"
|
||||
>
|
||||
{{$slot}}
|
||||
</x-wirechat::actions.open-modal>
|
||||
11
resources/views/vendor/wirechat/components/actions/new-group.blade.php
vendored
Normal file
11
resources/views/vendor/wirechat/components/actions/new-group.blade.php
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
@props([
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
|
||||
<x-wirechat::actions.open-modal
|
||||
component="wirechat.new.group"
|
||||
:widget="$widget"
|
||||
>
|
||||
{{$slot}}
|
||||
</x-wirechat::actions.open-modal>
|
||||
16
resources/views/vendor/wirechat/components/actions/open-chat-drawer.blade.php
vendored
Normal file
16
resources/views/vendor/wirechat/components/actions/open-chat-drawer.blade.php
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
@props([
|
||||
'component',
|
||||
'conversation' => null,
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
<div {{ $attributes }} onclick="Livewire.dispatch('openChatDrawer', {
|
||||
component: '{{ $component }}',
|
||||
arguments: {
|
||||
conversation: `{{$conversation ?? null }}`,
|
||||
widget: @js($widget)
|
||||
}
|
||||
})">
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
16
resources/views/vendor/wirechat/components/actions/open-modal.blade.php
vendored
Normal file
16
resources/views/vendor/wirechat/components/actions/open-modal.blade.php
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
@props([
|
||||
'component',
|
||||
'conversation' => null,
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
<div onclick="Livewire.dispatch('openWireChatModal', {
|
||||
component: '{{ $component }}',
|
||||
arguments: {
|
||||
conversation:`{{$conversation ?? null }}`,
|
||||
widget: @js($widget)
|
||||
}
|
||||
})">
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
14
resources/views/vendor/wirechat/components/actions/show-chat-info.blade.php
vendored
Normal file
14
resources/views/vendor/wirechat/components/actions/show-chat-info.blade.php
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
@props([
|
||||
'conversation' => null, //Should be conversation ID (Int)
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
|
||||
<x-wirechat::actions.open-chat-drawer
|
||||
component="wirechat.chat.info"
|
||||
dusk="show_chat_info"
|
||||
conversation="{{$conversation}}"
|
||||
:widget="$widget"
|
||||
>
|
||||
{{$slot}}
|
||||
</x-wirechat::actions.open-chat-drawer>
|
||||
14
resources/views/vendor/wirechat/components/actions/show-group-info.blade.php
vendored
Normal file
14
resources/views/vendor/wirechat/components/actions/show-group-info.blade.php
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
@props([
|
||||
'conversation' => null, //Should be conversation ID (Int)
|
||||
'widget' => false
|
||||
])
|
||||
|
||||
|
||||
<x-wirechat::actions.open-chat-drawer
|
||||
component="wirechat.chat.group.info"
|
||||
dusk="show_group_info"
|
||||
conversation="{{$conversation}}"
|
||||
:widget="$widget"
|
||||
>
|
||||
{{$slot}}
|
||||
</x-wirechat::actions.open-chat-drawer>
|
||||
67
resources/views/vendor/wirechat/components/avatar.blade.php
vendored
Normal file
67
resources/views/vendor/wirechat/components/avatar.blade.php
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
@props(['src' => null, 'story' => null, 'group' => false, 'disappearing' => false])
|
||||
<div
|
||||
{{ $attributes->merge([
|
||||
'class' => "shrink-0 inline-flex items-center justify-center relative transition outline outline-1 outline-offset-1 outline-gray-500
|
||||
overflow-visible rounded-full border border-[var(--wc-light-secondary)] text-gray-500 bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)]
|
||||
dark:border-[var(--wc-dark-secondary)] text-base ",
|
||||
])->class(
|
||||
$story ? 'bg-linear-to-r p-[2px] ring-2 ring-white from-purple-400 via-pink-500 to-red-500 rounded-full' : ' ',
|
||||
) }}>
|
||||
|
||||
|
||||
@if ($src)
|
||||
<img loading="lazy" @class([
|
||||
'shrink-0 w-full h-full object-cover object-center rounded-full',
|
||||
]) src="{{ $src }}" alt="" />
|
||||
@endif
|
||||
|
||||
@if (!$src && $group==true)
|
||||
{{-- <svg class="shrink-0 scale-90 w-full h-full rounded-full text-gray-300 bg-gray-100 dark:bg-gray-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
|
||||
</svg> --}}
|
||||
|
||||
{{-- <svg class="shrink-0 scale-95 w-full h-full rounded-full text-gray-300 bg-gray-100 dark:bg-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
|
||||
</svg> --}}
|
||||
|
||||
<svg class="shrink-0 p-px w-full h-full rounded-full text-gray-400 dark:text-gray-300 bg-gray-100 bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)]"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path
|
||||
d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z">
|
||||
</path>
|
||||
</svg>
|
||||
@elseif(!$src)
|
||||
<svg class="shrink-0 w-full h-full rounded-full" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
|
||||
{{-- <svg class="shrink-0 w-full h-full mt-auto rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
|
||||
</svg> --}}
|
||||
@endif
|
||||
|
||||
|
||||
|
||||
@if ($disappearing)
|
||||
<span dusk="disappearing_messages_icon"
|
||||
class="absolute z-50 -bottom-1 bg-white -right-2 dark:bg-gray-800 rounded-full p-px">
|
||||
<svg class="w-5 h-5" viewBox="0 0 36 36" height="36" width="36" preserveAspectRatio="xMidYMid meet"
|
||||
fill="none">
|
||||
<title>disappearing</title>
|
||||
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M18 31.5C18.0909 31.5 18.1817 31.4991 18.2722 31.4973C19.1005 31.4809 19.7586 30.7961 19.7422 29.9679C19.7258 29.1396 19.041 28.4815 18.2128 28.4979C18.142 28.4993 18.0711 28.5 18 28.5V31.5ZM18 7.5C18.0711 7.5 18.142 7.5007 18.2128 7.50211C19.041 7.51853 19.7258 6.86039 19.7422 6.03213C19.7586 5.20387 19.1005 4.51912 18.2722 4.5027C18.1817 4.5009 18.0909 4.5 18 4.5V7.5ZM24.5153 6.17374C23.7901 5.77341 22.8776 6.03683 22.4772 6.76211C22.0769 7.48739 22.3403 8.39988 23.0656 8.8002C23.1891 8.86838 23.3111 8.93898 23.4316 9.01195C24.1401 9.44118 25.0625 9.21475 25.4917 8.5062C25.921 7.79765 25.6945 6.87529 24.986 6.44605C24.8311 6.35223 24.6742 6.26144 24.5153 6.17374ZM29.554 11.014C29.1247 10.3055 28.2024 10.079 27.4938 10.5083C26.7852 10.9375 26.5588 11.8599 26.9881 12.5684C27.061 12.6889 27.1316 12.8109 27.1998 12.9344C27.6001 13.6597 28.5126 13.9231 29.2379 13.5228C29.9632 13.1224 30.2266 12.2099 29.8263 11.4847C29.7386 11.3258 29.6478 11.1689 29.554 11.014ZM31.4973 17.7278C31.4809 16.8995 30.7961 16.2414 29.9679 16.2578C29.1396 16.2742 28.4815 16.959 28.4979 17.7872C28.4993 17.858 28.5 17.9289 28.5 18C28.5 18.0711 28.4993 18.142 28.4979 18.2128C28.4815 19.041 29.1396 19.7258 29.9679 19.7422C30.7961 19.7586 31.4809 19.1005 31.4973 18.2722C31.4991 18.1817 31.5 18.0909 31.5 18C31.5 17.9091 31.4991 17.8183 31.4973 17.7278ZM29.8263 24.5153C30.2266 23.7901 29.9632 22.8776 29.2379 22.4772C28.5126 22.0769 27.6001 22.3403 27.1998 23.0656C27.1316 23.1891 27.061 23.3111 26.9881 23.4316C26.5588 24.1401 26.7852 25.0625 27.4938 25.4917C28.2024 25.921 29.1247 25.6945 29.554 24.986C29.6478 24.8311 29.7386 24.6742 29.8263 24.5153ZM24.986 29.554C25.6945 29.1247 25.921 28.2024 25.4917 27.4938C25.0625 26.7852 24.1401 26.5588 23.4316 26.9881C23.3111 27.061 23.1891 27.1316 23.0656 27.1998C22.3403 27.6001 22.0769 28.5126 22.4772 29.2379C22.8776 29.9632 23.7901 30.2266 24.5153 29.8263C24.6742 29.7386 24.8311 29.6478 24.986 29.554Z">
|
||||
</path>
|
||||
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M18.0001 4.5C18 4.5 17.9999 4.5 17.9998 4.5C10.5439 4.5 4.49976 10.5442 4.49976 18C4.49976 25.4558 10.5439 31.5 17.9998 31.5C17.9999 31.5 18 31.5 18.0001 31.5V28.5C18 28.5 17.9999 28.5 17.9998 28.5C12.2008 28.5 7.49976 23.799 7.49976 18C7.49976 12.201 12.2008 7.5 17.9998 7.5C17.9999 7.5 18 7.5 18.0001 7.5V4.5Z">
|
||||
</path>
|
||||
<path fill="currentColor"
|
||||
d="M23.3247 12.0107C23.669 11.7525 24.1507 11.7867 24.455 12.091V12.091C24.7593 12.3953 24.7935 12.877 24.5353 13.2213L19.9714 19.3066C19.2589 20.2566 17.8701 20.3553 17.0304 19.5156V19.5156C16.1907 18.6759 16.2894 17.2871 17.2394 16.5746L23.3247 12.0107Z">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
4
resources/views/vendor/wirechat/components/divider.blade.php
vendored
Normal file
4
resources/views/vendor/wirechat/components/divider.blade.php
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
<div
|
||||
{{$attributes->merge([ 'class'=>"w-full h-2 shadow-xs bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] "])}} >
|
||||
|
||||
</div>
|
||||
1
resources/views/vendor/wirechat/components/dropdown-button.blade.php
vendored
Normal file
1
resources/views/vendor/wirechat/components/dropdown-button.blade.php
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<div {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-[var(--wc-light-primary)] dark:hover:bg-[var(--wc-dark-primary)] focus:outline-hidden focus:bg-[var(--wc-light-primary)] dark:focus:bg-[var(--wc-dark-primary)] transition duration-150 ease-in-out']) }}>{{ $slot }}</div>
|
||||
1
resources/views/vendor/wirechat/components/dropdown-link.blade.php
vendored
Normal file
1
resources/views/vendor/wirechat/components/dropdown-link.blade.php
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<a {{ $attributes->merge(['class' => 'block w-full cursor-pointer px-4 py-3 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] hover:bg-[var(--wc-light-primary)] dark:hover:bg-[var(--wc-dark-primary)] focus:outline-hidden focus:bg-[var(--wc-light-primary)] dark:focus:bg-[var(--wc-dark-primary)] transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
|
||||
46
resources/views/vendor/wirechat/components/dropdown.blade.php
vendored
Normal file
46
resources/views/vendor/wirechat/components/dropdown.blade.php
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
@props(['align' => 'right', 'width' => '48', 'contentClasses' => ''])
|
||||
|
||||
@php
|
||||
switch ($align) {
|
||||
case 'left':
|
||||
$alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
|
||||
break;
|
||||
case 'top':
|
||||
$alignmentClasses = 'origin-top';
|
||||
break;
|
||||
case 'right':
|
||||
default:
|
||||
$alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
|
||||
break;
|
||||
}
|
||||
|
||||
switch ($width) {
|
||||
case '48':
|
||||
$width = 'w-48';
|
||||
break;
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div x-ref="button" class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
||||
<div @click="open = ! open">
|
||||
{{ $trigger }}
|
||||
</div>
|
||||
|
||||
<div x-show="open"
|
||||
x-anchor="$refs.button"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
|
||||
{{-- class="absolute z-50 mt-2 shadow-lg {{ $alignmentClasses }}" --}}
|
||||
{{$attributes->merge(['class'=>"rounded-lg absolute z-50 mt-2 shadow-lg w-48 bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] rounded-md border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)] shadow-sm overflow-hidden"])}}
|
||||
style="display: none;"
|
||||
@click="open = false">
|
||||
<div>
|
||||
{{ $content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
16
resources/views/vendor/wirechat/components/loading-spin.blade.php
vendored
Normal file
16
resources/views/vendor/wirechat/components/loading-spin.blade.php
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
|
||||
@use('Namu\WireChat\Facades\WireChat')
|
||||
{{-- Define previous message outside the loop --}}
|
||||
<div class="w-full flex items-center ">
|
||||
<span {{$attributes->merge([ 'class'=>"mx-auto w-5 h-5 "])}} >
|
||||
<svg aria-hidden="true" class="w-full h-full text-gray-200 animate-spin dark:text-gray-600 "
|
||||
viewBox="0 0 100 101" fill="var(--wc-brand-primary)" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
133
resources/views/vendor/wirechat/components/notification.blade.php
vendored
Normal file
133
resources/views/vendor/wirechat/components/notification.blade.php
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
|
||||
@use('Namu\WireChat\Facades\WireChat')
|
||||
|
||||
@php
|
||||
$activeGuard = session('active_guard', 'web');
|
||||
$authUser = Auth::guard($activeGuard)->user();
|
||||
@endphp
|
||||
|
||||
@if($authUser && WireChat::notificationsEnabled())
|
||||
|
||||
<div dusk="notification_manager"
|
||||
x-data="{
|
||||
showNotification(e) {
|
||||
const message = e.message;
|
||||
const redirect_url = e.redirect_url;
|
||||
|
||||
if (Notification.permission !== 'granted') {
|
||||
return;
|
||||
}
|
||||
|
||||
let title = message.sendable?.display_name || 'User';
|
||||
let body = message.body;
|
||||
let icon = message.sendable?.cover_url;
|
||||
|
||||
if (message.conversation.type == 'group') {
|
||||
title = message.conversation?.group?.name;
|
||||
body = message.sendable?.display_name + ': ' + message.body;
|
||||
icon = message.conversation?.group?.cover_url;
|
||||
}
|
||||
|
||||
const options = {
|
||||
body: body,
|
||||
icon: icon,
|
||||
vibrate: [200, 100, 200],
|
||||
tag: 'wirechat-notification-' + message.conversation_id,
|
||||
renotify: true,
|
||||
data: {
|
||||
url: redirect_url,
|
||||
type: 'SHOW_NOTIFICATION',
|
||||
tag: 'wirechat-notification-' + message.conversation_id
|
||||
}
|
||||
};
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready
|
||||
.then((registration )=> {
|
||||
// Service worker is fully ready
|
||||
registration.active.postMessage({
|
||||
type: 'SHOW_NOTIFICATION',
|
||||
title: title,
|
||||
options: options
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
// Fallback to regular notifications
|
||||
this.newNotification(title, options);
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
this.newNotification(title, options);
|
||||
}
|
||||
},
|
||||
|
||||
newNotification(title,options){
|
||||
|
||||
|
||||
const notification= new Notification(title, options);
|
||||
|
||||
notification.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
const convId = message.conversation_id || 'default';
|
||||
const windowName = 'wirechat-conversation';
|
||||
const url = event.currentTarget.data.url;
|
||||
const openedWindow = window.open(url, windowName);
|
||||
if (openedWindow) {
|
||||
openedWindow.focus();
|
||||
}
|
||||
//Close current notification
|
||||
event.currentTarget.close();
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
registerServiceWorker() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register(`{{asset(config('wirechat.notifcations.main_sw_script','sw.js'))}}`)
|
||||
.then(reg => {})
|
||||
.catch(err => {});
|
||||
}
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
registerServiceWorker();
|
||||
|
||||
userId = @js($authUser->id);
|
||||
encodedType = @js(\Namu\WireChat\Helpers\MorphClassResolver::encode($authUser->getMorphClass()));
|
||||
|
||||
{{-- We listen to notify participant event --}}
|
||||
Echo.private(`participant.${encodedType}.${userId}`)
|
||||
.listen('.Namu\\WireChat\\Events\\NotifyParticipant', (e) => {
|
||||
|
||||
{{--Ignore if user is currently open in the chat --}}
|
||||
if (e.redirect_url !== window.location.href) {
|
||||
if (!('Notification' in window)) {
|
||||
} else if (Notification.permission === 'granted') {
|
||||
showNotification(e);
|
||||
} else if (Notification.permission !== 'denied') {
|
||||
Notification.requestPermission().then(permission => {
|
||||
if (permission === 'granted') {
|
||||
showNotification(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('chat-opened', (event) => {
|
||||
const conversation = event.detail.conversation;
|
||||
const tag = 'wirechat-notification-' + conversation;
|
||||
|
||||
if (navigator.serviceWorker.controller) {
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
type: 'CLOSE_NOTIFICATION',
|
||||
tag: tag
|
||||
});
|
||||
}
|
||||
});
|
||||
">
|
||||
</div>
|
||||
|
||||
|
||||
@endif
|
||||
67
resources/views/vendor/wirechat/components/placeholders/chat.blade.php
vendored
Normal file
67
resources/views/vendor/wirechat/components/placeholders/chat.blade.php
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
|
||||
|
||||
<div class="h-[calc(100vh)] flex flex-col bg-white dark:bg-gray-900 h-full">
|
||||
<header class="w-full bg-gray-50 dark:bg-gray-900 animate-pulse h-16 sticky gap-5 inset-x-0 items-center flex p-5 top-0 z-10 border-gray-100 dark:border-gray-700 border-b">
|
||||
|
||||
<div class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9 animate-pulse ">
|
||||
|
||||
</div>
|
||||
<div class="bg-gray-100 dark:bg-slate-800/40 h-4 w-72 animate-pulse rounded-xl">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-2 ml-auto animate-pulse ">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class=" bg-white dark:bg-gray-900 flex flex-col animate-pulse grow h-10/12 h-full">
|
||||
|
||||
<div class="bg-gray-100 dark:bg-slate-800/40 h-9 w-48 mt-12 mx-auto animate-pulse rounded-xl">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="m-auto">
|
||||
|
||||
{{-- Snipper --}}
|
||||
<span
|
||||
style="
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 10px solid;
|
||||
border-color: rgba(230, 228, 228, 0.063) rgba(237, 235, 235, 0.094) rgba(255, 255, 255, 0.104) rgba(255, 255, 255, 0.23);
|
||||
box-sizing: border-box;
|
||||
"
|
||||
class=" animate-spin ">
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Loading spinner... -->
|
||||
<foooter class=" sticky bottom-0 w-full h-16 flex items-center gap-3 p-4 dark:bg-gray-900 bg-gray-50 h-10 animate-pulse border-t dark:border-gray-700">
|
||||
<span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9 animate-pulse ">
|
||||
|
||||
</span>
|
||||
|
||||
<span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-7 animate-pulse ">
|
||||
|
||||
</span>
|
||||
|
||||
|
||||
<div class="bg-gray-100 dark:bg-slate-800/40 h-8 w-11/12 animate-pulse rounded-xl">
|
||||
|
||||
</div>
|
||||
|
||||
<span class="rounded-full bg-gray-100 dark:bg-slate-800/40 h-9 w-9 animate-pulse ">
|
||||
|
||||
</span>
|
||||
|
||||
|
||||
</foooter>
|
||||
</div>
|
||||
76
resources/views/vendor/wirechat/components/popover.blade.php
vendored
Normal file
76
resources/views/vendor/wirechat/components/popover.blade.php
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
|
||||
@props([
|
||||
'position'=>'bottom',
|
||||
'popoverOffset'=>'20'
|
||||
|
||||
]
|
||||
)
|
||||
<div x-data="{
|
||||
popoverOpen: false,
|
||||
popoverArrow: false,
|
||||
popoverPosition: 'top',
|
||||
popoverHeight: 0,
|
||||
popoverOffset: 40,
|
||||
popoverHeightCalculate() {
|
||||
this.$refs.popover.classList.add('invisible');
|
||||
this.popoverOpen=true;
|
||||
let that=this;
|
||||
$nextTick(function(){
|
||||
that.popoverHeight = that.$refs.popover.offsetHeight;
|
||||
that.popoverOpen=false;
|
||||
that.$refs.popover.classList.remove('invisible');
|
||||
that.$refs.popoverInner.setAttribute('x-transition', '');
|
||||
that.popoverPositionCalculate();
|
||||
});
|
||||
},
|
||||
popoverPositionCalculate(){
|
||||
if(window.innerHeight < (this.$refs.popoverButton.getBoundingClientRect().top + this.$refs.popoverButton.offsetHeight + this.popoverOffset + this.popoverHeight)){
|
||||
this.popoverPosition = 'top';
|
||||
} else {
|
||||
this.popoverPosition = 'bottom';
|
||||
}
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
that = this;
|
||||
window.addEventListener('resize', function(){
|
||||
popoverPositionCalculate();
|
||||
});
|
||||
$watch('popoverOpen', function(value){
|
||||
if(value){
|
||||
popoverPositionCalculate();
|
||||
let el = document.getElementById('width');
|
||||
if(el){
|
||||
el.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
"
|
||||
class="relative overflow-visible">
|
||||
|
||||
<button {{$trigger->attributes->class(["flex items-center cursor-pointer hover:scale-105 transition-transform justify-center disabled:cursor-progress"] )}} type="button" x-ref="popoverButton" @click="popoverOpen=!popoverOpen">
|
||||
{{$trigger}}
|
||||
</button>
|
||||
|
||||
<div x-ref="popover"
|
||||
x-anchor.offset.17="$refs.popoverButton"
|
||||
x-show="popoverOpen"
|
||||
|
||||
x-init="setTimeout(function(){ popoverHeightCalculate(); }, 100);"
|
||||
@click.away="popoverOpen=false;"
|
||||
@keydown.escape.window="popoverOpen=false"
|
||||
class=" min-w-[13rem] max-w-fit "
|
||||
x-cloak
|
||||
@click="popoverOpen=false" >
|
||||
<div
|
||||
|
||||
|
||||
x-ref="popoverInner" x-show="popoverOpen" class="w-full p-2 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-secondary)] border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-primary)] rounded-lg shadow-sm ">
|
||||
<div x-show="popoverArrow && popoverPosition == 'bottom'" class="absolute top-0 inline-block w-5 mt-px overflow-hidden -translate-x-2 -translate-y-2.5 left-1/2"><div class="w-2.5 h-2.5 origin-bottom-left transform rotate-45 bg-white border-t border-l rounded-xs"></div></div>
|
||||
<div x-show="popoverArrow && popoverPosition == 'top'" class="absolute bottom-0 inline-block w-5 mb-px overflow-hidden -translate-x-2 translate-y-2.5 left-1/2"><div class="w-2.5 h-2.5 origin-top-left transform -rotate-45 bg-white border-b border-l rounded-xs"></div></div>
|
||||
<div class="grid gap-4">
|
||||
{{$slot}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
83
resources/views/vendor/wirechat/components/toast.blade.php
vendored
Normal file
83
resources/views/vendor/wirechat/components/toast.blade.php
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
|
||||
|
||||
<div x-data="{
|
||||
bannerVisible: false,
|
||||
type:'default',
|
||||
message:' ',
|
||||
bannerVisibleAfter: 300,
|
||||
counter: 3000,
|
||||
timer: null,
|
||||
closeToast:function(){
|
||||
|
||||
this.bannerVisible = false;
|
||||
clearInterval(this.timer);
|
||||
|
||||
}
|
||||
}"
|
||||
|
||||
@wirechat-toast.window="
|
||||
message = $event.detail.message;
|
||||
type = $event.detail.type;
|
||||
bannerVisible = true;
|
||||
counter = 3000;
|
||||
if (timer) clearInterval(timer);
|
||||
timer = setInterval(() => {
|
||||
if (counter <= 0) {
|
||||
bannerVisible = false;
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
counter -= 100;
|
||||
}
|
||||
}, 100);
|
||||
"
|
||||
@mouseenter="clearInterval(timer)"
|
||||
@mouseleave="
|
||||
timer = setInterval(() => {
|
||||
if (counter <= 0) {
|
||||
bannerVisible = false;
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
counter -= 100;
|
||||
}
|
||||
}, 100);
|
||||
"
|
||||
x-show="bannerVisible"
|
||||
x-transition:enter="transition ease-out duration-500"
|
||||
x-transition:enter-start="-translate-y-10"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-10"
|
||||
|
||||
|
||||
class="fixed sm:top-2 top-0 z-50 inset-x-0 sm:max-w-md mx-auto sm:ml-auto sm:mx-0 w-full h-auto py-2.5 duration-300 ease-out bg-white shadow-md sm:border rounded-md " x-cloak>
|
||||
<div class="flex items-center justify-between w-full h-full px-3 mx-auto max-w-7xl ">
|
||||
<div class="flex items-center gap-3 w-full h-full ">
|
||||
|
||||
<span x-show="type=='warning'" x-cloak>
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" >
|
||||
<path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span x-show="type=='danger'" x-cloak>
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-rose-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
|
||||
<span x-show="type=='success'" x-cloak>
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" >
|
||||
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<p class="text-xs text-black " x-text="message"></p>
|
||||
</div>
|
||||
|
||||
<button @click="closeToast()" class="flex items-center shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-black rounded-full hover:bg-neutral-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
73
resources/views/vendor/wirechat/components/video.blade.php
vendored
Normal file
73
resources/views/vendor/wirechat/components/video.blade.php
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
@props([
|
||||
'source'=>null,
|
||||
'controls'=>true,
|
||||
'cover'=>true,
|
||||
'height'=>"auto",
|
||||
'showToggleSound'=>true,
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
|
||||
<div x-data="{playing:false,muted:false}"
|
||||
class="relative "
|
||||
@click.outside="$refs.player.pause()"
|
||||
x-intersect:leave="$refs.player.pause()">
|
||||
|
||||
|
||||
<video x-ref="player" src="{{$source}}" @play="playing=true" @pause="playing=false"
|
||||
class=" w-auto dark:bg-gray-600 border rounded-xl border-gray-50 dark:border-gray-700 rounded-xl {{$cover==true?'object-cover':''}} {{$height}}">
|
||||
your browser does not support html5 video
|
||||
</video>
|
||||
|
||||
@if ($controls==true)
|
||||
|
||||
|
||||
{{-- play --}}
|
||||
|
||||
<div x-cloak x-show="!playing" @click="$refs.player.play()" class="absolute z-10 inset-0 flex items-center justify-center w-full h-full cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill w-16 h-16 text-white" viewBox="0 0 16 16">
|
||||
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{{-- pause button --}}
|
||||
<div x-show="playing" @click="$refs.player.pause()" class="absolute z-10 inset-0 flex items-center justify-center w-full h-full cursor-pointer">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill w-16 h-16 text-white invisible" viewBox="0 0 16 16">
|
||||
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{{-- mute --}}
|
||||
|
||||
@if ($showToggleSound==true)
|
||||
<div class="absolute z-100 bottom-2 right-2 m-4 bg-gray-900 text-white rounded-lg p-1 cursor-pointer">
|
||||
|
||||
{{-- mute --}}
|
||||
|
||||
<svg x-cloak x-show="!muted" @click="$refs.player.muted=true;muted=true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-mute-fill w-h w-4" viewBox="0 0 16 16">
|
||||
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<svg x-show="muted" @click="$refs.player.muted=false;muted=false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-off-fill w-4 h-4" viewBox="0 0 16 16">
|
||||
<path d="M10.717 3.55A.5.5 0 0 1 11 4v8a.5.5 0 0 1-.812.39L7.825 10.5H5.5A.5.5 0 0 1 5 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
{{-- unmute --}}
|
||||
|
||||
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user