feat(bilibili): add support for live streaming of matches (#9303)

* feat(bilibili): Add support for live streaming of matches

* chore(bilibili): update iFrameRegExp to restrict to live.bilibili.com

* refactor(bilibili): Replacement of deprecated methods with new ones

---------

Co-authored-by: Bas van Zanten <me@bas950.com>

Author: TheWhiteDog9487

websites/B/bilibili/iframe.ts

@@ -0,0 +1,13 @@
+const iframe = new iFrame()
+
+iframe.on('UpdateData', async () => {
+  const title = document.querySelector('.smaller-title')?.getAttribute('title') ?? document.querySelector('.small-title')?.getAttribute('title')
+  const roomOwner = document.querySelector('.room-owner-username')?.getAttribute('title')
+  if (title === undefined || roomOwner === undefined) {
+    return
+  }
+  iframe.send({
+    details: title,
+    state: roomOwner,
+  })
+})

websites/B/bilibili/metadata.json

@@ -28,7 +28,7 @@
     "biligame.com"
   ],
   "regExp": "([a-z0-9-]+[.])*(bilibili|biligame)[.]com[/]",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "logo": "https://cdn.rcd.gg/PreMiD/websites/B/bilibili/assets/logo.png",
   "thumbnail": "https://cdn.rcd.gg/PreMiD/websites/B/bilibili/assets/thumbnail.jpg",
   "color": "#05acff",
@@ -37,6 +37,8 @@
     "video",
     "anime"
   ],
+  "iframe": true,
+  "iFrameRegExp": "live[.]bilibili[.]com",
   "settings": [
     {
       "id": "privacy",

websites/B/bilibili/presence.ts

@@ -1,4 +1,4 @@
-import { Assets } from 'premid'
+import { Assets, getTimestamps, getTimestampsFromMedia, timestampFromFormat } from 'premid'
 
 const presence = new Presence({ clientId: '639591760791732224' })
 const browsingTimestamp = Math.floor(Date.now() / 1000)
@@ -8,33 +8,40 @@ let uploader: HTMLElement | null,
   uploaderName: string,
   uploaderLink: string,
   title: HTMLElement | null,
+  iFrameTitle: string,
+  iFrameRoomOwnerName: string,
   videoPaused: boolean,
   currentTime: number,
   duration: number,
   timestamps: number[]
 
+presence.on('iFrameData', (data: any) => {
+  iFrameTitle = data.details
+  iFrameRoomOwnerName = data.state
+})
+
 presence.on('UpdateData', async () => {
   const presenceData: PresenceData = {
     largeImageKey: 'https://cdn.rcd.gg/PreMiD/websites/B/bilibili/assets/logo.png',
   }
   const privacy = await presence.getSetting<boolean>('privacy')
 
-  async function getTimestamps() {
+  async function internalGetTimestamps() {
     let video = document.querySelector<HTMLVideoElement>('bpx-player-container')
     if (!video) {
       video = document.querySelector<HTMLVideoElement>('video')!
       videoPaused = video.paused
-      timestamps = presence.getTimestampsfromMedia(video)
+      timestamps = getTimestampsFromMedia(video)
     }
     else {
       videoPaused = document.querySelector('.bpx-state-paused') === null
-      currentTime = presence.timestampFromFormat(
+      currentTime = timestampFromFormat(
         document.querySelector('.bpx-player-ctrl-time-current')?.textContent ?? '',
       )
-      duration = presence.timestampFromFormat(
+      duration = timestampFromFormat(
         document.querySelector('.bpx-player-ctrl-time-duration')?.textContent ?? '',
       )
-      timestamps = presence.getTimestamps(currentTime, duration)
+      timestamps = getTimestamps(currentTime, duration)
     }
 
     [presenceData.startTimestamp, presenceData.endTimestamp] = timestamps
@@ -53,7 +60,7 @@ presence.on('UpdateData', async () => {
       return
     }
 
-    getTimestamps()
+    internalGetTimestamps()
 
     if (document.querySelector('div.membersinfo-normal')) {
       uploader = document.querySelector('.staff-name')
@@ -90,7 +97,6 @@ presence.on('UpdateData', async () => {
       },
     ]
   }
-
   switch (document.location.hostname) {
     case 'www.bilibili.com': {
       switch (urlpath[1]) {
@@ -133,7 +139,7 @@ presence.on('UpdateData', async () => {
             setVideoStatus()
             break
           }
-          getTimestamps()
+          internalGetTimestamps()
           presenceData.details = document
             ?.querySelector('.list-title')
             ?.textContent
@@ -161,7 +167,7 @@ presence.on('UpdateData', async () => {
             presenceData.details = 'Watching an episode'
             break
           }
-          getTimestamps()
+          internalGetTimestamps()
           presenceData.details = document
             ?.querySelector('.mediainfo_mediaTitle__Zyiqh')
             ?.textContent
@@ -210,22 +216,34 @@ presence.on('UpdateData', async () => {
       break
     }
     case 'live.bilibili.com': {
-      if (document.querySelector('.small-title') === null) {
-        presenceData.details = document
+      if (privacy) {
+        presenceData.details = 'Watching a live stream'
+        break
+      }
+      const presenceDetails = document.querySelector('.small-title') === null
+        ? presenceData.details = document
           .querySelector('.smaller-title')
           ?.textContent
           ?.trim()
-      }
-      else if (document.querySelector('.smaller-title') === null) {
-        presenceData.details = document
+        : presenceData.details = document
           .querySelector('.small-title')
           ?.textContent
           ?.trim()
-      }
-      presenceData.state = document
-        .querySelector('.room-owner-username')
+      const presenceState = document.querySelector('.room-owner-username')
         ?.textContent
         ?.trim()
+      const isCompetition = presenceDetails === undefined && presenceState === undefined
+      if (isCompetition === true) {
+        if (iFrameTitle === undefined || iFrameRoomOwnerName === undefined) {
+          return
+        }
+        presenceData.details = iFrameTitle
+        presenceData.state = iFrameRoomOwnerName
+      }
+      else {
+        presenceData.details = presenceDetails
+        presenceData.state = presenceState
+      }
       presenceData.buttons = [
         {
           label: 'Watch Stream',