refactor(YouTube Music): improve handling for video playback states

websites/Y/YouTube Music/metadata.json

@@ -21,7 +21,7 @@
   },
   "url": "music.youtube.com",
   "regExp": "^https?[:][/][/]music[.]youtube[.]com[/]",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "logo": "https://cdn.rcd.gg/PreMiD/websites/Y/YouTube%20Music/assets/logo.png",
   "thumbnail": "https://cdn.rcd.gg/PreMiD/websites/Y/YouTube%20Music/assets/thumbnail.png",
   "color": "#E40813",

websites/Y/YouTube Music/presence.ts

@@ -15,36 +15,66 @@
   mediaTimestamps: [number, number] = [0, 0]
   oldPath = ''
   startTimestamp = 0
-  videoListenerAttached = false
+  attachedVideoElement: HTMLMediaElement | null = null
+  updateTimestampsHandler: (() => void) | null = null
   dataGetter = new YouTubeMusicDataGetter()
 }
 
 const state = new PresenceState()
 
 function attachVideoListeners(videoElement: HTMLMediaElement) {
-  if (state.videoListenerAttached)
+  if (state.attachedVideoElement === videoElement)
     return
 
+  detachVideoListeners()
+
   const updateTimestamps = () => {
     state.mediaTimestamps = updateSongTimestamps(state.dataGetter)
   }
-
   videoElement.addEventListener('seeked', updateTimestamps)
   videoElement.addEventListener('play', updateTimestamps)
 
-  state.videoListenerAttached = true
+  state.attachedVideoElement = videoElement
+  state.updateTimestampsHandler = updateTimestamps
 }
 
 function detachVideoListeners() {
+  if (state.attachedVideoElement && state.updateTimestampsHandler) {
+    state.attachedVideoElement.removeEventListener('seeked', state.updateTimestampsHandler)
+    state.attachedVideoElement.removeEventListener('play', state.updateTimestampsHandler)
+  }
+  state.attachedVideoElement = null
+  state.updateTimestampsHandler = null
   state.prevTitleAuthor = ''
-  state.videoListenerAttached = false
+}
+
+function tryShowBrowsing(
+  settings: Awaited<ReturnType<typeof getSettings>>,
+  pathname: string,
+  search: string,
+  href: string,
+  strings: Awaited<ReturnType<typeof presence.getStrings>>,
+) {
+  if (!settings.showBrowsing)
+    return false
+
+  if (state.oldPath !== pathname) {
+    state.oldPath = pathname
+    state.startTimestamp = Math.floor(Date.now() / 1000)
+  }
+
+  presence.setActivity(
+    createBrowsingPresence(pathname, search, href, state.startTimestamp, strings, settings.privacyMode),
+  )
+  return true
 }
 
 presence.on('UpdateData', async () => {
   const { pathname, search, href } = document.location
-  const settings = await getSettings(presence)
-  const strings = await presence.getStrings(stringMap)
-
+  const [settings, strings] = await Promise.all([
+    getSettings(presence),
+    presence.getStrings(stringMap),
+  ])
   const mediaData = state.dataGetter.getMediaData()
   const watchID = state.dataGetter.getWatchId()
   const repeatMode = state.dataGetter.getRepeatMode()
@@ -57,11 +87,17 @@
     detachVideoListeners()
   }
 
-  if (settings.hidePaused && mediaData.playbackState !== 'playing') {
+  if (!videoElement) {
+    if (tryShowBrowsing(settings, pathname, search, href, strings))
+      return
+
+    state.prevTitleAuthor = ''
     return presence.clearActivity()
   }
 
-  let presenceData: PresenceData = {}
+  if (settings.hidePaused && mediaData.playbackState !== 'playing') {
+    return presence.clearActivity()
+  }
 
   if (['playing', 'paused'].includes(mediaData.playbackState)) {
     if (settings.privacyMode) {
@@ -72,8 +108,9 @@
       })
     }
 
-    if (!mediaData.title || Number.isNaN(videoElement?.duration ?? Number.NaN)) {
-      return
+    if (!mediaData.title || Number.isNaN(videoElement.duration)) {
+      state.prevTitleAuthor = ''
+      return presence.clearActivity()
     }
 
     const currentTimeText = document
@@ -91,30 +128,29 @@
       state.mediaTimestamps = updateSongTimestamps(state.dataGetter)
 
       if (state.mediaTimestamps[0] === state.mediaTimestamps[1]) {
-        return
+        state.prevTitleAuthor = ''
+        return presence.clearActivity()
       }
-
       state.prevTitleAuthor = currentMediaIdentifier
     }
 
-    presenceData = createListeningPresence(
-      mediaData,
-      state.dataGetter,
-      settings,
-      watchID,
-      repeatMode,
-      state.mediaTimestamps,
-      strings,
+    return presence.setActivity(
+      createListeningPresence(
+        mediaData,
+        state.dataGetter,
+        settings,
+        watchID,
+        repeatMode,
+        state.mediaTimestamps,
+        strings,
+      ),
     )
   }
-  else if (settings.showBrowsing) {
-    if (state.oldPath !== pathname) {
-      state.oldPath = pathname
-      state.startTimestamp = Math.floor(Date.now() / 1000)
-    }
 
-    presenceData = createBrowsingPresence(pathname, search, href, state.startTimestamp, strings, settings.privacyMode)
-  }
+  state.prevTitleAuthor = ''
+
+  if (tryShowBrowsing(settings, pathname, search, href, strings))
+    return
 
-  presence.setActivity(presenceData)
+  return presence.clearActivity()
 })