party.48.png

party.js

const party = 'https://gist.githubusercontent.com/maxired/7880eb54842ef215dfa2709b5f96206d/raw/party.48.png';

function Install() {
  const install = () => {
    if(!APP || !APP.conference || !APP.conference.isJoined()){
      setTimeout(install, 500);
      return
    }
    APP.conference.commands.addCommandListener('PARTY', () => {
      window.confetti && window.confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
      });
    });
   
  }
  
  install()
}

function SendParty() {
  APP.conference.commands.sendCommandOnce('PARTY', {value: true })
}

const installScript = document.createElement('script');
installScript.innerHTML = `
  function Install(){ const i = ${Install.toString()}; i() };
  function SendParty(){ const s = ${SendParty.toString()}; s() };
  Install();

  window.SendParty = SendParty;
`;
document.head.appendChild(installScript);

const confettiScript = document.createElement('script');
confettiScript.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.2.0/dist/confetti.browser.min.js'
document.head.appendChild(confettiScript);

const partyButtonCSS = document.createElement('style');
partyButtonCSS.innerHTML = `
.chrome-party-button {
  display: inline-block;
  padding: 5px;
  z-index : 400;
  min-width: 40px;
  background : transparent;
  cursor: pointer;
  border: none;
  outline: none;
}

.chrome-party-img {
  width : 24px;
  height : 24px;
}

.chrome-party-button:hover {
  border-radius: 5px;
  background: rgba(255,255,255,.15);
}
`
document.head.appendChild(partyButtonCSS);

const partyButton = document.createElement('button');

partyButton.innerHTML = `<img class="chrome-party-img" src="${party}" />`;
partyButton.class = 'chrome-party-button'

partyButton.setAttribute('onclick', 'SendParty()')
partyButton.setAttribute('class', 'chrome-party-button')
document.querySelector('.button-group-left').appendChild(partyButton)