Closed carson-katri closed 8 months ago
LiveBinding
ChangeTracked
pause
play
seek
time-control-status
playback-time
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.
phx-throttle
phx-debounce
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
LiveBinding
was replaced withChangeTracked
.pause
,play
, andseek
events were removed. Use the attributestime-control-status
andplayback-time
insteadHere's a small example of how the element can be used:
https://github.com/liveview-native/liveview-native-swiftui-avkit/assets/13581484/0594fa12-3882-4652-ab0a-d6a3acbcd005