Merge pull request #3 from liveview-native/0-4-0

Updates for client v0.4.0-rc.0

Author: carson-katri

Package.resolved

@@ -13,7 +13,7 @@ let package = Package(
             targets: ["LiveViewNativePhotoKit"]),
     ],
     dependencies: [
-        .package(url: "https://github.com/liveview-native/liveview-client-swiftui", branch: "core-file-upload")
+        .package(url: "https://github.com/liveview-native/liveview-client-swiftui", from: "0.4.0-rc.0")
     ],
     targets: [
         // Targets are the basic building blocks of a package, defining a module or a test suite.

Package.swift

@@ -0,0 +1,99 @@
+# liveview-native-swiftui-photokit
+
+## About
+
+`liveview-native-swiftui-photokit` is an add-on library for [LiveView Native](https://github.com/liveview-native/live_view_native). It adds [PhotoKit](https://developer.apple.com/documentation/photokit) support for uploading images from the Photos app and camera.
+
+## Installation
+
+1. Add this library as a package to your LiveView Native application's Xcode project
+    * In Xcode, select *File* → *Add Packages...*
+    * Enter the package URL `https://github.com/liveview-native/liveview-native-swiftui-photokit`
+    * Select *Add Package*
+
+## Usage
+
+Add `.photoKit` to the `addons` list of your `#LiveView`.
+
+```swift
+import SwiftUI
+import LiveViewNative
+import LiveViewNativePhotoKit // 1. Import the add-on library.
+
+struct ContentView: View {
+    var body: some View {
+        #LiveView(
+          .localhost,
+          addons: [.photoKit] // 2. Include the `PhotoKit` addon.
+        )
+    }
+}
+```
+
+Use a `PhotosPicker` or `LiveCameraPicker` to upload images.
+Include a `live_img_preview` to display the selected images before upload.
+
+```elixir
+defmodule MyAppWeb.PhotosLive.SwiftUI do
+  use MyAppNative, [:render_component, format: :swiftui]
+
+  def render(assigns) do
+    ~LVN"""
+    <Form>
+      <LiveForm id="upload-form" phx-submit="save" phx-change="validate">
+        <PhotosPicker
+          data-phx-upload-ref={@uploads.avatar.ref}
+          maxSelectionCount="3"
+          name="avatar"
+        >
+          <%= @uploads.avatar.ref %>
+          <Label systemImage="photo.fill">Pick Photo</Label>
+        </PhotosPicker>
+        <.button type="submit">Upload</.button>
+      </LiveForm>
+      <%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
+      <Section phx-drop-target={@uploads.avatar.ref}>
+        <Text template="header" :if={not Enum.empty?(@uploads.avatar.entries)}>Uploads</Text>
+
+        <%!-- render each avatar entry --%>
+        <%= for entry <- @uploads.avatar.entries do %>
+          <VStack
+            alignment="leading"
+            style="swipeActions(content: :swipe_actions); listRowInsets(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8));"
+          >
+            <.live_img_preview entry={entry} style="resizable(); scaledToFit(); clipShape(.rect(cornerRadius: 4));" />
+
+            <%!-- entry.progress will update automatically for in-flight entries --%>
+            <ProgressView value={entry.progress} total="100">
+              <%= entry.client_name %>
+              <Text template="currentValueLabel"><%= entry.progress%>%</Text>
+            </ProgressView>
+
+            <%!-- Phoenix.Component.upload_errors/2 returns a list of error atoms --%>
+            <%= for err <- upload_errors(@uploads.avatar, entry) do %>
+              <Text style="foregroundStyle(.red); bold();"><%= error_to_string(err) %></Text>
+            <% end %>
+
+            <%!-- a regular click event whose handler will invoke Phoenix.LiveView.cancel_upload/3 --%>
+            <.button
+              template="swipe_actions"
+              role="destructive"
+              phx-click="cancel-upload"
+              phx-value-ref={entry.ref}
+            >
+              <Image systemName="trash" />
+            </.button>
+          </VStack>
+        <% end %>
+
+        <%!-- Phoenix.Component.upload_errors/1 returns a list of error atoms --%>
+        <%= for err <- upload_errors(@uploads.avatar) do %>
+          <Text style="foregroundStyle(.red); bold();"><%= error_to_string(err) %></Text>
+        <% end %>
+
+      </Section>
+    </Form>
+    """
+  end
+end
+```

README.md

@@ -60,7 +60,7 @@ struct LiveCameraPicker<Root: RootRegistry>: View {
                 guard let phxUploadRef else { return }
                 Task {
                     do {
-                        try await formModel?.queueFileUpload(id: phxUploadRef, contents: contents, fileType: fileType, name: name ?? "photo", coordinator: $liveElement.context.coordinator)
+                        try await formModel?.queueFileUpload(name: name ?? "photo", id: phxUploadRef, contents: contents, fileType: fileType, fileName: name ?? "photo", coordinator: $liveElement.context.coordinator)
                     } catch {
                         logger.log(level: .error, "\(error.localizedDescription)")
                     }
@@ -199,8 +199,6 @@ struct LiveCameraPicker<Root: RootRegistry>: View {
                             exporter.outputURL = exportURL
                             await exporter.export()
 
-                            print(exporter.error)
-                            
                             parent.onCapture(try Data(contentsOf: exportURL), .mpeg4Movie)
                             parent.dismiss()
                         } catch {
@@ -223,7 +221,7 @@ struct LiveCameraPicker<Root: RootRegistry>: View {
     }
 }
 
-extension UIImagePickerController.CameraDevice: AttributeDecodable {
+extension UIImagePickerController.CameraDevice: @retroactive AttributeDecodable {
     public init(from attribute: Attribute?, on element: ElementNode) throws {
         guard let value = attribute?.value
         else { throw AttributeDecodingError.missingAttribute(Self.self) }
@@ -239,7 +237,7 @@ extension UIImagePickerController.CameraDevice: AttributeDecodable {
     }
 }
 
-extension UIImagePickerController.CameraCaptureMode: AttributeDecodable {
+extension UIImagePickerController.CameraCaptureMode: @retroactive AttributeDecodable {
     public init(from attribute: Attribute?, on element: ElementNode) throws {
         guard let value = attribute?.value
         else { throw AttributeDecodingError.missingAttribute(Self.self) }
@@ -255,7 +253,7 @@ extension UIImagePickerController.CameraCaptureMode: AttributeDecodable {
     }
 }
 
-extension UIImagePickerController.CameraFlashMode: AttributeDecodable {
+extension UIImagePickerController.CameraFlashMode: @retroactive AttributeDecodable {
     public init(from attribute: Attribute?, on element: ElementNode) throws {
         guard let value = attribute?.value
         else { throw AttributeDecodingError.missingAttribute(Self.self) }
@@ -273,7 +271,7 @@ extension UIImagePickerController.CameraFlashMode: AttributeDecodable {
     }
 }
 
-extension UIImagePickerController.QualityType: AttributeDecodable {
+extension UIImagePickerController.QualityType: @retroactive AttributeDecodable {
     public init(from attribute: Attribute?, on element: ElementNode) throws {
         guard let value = attribute?.value
         else { throw AttributeDecodingError.missingAttribute(Self.self) }

Sources/LiveViewNativePhotoKit/LiveCameraPicker.swift

@@ -54,7 +54,7 @@ struct PhotosPicker<Root: RootRegistry>: View {
                     for photo in selection {
                         guard let data = try await photo.loadTransferable(type: Data.self)
                         else { continue }
-                        try await formModel?.queueFileUpload(id: phxUploadRef, contents: data, fileType: .png, name: name ?? "photo", coordinator: $liveElement.context.coordinator)
+                        try await formModel?.queueFileUpload(name: name ?? "photo", id: phxUploadRef, contents: data, fileType: .png, fileName: name ?? "photo", coordinator: $liveElement.context.coordinator)
                     }
                 } catch {
                     logger.log(level: .error, "\(error.localizedDescription)")