peertube-plugin-trakteer/client/video-watch-client-plugin.js

function register({ registerHook }) {
  registerHook({
    target: 'action:video-watch.player.loaded',
    handler: ({ peertubeHelpers, player, video }) => {
      setup({ peertubeHelpers, player, video })
    }
  })
}

function setup({ player, video }) {
  const doc = document
  const trakteerIframe = doc.querySelector('#trakteer-overlay iframe')

  let iframeLoaded = false

  // probably users navigate to a new page
  if (trakteerIframe && !iframeLoaded) {
    const oldTrakteerOverlay = doc.getElementById('trakteer-overlay')

    if (oldTrakteerOverlay) {
      oldTrakteerOverlay.remove()
    }
  }

  // FIXME(@fariz): as of v0.1.0 :)
  let trakteerTo = 'fariz'

  if (video.byAccount === 'root') {
    trakteerTo = 'evilfactorylabs'
  }

  if (video.byAccount === 'r17x') {
    trakteerTo = 'ri7nz'
  }

  const videoActionsMatches = doc.getElementsByClassName('video-actions')

  if (videoActionsMatches.length < 1) {
    console.error('[peertube-plugin-trakteer]', videoActionsMatches)
  } else {
    const actions = videoActionsMatches[0]

    const trakteerButton = doc.createElement('button')
    trakteerButton.title = 'Dukung Saya di Trakteer!'
    trakteerButton.innerText = 'Trakteer'
    trakteerButton.classList.add('action-button')

    const trakteerIcon = doc.createElement('img')
    trakteerIcon.src = 'https://trakteer-assets.sgp1.digitaloceanspaces.com/images/embed/trbtn-icon.png?date=18-11-2023'
    trakteerIcon.style.filter = 'contrast(0)'
    trakteerIcon.style.paddingRight = '10px'
    trakteerIcon.style.paddingBottom = '5px'

    trakteerIcon.setAttribute('height', 30)

    trakteerButton.prepend(trakteerIcon)

    trakteerButton.addEventListener('click', function() {
      player.pause()

      const embedUrl = 'https://trakteer.id/' + trakteerTo + '/tip/embed/modal'

      if (!iframeLoaded) {
        const trakteerOverlay = doc.createElement('div')

        trakteerOverlay.setAttribute('id', 'trakteer-overlay')
        trakteerOverlay.style.display = 'none'
        trakteerOverlay.style.position = 'fixed'
        trakteerOverlay.style.width = '100%'
        trakteerOverlay.style.height = '100%'
        trakteerOverlay.style.top = 0
        trakteerOverlay.style.left = 0
        trakteerOverlay.style.zIndex = 666666

        const trakteerModal = doc.createElement('iframe')

        trakteerModal.src = embedUrl + '?ref=' + window.location.href
        trakteerModal.style.width = '100%'
        trakteerModal.style.height = '100%'
        trakteerModal.style.border = 0

        trakteerOverlay.appendChild(trakteerModal)

        doc.body.appendChild(trakteerOverlay)

        iframeLoaded = true

        window.addEventListener('message', function(event) {
          if (event.data.type === 'embed.modalClosed') {
            setTimeout(function() {
              if (player.hasStarted()) {
                player.play()
              }

              trakteerOverlay.style.display = 'none'
            }, 69)
          }
        })
      }

      const trakteerIframe = doc.querySelector('#trakteer-overlay iframe')

      if (trakteerIframe) {
        doc.getElementById('trakteer-overlay').style.display = 'block'

        trakteerIframe.contentWindow.postMessage({ type: 'embed.openModal' }, '*')
      }
    })

    actions.prepend(trakteerButton)
  }
}

export {
  register
}