Add Ampache

[arkhi]

Ampache is a self-hosted music player, so the challenge is that people using WS will have to customize the options as each Ampache instance will have its specific URL.

Ampache has two demos available. The stable branch demo can be accessed with the following credentials:

• username "demo"
• password "demodemo".

I found the following DOM structure for the currently playing track:

<div class="playing_info">
    <div class="playing_artist">
        <a href="javascript:NavigateTo('[ARTIST_URL]');" title="A Perfect Circle">A Perfect Circle</a>
    </div>

    <div class="playing_title">
        <a href="javascript:NavigateTo('[SONG_URL]');" title="Passive">Passive</a>
    </div>

    <div class="playing_features">
        […]
    </div>
</div>

[arkhi]

Identifying a self-hosted instance is related to #1882.

[murillocjr]

These settings inside a new connector are working for my self hosted ampache+ample

export {};

Connector.playerSelector = '.site-player';
Connector.artistSelector = '.site-player__now-playing .details .artist';
Connector.trackSelector = '.site-player__now-playing .details .title';
Connector.albumSelector = '.site-player__now-playing .details .album>a'
Connector.trackArtSelector = '.site-player .nowPlayingArtwork';
Connector.currentTimeSelector = '.site-player__times .current'

hard-coding my LAN server in the connectors list with:

       {
               label: 'Ample-Ampache',
               matches: ['*://192.168.1.100:8087/*'],
               js: 'ample-ampache.js',
               id: 'ample-ampache',
               usesBlocklist: true,
       },

I understand that you can add your server ip/address later too