Important color management CSS cleanup

CHANGELOG.md

@@ -18,6 +18,7 @@ v0.30 (master)
 * 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
+* Important color management CSS cleanup
 
 v0.29.2
 ---------------------------

app/Views/admin.tpl

@@ -3,7 +3,7 @@
 <?php $this->widget('Notifications');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/blog.tpl

@@ -1,4 +1,4 @@
-<main style="background-color: rgb(var(--movim-background));">
+<main>
     <aside>
         <?php $this->widget('ContactDataPublic'); ?>
     </aside>

app/Views/chat.tpl

@@ -6,7 +6,7 @@
 <?php if(\App\User::me()->hasOMEMO()) $this->widget('ChatOmemo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/community.tpl

@@ -7,7 +7,7 @@
     <?php $this->widget('Location');?>
     <?php $this->widget('PostActions');?>
 
-    <nav class="color dark">
+    <nav>
         <?php $this->widget('Presence');?>
         <?php $this->widget('Navigation');?>
     </nav>

app/Views/conf.tpl

@@ -4,7 +4,7 @@
 <?php if(\App\User::me()->hasOMEMO()) $this->widget('ChatOmemo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/contact.tpl

@@ -7,14 +7,14 @@
 <?php if(\App\User::me()->hasOMEMO()) $this->widget('ChatOmemo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>
 
 <?php $this->widget('BottomNavigation');?>
 
-<main style="background-color: rgb(var(--movim-background));">
+<main>
     <aside>
         <?php $this->widget('ContactData'); ?>
         <?php $this->widget('ContactSubscriptions'); ?>

app/Views/explore.tpl

@@ -7,7 +7,7 @@
 
 <?php $this->widget('PostActions');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/help.tpl

@@ -3,7 +3,7 @@
 <?php if(\App\User::me()->hasOMEMO()) $this->widget('ChatOmemo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/news.tpl

@@ -8,14 +8,14 @@
 
 <?php $this->widget('PostActions');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>
 
 <?php $this->widget('BottomNavigation');?>
 
-<main style="background-color: rgb(var(--movim-background));">
+<main>
     <aside>
         <?php $this->widget('NewsNav');?>
     </aside>

app/Views/post.tpl

@@ -9,7 +9,7 @@
 <?php $this->widget('ContactActions');?>
 <?php $this->widget('PostActions');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/publish.tpl

@@ -5,14 +5,14 @@
 <?php if(\App\User::me()->hasOMEMO()) $this->widget('ChatOmemo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>
 
 <?php $this->widget('BottomNavigation');?>
 
-<main style="background-color: rgb(var(--movim-background));">
+<main>
     <aside>
         <?php $this->widget('PublishHelp');?>
     </aside>

app/Views/subscriptions.tpl

@@ -3,7 +3,7 @@
 <?php $this->widget('SendTo');?>
 <?php $this->widget('Location');?>
 
-<nav class="color dark">
+<nav>
     <?php $this->widget('Presence');?>
     <?php $this->widget('Navigation');?>
 </nav>

app/Views/tag.tpl

@@ -7,7 +7,7 @@
 
     <?php $this->widget('PostActions');?>
 
-    <nav class="color dark">
+    <nav>
         <?php $this->widget('Presence');?>
         <?php $this->widget('Navigation');?>
     </nav>
@@ -15,7 +15,7 @@
     <?php $this->widget('BottomNavigation');?>
 <?php } ?>
 
-<main style="background-color: rgb(var(--movim-background));">
+<main>
     <?php if (isLogged()) { ?>
         <aside>
             <?php $this->widget('NewsNav');?>

app/Widgets/BottomNavigation/bottomnavigation.css

@@ -10,6 +10,7 @@ ul#bottomnavigation {
     justify-content:center;
     transition: transform .3s cubic-bezier(.4,0,.2,1);
     user-select: none;
+    background-color: rgb(var(--movim-background));
 }
 
 ul#bottomnavigation li {

app/Widgets/BottomNavigation/bottomnavigation.tpl

@@ -1,4 +1,4 @@
-<ul id="bottomnavigation" class="navigation color dark">
+<ul id="bottomnavigation" class="navigation">
     <li onclick="MovimTpl.toggleMenu()">
         <span class="primary icon">
             <i class="material-symbols">more_vert</i>

app/Widgets/Chat/_chat.tpl

@@ -1,4 +1,4 @@
-<header class="big" id="{$jid|cleanupId}-header">
+<header id="{$jid|cleanupId}-header">
     {autoescape="off"}
         {$c->prepareHeader($jid, $muc)}
     {/autoescape}

app/Widgets/Chat/chat.css

@@ -20,7 +20,7 @@ main:not(.enabled) #chat_widget {
 }
 
 #chat_widget>header {
-    box-shadow: var(--elevation-1);
+    box-shadow: var(--elevation-flat);
     z-index: 1;
 }
 
@@ -43,7 +43,7 @@ main:not(.enabled) #chat_widget {
 #chat_widget .contained:before {
     position: absolute;
     display: block;
-    background-color: rgb(var(--movim-main));
+    background-color: var(--movim-accent);
     width: 100%;
     height: 0.25rem;
     content: '';
@@ -222,7 +222,7 @@ main:not(.enabled) #chat_widget {
 #chat_widget .chat_box:after {
     position: absolute;
     display: block;
-    background-color: rgb(var(--movim-main));
+    background-color: var(--movim-accent);
     width: 0;
     height: 0.25rem;
     content: '';
@@ -429,6 +429,10 @@ main:not(.enabled) #chat_widget {
     margin-bottom: 0.5rem;
 }
 
+#drawer section:has(.emojis_grid) {
+    margin-top: 0.75rem;
+}
+
 .emojis_grid.results:empty,
 .emojis_grid.results:not(:empty)~.emojis_grid {
     display: none;
@@ -447,7 +451,7 @@ main:not(.enabled) #chat_widget {
 }
 
 #chat_widget div.quoted {
-    border-right: 3px solid rgb(var(--movim-main));
+    border-right: 3px solid var(--movim-accent);
     border-radius: 0 3px 3px;
 }
 

app/Widgets/Draw/draw.css

@@ -59,6 +59,7 @@
 #draw .draw-top-nav {
     transition: transform 0.2s;
     pointer-events: none;
+    padding-top: 1rem;
 }
 
 #draw .draw-top-nav span {

app/Widgets/Presence/presence.css

@@ -26,12 +26,11 @@ ul#presence_widget li span.primary {
         width: 2rem;
         height: 0.35rem;
         border-radius: 1rem;
-        background-color: white;
+        background-color: rgba(var(--movim-font), 0.12);
         position: absolute;
         bottom: 0;
-        opacity: 0.35;
         left: calc(50% - 1rem);
-        transition: width 1.25s cubic-bezier(1, 0, .45, 1), height 1.25s cubic-bezier(1, 0, .45, 1), left 1.25s cubic-bezier(1, 0, .45, 1), opacity 1.25s cubic-bezier(1, 0, .45, 1);
+        transition: width 1.25s cubic-bezier(1, 0, .45, 1), height 1.25s cubic-bezier(1, 0, .45, 1), left 1.25s cubic-bezier(1, 0, .45, 1);
     }
 
     ul#presence_widget_menu:hover,
@@ -45,7 +44,6 @@ ul#presence_widget li span.primary {
         width: 100%;
         height: 0.1rem;
         left: 0;
-        opacity: 0.05;
-        transition: width 0.25s cubic-bezier(1, 0, .45, 1), height 0.25s cubic-bezier(1, 0, .45, 1), left 0.25s cubic-bezier(1, 0, .45, 1), opacity 0.25s cubic-bezier(1, 0, .45, 1);
+        transition: width 0.25s cubic-bezier(1, 0, .45, 1), height 0.25s cubic-bezier(1, 0, .45, 1), left 0.25s cubic-bezier(1, 0, .45, 1);
     }
 }

app/Widgets/PublishStories/publishstories.css

@@ -1,7 +1,7 @@
 #publishstories {
     top: 0;
     left: 0;
-    background-color: rgb(var(--movim-gray));
+    background-color: rgb(var(--movim-background));
     width: 100%;
     height: 100%;
     z-index: 2;
@@ -16,8 +16,6 @@
     line-height: 5.5rem;
     margin-top: 0.75rem;
     font-size: 2.5rem;
-    backdrop-filter: blur(1rem);
-    background-color: rgba(0, 0, 0, 0.25);
 }
 
 #publishstories.show,

app/Widgets/PublishStories/publishstories.tpl

@@ -17,17 +17,17 @@
     </div>
     <ul class="list controls middle">
         <li>
-            <span id="publishstoriesback" class="primary icon color transparent active">
+            <span id="publishstoriesback" class="primary icon active">
                 <i class="material-symbols">arrow_back</i>
             </span>
-            <span id="publishstoriesbackedit" class="primary icon color transparent active" onclick="PublishStories.goToEdit()">
+            <span id="publishstoriesbackedit" class="primary icon active" onclick="PublishStories.goToEdit()">
                 <i class="material-symbols">arrow_back</i>
             </span>
             <div></div>
-            <span id="publishstoriesclose" class="control icon color transparent active" onclick="PublishStories.reset()">
+            <span id="publishstoriesclose" class="control icon active" onclick="PublishStories.reset()">
                 <i class="material-symbols">close</i>
             </span>
-            <span id="publishstoriesnext" class="control icon color transparent active toggleable" onclick="PublishStories.goToPublish()">
+            <span id="publishstoriesnext" class="control icon active toggleable" onclick="PublishStories.goToPublish()">
                 <i class="material-symbols">arrow_forward</i>
             </span>
         </li>

app/Widgets/Snap/snap.css

@@ -1,7 +1,7 @@
 #snap {
     top: 0;
     left: 0;
-    background-color: rgb(var(--movim-gray));
+    background-color: rgb(var(--movim-background));
     width: 100%;
     height: 100%;
     z-index: 2;

app/Widgets/Snap/snap.tpl

@@ -24,7 +24,7 @@
     </div>
     <ul class="list controls middle">
         <li>
-            <span id="snapback" class="primary icon color transparent active">
+            <span id="snapback" class="primary icon active">
                 <i class="material-symbols">arrow_back</i>
             </span>
             <div></div>

app/Widgets/Stories/stories.css

@@ -19,19 +19,19 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    background-color: rgba(var(--movim-font), 0.1);
+    background-color: rgba(var(--movim-element-action), 0.2);
     width: 7rem;
     transition: transform .3s;
 }
 
 #stories ul.list.flex li.block.add:hover {
-    background-color: rgba(var(--movim-font), 0.2);
+    background-color: rgba(var(--movim-element-action), 0.1);
     transform: scale(0.975);
 }
 
 #stories ul.list.flex li.block.add:active {
-    background-color: rgba(var(--movim-font), 0.1);
-    transform: scale(0.9);
+    background-color: rgba(var(--movim-element-action), 0.2);
+    transform: scale(0.95);
 }
 
 #stories ul.list.flex li.block.add > div {

app/Widgets/Vcard4/vcard4.tpl

@@ -1,4 +1,5 @@
 <div class="tabelem" title="{$c->__('vcard.title')}" data-mobileicon="face" id="vcard4" >
+    <br />
     <div id="avatar" class="spin"></div>
     {if="!isset($me->jid)"}
         <script type="text/javascript">

public/scripts/movim_favicon.js

@@ -38,7 +38,7 @@ var MovimFavicon = {
             ctx.beginPath();
             ctx.fillStyle = counterTab2 > 0
                 ? getComputedStyle(document.body).getPropertyValue('--p-red')
-                : 'rgb(' + getComputedStyle(document.body).getPropertyValue('--movim-main') + ')';
+                : 'rgb(' + getComputedStyle(document.body).getPropertyValue('--movim-accent') + ')';
             ctx.moveTo(x + radius, y);
             ctx.lineTo(r - radius, y);
             ctx.quadraticCurveTo(r, y, r, y + radius);

public/theme/css/article.css

@@ -176,7 +176,7 @@ article input[type=checkbox].spoiler + section label.spoiler {
     line-height: 10rem;
     font-size: 4rem;
     border-radius: 100%;
-    background-color: rgb(var(--movim-main));
+    background-color: rgb(var(--movim-accent));
     color: rgba(var(--movim-font), 0.87);
     box-shadow: var(--elevation-1);
 }

public/theme/css/color.css

@@ -1,8 +1,7 @@
 /* Color */
 
 body {
-    --movim-main: 255, 87, 34;
-    --movim-accent: 65, 63, 181;
+    --movim-accent: var(--p-dorange);
     --movim-background-main: 255, 255, 255;
     --movim-background: 238, 238, 238;
     --movim-gray: 35, 35, 35;
@@ -16,7 +15,6 @@ body {
 sections are therefore copy pasted */
 
 body.nightmode {
-    --movim-accent: 16, 21, 26;
     --movim-background-main: 20, 26, 33;
     --movim-background: 25, 32, 40;
     --movim-gray: var(--movim-accent);
@@ -26,7 +24,6 @@ body.nightmode {
 
 @media (prefers-color-scheme: dark) {
     body {
-        --movim-accent: 16, 21, 26;
         --movim-background-main: 20, 26, 33;
         --movim-background: 25, 32, 40;
         --movim-gray: var(--movim-accent);
@@ -36,7 +33,7 @@ body.nightmode {
 }
 
 body {
-    background-color: rgb(var(--movim-gray));
+    background-color: rgb(var(--movim-background));
 }
 
 body > *,
@@ -62,6 +59,7 @@ ul.list li span.control.divided:before {
 
 label, span.info,
 li div.bubble:after,
+ul.list li>div>p>span.second,
 table tr th {
     color: rgba(var(--movim-font), 0.54);
 }
@@ -71,24 +69,9 @@ table tr th {
     border-radius: 0.5rem;
 }
 
-.color {
-    background-color: var(--p-bgray);
-    color: white;
-}
-
-.color.dark {
-    background-color: rgb(var(--movim-gray));
-}
-
-.color.dark *.divided > *:not(:last-child),
-.color.dark hr {
-    border-color: rgba(255, 255, 255, 0.05);
-}
-
 ul li.date > div > p.normal,
 .dialog, .drawer, ul.context_menu,
-.card > .block:not(.subheader):not(.simple),
-main {
+.card > .block:not(.subheader):not(.simple) {
     background-color: rgb(var(--movim-background-main));
 }
 
@@ -103,14 +86,15 @@ main > header a,
 span.icon span.counter,
 span.icon[data-counter]:after,
 span.icon.composing:after,
+form > div .checkbox > input[type="checkbox"]:checked:before,
 form > div .radio > input[type="radio"]:checked + label {
-    border-color: rgb(var(--movim-main));
-    background-color: rgb(var(--movim-main));
+    border-color: var(--movim-accent);
+    background-color: var(--movim-accent);
     color: white;
 }
 
 span.icon span.counter.alt {
-    background-color: rgb(var(--movim-accent));
+    background-color: var(--movim-accent);
 }
 
 /* Elements */
@@ -120,8 +104,6 @@ span.icon span.counter.alt {
 .button.indigo, .icon.indigo, span.resource.indigo   { color: var(--p-indigo); }
 .button.blue,   .icon.blue  , span.resource.blue     { color: var(--p-blue); }
 .button.green,  .icon.green , span.resource.green    { color: var(--p-green); }
-li div.bubble.moderator:after,
-ul li div > p > span.moderator,
 .button.orange, .icon.orange, span.resource.orange   { color: var(--p-orange); }
 .button.yellow, .icon.yellow, span.resource.yellow   { color: #FBC02D; }
 .button.brown,  .icon.brown , span.resource.brown    { color: var(--p-brown); }
@@ -175,11 +157,9 @@ span.icon:not(.composing):not([data-counter]):not(.story).status.server_error:af
 .color.steam,
 .color.bgray    { color: white; background-color: var(--p-bgray); border-color: var(--p-bgray) }
 
-.color.transparent { color: white; background-color: rgba(0, 0, 0, 0); }
+.color.transparent { color: white; backdrop-filter: blur(1rem); background-color: rgba(0, 0, 0, 0.25); }
 .color.semi { color: rgba(var(--movim-font), 0.87); background-color: rgba(var(--movim-background-main), 0.75); }
-rect#red {
-    fill: #6e40aa;
-}
+
 form > div > input:focus:invalid,
 form > div > input:focus:required {
     box-shadow: 0px 2px 0px var(--p-red);
@@ -200,34 +180,39 @@ div.snackbar ul.list li > div > p:not(:first-of-type):not(.normal):not(.main) {
     color: rgb(var(--movim-header-font));
 }
 
+header.big ul.list li>div>p>span.second {
+    color: rgba(var(--movim-header-font), 0.9);
+}
+
 /* Default color : indigo */
 
 input[type=button].color,
 header.big,
 main > header {
-    background-color: rgb(var(--movim-accent));
-    color: white;
-    border-color: rgb(var(--movim-accent));
+    background-color: var(--movim-accent);
+    border-color: var(--movim-accent);
 }
 
-/* Gray accent : orange */
+/* Accent color */
 
 .tabs,
 .button,
+li div.bubble.moderator:after,
+ul li div > p > span.moderator,
 header:not(.big) .icon a,
 a {
-    color: rgb(var(--movim-main));
-    border-color: rgb(var(--movim-main));
+    color: var(--movim-accent);
+    border-color: var(--movim-accent);
 }
 
-form > div .checkbox:before { background-color: rgba(var(--movim-main), 0.5); }
+form > div .checkbox:before { background-color: var(--movim-accent); }
 
 form input:focus:not(:invalid) + label,
 form textarea:focus:not(:invalid) + label {
-    color: rgb(var(--movim-main));
+    color: var(--movim-accent);
 }
 
 form input:focus:not(:invalid):not(.button),
 form textarea:focus:not(:invalid):not(.button) {
-    box-shadow: 0px 2px 0px rgb(var(--movim-main));
+    box-shadow: 0px 2px 0px var(--movim-accent);
 }

public/theme/css/elevation.css

@@ -1,4 +1,5 @@
 body {
+    --elevation-flat: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
     --elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
     --elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
     --elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

public/theme/css/form.css

@@ -72,7 +72,7 @@ form > div .select select {
     -moz-appearance: none;
     appearance: none;
     width: 100%;
-    background-color: rgb(var(--movim-background-main));
+    background-color: transparent;
     background-image: none;
     padding-bottom: 1rem;
     mask-image: linear-gradient(to right, black calc(100% - 10rem), transparent);
@@ -115,6 +115,9 @@ form > div textarea {
     -webkit-appearance: none; /* iOS */
     border-radius: 0; /* iOS */
     overflow: hidden; /* Fixme */
+
+    position: relative;
+    z-index: 1;
 }
 
 form > div .select,
@@ -173,6 +176,7 @@ form > div .radio > input[type="radio"] {
     display: inline;
     width: 0;
     height: 0;
+    position: initial;
 }
 
 form > div .checkbox {
@@ -229,11 +233,6 @@ form > div .checkbox:hover > input[type="checkbox"] + label {
     box-shadow: 0 0 0 1.75rem rgba(var(--movim-font), 0.05);
 }
 
-form > div .checkbox > input[type="checkbox"]:checked:before {
-    background-color: rgb(var(--movim-main));
-    border-color: rgb(var(--movim-main));
-}
-
 form > div .checkbox > input[type="checkbox"]:checked + label {
     color: white;
     width: 3rem;
@@ -244,7 +243,7 @@ form > div .checkbox > input[type="checkbox"]:checked + label {
 }
 
 form > div .checkbox > input[type="checkbox"]:checked + label i {
-    color: rgb(var(--movim-main));
+    color: rgb(var(--movim-accent));
 }
 
 /* Radio */

public/theme/css/listn.css

@@ -231,7 +231,6 @@ ul.list li>div>p.line.two {
 }
 
 ul.list li>div>p>span.second {
-    color: gray;
     margin-left: 0.5rem;
 }
 
@@ -348,7 +347,7 @@ ul.list>li.search form div:after {
     width: 100%;
     height: 100%;
     box-shadow: var(--elevation-1);
-    background-color: rgba(var(--movim-element-action), 0.05);
+    background-color: rgb(var(--movim-background-main));
     transition: background-color 0.2s ease-in-out;
     position: absolute;
     top: 0;
@@ -377,6 +376,7 @@ ul.list>li.search form div:before {
     left: 1.5rem;
     line-height: 6rem;
     pointer-events: none;
+    z-index: 1;
 }
 
 
@@ -408,7 +408,8 @@ ul.list>li.search form input:focus {
 
 ul.list>li.main form div:focus-within:after,
 ul.list>li.search form div:focus-within:after {
-    background-color: rgba(var(--movim-element-action), 0.1);
+    box-shadow: var(--elevation-2);
+    background-color: rgba(var(--movim-background-main), 0.8);
 }
 
 ul.list>li.comment form div:focus-within::after {
@@ -709,6 +710,7 @@ header ul.context_menu {
     transform: translateY(-5%);
     opacity: 0;
     pointer-events: none;
+    min-width: 22rem;
 }
 
 header ul.list.context_menu li {

public/theme/css/menu.css

@@ -13,10 +13,6 @@ body>nav>ul.list li {
     padding-left: 0.5rem;
 }
 
-body>nav.color.dark>ul a {
-    color: white;
-}
-
 ul.oppose {
     margin-top: auto;
 }

public/theme/css/style.css

@@ -62,6 +62,7 @@ body>nav {
     overflow-y: auto;
     left: 0;
     user-select: none;
+    background-color: rgb(var(--movim-background));
 }
 
 body>nav.active {
@@ -128,7 +129,7 @@ body>nav.active:before {
 body:before {
     position: absolute;
     display: block;
-    background-color: rgb(var(--movim-main));
+    background-color: rgb(var(--movim-accent));
     width: 0;
     height: 0.25rem;
     content: '';
@@ -224,6 +225,7 @@ main>div:first-child:nth-last-child(2)+div {
     width: 30%;
     overflow-y: auto;
     box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+    background-color: rgb(var(--movim-background-main));
 }
 
 @media screen and (max-width: 1024px) {

src/Moxl/Stanza/JingleCallInvite.php

@@ -23,6 +23,10 @@ class JingleCallInvite
 
         $dom->documentElement->appendChild($invite);
 
+        $store = $dom->createElement('store');
+        $store->setAttribute('xmlns', 'urn:xmpp:hints');
+        $dom->documentElement->appendChild($store);
+
         \Moxl\API::sendDom($dom);
     }
 
@@ -35,6 +39,10 @@ class JingleCallInvite
 
         $dom->documentElement->appendChild($retract);
 
+        $store = $dom->createElement('store');
+        $store->setAttribute('xmlns', 'urn:xmpp:hints');
+        $dom->documentElement->appendChild($store);
+
         \Moxl\API::sendDom($dom);
     }
 
@@ -47,6 +55,10 @@ class JingleCallInvite
 
         $dom->documentElement->appendChild($accept);
 
+        $store = $dom->createElement('store');
+        $store->setAttribute('xmlns', 'urn:xmpp:hints');
+        $dom->documentElement->appendChild($store);
+
         \Moxl\API::sendDom($dom);
     }
 
@@ -59,6 +71,10 @@ class JingleCallInvite
 
         $dom->documentElement->appendChild($reject);
 
+        $store = $dom->createElement('store');
+        $store->setAttribute('xmlns', 'urn:xmpp:hints');
+        $dom->documentElement->appendChild($store);
+
         \Moxl\API::sendDom($dom);
     }
 
@@ -71,6 +87,10 @@ class JingleCallInvite
 
         $dom->documentElement->appendChild($left);
 
+        $store = $dom->createElement('store');
+        $store->setAttribute('xmlns', 'urn:xmpp:hints');
+        $dom->documentElement->appendChild($store);
+
         \Moxl\API::sendDom($dom);
     }
 }

src/Moxl/Xec/Payload/MAMResult.php

@@ -18,7 +18,7 @@ class MAMResult extends Payload
             $stanza->forwarded->delay
             && isset($stanza->attributes()->queryid)
             && $messagesCounter >= 0
-        ) {
+        ) {\logDebug($stanza->asXML());
             $session->set('mamid' . (string)$stanza->attributes()->queryid, $messagesCounter + 1);
 
             if ($stanza->forwarded->message->retract
@@ -27,6 +27,30 @@ class MAMResult extends Payload
                 $retracted->handle($stanza->forwarded->message->retract, $stanza->forwarded->message);
             }
 
+            if ($stanza->forwarded->message->invite
+             && $stanza->forwarded->message->invite->attributes()->xmlns == 'urn:xmpp:call-invites:0') {
+                $invite = new CallInvitePropose;
+                $invite->handle($stanza->forwarded->message->invite, $stanza->forwarded->message);
+            }
+
+            if ($stanza->forwarded->message->retract
+             && $stanza->forwarded->message->retract->attributes()->xmlns == 'urn:xmpp:call-invites:0') {
+                $retract = new CallInviteRetract;
+                $retract->handle($stanza->forwarded->message->retract, $stanza->forwarded->message);
+            }
+
+            if ($stanza->forwarded->message->accept
+             && $stanza->forwarded->message->accept->attributes()->xmlns == 'urn:xmpp:call-invites:0') {
+                $accept = new CallInviteAccept;
+                $accept->handle($stanza->forwarded->message->accept, $stanza->forwarded->message);
+            }
+
+            if ($stanza->forwarded->message->left
+             && $stanza->forwarded->message->left->attributes()->xmlns == 'urn:xmpp:call-invites:0') {
+                $left = new CallInviteLeft;
+                $left->handle($stanza->forwarded->message->left, $stanza->forwarded->message);
+            }
+
             $message = \App\Message::findByStanza($stanza, $parent);
             $message = $message->set($stanza->forwarded->message, $stanza->forwarded);