feat: v0.1.0

client/video-watch-client-plugin.js

@@ -0,0 +1,112 @@
+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'
+  }
+
+  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
+}