[WIP] [iOS] Media Item Menu - Edit Item Images

[JPKribs]

Summary

Creates an image section for editing items. Allows for adding, deleting, or editing images for an item. Remote searching is working with all options from server.

Uploading a file is not working. Not sure why. I have the file browser but the data format is wrong.

I also have an issue where the cached images aren't updating after changes.

Screenshots

All Item Images

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-07.at.18.54.32.mp4

Select From Remote Images

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-07.at.18.54.51.mp4

Upload an Image

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-07.at.18.57.40.mp4

[JPKribs]

@LePips Absolutely no rush on this at all. I'm still a ways away from being ready but let me know if you have any feedback on the UI! Not in love with anything I've done so far but I don't have a great sense of what this should look like. The edit button on the poster is because you can have more than one banner, etc. so I make it so you edited at that level opposed to from the section as a whole.

The remote image section, with the option from remote sources from the server, is paginated so it only loads in 50 at a time. Web is only 25 so I can limit that further if we want.

Functionally, I think my only issue I'm not sure of is I am using item.imageSource(imageType) to get the image based on the type but that only every gives me index 0 so items like banners only let you edit/delete/upload to the first item which, if possible, I'd like to make this usable for any index.

Finally, I'm trying to upload from a file. I've got it so it picks the file using the file picker and I have the upload API working right but I think the formatting for the image is off? I'm going from a local 'URL' to a file path on the device -> Data -> UIImage to run the following:

    private func uploadImage(_ image: UIImage, index: Int? = nil) async throws {
        guard let itemID = item.id else { return }

        var contentType: String
        var imageData: Data
        var request: Request<Void>

        if let pngData = image.pngData() {
            contentType = "image/png"
            imageData = pngData
        } else if let jpgData = image.jpegData(compressionQuality: 1) {
            contentType = "image/jpeg"
            imageData = jpgData
        } else {
            logger.error("Unable to convert given image to png/jpg")
            throw JellyfinAPIError("An internal error occurred")
        }

        if let index {
            request = Paths.setItemImageByIndex(
                itemID: itemID,
                imageType: imageType.rawValue,
                imageIndex: index,
                imageData
            )
        } else {
            request = Paths.setItemImage(
                itemID: itemID,
                imageType: imageType.rawValue,
                imageData
            )
        }

        request.headers = ["Content-Type": contentType]
        _ = try await userSession.client.send(request)

        try await refreshItem()
    }

[LePips]

For each grid, we can make assumptions on what the shape of the images are going to be and have the layouts match accordingly. ie: primary is portrait, backdrop is landscape, etc. While anyone can upload arbitrary images, users going against the grain isn't a concern.

For the image contents, we can instead show nothing. When an image is selected, lets push to a confirmation view that shows the larger image with the size and metadata source details.

[JPKribs]

This is still In-Progress but this is my current working version:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-22.at.18.34.29.mp4

I still need figure out the following:

1. When deleting an Image, if there are multiple Images for that ImageType, the order of the items shuffles around in a jarring way.
2. The UploadImage + icon doesn't actually work. It always returns a 500 error even though I mirrored UserProfileImagePicker so I need to understand that all better:

3. At the end of the AddItemImageView scroll, the last image always explodes like this:

Other than that, I think this is almost ready!