diff --git a/changes/changelog.d/710.add-track-dropdown b/changes/changelog.d/710.add-track-dropdown
new file mode 100644
index 0000000000000000000000000000000000000000..b82cf92ea86d9ae6aacea9d46d7917a6f1d9ff5c
--- /dev/null
+++ b/changes/changelog.d/710.add-track-dropdown
@@ -0,0 +1 @@
+Add dropdown menu to track table (#531)
diff --git a/changes/notes.rst b/changes/notes.rst
index cae728e7d0234c2fff227e85f4cf56bd175448f3..0c69462e1d733d373403db4accaf4bbb63749159 100644
--- a/changes/notes.rst
+++ b/changes/notes.rst
@@ -78,6 +78,14 @@ Content-Security-Policy and additional security headers [manual action suggested
To improve the security and reduce the attack surface in case of a successfull exploit, we suggest
you add the following Content-Security-Policy to your nginx configuration.
+..note::
+
+ If you are using an S3-compatible store to serve music, you will need to specify the URL of your S3 store in the ``media-src`` and ``img-src`` headers
+
+ .. code-block::
+
+ add_header Content-Security-Policy "...img-src 'self' https://<your-s3-URL> data:;...media-src https://<your-s3-URL> 'self' data:";
+
**On non-docker setups**, in ``/etc/nginx/sites-available/funkwhale.conf``::
server {
diff --git a/deploy/docker.nginx.template b/deploy/docker.nginx.template
index a69762c19f1989d8d7a50c6dadce1dbe8499b3c4..d3a7fc9a67866811eb0568872129b336b99e7c11 100644
--- a/deploy/docker.nginx.template
+++ b/deploy/docker.nginx.template
@@ -23,6 +23,9 @@ server {
root /frontend;
+ # If you are using S3 to host your files, remember to add your S3 URL to the
+ # media-src and img-src headers (e.g. img-src 'self' https://<your-S3-URL> data:)
+
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:";
add_header Referrer-Policy "strict-origin-when-cross-origin";
diff --git a/deploy/docker.proxy.template b/deploy/docker.proxy.template
index 6b0a0405abfc2ca6cd299705801ca16848a1ac85..abeff4cecc90d2ae84450a3a50ed25f135e27dec 100644
--- a/deploy/docker.proxy.template
+++ b/deploy/docker.proxy.template
@@ -30,6 +30,10 @@ server {
add_header Strict-Transport-Security "max-age=31536000";
# Security related headers
+
+ # If you are using S3 to host your files, remember to add your S3 URL to the
+ # media-src and img-src headers (e.g. img-src 'self' https://<your-S3-URL> data:)
+
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:";
# compression settings
diff --git a/deploy/nginx.template b/deploy/nginx.template
index 89d53ce2b18d103e7c53b0287db5c1404914b1e2..1dc6de6da6d03a1e55662188ce58aaa32b25a46e 100644
--- a/deploy/nginx.template
+++ b/deploy/nginx.template
@@ -41,6 +41,9 @@ server {
# HSTS
add_header Strict-Transport-Security "max-age=31536000";
+ # If you are using S3 to host your files, remember to add your S3 URL to the
+ # media-src and img-src headers (e.g. img-src 'self' https://<your-S3-URL> data:)
+
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:";
add_header Referrer-Policy "strict-origin-when-cross-origin";
diff --git a/docs/admin/external-storages.rst b/docs/admin/external-storages.rst
index bd136df621a0d2b24aa33e08e5a868374d91a727..45fed68ab2284697e3379e73070347dfac2143b5 100644
--- a/docs/admin/external-storages.rst
+++ b/docs/admin/external-storages.rst
@@ -45,6 +45,12 @@ Replace the ``location /_protected/media`` block with the following::
proxy_pass $1;
}
+Add your S3 store URL to the ``img-src`` and ``media-src`` headers
+
+.. code-block:: shell
+
+ add_header Content-Security-Policy "...img-src 'self' https://<your-s3-URL> data:;...media-src https://<your-s3-URL> 'self' data:";
+
Then restart Funkwhale and nginx.
From now on, media files will be stored on the S3 bucket you configured. If you already
@@ -141,3 +147,22 @@ in your ``funkwhale.template`` under the ``location ~/_protected/media/(.+)`` se
proxy_pass $1;
}
+No Images or Media Loading
+^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+If you are serving media from an S3-compatible store, you may experience an issue where
+nothing loads in the front end. The error logs in your browser may show something like
+the following:
+
+.. code-block:: text
+
+ Content Security Policy: The page's settings blocked the loading of a resource at https://<your-s3-url> ("img-src")
+ Content Security Policy: The page's settings blocked the loading of a resource at https://<your-s3-url> ("media-src")
+
+This happens when your S3 store isn't defined in the ``Content-Security-Policy`` headers
+in your Nginx files. To resolve the issue, add the base URL of your S3 store to the ``img-src``
+and ``media-src`` headers and reload nginx.
+
+.. code-block:: shell
+
+ add_header Content-Security-Policy "...img-src 'self' https://<your-s3-URL> data:;...media-src https://<your-s3-URL> 'self' data:";
diff --git a/docs/installation/docker.rst b/docs/installation/docker.rst
index c901ed279980b7dac7acb2dc0a9a343e768e9b33..7bb912b818c6842e4882c7a46d9ddab309cabbf2 100644
--- a/docs/installation/docker.rst
+++ b/docs/installation/docker.rst
@@ -150,6 +150,11 @@ Useful commands:
ports:
- "5000:80"
+ Then start the container:
+
+ .. code-block:: shell
+
+ docker-compose up -d
.. _docker-multi-container:
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 624467f211855c73722f12eccf03cc8e4b684492..1f5b23a6c44b5d056dee78b34649a7ca156451c2 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -42,6 +42,13 @@
</td>
<td colspan="2" class="align right">
<track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon>
+ <play-button
+ class="play-button basic icon"
+ :dropdown-only="true"
+ :is-playable="track.is_playable"
+ :dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
+ :track="track"
+ ></play-button>
<track-playlist-icon
v-if="$store.state.auth.authenticated"
:track="track"></track-playlist-icon>
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 31327ee3a5e3286cec4eded21ccc801d73e0b1eb..390a4e483ea36224ad2125f37f9af1878f8f9868 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -85,4 +85,7 @@ tr:not(:hover) .favorite-icon:not(.favorited) {
pre {
overflow-x: scroll;
}
+.table-wrapper {
+ overflow: visible;
+}
</style>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 9a2fe1722a2889468881305c581f5745bf67d397..3687b6e225e0a11a70031574458181a55fb73d61 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -364,11 +364,6 @@ input + .help {
margin-top: 0.5em;
}
-.table td .ui.dropdown {
- min-width: 150px;
-}
-
-
.tag-list {
margin-top: 0.5em;
}