Repository: moeru-ai/airi
File: apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue (Vue)

Code before:
  try {
    isRefetching.value = true

    const nextSources = (await getSources())
      .sort((a, b) => {
        const aIsScreen = a.id.startsWith('screen:')
        const bIsScreen = b.id.startsWith('screen:')
        if (aIsScreen !== bIsScreen)
          return aIsScreen ? -1 : 1

        return a.name.localeCompare(b.name)
      })

    sources.value.forEach((oldSource) => {
      if (oldSource.appIconURL)
        URL.revokeObjectURL(oldSource.appIconURL)
      if (oldSource.thumbnailURL)
        URL.revokeObjectURL(oldSource.thumbnailURL)
    })

    sources.value = nextSources.map(source => ({
      ...source,
      // NOTICE(@nekomeowww): In probability of 9/10, the window thumbnail is purely empty or black, sources printed and
      // nothing is returned from the desktopCapturer API.
      // NOTICE(@sumimakito): Not only thumbnail is empty, the appIcon could be empty as well with nothing returned.
      // REVIEW(@sumimakito): This has nothing to do with out side, probably related to Electron Bug, you can
      // read more here https://github.com/electron/electron/issues/44504
      appIconURL: source.appIcon && source.appIcon.length > 0 ? toObjectUrl(source.appIcon, 'image/png') : undefined,
      thumbnailURL: source.thumbnail && source.thumbnail.length > 0 ? toObjectUrl(source.thumbnail, 'image/jpeg') : undefined,
    }))
  }
  catch (err) {
    console.error('Error fetching sources:', err)
  }
  finally {
    isRefetching.value = false
    hasFetchedOnce.value = true
  }
}

onMounted(async () => {
  refetchSources()
})

onBeforeUnmount(() => {
  sources.value.forEach((source) => {
    if (source.appIconURL)
      URL.revokeObjectURL(source.appIconURL)
    if (source.thumbnailURL)
      URL.revokeObjectURL(source.thumbnailURL)
  })

Review comment (bug):
```suggestion
      // REVIEW(@sumimakito): This has nothing to do with our side, probably related to a Electron bug, you can
```

Code after:
  try {
    isRefetching.value = true

    const nextSources = (await getSources())
      .sort((a, b) => {
        const aIsScreen = a.id.startsWith('screen:')
        const bIsScreen = b.id.startsWith('screen:')
        if (aIsScreen !== bIsScreen)
          return aIsScreen ? -1 : 1

        return a.name.localeCompare(b.name)
      })

    sources.value.forEach((oldSource) => {
      if (oldSource.appIconURL)
        URL.revokeObjectURL(oldSource.appIconURL)
      if (oldSource.thumbnailURL)
        URL.revokeObjectURL(oldSource.thumbnailURL)
    })

    sources.value = nextSources.map(source => ({
      ...source,
      // NOTICE(@nekomeowww): In probability of 9/10, the window thumbnail is purely empty or black, sources printed and
      // nothing is returned from the desktopCapturer API.
      // NOTICE(@sumimakito): Not only thumbnail is empty, the appIcon could be empty as well with nothing returned.
      // REVIEW(@sumimakito): This has nothing to do with our side, probably related to a Electron bug, you can
      // read more here https://github.com/electron/electron/issues/44504
      appIconURL: source.appIcon && source.appIcon.length > 0 ? toObjectUrl(source.appIcon, 'image/png') : undefined,
      thumbnailURL: source.thumbnail && source.thumbnail.length > 0 ? toObjectUrl(source.thumbnail, 'image/jpeg') : undefined,
    }))
  }
  catch (err) {
    console.error('Error fetching sources:', err)
  }
  finally {
    isRefetching.value = false
    hasFetchedOnce.value = true
  }
}

onMounted(async () => {
  refetchSources()
})

onBeforeUnmount(() => {
  sources.value.forEach((source) => {
    if (source.appIconURL)
      URL.revokeObjectURL(source.appIconURL)
    if (source.thumbnailURL)
      URL.revokeObjectURL(source.thumbnailURL)
  })