CHANGELOG.md

@@ -9,19 +9,6 @@ This changelog is viewable on the web at https://docs.funkwhale.audio/changelog.
 
 <!-- towncrier -->
 
-## 2.0.0-alpha.2 (2025-06-10)
-
-Upgrade instructions are available at https://docs.funkwhale.audio/administrator/upgrade/index.html
-
-Enhancements:
-
-- Make playlist detail page reactive to plugin upload updates (#2464)
-- Only refresh_nodeinfo_known_nodes for Funkwhale instances (#2442)
-
-Bugfixes:
-
-- Fixed database migrations for trackfavorite, playlist and playlisttrack
-
 ## 2.0.0-alpha.1 (2025-05-23)
 
 Carefully read [this blog post](https://blog.funkwhale.audio/2025-funkwhale-2-news.html) before upgrading. This alpha release might break your db.

api/config/settings/common.py

@@ -556,15 +556,7 @@ The path where static files are collected.
 """
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#static-url
 STATIC_URL = env("STATIC_URL", default=FUNKWHALE_URL + "/staticfiles/")
-STORAGES = {
-    "default": {
-        "BACKEND": "funkwhale_api.common.storage.ASCIIFileSystemStorage",
-    },
-    "staticfiles": {
-        "BACKEND": "django.contrib.staticfiles.storage.StaticFilesStorage",
-    },
-}
-
+DEFAULT_FILE_STORAGE = "funkwhale_api.common.storage.ASCIIFileSystemStorage"
 
 PROXY_MEDIA = env.bool("PROXY_MEDIA", default=True)
 """
@@ -663,7 +655,7 @@ if AWS_ACCESS_KEY_ID:
     A directory in your S3 bucket where you store files.
     Use this if you plan to share the bucket between services.
     """
-    STORAGES["default"]["BACKEND"] = "funkwhale_api.common.storage.ASCIIS3Boto3Storage"
+    DEFAULT_FILE_STORAGE = "funkwhale_api.common.storage.ASCIIS3Boto3Storage"
 
 
 # See:

api/config/settings/production.py

@@ -41,6 +41,10 @@ SECRET_KEY = env("DJANGO_SECRET_KEY")
 # SESSION_COOKIE_HTTPONLY = True
 # SECURE_SSL_REDIRECT = env.bool("DJANGO_SECURE_SSL_REDIRECT", default=True)
 
+# Static Assets
+# ------------------------
+STATICFILES_STORAGE = "django.contrib.staticfiles.storage.StaticFilesStorage"
+
 # TEMPLATE CONFIGURATION
 # ------------------------------------------------------------------------------
 # See:

api/funkwhale_api/common/consumers.py

@@ -19,10 +19,6 @@ class JsonAuthConsumer(JsonWebsocketConsumer):
             channels.group_add(group, self.channel_name)
 
     def disconnect(self, close_code):
-        if self.scope.get("user", False) and self.scope.get("user").pk is not None:
-            groups = self.scope["user"].get_channels_groups() + self.groups
-        else:
-            groups = self.groups
-
+        groups = self.scope["user"].get_channels_groups() + self.groups
         for group in groups:
             channels.group_discard(group, self.channel_name)

api/funkwhale_api/common/schema.yml

@@ -1,7 +1,7 @@
 openapi: 3.0.3
 info:
   title: Funkwhale API
-  version: 2.0.0a2
+  version: 1.4.0
   description: |
     # Funkwhale API
 

api/funkwhale_api/favorites/migrations/0003_trackfavorite_actor_trackfavorite_fid_and_more.py

@@ -55,7 +55,12 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name="trackfavorite",
             name="fid",
-            field=models.URLField(default="https://default.fid"),
+            field=models.URLField(
+                db_index=True,
+                default="https://default.fid",
+                max_length=500,
+                unique=True,
+            ),
             preserve_default=False,
         ),
         migrations.AddField(
@@ -74,15 +79,6 @@ class Migration(migrations.Migration):
             name="uuid",
             field=models.UUIDField(default=uuid.uuid4, unique=True, null=False),
         ),
-        migrations.AlterField(
-            model_name="trackfavorite",
-            name="fid",
-            field=models.URLField(
-                db_index=True,
-                max_length=500,
-                unique=True,
-            ),
-        ),
         migrations.RunPython(get_user_actor, reverse_code=migrations.RunPython.noop),
         migrations.AlterField(
             model_name="trackfavorite",

api/funkwhale_api/federation/tasks.py

@@ -236,10 +236,8 @@ def refresh_nodeinfo_known_nodes():
     settings.NODEINFO_REFRESH_DELAY
     """
     limit = timezone.now() - datetime.timedelta(seconds=settings.NODEINFO_REFRESH_DELAY)
-    candidates = (
-        models.Domain.objects.external()
-        .exclude(nodeinfo_fetch_date__gte=limit)
-        .filter(nodeinfo__software__name="Funkwhale")
+    candidates = models.Domain.objects.external().exclude(
+        nodeinfo_fetch_date__gte=limit
     )
     names = candidates.values_list("name", flat=True)
     logger.info("Launching periodic nodeinfo refresh on %s domains", len(names))

api/funkwhale_api/music/serializers.py

@@ -1,5 +1,3 @@
-import os
-import pathlib
 import urllib.parse
 
 from django import urls
@@ -905,17 +903,13 @@ class FSImportSerializer(serializers.Serializer):
     prune = serializers.BooleanField(required=False, default=True)
     outbox = serializers.BooleanField(required=False, default=False)
     broadcast = serializers.BooleanField(required=False, default=False)
-    replace = serializers.BooleanField(required=False, default=False)
     batch_size = serializers.IntegerField(required=False, default=1000)
     verbosity = serializers.IntegerField(required=False, default=1)
 
     def validate_path(self, value):
         try:
             utils.browse_dir(settings.MUSIC_DIRECTORY_PATH, value)
-        except NotADirectoryError:
-            if not os.path.isfile(pathlib.Path(settings.MUSIC_DIRECTORY_PATH) / value):
-                raise serializers.ValidationError("Invalid path")
-        except (FileNotFoundError, ValueError):
+        except (NotADirectoryError, FileNotFoundError, ValueError):
             raise serializers.ValidationError("Invalid path")
 
         return value

api/funkwhale_api/music/tasks.py

@@ -1209,7 +1209,6 @@ def fs_import(
     prune=True,
     outbox=False,
     broadcast=False,
-    replace=False,
     batch_size=1000,
     verbosity=1,
 ):
@@ -1230,7 +1229,7 @@ def fs_import(
         "batch_size": batch_size,
         "async_": False,
         "prune": prune,
-        "replace": replace,
+        "replace": False,
         "verbosity": verbosity,
         "exit_on_failure": False,
         "outbox": outbox,

api/funkwhale_api/music/views.py

@@ -386,7 +386,6 @@ class LibraryViewSet(
                 prune=serializer.validated_data["prune"],
                 outbox=serializer.validated_data["outbox"],
                 broadcast=serializer.validated_data["broadcast"],
-                replace=serializer.validated_data["replace"],
                 batch_size=serializer.validated_data["batch_size"],
                 verbosity=serializer.validated_data["verbosity"],
             )

api/funkwhale_api/playlists/migrations/0005_remove_playlist_user_playlist_actor.py

@@ -25,7 +25,7 @@ def gen_uuid(apps, schema_editor):
             unique_uuid = uuid.uuid4()
 
         fid = utils.full_url(
-            reverse("federation:music:playlists-detail", kwargs={"uuid": unique_uuid})
+            reverse("federation:music:playlist-detail", kwargs={"uuid": unique_uuid})
         )
         row.uuid = unique_uuid
         row.fid = fid
@@ -42,7 +42,7 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name="playlist",
             name="fid",
-            field=models.URLField(max_length=500, null=True),
+            field=models.URLField(max_length=500            ),
         ),
         migrations.AddField(
             model_name="playlist",
@@ -63,13 +63,8 @@ class Migration(migrations.Migration):
         migrations.AlterField(
             model_name="playlist",
             name="fid",
-            field=models.URLField(
-                max_length=500,
-                unique=True,
-                db_index=True,
-                null=False,
-            ),
-        ),
+            field=models.URLField(max_length=500, unique=True, db_index=True,
+            ),),
         migrations.AddField(
             model_name="playlist",
             name="actor",

api/funkwhale_api/playlists/migrations/0006_playlisttrack_fid_playlisttrack_url_and_more.py

@@ -9,14 +9,14 @@ from funkwhale_api.federation import utils
 from django.urls import reverse
 
 def gen_uuid(apps, schema_editor):
-    MyModel = apps.get_model("playlists", "PlaylistTrack")
+    MyModel = apps.get_model("playlists", "Playlist")
     for row in MyModel.objects.all():
         unique_uuid = uuid.uuid4()
         while MyModel.objects.filter(uuid=unique_uuid).exists():
             unique_uuid = uuid.uuid4()
 
         fid = utils.full_url(
-            reverse("federation:music:playlists-detail", kwargs={"uuid": unique_uuid})
+            reverse("federation:music:playlist-detail", kwargs={"uuid": unique_uuid})
         )
         row.uuid = unique_uuid
         row.fid = fid
@@ -38,7 +38,8 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name="playlisttrack",
             name="fid",
-            field=models.URLField(max_length=500, null=True),
+            field=models.URLField(max_length=500
+            ),
         ),
         migrations.AddField(
             model_name="playlisttrack",
@@ -46,8 +47,8 @@ class Migration(migrations.Migration):
             field=models.URLField(blank=True, max_length=500, null=True),
         ),
         migrations.RunPython(gen_uuid, reverse_code=migrations.RunPython.noop),
-        migrations.AlterField(
-            model_name="playlisttrack",
+                migrations.AlterField(
+            model_name="playlist",
             name="uuid",
             field=models.UUIDField(default=uuid.uuid4, null=False, unique=True),
         ),
@@ -55,7 +56,6 @@ class Migration(migrations.Migration):
             model_name="playlisttrack",
             name="fid",
             field=models.URLField(
-                db_index=True, max_length=500, unique=True, null=False
-            ),
-        ),
+                db_index=True, max_length=500, unique=True
+            ),),
     ]

api/funkwhale_api/playlists/models.py

@@ -307,7 +307,7 @@ class PlaylistTrackQuerySet(models.QuerySet, common_models.LocalFromFidQuerySet)
         return self.annotate(is_playable_by_actor=subquery)
 
     def playable_by(self, actor, include=True):
-        tracks = music_models.Track.objects.playable_by(actor)
+        tracks = music_models.Track.objects.playable_by(actor, include)
         if include:
             return self.filter(track__pk__in=tracks).distinct()
         else:

api/funkwhale_api/playlists/serializers.py

@@ -67,10 +67,8 @@ class PlaylistSerializer(serializers.ModelSerializer):
 
     @extend_schema_field(OpenApiTypes.BOOL)
     def get_library_followed(self, obj):
-        if (
-            self.context.get("request", False)
-            and hasattr(self.context["request"], "user")
-            and hasattr(self.context["request"].user, "actor")
+        if self.context.get("request", False) and hasattr(
+            self.context["request"], "user"
         ):
             actor = self.context["request"].user.actor
             lib_qs = obj.library.received_follows.filter(actor=actor)

api/funkwhale_api/playlists/views.py

@@ -7,7 +7,6 @@ from django.db.models import Count
 from drf_spectacular.utils import extend_schema
 from rest_framework import exceptions, mixins, status, viewsets
 from rest_framework.decorators import action
-from rest_framework.pagination import PageNumberPagination
 from rest_framework.parsers import FormParser, JSONParser, MultiPartParser
 from rest_framework.renderers import JSONRenderer
 from rest_framework.response import Response
@@ -130,25 +129,18 @@ class PlaylistViewSet(
     @action(methods=["get"], detail=True)
     def tracks(self, request, *args, **kwargs):
         playlist = self.get_object()
-        actor = music_utils.get_actor_from_request(request)
-        plts = playlist.playlist_tracks.all().for_nested_serialization(actor)
-        for plt in plts.playable_by(actor, include=False)[
-            : settings.THIRD_PARTY_UPLOAD_MAX_UPLOADS
-        ]:
+        plts = playlist.playlist_tracks.all().for_nested_serialization(
+            music_utils.get_actor_from_request(request)
+        )
+        plts_without_upload = plts.filter(track__uploads__isnull=True)
+        for plt in plts_without_upload[: settings.THIRD_PARTY_UPLOAD_MAX_UPLOADS]:
             plugins.trigger_hook(
                 plugins.TRIGGER_THIRD_PARTY_UPLOAD,
                 track=plt.track,
-                actor=actor,
             )
-
-        # Apply pagination
-        paginator = PageNumberPagination()
-        paginator.page_size = 50  # Set the page size (number of items per page)
-        paginated_plts = paginator.paginate_queryset(plts, request)
-
-        # Serialize the paginated data
-        serializer = serializers.PlaylistTrackSerializer(paginated_plts, many=True)
-        return paginator.get_paginated_response(serializer.data)
+        serializer = serializers.PlaylistTrackSerializer(plts, many=True)
+        data = {"count": len(plts), "results": serializer.data}
+        return Response(data, status=200)
 
     @extend_schema(
         operation_id="add_to_playlist", request=serializers.PlaylistAddManySerializer

api/funkwhale_api/subsonic/renderers.py

@@ -42,7 +42,7 @@ def structure_payload(data):
         "status": "ok",
         "type": "funkwhale",
         "version": "1.16.0",
-        "openSubsonic": True,
+        "openSubsonic": "true",
     }
     payload.update(data)
     if "detail" in payload:
@@ -70,7 +70,6 @@ class SubsonicXMLRenderer(renderers.JSONRenderer):
             return super().render(data, accepted_media_type, renderer_context)
         final = structure_payload(data)
         final["xmlns"] = "http://subsonic.org/restapi"
-        final["openSubsonic"] = "true"
         tree = dict_to_xml_tree("subsonic-response", final)
         return b'<?xml version="1.0" encoding="UTF-8"?>\n' + ET.tostring(
             tree, encoding="utf-8"

api/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "funkwhale-api"
-version = "2.0.0-alpha.2"
+version = "2.0.0-alpha.1"
 description = "Funkwhale API"
 
 authors = ["Funkwhale Collective"]
@@ -135,8 +135,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.pylint.master]
 load-plugins = ["pylint_django"]
-django-settings-module = "config.settings.local"
-init-hook = 'import os; os.environ.setdefault("FUNKWHALE_URL", "https://test.federation")'
+django-settings-module = "config.settings.testing"
 
 [tool.pylint.messages_control]
 disable = [

api/tests/federation/test_tasks.py

@@ -233,19 +233,15 @@ def test_refresh_nodeinfo_known_nodes(settings, factories, mocker, now):
     settings.NODEINFO_REFRESH_DELAY = 666
 
     refreshed = [
-        factories["federation.Domain"](
-            nodeinfo_fetch_date=None,
-            nodeinfo={"software": {"name": "Funkwhale"}},
-        ),
+        factories["federation.Domain"](nodeinfo_fetch_date=None),
         factories["federation.Domain"](
             nodeinfo_fetch_date=now
-            - datetime.timedelta(seconds=settings.NODEINFO_REFRESH_DELAY + 1),
-            nodeinfo={"software": {"name": "Funkwhale"}},
+            - datetime.timedelta(seconds=settings.NODEINFO_REFRESH_DELAY + 1)
         ),
     ]
     factories["federation.Domain"](
         nodeinfo_fetch_date=now
-        - datetime.timedelta(seconds=settings.NODEINFO_REFRESH_DELAY - 1),
+        - datetime.timedelta(seconds=settings.NODEINFO_REFRESH_DELAY - 1)
     )
 
     update_domain_nodeinfo = mocker.patch.object(tasks.update_domain_nodeinfo, "delay")

api/tests/music/test_views.py

@@ -1528,7 +1528,6 @@ def test_fs_import_post(
         prune=True,
         outbox=False,
         broadcast=False,
-        replace=False,
         batch_size=1000,
         verbosity=1,
     )

api/tests/subsonic/test_renderers.py

@@ -18,7 +18,7 @@ from funkwhale_api.subsonic import renderers
                 "type": "funkwhale",
                 "funkwhaleVersion": funkwhale_api.__version__,
                 "serverVersion": funkwhale_api.__version__,
-                "openSubsonic": True,
+                "openSubsonic": "true",
                 "hello": "world",
             },
         ),
@@ -33,7 +33,7 @@ from funkwhale_api.subsonic import renderers
                 "type": "funkwhale",
                 "funkwhaleVersion": funkwhale_api.__version__,
                 "serverVersion": funkwhale_api.__version__,
-                "openSubsonic": True,
+                "openSubsonic": "true",
                 "hello": "world",
                 "error": {"code": 10, "message": "something went wrong"},
             },
@@ -46,7 +46,7 @@ from funkwhale_api.subsonic import renderers
                 "type": "funkwhale",
                 "funkwhaleVersion": funkwhale_api.__version__,
                 "serverVersion": funkwhale_api.__version__,
-                "openSubsonic": True,
+                "openSubsonic": "true",
                 "hello": "world",
                 "error": {"code": 0, "message": "something went wrong"},
             },
@@ -66,7 +66,7 @@ def test_json_renderer():
             "type": "funkwhale",
             "funkwhaleVersion": funkwhale_api.__version__,
             "serverVersion": funkwhale_api.__version__,
-            "openSubsonic": True,
+            "openSubsonic": "true",
             "hello": "world",
         }
     }

changes/changelog.d/2459-storagespec

@@ -1 +0,0 @@
-Updated the django-storage specification to the latest version (#2459)

changes/changelog.d/2460-fallbackimg

@@ -1 +0,0 @@
-Small sized attachments now fallback to medium sized if small doesn't exist (#2460)

changes/changelog.d/2791.feature

@@ -1 +0,0 @@
-Allow importing single files using fs-import API endpoint

compose/etc/nginx/conf.dev

@@ -74,11 +74,6 @@ server {
         proxy_pass   http://funkwhale-api;
     }
 
-    location /node_modules/.vite/ {
-        include /etc/nginx/funkwhale_proxy.conf;
-        proxy_pass   http://funkwhale-front;
-    }
-
     location ~ ^/@(vite-plugin-pwa|vite|id)/ {
         include /etc/nginx/funkwhale_proxy.conf;
         proxy_pass   http://funkwhale-front;

docs/developer/workflows/release.md

@@ -58,8 +58,6 @@ Once we're ready to release a new version of the software, we can use the follow
 7. Update the next release version
 
    ```sh
-   docker compose build api
-   docker compose run --rm api funkwhale-manage spectacular > ./api/funkwhale_api/common/schema.yml
    cd api
    poetry version "$NEXT_RELEASE"
    cd ..

front/src/components/album/Widget.vue

@@ -6,6 +6,7 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import usePage from '~/composables/navigation/usePage'
 import useErrorHandler from '~/composables/useErrorHandler'
 
 import AlbumCard from '~/components/album/Card.vue'
@@ -33,7 +34,7 @@ const store = useStore()
 const query = ref('')
 const albums = reactive([] as Album[])
 const count = ref(0)
-const page = ref(1)
+const page = usePage()
 const nextPage = ref()
 
 const isLoading = ref(false)

front/src/components/artist/Widget.vue

@@ -7,6 +7,7 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
+import usePage from '~/composables/navigation/usePage'
 
 import ArtistCard from '~/components/artist/Card.vue'
 import Section from '~/components/ui/Section.vue'
@@ -33,7 +34,7 @@ const store = useStore()
 const query = ref('')
 const artists = reactive([] as Artist[])
 const count = ref(0)
-const page = ref(1)
+const page = usePage()
 const nextPage = ref()
 
 const isLoading = ref(false)

front/src/components/audio/ArtistCreditLabel.vue

@@ -48,7 +48,6 @@ const getRoute = (ac: ArtistCredit) => {
               v-if="ac.artist.cover && ac.artist.cover.urls.original"
               v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.small_square_crop)"
               :alt="ac.artist.name"
-              @error="(e) => { e.target && ac.artist.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop) : null }"
             >
             <i
               v-else

front/src/components/audio/ArtistLabel.vue

@@ -28,7 +28,6 @@ const route = computed(() => props.artist.channel
       v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.small_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
-      @error="(e) => { e.target && artist.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop) : null }"
     >
     <i
       v-else

front/src/components/audio/ChannelsWidget.vue

@@ -7,6 +7,8 @@ import { clone } from 'lodash-es'
 
 import axios from 'axios'
 
+import usePage from '~/composables/navigation/usePage'
+
 import ChannelCard from '~/components/audio/ChannelCard.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Section from '~/components/ui/Section.vue'
@@ -31,7 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
 const result = ref<PaginatedChannelList>()
 const errors = ref([] as string[])
 const nextPage = ref()
-const page = ref(1)
+const page = usePage()
 const count = ref(0)
 
 const isLoading = ref(false)

front/src/components/audio/PlayButton.vue

@@ -250,7 +250,7 @@ const playlistLibraryFollowInfo = computed(() => {
       <hr v-if="filterableArtist || Object.keys(getReportableObjects({ track, album, artist, playlist, account, channel })).length > 0">
 
       <PopoverItem
-        v-if="filterableArtist && !props.playlist"
+        v-if="filterableArtist"
         :disabled="!filterableArtist"
         :title="labels.hideArtist"
         icon="bi-eye-slash"

front/src/components/audio/podcast/MobileRow.vue

@@ -77,14 +77,12 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.cover"
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="!!track.artist_credit.length && track.artist_credit[0].artist.cover"

front/src/components/audio/podcast/Row.vue

@@ -90,14 +90,12 @@ await fetchData()
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-if="track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.artist_credit.length && track.artist_credit[0].artist.cover"

front/src/components/audio/track/MobileRow.vue

@@ -2,7 +2,7 @@
 import type { Track, Artist, Album, Playlist, Library, Channel, Actor } from '~/types'
 import type { PlayOptionsProps } from '~/composables/audio/usePlayOptions'
 
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { usePlayer } from '~/composables/audio/player'
@@ -12,10 +12,9 @@ import { useStore } from '~/store'
 import usePlayOptions from '~/composables/audio/usePlayOptions'
 
 import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
+import TrackModal from '~/components/audio/track/Modal.vue'
 import { generateTrackCreditString } from '~/utils/utils'
 
-import Button from '~/components/ui/Button.vue'
-
 interface Props extends PlayOptionsProps {
   track: Track
   index: number
@@ -26,6 +25,7 @@ interface Props extends PlayOptionsProps {
 
   // TODO(wvffle): Remove after https://github.com/vuejs/core/pull/4512 is merged
   isPlayable?: boolean
+  tracks?: Track[]
   artist?: Artist | null
   album?: Album | null
   playlist?: Playlist | null
@@ -39,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   isArtist: false,
   isAlbum: false,
 
+  tracks: () => [],
   artist: null,
   album: null,
   playlist: null,
@@ -47,9 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
   account: null
 })
 
-const emit = defineEmits<{
-  (e: 'open-modal', track: Track, index: number): void
-}>()
+const showTrackModal = ref(false)
 
 const { currentTrack } = useQueue()
 const { isPlaying } = usePlayer()
@@ -78,14 +77,12 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
-        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else
@@ -118,10 +115,8 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         />
       </p>
     </div>
-    <track-favorite-icon
+    <div
       v-if="store.state.auth.authenticated"
-      ghost
-      tiny
       :class="[
         'meta',
         'right',
@@ -130,14 +125,17 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         'mobile',
         { 'with-art': showArt },
       ]"
-      :track="track"
-    />
-    <!-- TODO: Replace with <PlayButton :dropdown-only="true"> after its display is fixed for mobile -->
-    <Button
+      role="button"
+    >
+      <track-favorite-icon
+        class="tiny"
+        :border="false"
+        :track="track"
+      />
+    </div>
+    <div
+      role="button"
       :aria-label="actionsButtonLabel"
-      icon="bi-three-dots-vertical"
-      ghost
-      tiny
       :class="[
         'modal-button',
         'right',
@@ -146,7 +144,16 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         'mobile',
         { 'with-art': showArt },
       ]"
-      @click.prevent.exact="emit('open-modal', track, index)"
+      @click.prevent.exact="showTrackModal = !showTrackModal"
+    >
+      <i class="ellipsis large vertical icon" />
+    </div>
+    <track-modal
+      v-model:show="showTrackModal"
+      :track="track"
+      :index="index"
+      :is-artist="isArtist"
+      :is-album="isAlbum"
     />
   </div>
 </template>

front/src/components/audio/track/Modal.vue

@@ -12,8 +12,6 @@ import { useVModel } from '@vueuse/core'
 import { generateTrackCreditString, getArtistCoverUrl } from '~/utils/utils'
 
 import Modal from '~/components/ui/Modal.vue'
-import Button from '~/components/ui/Button.vue'
-import Layout from '~/components/ui/Layout.vue'
 
 interface Events {
   (e: 'update:show', value: boolean): void
@@ -94,11 +92,9 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <!-- TODO: Delete this file after this modal is replaced with playbutton dropdown-only popover -->
   <Modal
     v-model="show"
     :title="track.title"
-    class="small"
   >
     <div class="header">
       <div class="ui large centered rounded image">
@@ -131,105 +127,126 @@ const labels = computed(() => ({
         {{ generateTrackCreditString(track) }}
       </h4>
     </div>
+    <div class="ui hidden divider" />
     <div class="content">
-      <Layout
-        stack
-        no-gap
-      >
-        <Button
+      <div class="ui one column unstackable grid">
+        <div
           v-if="store.state.auth.authenticated && track.artist_credit?.[0].artist.content_category !== 'podcast'"
-          full
-          ghost
-          :aria-label="favoriteButton"
-          :icon="isFavorite ? 'bi-heart-fill' : 'bi-heart'"
-          :is-active="isFavorite"
-          @click.stop="store.dispatch('favorites/toggle', track.id)"
+          class="row"
         >
-          {{ favoriteButton }}
-        </Button>
-        <Button
-          full
-          ghost
-          :aria-label="labels.addToQueue"
-          icon="bi-plus"
-          @click.stop.prevent="enqueue(); show = false"
-        >
-          {{ labels.addToQueue }}
-        </Button>
-        <Button
-          full
-          ghost
-          :aria-label="labels.playNext"
-          icon="bi-skip-end"
-          @click.stop.prevent="enqueueNext(true); show = false"
-        >
-          {{ labels.playNext }}
-        </Button>
-        <Button
-          full
-          ghost
-          :aria-label="labels.startRadio"
-          icon="bi-rss"
-          @click.stop.prevent="store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false"
-        >
-          {{ labels.startRadio }}
-        </Button>
-        <Button
-          full
-          ghost
-          :aria-label="labels.addToPlaylist"
-          icon="bi-list"
-          @click.stop="store.commit('playlists/chooseTrack', track)"
-        >
-          {{ labels.addToPlaylist }}
-        </Button>
-        <hr>
-        <Button
+          <div
+            tabindex="0"
+            class="column"
+            role="button"
+            :aria-label="favoriteButton"
+            @click.stop="store.dispatch('favorites/toggle', track.id)"
+          >
+            <i :class="[ 'heart', 'favorite-icon', { favorited: isFavorite, pink: isFavorite }, 'icon', 'track-modal', 'list-icon' ]" />
+            <span class="track-modal list-item">{{ favoriteButton }}</span>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="column"
+            role="button"
+            :aria-label="labels.addToQueue"
+            @click.stop.prevent="enqueue(); show = false"
+          >
+            <i class="plus icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ labels.addToQueue }}</span>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="column"
+            role="button"
+            :aria-label="labels.playNext"
+            @click.stop.prevent="enqueueNext(true);show = false"
+          >
+            <i class="step forward icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ labels.playNext }}</span>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="column"
+            role="button"
+            :aria-label="labels.startRadio"
+            @click.stop.prevent="() => { store.dispatch('radios/start', { type: 'similar', objectId: track.id }); show = false }"
+          >
+            <i class="rss icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ labels.startRadio }}</span>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="column"
+            role="button"
+            :aria-label="labels.addToPlaylist"
+            @click.stop="store.commit('playlists/chooseTrack', track)"
+          >
+            <i class="list icon track-modal list-icon" />
+            <span class="track-modal list-item">
+              {{ labels.addToPlaylist }}
+            </span>
+          </div>
+        </div>
+        <div class="ui divider" />
+        <div
           v-if="!isAlbum && track.album"
-          full
-          ghost
-          :aria-label="albumDetailsButton"
-          icon="bi-disc"
-          @click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
+          class="row"
         >
-          {{ albumDetailsButton }}
-        </Button>
-        <template
+          <div
+            class="column"
+            role="button"
+            :aria-label="albumDetailsButton"
+            @click.prevent.exact="router.push({ name: 'library.albums.detail', params: { id: track.album?.id } })"
+          >
+            <i class="compact disc icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ albumDetailsButton }}</span>
+          </div>
+        </div>
+        <div
           v-if="!isArtist"
+          class="row"
         >
-          <Button
+          <div
             v-for="ac in track.artist_credit"
             :key="ac.artist.id"
-            full
-            ghost
+            class="column"
+            role="button"
             :aria-label="artistDetailsButton"
-            icon="bi-person-fill"
             @click.prevent.exact="router.push({ name: 'library.artists.detail', params: { id: ac.artist.id } })"
           >
-            {{ ac.credit }}<span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
-          </Button>
-        </template>
-        <Button
-          full
-          ghost
-          :aria-label="trackDetailsButton"
-          icon="bi-info-circle"
-          @click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
-        >
-          {{ trackDetailsButton }}
-        </Button>
-        <hr>
-        <Button
+            <i class="user icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ ac.credit }}</span>
+            <span v-if="ac.joinphrase">{{ ac.joinphrase }}</span>
+          </div>
+        </div>
+        <div class="row">
+          <div
+            class="column"
+            role="button"
+            :aria-label="trackDetailsButton"
+            @click.prevent.exact="router.push({ name: 'library.tracks.detail', params: { id: track.id } })"
+          >
+            <i class="info icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ trackDetailsButton }}</span>
+          </div>
+        </div>
+        <div class="ui divider" />
+        <div
           v-for="obj in getReportableObjects({ track, album: track.album, artistCredit: track.artist_credit })"
           :key="obj.target.type + obj.target.id"
-          full
-          ghost
-          icon="bi-share"
+          class="row"
           @click.stop.prevent="report(obj)"
         >
-          {{ obj.label }}
-        </Button>
-      </Layout>
+          <div class="column">
+            <i class="share icon track-modal list-icon" />
+            <span class="track-modal list-item">{{ obj.label }}</span>
+          </div>
+        </div>
+      </div>
     </div>
   </Modal>
 </template>

front/src/components/audio/track/Row.vue

@@ -127,14 +127,12 @@ const hover = ref(false)
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         :alt="track.title"
         class="track_image"
-        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="showArt && track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="track_image"
-        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="showArt"

front/src/components/audio/track/Table.vue

@@ -8,8 +8,6 @@ import { ref, computed } from 'vue'
 import axios from 'axios'
 
 import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
-import TrackModal from '~/components/audio/track/Modal.vue'
-
 import Pagination from '~/components/ui/Pagination.vue'
 import TrackRow from '~/components/audio/track/Row.vue'
 import Input from '~/components/ui/Input.vue'
@@ -45,7 +43,7 @@ interface Props {
   paginateResults?: boolean
   total?: number
   page?: number
-  paginateBy?: number
+  paginateBy?: number,
 
   unique?: boolean
 }
@@ -145,16 +143,6 @@ const updatePage = (page: number) => {
     emit('page-changed', page)
   }
 }
-
-const showTrackModal = ref(false)
-const modalTrack = ref<Track | null>(null)
-const modalIndex = ref<number | null>(null)
-
-function openTrackModal(track: Track, index: number) {
-  showTrackModal.value = true
-  modalTrack.value = track
-  modalIndex.value = index
-}
 </script>
 
 <template>
@@ -263,22 +251,13 @@ function openTrackModal(track: Track, index: number) {
         :key="track.id"
         :track="track"
         :index="index"
+        :tracks="allTracks"
         :show-position="showPosition"
         :show-art="showArt"
         :show-duration="showDuration"
         :is-artist="isArtist"
         :is-album="isAlbum"
         :is-podcast="isPodcast"
-        @open-modal="openTrackModal"
-      />
-      <!-- TODO: Replace with <PlayButton :dropdown-only="true"> after its display is fixed for mobile -->
-      <track-modal
-        v-if="modalTrack"
-        v-model:show="showTrackModal"
-        :track="modalTrack"
-        :index="modalIndex ?? 0"
-        :is-artist="isArtist"
-        :is-album="isAlbum"
       />
       <Pagination
         v-if="paginateResults"

front/src/components/audio/track/Widget.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import { getArtistCoverUrl } from '~/utils/utils'
 
 import axios from 'axios'
+import usePage from '~/composables/navigation/usePage'
 import useWebSocketHandler from '~/composables/useWebSocketHandler'
 
 import PlayButton from '~/components/audio/PlayButton.vue'
@@ -49,7 +50,7 @@ const { t } = useI18n()
 
 const objects = reactive([] as Listening[])
 const count = ref(0)
-const page = ref(1)
+const page = usePage()
 
 const isLoading = ref(false)
 
@@ -140,13 +141,11 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           v-if="object.track.album && object.track.album.cover"
           v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.small_square_crop)"
           alt=""
-          @error="(e) => { e.target && object.track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop) : null }"
         >
         <img
           v-else-if="object.track.cover"
           v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.small_square_crop)"
           alt=""
-          @error="(e) => { e.target && object.track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop) : null }"
         >
         <img
           v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"

front/src/components/common/UserLink.vue

@@ -40,7 +40,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
         v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.small_square_crop)"
         class="ui avatar tiny circular image"
         alt=""
-        @error="(e) => { e.target && user.avatar ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop) : null }"
       >
       <span
         v-else

front/src/components/library/ArtistBase.vue

@@ -176,6 +176,7 @@ const isOpen = useModal('artist-description').isOpen
         class="description"
         :content="{ ...object.description, text: object.description.text ?? undefined }"
         :truncate-length="100"
+        :more-link="false"
       />
       <Spacer grow />
       <Link

front/src/components/playlists/Widget.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
+import usePage from '~/composables/navigation/usePage'
 
 import PlaylistCard from '~/components/playlists/Card.vue'
 import Button from '~/components/ui/Button.vue'
@@ -30,7 +31,7 @@ const props = defineProps<Props>()
 const store = useStore()
 
 const objects = reactive([] as Playlist[])
-const page = ref(1)
+const page = usePage()
 const nextPage = ref('')
 const count = ref(0)
 

front/src/composables/audio/tracks.ts

@@ -27,14 +27,6 @@ const soundCache = new LRUCache<number, Sound>({
   dispose: (sound) => sound.dispose()
 })
 
-// used to make soundCache reactive
-const soundCacheVersion = ref(0)
-function setSoundCache(trackId: number, sound: Sound) {
-  soundCache.set(trackId, sound)
-  soundCacheVersion.value++  // bump to trigger reactivity
-}
-
-
 const currentTrack = ref<QueueTrack>()
 
 export const fetchTrackSources = async (id: number): Promise<QueueTrackSource[]> => {
@@ -147,7 +139,7 @@ export const useTracks = createGlobalState(() => {
       }
 
       // Add track to the sound cache and remove from the promise cache
-      setSoundCache(track.id, sound)
+      soundCache.set(track.id, sound)
       soundPromises.delete(track.id)
 
       return sound
@@ -232,12 +224,7 @@ export const useTracks = createGlobalState(() => {
     })
   })
 
-  const currentSound = computed(() => {
-    soundCacheVersion.value //trigger reactivity
-    const trackId = currentTrack.value?.id ?? -1
-    const sound = soundCache.get(trackId)
-    return sound
-  })
+  const currentSound = computed(() => soundCache.get(currentTrack.value?.id ?? -1))
 
   const clearCache = () => {
     return soundCache.clear()

front/src/composables/useWebSocketHandler.ts

@@ -1,4 +1,4 @@
-import type { Notification, Track } from '~/types'
+import type { Notification } from '~/types'
 
 import store from '~/store'
 import { tryOnScopeDispose } from '@vueuse/core'
@@ -51,7 +51,6 @@ function useWebSocketHandler (eventName: 'mutation.updated', handler: (event: Pe
 function useWebSocketHandler (eventName: 'import.status_updated', handler: (event: ImportStatusWS) => void): stopFn
 function useWebSocketHandler (eventName: 'user_request.created', handler: (event: PendingReviewRequests) => void): stopFn
 function useWebSocketHandler (eventName: 'Listen', handler: (event: unknown) => void): stopFn
-function useWebSocketHandler (eventName: 'playlist.track_updated', handler: (event: {track: Track}) => void): stopFn
 
 function useWebSocketHandler (eventName: string, handler: (event: any) => void): stopFn {
   const id = `${+new Date() + Math.random()}`

front/src/locales/en_US.json

@@ -4597,8 +4597,7 @@
           "edit": "Edit",
           "embed": "Embed",
           "playAll": "Play all",
-          "stopEdit": "Stop Editing",
-          "loadMoreTracks": "Load more tracks"
+          "stopEdit": "Stop Editing"
         },
         "empty": {
           "noTracks": "There are no tracks in this playlist yet"

front/src/locales/ru.json

@@ -4611,8 +4611,5 @@
         "title": "Радио"
       }
     }
-  },
-  "vui": {
-    "radio": "Радио"
   }
 }

front/src/store/ui.ts

@@ -12,7 +12,7 @@ import useLogger from '~/composables/useLogger'
 type SupportedExtension = 'flac' | 'ogg' | 'mp3' | 'opus' | 'aac' | 'm4a' | 'aiff' | 'aif'
 
 export type WebSocketEventName = 'inbox.item_added' | 'import.status_updated' | 'mutation.created' | 'mutation.updated'
-  | 'report.created' | 'user_request.created' | 'Listen' | 'playlist.track_updated'
+  | 'report.created' | 'user_request.created' | 'Listen'
 
 export type OrderingField = 'creation_date' | 'title' | 'album__title' | 'artist__name' | 'release_date' | 'name'
   | 'applied_date' | 'followers_count' | 'uploads_count' | 'length' | 'items_count' | 'modification_date' | 'size'
@@ -91,8 +91,7 @@ const store: Module<State, RootState> = {
       'mutation.updated': {},
       'report.created': {},
       'user_request.created': {},
-      Listen: {},
-      'playlist.track_updated': {}
+      Listen: {}
     },
     pageTitle: null,
     modalsOpen: new Set([]),
@@ -274,7 +273,6 @@ const store: Module<State, RootState> = {
       const handlers = state.websocketEventsHandlers[event.type]
       logger.log('Dispatching websocket event', event, handlers)
       if (!handlers) {
-        logger.log('No websocket handlers for this event', event, handlers)
         return
       }
 

front/src/style/bootstrap-icons/font/bootstrap-icons.scss

@@ -5,10 +5,11 @@
  */
 
 $bootstrap-icons-font: "bootstrap-icons" !default;
-$bootstrap-icons-font-dir: "~/style/bootstrap-icons/font/fonts" !default;
+$bootstrap-icons-font-dir: "./fonts" !default;
 $bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default;
-$bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2") format("woff2"),
-                           url("#{$bootstrap-icons-font-file}.woff") format("woff") !default;
+$bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default;
+$bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"),
+                           url("#{$bootstrap-icons-font-file}.woff?#{$bootstrap-icons-font-hash}") format("woff") !default;
 
 @font-face {
   font-display: block;

front/src/style/font.scss

@@ -1,4 +1,4 @@
-@use "~/style/bootstrap-icons/font/bootstrap-icons.scss";
+@import url("~/style/bootstrap-icons/font/bootstrap-icons.css");
 
 @font-face {
   font-family: Lato;

front/src/ui/components/UserMenu.vue

@@ -62,7 +62,6 @@ const labels = computed(() => ({
         alt=""
         :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
         class="avatar"
-        @error="(e) => { e.target && store.state.auth.profile?.avatar ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop) : null }"
       >
       <span
         v-else-if="store.state.auth.authenticated"

front/src/views/auth/ProfileBase.vue

@@ -190,6 +190,7 @@ const isOpen = useModal('artist-description').isOpen
           class="description"
           :content="{ html: object?.summary.html || '' }"
           :truncate-length="100"
+          :more-link="false"
         />
         <Spacer grow />
         <Link

front/src/views/playlists/Detail.vue

@@ -24,7 +24,6 @@ import Alert from '~/components/ui/Alert.vue'
 import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
-import useWebSocketHandler from '~/composables/useWebSocketHandler'
 
 // TODO: Is this event ever caught somewhere?
 // interface Events {
@@ -32,7 +31,7 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
 // }
 
 interface Props {
-  id: string
+  id: number
   defaultEdit?: boolean
 }
 
@@ -41,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore()
-const isLoadingMoreTracks = ref(false)
+
 const edit = ref(props.defaultEdit)
 const playlist = ref<Playlist | null>(null)
 const playlistTracks = ref<PlaylistTrack[]>([])
@@ -52,39 +51,23 @@ const fullPlaylistTracks = ref<FullPlaylistTrack[]>([])
 
 const tracks = computed(() => fullPlaylistTracks.value.map(({ track }, index) => ({ ...track as Track, position: index + 1 })))
 
-const updateTrack = (updatedTrack: Track) => {
-    fullPlaylistTracks.value = fullPlaylistTracks.value.map((item) =>
-      item.track.id === updatedTrack.id ? { ...item, track: updatedTrack } : item
-    );
-};
-useWebSocketHandler('playlist.track_updated', async (event) => {
-    updateTrack(event.track);
-});
-
 const { t } = useI18n()
 const labels = computed(() => ({
   playlist: t('views.playlists.Detail.title')
 }))
 
 const isLoading = ref(false)
-const nextPage = ref<string | null>(null) // Tracks the next page URL
-const previousPage = ref<string | null>(null) // Tracks the previous page URL
-const totalTracks = ref<number>(0) // Total number of tracks
-
 const fetchData = async () => {
   isLoading.value = true
 
   try {
     const [playlistResponse, tracksResponse] = await Promise.all([
       axios.get(`playlists/${props.id}/`),
-      axios.get(`playlists/${props.id}/tracks?page=1`)
+      axios.get(`playlists/${props.id}/tracks/`)
     ])
 
     playlist.value = playlistResponse.data
     fullPlaylistTracks.value = tracksResponse.data.results
-    nextPage.value = tracksResponse.data.next
-    previousPage.value = tracksResponse.data.previous
-    totalTracks.value = tracksResponse.data.count
   } catch (error) {
     useErrorHandler(error as Error)
   }
@@ -92,24 +75,6 @@ const fetchData = async () => {
   isLoading.value = false
 }
 
-const loadMoreTracks = async () => {
-  if (nextPage.value) {
-    isLoadingMoreTracks.value = true; // Set loading state for the button
-    try {
-      const response = await axios.get(nextPage.value)
-
-      // Append new tracks to the existing list
-      fullPlaylistTracks.value = [...fullPlaylistTracks.value, ...response.data.results]
-      // Update pagination metadata
-      nextPage.value = response.data.next
-    } catch (error) {
-      useErrorHandler(error as Error)
-    } finally {
-      isLoadingMoreTracks.value = false; // Reset loading state
-    }
-  }
-}
-
 fetchData()
 
 const images = computed(() => {
@@ -148,6 +113,17 @@ const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 //   return t('components.audio.ChannelCard.title', { date })
 // })
 
+// TODO: Check if this function is still needed
+// const deletePlaylist = async () => {
+//   try {
+//     await axios.delete(`playlists/${props.id}/`)
+//     store.dispatch('playlists/fetchOwn')
+//     return router.push({ path: '/library' })
+//   } catch (error) {
+//     useErrorHandler(error as Error)
+//   }
+// }
+
 // TODO: Implement shuffle
 const shuffle = () => {}
 </script>
@@ -202,6 +178,7 @@ const shuffle = () => {}
     <RenderedDescription
       :content="{ html: playlist.description }"
       :truncate-length="100"
+      :show-more="true"
     />
     <Layout
       flex
@@ -212,7 +189,6 @@ const shuffle = () => {}
         low-height
         :is-playable="true"
         :tracks="tracks"
-        :playlist="playlist"
       >
         {{ t('views.playlists.Detail.button.playAll') }}
       </PlayButton>
@@ -264,14 +240,6 @@ const shuffle = () => {}
         :tracks="tracks"
         :unique="false"
       />
-      <Button
-        v-if="nextPage"
-        primary
-        :is-loading="isLoadingMoreTracks"
-        @click="loadMoreTracks"
-      >
-        {{ t('views.playlists.Detail.button.loadMoreTracks') }}
-      </Button>
     </template>
     <Alert
       v-else-if="!isLoading"