Updated readme

README.md

@@ -1,7 +1,70 @@
-#README
+# Readme
 
-A simple Javascript and HTML5 music player for fedi instances.
+A simple JavaScript and HTML5 music player. Intended to be embedded into websites and panels with a small iframe tag.
 
-Intended to be displayed in an iframe in the optional panel for pleroma instances.
+Share your locally hosted music playlist with the world!
 
-git clone the repository into instance/panel.html
+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
+    a. [Click here](https://git.yandere.cc/Anon/pleroma/commit/45f6ad7efda64a82b2a5b94af9b9071610a5dc8a) if you're confused. This is what it looks like on my instance.
+    b. 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`

audioPlayerPlaylist.js

@@ -1,3 +1,10 @@
+// Each list in the musicList should contain 5 strings as follows
+// 1: Path to the music file
+// 2: Track title
+// 3: Artist name
+// 4: Track length
+// 5: Path to the art file
+
 const musicList = [
 	["media/declare_war_on_all_vocaloid", "Declare War on All Vocaloid", "Sukone Tei", "05:53", "art/declare_war_on_all_vocaloid.png"],
 	["media/chains.m4a", "Chains", "Sukone Tei", "05:46", "art/chains.png"],