document.addEventListener('DOMContentLoaded', function() {
  window.App.danmakuChannel = window.App.cable.subscriptions.create('DanmakuChannel', {
    connected: function() {
      window.App.danmakuChannel.send({ action: 'reload' });
    },
    received: function(data) {
      switch (data.action) {
      case 'reload':
        reloadDanmakuHistory(data);
        break;
      case 'create':
        createDanmaku(data);
        break;
      }
    },
  });
});

function reloadDanmakuHistory(data) {
  let objects = data.objects || [];

  for (let object of objects) {
    addToDanmakuHistory(object);
  }
}

function addToDanmakuHistory(data) {
  let danmakuHistoryContainer = document.getElementById('danmaku-history-container');
  let danmakuLogItem = document.createElement('li');
  let danmakuLogWrap = document.createElement('span');

  danmakuLogWrap.innerText = data.message;
  danmakuLogItem.appendChild(danmakuLogWrap);
  danmakuHistoryContainer.appendChild(danmakuLogItem);
  danmakuHistoryContainer.scrollTop = danmakuHistoryContainer.scrollHeight;
}

function createDanmaku(data) {
  let speed = data.speed || 1.0;
  let duration = Math.floor(window.innerWidth / 150 / speed); // 150px/s

  if (!window.isDisabledDanmakuMessage) {
    let danmaku = document.createElement('div');
    danmaku.classList.add('danmaku');
    danmaku.innerText = data.message;
    danmaku.style.top = data.top;
    danmaku.style.transition = `transform ${duration}s linear`;
    danmaku.addEventListener(whichTransitionEvent(), (event) => event.target.remove());
    document.getElementsByClassName('container')[0].appendChild(danmaku);
    danmaku.clientHeight; // Force rendering
    danmaku.style.transform = 'translateX(-100%)';
  }

  addToDanmakuHistory(data);
}

/* From Modernizr */
function whichTransitionEvent(){
  var t;
  var el = document.createElement('fakeelement');
  var transitions = {
    'transition':'transitionend',
    'OTransition':'oTransitionEnd',
    'MozTransition':'transitionend',
    'WebkitTransition':'webkitTransitionEnd'
  };

  for(t in transitions){
    if( el.style[t] !== undefined ){
      return transitions[t];
    }
  }
}

@@ -533,16 +533,41 @@
 %7C%7C %5B%5D;%0A%0A
+  clearDanmakuHistory();%0A
   for (l
@@ -626,24 +626,279 @@
 ct);%0A  %7D%0A%7D%0A%0A
+function clearDanmakuHistory() %7B%0A  let danmakuHistoryContainer = document.getElementById('danmaku-history-container');%0A%0A  while (danmakuHistoryContainer.hasChildNodes()) %7B%0A    danmakuHistoryContainer.removeChild(danmakuHistoryContainer.lastChild);%0A  %7D%0A%7D%0A%0A
 function add

Add clearDanmakuHistory before updating danmaku history