liveview-native / liveview-native-swiftui-avkit

LiveView Native add-on library for AVKit support
1 stars 1 forks source link

Refactor for `@ChangeTracked` and stylesheets #6

Closed carson-katri closed 8 months ago

carson-katri commented 9 months ago

Here's a small example of how the element can be used:

[!Note] You must provide a phx-throttle or phx-debounce attribute to receive updates for the playback-time.

defmodule MyAppWeb.IndexLive do
  use MyAppWeb, :live_view
  use MyAppWeb.Styles.AppStyles

  def mount(_params, _session, socket) do
    {:ok, assign(socket, playbackTime: 30, isMuted: false, timeControlStatus: "paused")}
  end

  def render(%{format: :swiftui} = assigns) do
    ~SWIFTUI"""
    <VStack>
      <VideoPlayer
        url="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        autoplay
        playback-time={@playbackTime}
        phx-throttle={1000}
        is-muted={@isMuted}
        time-control-status={@timeControlStatus}
        phx-change="player-changed"
        class="aspect-video"
      />
      <Text class="title">Big Buck Bunny</Text>
      <List>
        <LabeledContent>
          <Text template="label">Playback Time</Text>
          <%= @playbackTime %>
        </LabeledContent>
        <Button phx-click="random-time">Random Time</Button>
        <LabeledContent>
          <Text template="label">Muted</Text>
          <%= @isMuted %>
        </LabeledContent>
        <Button phx-click="toggle-mute">Toggle Mute</Button>
        <LabeledContent>
          <Text template="label">Status</Text>
          <%= @timeControlStatus %>
        </LabeledContent>
        <Button phx-click="toggle-status">Toggle Play/Pause</Button>
      </List>
    </VStack>
    """
  end

  def handle_event("player-changed", %{ "playback-time" => playbackTime }, socket) do
    {:noreply, assign(socket, playbackTime: playbackTime)}
  end

  def handle_event("player-changed", %{ "is-muted" => isMuted }, socket) do
    {:noreply, assign(socket, isMuted: isMuted)}
  end

  def handle_event("player-changed", %{ "time-control-status" => timeControlStatus }, socket) do
    {:noreply, assign(socket, timeControlStatus: timeControlStatus)}
  end

  def handle_event("random-time", _params, socket) do
    {:noreply, assign(socket, playbackTime: :rand.uniform(100))}
  end

  def handle_event("toggle-mute", _params, socket) do
    {:noreply, assign(socket, isMuted: !socket.assigns.isMuted)}
  end

  def handle_event("toggle-status", _params, socket) do
    {:noreply, assign(socket, timeControlStatus: (if socket.assigns.timeControlStatus == "paused", do: "playing", else: "paused"))}
  end
end

https://github.com/liveview-native/liveview-native-swiftui-avkit/assets/13581484/0594fa12-3882-4652-ab0a-d6a3acbcd005