Sample Feb 16

main.js

// @ts-check

import { APIWrapper, API_EVENT_TYPE } from "./api.js";
import { addMessage, animateGift, isPossiblyAnimatingGift, isAnimatingGiftUI } from "./dom_updates.js";


const api = new APIWrapper();

const timedQueue = (function(){
  let QUEUE_API;
  let queue = [];
  let task = null;
  let tHandle;
  let defaultTime = 500;

  function removeEventsFromQueueOlderThan(olderThanMilliseconds = 20 * 1000) {
    queue = queue.filter(item => Date.now() - item.event.timestamp < olderThanMilliseconds);
  }

  function removeDuplicatedEventsFromQueue() {
    queue = queue.filter((queueItem, index, self) => self.findIndex(q => q.event.id === queueItem.event.id) === index)
  }

  function runTask() {
    if (!task) { return; }
    console.log('queue: ', queue)
    console.log('running: ', task.event.type, task.event.data.username, task.event.data.message)
    task.func();

    // remove finished task from queue
    const currentTaskIndexInQueue = queue.findIndex(item => item.event.id === task.event.id);
    if (currentTaskIndexInQueue > -1) {
      queue.splice(currentTaskIndexInQueue, 1);
    }
    task = null;
  };

  function next() {

    if (task) {
      // if event type is animated gift and is there an active animation on screen
      if (task.event.type === 'ag' && isAnimatingGiftUI()) {
        // find first event that is not an animated gift
        task = queue.find(task => task.event.type !== 'ag');
      }
      runTask();
    }

    removeEventsFromQueueOlderThan();
    removeDuplicatedEventsFromQueue();

    // are there any remain tasks?
    if(queue.length > 0){
      task = queue[0];
      tHandle = setTimeout(next, task.time);
    } else {
      QUEUE_API.done = true;
    }
  };

  return QUEUE_API = {
    add: function (func, event) {
      queue[event.type === 'ag' ? 'unshift' : 'push']({ func: func, time: defaultTime, event });
    },
    start : function(){
      if(queue.length > 0 && QUEUE_API.done){
        QUEUE_API.done = false;
        tHandle = setTimeout(next, 0);
      }
    },
    clear : function(){
      task = null;
      queue.length = 0;
      clearTimeout(tHandle);
      QUEUE_API.done = true;
    },
    done : true,
  }
})();

api.setEventHandler((events) => {
  if (events.length === 0) { return }

  events.forEach(e => {
    let myFuncs = null;

    if (e.type === 'ag') {
      myFuncs = function () {
        addMessage(e);
        animateGift(e);
      }
    } else {
      myFuncs = function () {
        addMessage(e);
      }
    }
    timedQueue.add(myFuncs, e);
  });

  timedQueue.start();
});

// NOTE: UI helper methods from `dom_updates` are already imported above.


// demo data start
// let myArr = [
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: 'TSOCyrtJGggMAeWV', timestamp:"2021-04-23T12:02:10.204Z", type:"ag", data: { username:"Jellyfists", profile_picture_url:"/assets/pic1.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '67BOw8rPqchvRD5b', timestamp:"2021-04-23T12:02:09.399Z", type:"m", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"At fringilla libero tempor sed"}},
//   { id: 'rXlRD88dp7kLFkpM', timestamp: "2021-04-23T12:02:15.324Z", type: "m", data: { username: "FickleStalker", profile_picture_url: "/assets/pic14.png", message: "Integer fringilla elementum suscipit" } },
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '3UiQlTT4XXYIEY6Q', timestamp:"2021-04-23T12:02:14.865Z", type:"g", data: { username:"Lassassin", profile_picture_url:"/assets/pic20.png", message:"Sent you 🐵",gift_emoji: "🐵"}},
//   {id: 'CZhGbvdhkiAUobV6', timestamp:"2021-04-23T12:02:08.456Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 🎁",gift_emoji: "🎁"}},
//   {id: 'mqVJLhUYPVLU1ptW', timestamp:"2021-04-23T12:02:07.976Z", type:"m", data: { username:"Lassassin", profile_picture_url:"/assets/pic20.png", message:"Mauris quam ligula"}},
//   {id: 'FrNWDgJzGB05uV2V', timestamp:"2021-04-23T12:02:09.255Z", type:"ag", data: { username:"FickleStalker", profile_picture_url:"/assets/pic14.png", message:"Sent you 💝",gift_emoji: "💝"}},
//   {id: 'RIWRjV8aIAuUcynz', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
//   {id: '1', timestamp:"2021-04-23T12:02:11.854Z", type:"ag", data: { username:"SilkMonkey", profile_picture_url:"/assets/pic8.png", message:"Sent you 📦",gift_emoji: "📦"}},
// ]

// for (let i = 0; i < myArr.length; i++) {
//   const obj = myArr[i];

//   if (obj.type === 'ag') {
//     timedQueue.add(() => { addMessage(obj); animateGift(obj);}, obj);
//   } else {
//     timedQueue.add(() => { addMessage(obj) }, obj);
//   }
// }
// timedQueue.start();
// demo data end