FediMusicPlayer/README.md

# Readme

A simple JavaScript and HTML5 music player. Intended to be embedded into websites and panels with a small iframe tag.

Share your locally hosted music playlist with the world!

A live example can be viewed at [yandere.cc](https://yandere.cc)

![fedimusicplayer_screenshot](installation/fedimusicplayer_screenshot.png)

## Installing

This guide assumes the following:
1. You already have a domain name setup (and probably a subdomain as well, just to serve the playlist)
2. You have nginx installed correctly
3. You have ssl certificates configured correctly
4. The host you are trying to embed your playlist into allows the use of iframe tags

To install run the following commands as root. If you change the default paths, make sure to reflect the changes in your nginx configuration.
```
pacman -Syu
pacman -S --needed git
cd /opt
git clone 'https://git.yandere.cc/Anon/FediMusicPlayer.git'`
cd FediMusicPlayer/
mkdir {art,media}
```

Place your music and cover art into the `art/` and `media/` folder respectively.

Open `audioPlayerPlaylist.js` with your text editor of choice and add your songs and art to the configuration file. Make sure to delete the default tracks since the audio files for [yandere.cc](https://yandere.cc) are not included in the repo. Read the header of the file, it should be obvious how to add tracks.

If you're not sure how to tell how long the track is, use `ffprobe song.m4a` if you have ffmpeg installed. This should give you the track time.

Run the following commands as root:
```
cd /etc/nginx
mkdir {sites-avalible,sites-enabled}
cp -nv /opt/FediMusicPlayer/installation/fedimusicplayer.nginx sites-avalible/
ln -s /etc/nginx/sites-avalible/fedimusicplayer.nginx sites-enabled/fedimusicplayer.nginx
```

Edit `/etc/nginx/sites-avalible/fedimusicplayer.nginx` with your text editor of choice. Replace example.tld with your actual domain, and path to your ssl certificates.

Edit `/etc/nginx/nginx.conf` and make sure you append the below line at the end of the http block (before the closing bracket)

```
include sites-enabled/*;
```

When done, run `nginx -t` as root to make sure the configuration is good, and then start nginx `systemctl start --now nginx.service` or restart if it's already running `systemctl restart nginx.service`

Visit your website in a browser to make sure everything is working correctly.

## Add The Panel To Pleroma

The actual reason I made this project :)

You don't have to use it strictly with Pleroma as you might imagine, but it's designed to work and look good in small panels like the instance specific panel in Pleroma.

To use it as such, some configuration is required:
1. cd into the root directory of your Pleroma installation: `cd /opt/pleroma`
2. Edit `config/prod.secrets.exs` and enable `showInstanceSpecificPanel`.
3. Add CSP parameter "frame-src https://example.tld" to lib/pleroma/web/plugs/http_security_plug.ex
    1. [Click here](https://git.yandere.cc/Anon/pleroma/commit/45f6ad7efda64a82b2a5b94af9b9071610a5dc8a) if you're confused. This is what it looks like on my instance.
    2. This is required, otherwise web browsers that implement Content Security Policy (CSP) rules will not allow you to embed your website in an iframe.
4. Make the following path `mkdir -p instance/static/instance`
5. Copy `/opt/FediMusicPlayer/installation/panel.html` into `instance/static/instance`
6. Edit `instance/static/instance/panel.html` and replace example.tld with your domain inside the iframe tag.
7. Restart Pleroma (which should cause the Pleroma app to rebuild) `systemctl restart pleroma.service`
8. Make sure your panel looks similar to mine in the screenshot.
9. If something goes wrong, check either your Pleroma or nginx logs `systemctl -u pleroma`