Improved meet timeline and added a swipe animation to go to party account

src/routes/_components/status/MeetStatus.html

@@ -5,6 +5,7 @@
          aria-setsize={length}
          aria-label={ariaLabel}
          style="background: url({avatarHeader}"
+         data-account="{accountId}"
          on:recalculateHeight
          ref:article
 >
@@ -18,7 +19,7 @@
   </div>
   <div class="meet-footer">
     <StatusAuthorName {...params} />
-    <StatusAuthorHandle {...params} />
+<!--    <StatusAuthorHandle {...params} />-->
     <StatusRelativeDate {...params} {...timestampParams} />
     {#if showCard }
       <StatusCard {...params} />

src/routes/_components/status/Status.html

@@ -35,6 +35,7 @@
   <StatusToolbar {...params} {replyShown} on:recalculateHeight />
   <div class="like-div"><a class="status-favs-reblogs status-favs"
      rel="prefetch"
+     href="javascript:void(0)"
      onclick="return api_status_fav(this,'{originalStatusId}');"
      aria-label={favoritesLabel}>
     <svg class="status-favs-reblogs-svg"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path></svg>

src/routes/_layout.html

@@ -5,6 +5,7 @@
   <a id="back" href="javascript:window.history.back()" >
     <svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg>
   </a>
+  <div id="anim-swipe" onclick="return window.fediloveUI.meetPageGoToCurrentAccount();"></div>
 </div>
 
 <div id="chat-compose-global" style="visibility: collapse">

src/scss/themes/ozark.scss

@@ -62,9 +62,11 @@ body.chat {
 }
 
 body.meet {
+  height: 100%;
+  overflow: hidden;
 
-  div#sapper {
-    background: #959595;
+  div#sapper, div.virtual-list {
+    background: #000 !important;
   }
 
   div#meet-navigation {
@@ -89,6 +91,21 @@ body.meet {
       }
     }
 
+    div#anim-swipe {
+      position: fixed;
+      z-index: 1;
+      bottom: 40%;
+      cursor: pointer;
+      padding: 5em 0;
+      display: flex;
+      right: 0;
+
+      svg {fill: #fff}
+      svg:nth-child(1) {position: relative; left: 2em;}
+      svg:nth-child(2) {position: relative; left: 1em;}
+
+    }
+
   }
 
 }
@@ -241,9 +258,14 @@ div.main-content.meet {
 
   div.virtual-list-item {
 
+    article.status-article {
+      background-repeat: no-repeat !important;
+      background-size: cover !important;
+      background-position: center !important;
+    }
+
     div.meet-content {
       height: 100vh;
-      max-height: 50em;
       background-image: linear-gradient(transparent, #000000bf);
 
       a.status-sidebar > img.avatar {
@@ -277,9 +299,16 @@ div.main-content.meet {
       a {
         color: #fff !important;
       }
+
       span.status-author-handle, time {
         color: #cecece !important;
       }
+
+      a.status-relative-date {
+        position: fixed;
+        right: .5em;
+      }
+
     }
 
   }

static/fedilove-no-react.js

@@ -60,6 +60,15 @@ function api_send_message() {
 }
 
 var fediloveUI = {
+    meetPageGoToCurrentAccount: function(isRightSwipe) { 
+        isRightSwipe = isRightSwipe || false;
+        const elements = $('div.virtual-list > div.virtual-list-item > article');
+        if (!isRightSwipe && elements.length > 0) {
+            const accId = elements.first().data('account');
+            elements.first().attr('style', 'animation: dismissMeet .5s linear 1');
+            setTimeout(function() { elements.first().find('a.status-sidebar > img').click() }, 500);
+        }
+    },
     scrollChatToLastItem: function() {
         const startLen = $('div.the-list > div').length;
         var count = 0;
@@ -223,6 +232,27 @@ function fedilove_customization() {
     document.querySelector('#chat-party-hide').style = 'display: none !important';
     document.querySelector('nav#main-nav > ul.main-nav-ul').style = '';
 
+    // add some animations ( i can't with sass D: )
+    var style = document.createElement('style');
+    style.innerHTML = `
+@keyframes spin2 {
+  100% { transform:rotate(-360deg); }
+}
+@keyframes fadeOut {
+  0% {opacity: 1;}
+  100% {opacity: 0;}
+}
+@keyframes dismissMeet {
+  0% {position: relative; left: 0}
+  100% {position: relative; left: -200em}
+}
+@keyframes acceptMeet {
+  0% {position: relative; left: 0}
+  100% {position: relative; left: 200em}
+}
+`;
+    document.body.appendChild(style);
+
     if (window.location.pathname.startsWith('/statuses/'))
     {
         $('div.main-content').addClass('chat');
@@ -259,11 +289,6 @@ function fedilove_customization() {
             fediloveUI.paintChatAvatarAndName();
         }
 
-        // add some animations
-        var style = document.createElement('style');
-        style.innerHTML = '@keyframes spin2 { 100% { transform:rotate(-360deg); } }';
-        document.body.appendChild(style);
-
         // this function changes the css class on articles (messages)
         //  that match the given account_id
         var makeMessageUIModifications = function(account_id) {
@@ -325,11 +350,31 @@ function fedilove_customization() {
         $('div.main-content').addClass('direct');
         $('body').addClass('direct');
     }
-    else if (window.location.pathname == '/federated') {
+    else if (window.location.pathname == '/federated')
+    {
         $('div.main-content').addClass('meet');
         $('body').addClass('meet');
         document.querySelector('nav#main-nav > ul.main-nav-ul').style = 'display: none !important';
         document.querySelector('#meet-navigation').style = '';
+
+        // swipe left animation
+        $('#meet-navigation > #anim-swipe').html('');
+        for (var i of [1,2,3]) {
+           var elem = $('#meet-navigation > #back > svg').clone();
+           $('#meet-navigation > #anim-swipe').append(elem);
+           setTimeout(function(it) {
+               it.attr('style', 'animation: fadeOut .5s linear infinite');
+           }, (i*250), elem);
+        }
+        const _= function(){
+            var touchsurface = document.getElementById('anim-swipe'),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime;
+	    touchsurface.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY; startTime = new Date().getTime(); e.preventDefault(); }, false);
+            touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() }, false);
+            touchsurface.addEventListener('touchend', function(e){ var touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
+                var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
+                fediloveUI.meetPageGoToCurrentAccount(swiperightBol); e.preventDefault(); }, false);
+        }();
+
     }
     else if (window.location.pathname.startsWith('/notifications/mentions')) {
         $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');