Add support of several simultanous Muji invites in MUC chatrooms

7 months ago · ab8aba19b2
11 changed files with 152 additions and 37 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -17,6 +17,7 @@ v0.30 (master)
 * Redesign and unify the emojis picker view
 * Add support for the Unicode 15.1 emojis release through Twemoji 15.1
 * Add Stories status on the avatars
+* Add support of several simultanous Muji invites in MUC chatrooms

 v0.29.2
 ---------------------------
--- a/app/Conference.php
+++ b/app/Conference.php
@ -238,9 +238,11 @@ class Conference extends Model
        return false;
    }

-    public function isInCall(): bool
+    public function currentMuji(): ?MujiCall
    {
-        return CurrentCall::getInstance()->isJidInCall($this->conference);
+        return $this->mujiCalls->filter(
+            function ($muji) { return $muji->joined; }
+        )->first();
    }

    public function toArray()
--- a/app/MujiCall.php
+++ b/app/MujiCall.php
@ -3,6 +3,7 @@
 namespace App;

 use Awobaz\Compoships\Database\Eloquent\Model;
+use Movim\CurrentCall;

 class MujiCall extends Model
 {
@ -49,6 +50,19 @@ class MujiCall extends Model
            ->where('session_id', $this->session_id);
    }

+    public function inviter()
+    {
+        return $this->hasOne('App\MujiCallParticipant', 'muji_call_id', 'id')
+            ->where('inviter', true)
+            ->where('session_id', $this->session_id);
+    }
+
+    public function getJoinedAttribute(): bool
+    {
+        return CurrentCall::getInstance()->isJidInCall($this->jidfrom)
+            && CurrentCall::getInstance()->mujiRoom == $this->muc;
+    }
+
    public function getIconAttribute()
    {
        return $this->video ? 'videocam' : 'call';
--- a/app/MujiCallParticipant.php
+++ b/app/MujiCallParticipant.php
@ -27,6 +27,11 @@ class MujiCallParticipant extends Model
        ->where('session_id', $this->session_id);
    }

+    public function getNameAttribute()
+    {
+        return explodeJid($this->jid)['resource'];
+    }
+
    public function getConferencePictureAttribute(): string
    {
        return Image::getOrCreate($this->jid, 120) ?? avatarPlaceholder($this->jid . 'groupchat');
--- a/app/Widgets/Chat/_chat_header.tpl
+++ b/app/Widgets/Chat/_chat_header.tpl
@ -60,15 +60,27 @@

            <div>
                {if="$conference->mujiCalls->isNotEmpty()"}
-                    {$muji = $conference->mujiCalls->first()}
-                    {if="!$contactincall"}
-                        <button class="button oppose color blue {if="$incall"}disabled{/if}" onclick="Visio_ajaxJoinMuji('{$muji->id}', {if="$muji->video"}true{else}false{/if});">
-                            <i class="material-symbols {if="!$incall"}blink{/if}">{$muji->icon}</i>
-                        </button>
-                    {else}
-                        <button class="button oppose color red" onclick="Visio_ajaxLeaveMuji('{$muji->id}')">
+                    {if="$muji = $conference->currentMuji()"}
+                        <button class="button oppose color red"
+                                onclick="Visio_ajaxLeaveMuji('{$muji->id}')">
                            <i class="material-symbols">{$muji->icon}</i>
                        </button>
+                    {else}
+                        {if="$conference->mujiCalls->count() > 1"}
+                            <button class="button oppose color blue {if="$incall"}disabled{/if}"
+                                    onclick="Visio_ajaxChooseMuji('{$conference->conference}')">
+                                {$conference->mujiCalls->count()}
+                                <i class="material-symbols blink">call</i>
+                            </button>
+                        {else}
+                            {$muji = $conference->mujiCalls->first()}
+                            <button class="button oppose color blue {if="$incall"}disabled{/if}"
+                                    onclick="Visio_ajaxJoinMuji('{$muji->id}', {if="$muji->video"}true{else}false{/if});">
+                                <i class="material-symbols {if="$muji->joined"}blink{/if}">
+                                    {$muji->icon}
+                                </i>
+                            </button>
+                        {/if}
                    {/if}
                {/if}
                <p class="line active" title="{$jid|echapJS}" onclick="RoomsUtils_ajaxGetDrawer('{$jid|echapJS}')">
@ -110,21 +122,38 @@

                <p class="compose first line" id="{$jid|cleanupId}-state"></p>
                <p class="line active">
-                    {if="$conference->mujiCalls->isNotEmpty()"}
-                        <i class="material-symbols icon {if="$conference->isInCall()"}green{else}blue{/if} blink">
-                            {$conference->mujiCalls->first()->icon}
-                        </i>
-                        {if="$conference->isInCall()"}
-                            {$conference->mujiCalls->first()->presences->count()}
-                        {else}
-                            {$conference->mujiCalls->first()->participants->count()}
-                        {/if}
-                        <i class="material-symbols">people</i>
-                        —
-                        {$c->__('visio.in_call')}
-                        •
-                    {/if}
                    {if="$conference"}
+                        {if="$muji = $conference->currentMuji()"}
+                            <i class="material-symbols icon green blink">{$muji->icon}</i>
+                            {$c->__('visio.joined_call')}
+                            <span class="second">
+                                {$muji->created_at|prepareDate:true,true}
+                                •
+                                {$c->__('visio.by', $muji->inviter->name)}
+                                •
+                                {$muji->presences->count()}
+                                <i class="material-symbols">people</i>
+                            </span>
+                            •
+                        {elseif="$conference->mujiCalls->count() > 0"}
+                            {if="$conference->mujiCalls->count() == 1"}
+                                {$muji = $conference->mujiCalls->first()}
+                                <i class="material-symbols icon blue blink">{$muji->icon}</i>
+                                {$c->__('visio.in_call')}
+                                <span class="second">
+                                    {$muji->created_at|prepareDate:true,true}
+                                    •
+                                    {$c->__('visio.by', $muji->inviter->name)}
+                                    •
+                                    {$muji->participants->count()}
+                                    <i class="material-symbols">people</i>
+                                </span>
+                            {else}
+                                <i class="material-symbols icon blue blink">call</i>
+                                {$c->__('visio.in_call')}
+                            {/if}
+                            •
+                        {/if}
                        {if="!$conference->connected"}
                            {$c->__('button.connecting')}…
                        {elseif="$conference->connected && $conference->isGroupChat()"}
--- a/app/Widgets/Rooms/_rooms_room.tpl
+++ b/app/Widgets/Rooms/_rooms_room.tpl
@ -63,21 +63,27 @@
            </span>
        </p>

-        {if="$conference->mujiCalls->isNotEmpty()"}
-            <p data-mujiid="{$conference->mujiCalls->first()->id}">
-                <i class="material-symbols icon {if="$conference->isInCall()"}green{else}blue{/if} blink">
-                    {$conference->mujiCalls->first()->icon}
+        {loop="$conference->mujiCalls"}
+            <p data-mujiid="{$value->id}">
+                <i class="material-symbols icon {if="$value->joined"}green blink{else}blue{/if}">
+                    {$value->icon}
                </i>
-                {if="$conference->isInCall()"}
-                    {$conference->mujiCalls->first()->presences->count()}
-                {else}
-                    {$conference->mujiCalls->first()->participants->count()}
-                {/if}
-                <i class="material-symbols">people</i>
-                —
-                {$c->__('visio.in_call')}
+                {if="$value->joined"}{$c->__('visio.joined_call')}{else}{$c->__('visio.in_call')}{/if}
+                <span class="second">
+                    {$value->created_at|prepareDate:true,true}
+                    •
+                    {$c->__('visio.by', $value->inviter->name)}
+                </span>
+                <span class="info">
+                    {if="$value->joined"}
+                        {$value->presences->count()}
+                    {else}
+                        {$value->participants->count()}
+                    {/if}
+                    <i class="material-symbols">people</i>
+                </span>
            </p>
-        {/if}
+        {/loop}
    </div>
    <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxRemove('{$conference->conference|echapJS}');">
        <i class="material-symbols">delete</i>
--- a/app/Widgets/Rooms/rooms.css
+++ b/app/Widgets/Rooms/rooms.css
@ -63,6 +63,14 @@
    display: none;
 }

+#rooms_widget > ul.list.rooms > li div p[data-mujiid] {
+    padding: 0.5rem 0;
+}
+
+#rooms_widget > ul.list.rooms > li div p[data-mujiid]:last-child {
+    padding-bottom: 1rem;
+}
+
 /* Rooms order */

 #rooms_widget > ul.list.rooms > li {
--- a/app/Widgets/Visio/Visio.php
+++ b/app/Widgets/Visio/Visio.php
@ -303,6 +303,16 @@ class Visio extends Base

    /** Muji */

+    public function ajaxChooseMuji(string $muc)
+    {
+        $view = $this->tpl();
+        $view->assign('conference', $this->user->session->conferences()
+                ->where('conference', $muc)
+                ->first());
+
+        Dialog::fill($view->draw('_visio_choose_muji'), false, true);
+    }
+
    public function ajaxJoinMuji(string $mujiId, ?bool $withVideo = false)
    {
        $muji = $this->user->session->mujiCalls()
--- a/app/Widgets/Visio/_visio_choose_muji.tpl
+++ b/app/Widgets/Visio/_visio_choose_muji.tpl
@ -0,0 +1,38 @@
+<section id="visio_lobby">
+    <ul class="list thick">
+        {loop="$conference->mujiCalls"}
+            <li>
+                <span class="primary icon">
+                    <i class="material-symbols icon">
+                        {$value->icon}
+                    </i>
+                </span>
+                <div>
+                    <button class="button oppose color blue"
+                            onclick="Visio_ajaxJoinMuji('{$value->id}', {if="$value->video"}true{else}false{/if});">
+                        <i class="material-symbols">
+                            {$value->icon}
+                        </i>
+                    </button>
+                    <p>
+                        {$c->__('visio.in_call')}
+                        <span class="second">
+                            {$value->participants->count()}
+                            <i class="material-symbols">people</i>
+                        </span>
+                    </p>
+                    <p>
+                        {$value->created_at|prepareDate:true,true}
+                        •
+                        {$c->__('visio.by', $value->inviter->name)}
+                    </p>
+                </div>
+            </li>
+        {/loop}
+    </ul>
+</section>
+<footer>
+    <button onclick="Dialog_ajaxClear()" class="button flat">
+        {$c->__('button.cancel')}
+    </button>
+</futton>
--- a/app/Widgets/Visio/locales.ini
+++ b/app/Widgets/Visio/locales.ini
@ -5,10 +5,12 @@ audio_call  = Incoming audio call
 ringing     = …ringing
 declined    = Declined
 in_call     = Ongoing call
+joined_call = Joined call
 failed      = Failed
 connecting  = …connecting
 ended       = Call ended
 no_participants_left = All participants have left the call
+by          = by %s

 [visiolobby]
 called          = "%s is calling you"
--- a/public/theme/css/listn.css
+++ b/public/theme/css/listn.css
@ -146,7 +146,7 @@ ul.list li:not(.subheader) .primary:not(.bubble):not(.thumb):not(.small) {
 }

 ul.list li:not(.subheader) .control.bubble,
-ul.list li:not(.subheader) .primary.bubble {
+ul.list li:not(.subheader) .primary.bubble:not(.small) {
    margin: 0 0.5rem;
 }