How to make my app an hybrid client.

[RecoX]

Hi, I need some recommendations from you to understand the pattern used in webtorrent-desktop as I want to use that codebase as a base of a customization project, I would like to create a new page where I can search into some trackers API, but tbh I don't know from where I can start.
As far I know there are 2 procesess, The main process (where Webtorrent is initialized) and the UI.
In src/main I believe i have all the stuff related with electron, os, and webtorrent and in src/renderer everything of the UI.

We have src/renderer/webtorrent.js that is a simple bridge between the Electron proccess and the React application, so everytime we request something from webtorrent like a file or wherever its just requesting to make it available in the UI, something like an access singletone for the view.

In the other hand we have src/renderer/main.js and its initializing the values, the controllers and over all it creates the react-dom

I see the file pages/app.js is the one who controls what view is rendered, but actually I don't understand how the react-element created in main.js is connected with this one (I don't understand the pattern).

How from here:

  // Download button toggles between torrenting (DL/seed) and paused
  // Play button starts streaming the torrent immediately, unpausing if needed
  renderTorrentButtons (torrentSummary) {
    const infoHash = torrentSummary.infoHash

    // Only show the play/dowload buttons for torrents that contain playable media
    let playButton
    if (!torrentSummary.error && TorrentPlayer.isPlayableTorrentSummary(torrentSummary)) {
      playButton = (
        <i
          key='play-button'
          title='Start streaming'
          className={'icon play'}
          onClick={dispatcher('playFile', infoHash)}>
          play_circle_outline
        </i>
      )
    }

    return (
      <div className='torrent-controls'>
        {playButton}
        <i
          key='delete-button'
          className='icon delete'
          title='Remove torrent'
          onClick={dispatcher('confirmDeleteTorrent', infoHash, false)}>
          close
        </i>
      </div>
    )
  }

When you click in the playButton you are redirected to another view? without any route or something like that? i try to read the code and but i can't see where the transition happens.

So basically to put it easy as a first example (i think...) let's say i want thetorrent-list-page page but with a player in the bottom and when I click in a audio file it will reproduce it without go to other page, which is a good approach to follow to understand how to work with this codebase??

2nd Question:
Let's say I want to move to another basecode ( i don't think so but to just know ), I would like to work with ember-electron and create an hybrid-client from there, what should I do? because in my example here:
https://github.com/refreex/refreex-desktop

I don't know how to do it

Thanks in advance