front:add playlist cart popover button to request access to playlist files

api/funkwhale_api/common/schema.yml

@@ -24846,6 +24846,9 @@ components:
           type: string
           format: uri
           readOnly: true
+        library_followed:
+          type: boolean
+          readOnly: true
       required:
       - actor
       - album_covers
@@ -24854,6 +24857,7 @@ components:
       - fid
       - is_playable
       - library
+      - library_followed
       - modification_date
       - name
       - tracks_count

api/funkwhale_api/playlists/serializers.py

@@ -35,6 +35,7 @@ class PlaylistSerializer(serializers.ModelSerializer):
     is_playable = serializers.SerializerMethodField()
     actor = APIActorSerializer(read_only=True)
     library = serializers.SerializerMethodField()
+    library_followed = serializers.SerializerMethodField()
 
     class Meta:
         model = models.Playlist
@@ -53,6 +54,7 @@ class PlaylistSerializer(serializers.ModelSerializer):
             "actor",
             "description",
             "library",
+            "library_followed",
         )
         read_only_fields = ["uuid", "fid", "modification_date", "creation_date"]
 
@@ -63,6 +65,15 @@ class PlaylistSerializer(serializers.ModelSerializer):
         else:
             return None
 
+    @extend_schema_field(OpenApiTypes.BOOL)
+    def get_library_followed(self, obj):
+        if lib_follow := obj.library.received_follows.filter(
+            actor=self.context["request"].user.actor
+        ):
+            return lib_follow.approved
+        else:
+            return None
+
     @extend_schema_field(OpenApiTypes.BOOL)
     def get_is_playable(self, obj):
         return getattr(obj, "is_playable_by_actor", False)

front/src/components/audio/PlayButton.vue

@@ -72,7 +72,8 @@ const {
   enqueue,
   enqueueNext,
   replacePlay,
-  isLoading
+  isLoading,
+  requestPlaylistUploadsAccess
 } = usePlayOptions(props)
 
 const { report, getReportableObjects } = useReport()
@@ -98,10 +99,50 @@ const labels = computed(() => ({
         ? t('components.audio.PlayButton.button.playArtist')
         : props.playlist
           ? t('components.audio.PlayButton.button.playPlaylist')
-          : t('components.audio.PlayButton.button.playTracks')
+          : t('components.audio.PlayButton.button.playTracks'),
+  PlaylistUploadAlreadyFollowed: t('components.audio.PlayButton.button.playPlaylist'),
+  PlaylistUploadPending:t('components.audio.PlayButton.button.PlaylistUploadPending'),
+  PlaylistUploadAccess: t('components.audio.PlayButton.button.PlaylistUploadAccess'),
+  PlaylistUploadTooltip: t('components.audio.PlayButton.button.PlaylistUploadTooltip')
   }))
 
 const isOpen = ref(false)
+
+const playlistFollowInfo = computed(() => {
+  const playlist = props.playlist;
+  if (!playlist) return null;
+
+  const followed = playlist.library_followed;
+
+  if (followed === true) {
+    return {
+      label: labels.value.PlaylistUploadAlreadyFollowed,
+      tooltip: labels.value.PlaylistUploadTooltip,
+      icon: 'bi-check-circle',
+      disabled: true
+    };
+  }
+
+  if (followed === false) {
+    return {
+      label: labels.value.PlaylistUploadPending,
+      tooltip: labels.value.PlaylistUploadTooltip,
+      icon: 'bi-hourglass-split',
+      disabled: true
+    };
+  }
+
+  // Assume null/undefined means not yet requested
+  return {
+    label: labels.value.PlaylistUploadAccess,
+    tooltip: labels.value.PlaylistUploadTooltip,
+    icon: 'bi-eye-slash',
+    disabled: false,
+    action: requestPlaylistUploadsAccess
+  };
+});
+
+
 </script>
 
 <template>
@@ -226,6 +267,15 @@ const isOpen = ref(false)
       >
         {{ obj.label }}
       </PopoverItem>
+      <PopoverItem
+        v-if="playlist && playlistFollowInfo"
+        :title="playlistFollowInfo.tooltip"
+        :icon="playlistFollowInfo.icon"
+        :disabled="playlistFollowInfo.disabled"
+        @click.stop.prevent="playlistFollowInfo.action "
+      >
+        {{ playlistFollowInfo.label }}
+      </PopoverItem>
     </template>
   </Popover>
   <Button

front/src/composables/audio/usePlayOptions.ts

@@ -200,6 +200,14 @@ export default (props: PlayOptionsProps) => {
     return replacePlay(index)
   }
 
+  const requestPlaylistUploadsAccess = async (playlist: Playlist) => {
+    const libresponse = await axios.get(props.playlist?.library)
+    const response = await axios.post('federation/follows/library', {
+    params: { target: libresponse.data.results.uuid }
+  });
+  return response;
+};
+
   return {
     playable,
     filterableArtist,
@@ -208,6 +216,7 @@ export default (props: PlayOptionsProps) => {
     enqueueNext,
     replacePlay,
     activateTrack,
-    isLoading
+    isLoading,
+    requestPlaylistUploadsAccess
   }
 }

front/src/generated/types.ts

@@ -8513,6 +8513,7 @@ export interface components {
             description?: string | null;
             /** Format: uri */
             readonly library: string;
+            readonly library_followed: boolean;
         };
         PlaylistAddManyRequest: {
             tracks: number[];

front/src/locales/en_US.json

@@ -483,6 +483,10 @@
           "playArtist": "Play artist",
           "playNext": "Play next",
           "playNow": "Play now",
+          "PlaylistUploadAlreadyFollowed": "The owner of the playlist granted you access to his playlist's files",
+          "PlaylistUploadTooltip": "This only applies to files owned by the playlist actor. If you want to get access to all the files, think to buy them to support your favorites artists",
+          "PlaylistUploadPending": "You've already requested access to the playlist files",
+          "PlaylistUploadAccess": "Request access to the files from this playlist",
           "playPlaylist": "Play playlist",
           "playTrack": "Play track",
           "playTracks": "Play tracks",