mirror of
https://github.com/fly-apps/live_beats.git
synced 2024-11-26 01:40:59 +00:00
474 lines
14 KiB
Elixir
474 lines
14 KiB
Elixir
defmodule LiveBeatsWeb.ProfileLive do
|
||
use LiveBeatsWeb, :live_view
|
||
|
||
alias LiveBeats.{Accounts, MediaLibrary, MP3Stat}
|
||
alias LiveBeatsWeb.Presence
|
||
alias LiveBeatsWeb.ProfileLive.{UploadFormComponent}
|
||
|
||
@max_presences 20
|
||
|
||
def render(assigns) do
|
||
~H"""
|
||
<.modal
|
||
id="upload"
|
||
patch={profile_path(@current_user)}
|
||
on_cancel={JS.push("cancel", target: "#upload-form")}
|
||
phx-mounted={@live_action == :new && show_modal("upload")}
|
||
>
|
||
<:title>Add Music</:title>
|
||
<.live_component
|
||
id="upload-form"
|
||
module={UploadFormComponent}
|
||
current_user={@current_user}
|
||
on_complete={hide_modal("upload")}
|
||
/>
|
||
<:confirm type="submit" form="song-form">Save</:confirm>
|
||
<:cancel>Cancel</:cancel>
|
||
</.modal>
|
||
<.title_bar>
|
||
<div>
|
||
<div class="block">
|
||
<%= @profile.tagline %>
|
||
<%= if @owns_profile? do %>
|
||
(you)
|
||
<% end %>
|
||
<span>
|
||
– <%= ngettext("%{count} song", "%{count} songs", @songs_count) %>
|
||
</span>
|
||
</div>
|
||
<.link href={@profile.external_homepage_url} target="_blank" class="text-sm text-gray-600">
|
||
<.icon name={:code} /> <span class=""><%= url_text(@profile.external_homepage_url) %></span>
|
||
</.link>
|
||
</div>
|
||
<:actions>
|
||
<%= if @active_profile_id == @profile.user_id do %>
|
||
<.button
|
||
primary
|
||
phx-click={
|
||
JS.push("switch_profile", value: %{user_id: nil}, target: "#player", loading: "#player")
|
||
}
|
||
>
|
||
<.icon name={:stop} /><span class="ml-2">Stop Listening</span>
|
||
</.button>
|
||
<% else %>
|
||
<.button
|
||
primary
|
||
phx-click={
|
||
JS.push("switch_profile",
|
||
value: %{user_id: to_string(@profile.user_id)},
|
||
target: "#player",
|
||
loading: "#player"
|
||
)
|
||
}
|
||
>
|
||
<.icon name={:play} /><span class="ml-2">Listen</span>
|
||
</.button>
|
||
<% end %>
|
||
<.button
|
||
:if={@owns_profile?}
|
||
id="upload-btn"
|
||
primary
|
||
phx-click={show_modal("upload") |> JS.patch(profile_upload_path(@current_user))}
|
||
>
|
||
<.icon name={:upload} /><span class="ml-2">Upload Songs</span>
|
||
</.button>
|
||
</:actions>
|
||
</.title_bar>
|
||
|
||
<Presence.listening_now
|
||
presences={@presences}
|
||
presence_ids={@presence_ids}
|
||
total_count={@presences_count}
|
||
/>
|
||
|
||
<div id={"trascript-#{@active_song_id}"} phx-update="stream" class="mt-10 px-6">
|
||
<div :for={{id, segment} <- @streams.transcript_segments} id={id}>
|
||
<span class="text-gray-400">[<%= LiveBeats.MP3Stat.to_mmss(segment.ss) %>]</span>
|
||
<%= segment.text %>
|
||
</div>
|
||
</div>
|
||
|
||
<div :if={@owns_profile?} id="dialogs" phx-update="stream">
|
||
<.modal
|
||
:for={{_id, song} <- @streams.songs}
|
||
:if={song.id}
|
||
id={"delete-modal-#{song.id}"}
|
||
on_confirm={
|
||
JS.push("delete", value: %{id: to_string(song.id)})
|
||
|> hide_modal("delete-modal-#{song.id}")
|
||
|> focus_closest("#song-#{song.id}")
|
||
|> hide("#songs-#{song.id}")
|
||
}
|
||
on_cancel={focus("#delete-modal-#{song.id}", "#delete-song-#{song.id}")}
|
||
>
|
||
Are you sure you want to delete "<%= song.title %>"?
|
||
<:cancel>Cancel</:cancel>
|
||
<:confirm>Delete</:confirm>
|
||
</.modal>
|
||
</div>
|
||
|
||
<div>
|
||
<.table
|
||
id="songs"
|
||
rows={@streams.songs}
|
||
row_id={fn {id, _song} -> id end}
|
||
row_click={
|
||
fn {id, song} ->
|
||
JS.push("play_or_pause",
|
||
loading: "#songs tbody, ##{id}",
|
||
value: %{id: to_string(song.id)}
|
||
)
|
||
end
|
||
}
|
||
streamable
|
||
sortable_drop="row_dropped"
|
||
>
|
||
<:col
|
||
:let={{_id, song}}
|
||
label="Title"
|
||
class!="px-6 py-3 text-sm font-medium text-gray-900 min-w-[200px] md:min-w-[20rem] cursor-pointer"
|
||
>
|
||
<span :if={song.status == :playing} class="flex pt-1 relative mr-2 w-4">
|
||
<span class="w-3 h-3 animate-ping bg-purple-400 rounded-full absolute"></span>
|
||
<.icon name={:volume_up} class="h-5 w-5 -mt-1 -ml-1" aria-label="Playing" role="button" />
|
||
</span>
|
||
<span :if={song.status == :paused} class="flex pt-1 relative mr-2 w-4">
|
||
<.icon
|
||
name={:volume_up}
|
||
class="h-5 w-5 -mt-1 -ml-1 text-gray-400"
|
||
aria-label="Paused"
|
||
role="button"
|
||
/>
|
||
</span>
|
||
<span :if={song.status == :stopped} class="flex relative w-6 -translate-x-1">
|
||
<.icon
|
||
:if={@owns_profile?}
|
||
name={:play}
|
||
class="h-5 w-5 text-gray-400"
|
||
aria-label="Play"
|
||
role="button"
|
||
/>
|
||
</span>
|
||
<%= song.title %>
|
||
</:col>
|
||
<:col :let={{_id, song}} label="Artist"><%= song.artist %></:col>
|
||
<:col
|
||
:let={{_id, song}}
|
||
label="Attribution"
|
||
class="max-w-5xl break-words text-gray-600 font-light"
|
||
>
|
||
<%= song.attribution %>
|
||
</:col>
|
||
<:col :let={{_id, song}} label="Duration">
|
||
<%= MP3Stat.to_mmss(song.duration) %>
|
||
</:col>
|
||
<:col :let={{_id, song}} :if={@owns_profile?} label="">
|
||
<.link
|
||
id={"delete-song-#{song.id}"}
|
||
phx-click={show_modal("delete-modal-#{song.id}")}
|
||
class="inline-flex items-center px-3 py-2 text-sm leading-4 font-medium"
|
||
>
|
||
<.icon name={:trash} class="-ml-0.5 mr-2 h-4 w-4" /> Delete
|
||
</.link>
|
||
</:col>
|
||
</.table>
|
||
</div>
|
||
"""
|
||
end
|
||
|
||
def mount(%{"profile_username" => profile_username}, _session, socket) do
|
||
%{current_user: current_user} = socket.assigns
|
||
|
||
profile_user =
|
||
if current_user.username == profile_username do
|
||
current_user
|
||
else
|
||
Accounts.get_user_by!(username: profile_username)
|
||
end
|
||
|
||
profile = MediaLibrary.get_profile!(profile_user)
|
||
|
||
if connected?(socket) do
|
||
MediaLibrary.subscribe_to_profile(profile)
|
||
Accounts.subscribe(current_user.id)
|
||
Presence.subscribe(profile)
|
||
end
|
||
|
||
socket =
|
||
socket
|
||
|> assign(
|
||
active_song_id: nil,
|
||
active_profile_id: current_user.active_profile_user_id,
|
||
profile: profile,
|
||
owns_profile?: MediaLibrary.owns_profile?(current_user, profile)
|
||
)
|
||
|> stream_configure(:transcript_segments, dom_id: &"ss-#{&1.ss}")
|
||
|> stream(:transcript_segments, [])
|
||
|> stream_songs()
|
||
|> assign_presences()
|
||
|
||
{:ok, socket, temporary_assigns: [presences: %{}]}
|
||
end
|
||
|
||
def stream_songs(socket) do
|
||
%{profile: profile} = socket.assigns
|
||
songs = MediaLibrary.list_profile_songs(profile, 50)
|
||
active_song = Enum.find(songs, fn song -> song.status in [:playing, :paused] end)
|
||
segments = if active_song, do: active_song.transcript.segments, else: []
|
||
|
||
socket
|
||
|> assign(
|
||
songs: songs,
|
||
active_song: active_song,
|
||
active_song_id: active_song && active_song.id,
|
||
segments: segments,
|
||
songs_count: Enum.count(songs)
|
||
)
|
||
|> stream(:songs, songs, reset: true)
|
||
end
|
||
|
||
def handle_params(params, _url, socket) do
|
||
{:noreply, socket |> apply_action(socket.assigns.live_action, params)}
|
||
end
|
||
|
||
def handle_event("play_or_pause", %{"id" => id}, socket) do
|
||
%{active_song_id: active_song_id} = socket.assigns
|
||
song = MediaLibrary.get_song!(id)
|
||
can_playback? = MediaLibrary.can_control_playback?(socket.assigns.current_user, song)
|
||
|
||
cond do
|
||
can_playback? and active_song_id == song.id and MediaLibrary.playing?(song) ->
|
||
MediaLibrary.pause_song(song)
|
||
|
||
receive do
|
||
{MediaLibrary, %MediaLibrary.Events.Pause{song: song}} ->
|
||
{:noreply, pause_song(socket, song)}
|
||
end
|
||
|
||
can_playback? ->
|
||
MediaLibrary.play_song(id)
|
||
|
||
receive do
|
||
{MediaLibrary, %MediaLibrary.Events.Play{song: song}} ->
|
||
{:noreply, play_song(socket, song)}
|
||
end
|
||
|
||
true ->
|
||
{:noreply, socket}
|
||
end
|
||
end
|
||
|
||
def handle_event("delete", %{"id" => id}, socket) do
|
||
song = MediaLibrary.get_song!(id)
|
||
|
||
if song.user_id == socket.assigns.current_user.id do
|
||
:ok = MediaLibrary.delete_song(song)
|
||
end
|
||
|
||
if song.id == socket.assigns.active_song_id do
|
||
{:noreply, assign(socket, :active_song_id, nil)}
|
||
else
|
||
{:noreply, socket}
|
||
end
|
||
end
|
||
|
||
def handle_event("row_dropped", %{"id" => dom_id, "old" => old_idx, "new" => new_idx}, socket) do
|
||
"songs-" <> id = dom_id
|
||
song = MediaLibrary.get_song!(id)
|
||
|
||
if song.user_id == socket.assigns.current_user.id and song.position == old_idx do
|
||
:ok = MediaLibrary.update_song_position(song, new_idx)
|
||
{:noreply, socket}
|
||
else
|
||
{:noreply, socket}
|
||
end
|
||
end
|
||
|
||
def handle_info({LiveBeatsWeb.Presence, %{user_joined: presence}}, socket) do
|
||
{:noreply, assign_presence(socket, presence)}
|
||
end
|
||
|
||
def handle_info({LiveBeatsWeb.Presence, %{user_left: presence}}, socket) do
|
||
%{user: user} = presence
|
||
|
||
if presence.metas == [] do
|
||
{:noreply, remove_presence(socket, user)}
|
||
else
|
||
{:noreply, socket}
|
||
end
|
||
end
|
||
|
||
def handle_info({Accounts, %Accounts.Events.ActiveProfileChanged{} = event}, socket) do
|
||
{:noreply, assign(socket, active_profile_id: event.new_profile_user_id)}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.PublicProfileUpdated{} = update}, socket) do
|
||
{:noreply,
|
||
socket
|
||
|> assign(profile: update.profile)
|
||
|> push_patch(to: profile_path(update.profile))}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.NewPosition{song: song}}, socket) do
|
||
{:noreply,
|
||
socket
|
||
|> stream_delete(:songs, song)
|
||
|> stream_insert(:songs, song, at: song.position)}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.Play{song: song}}, socket) do
|
||
{:noreply, play_song(socket, song)}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.Pause{song: song}}, socket) do
|
||
{:noreply, pause_song(socket, song)}
|
||
end
|
||
|
||
def handle_info(
|
||
{MediaLibrary, {%MediaLibrary.Song.Transcript.Segment{} = seg, song_id}},
|
||
socket
|
||
) do
|
||
if socket.assigns.active_song_id == song_id do
|
||
{:noreply, stream_insert(socket, :transcript_segments, seg)}
|
||
else
|
||
{:noreply, socket}
|
||
end
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.SongsImported{songs: songs}}, socket) do
|
||
%{current_user: current_user, active_song_id: active_song_id} = socket.assigns
|
||
first = hd(songs)
|
||
|
||
if !active_song_id && MediaLibrary.can_control_playback?(current_user, first) do
|
||
MediaLibrary.play_song(first)
|
||
end
|
||
|
||
{:noreply,
|
||
Enum.reduce(songs, socket, fn song, acc ->
|
||
acc
|
||
|> update(:songs_count, &(&1 + 1))
|
||
|> stream_insert(:songs, song)
|
||
end)}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, %MediaLibrary.Events.SongDeleted{song: song}}, socket) do
|
||
{:noreply,
|
||
socket
|
||
|> update(:songs_count, &(&1 - 1))
|
||
|> stream_delete(:songs, song)}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, {:ping, ping}}, socket) do
|
||
%{user: user, rtt: rtt, region: region} = ping
|
||
|
||
send_update(Presence.BadgeComponent,
|
||
id: user.id,
|
||
action: {:ping, %{user: user, ping: rtt, region: region}}
|
||
)
|
||
|
||
{:noreply, socket}
|
||
end
|
||
|
||
def handle_info({MediaLibrary, _}, socket), do: {:noreply, socket}
|
||
|
||
def handle_info({Accounts, _}, socket), do: {:noreply, socket}
|
||
|
||
defp stop_song(socket, song_id) do
|
||
song = MediaLibrary.get_song!(song_id)
|
||
|
||
socket =
|
||
if socket.assigns.active_song_id == song_id do
|
||
assign(socket, :active_song_id, nil)
|
||
else
|
||
socket
|
||
end
|
||
|
||
stream_insert(socket, :songs, %MediaLibrary.Song{song | status: :stopped})
|
||
end
|
||
|
||
defp pause_song(socket, %MediaLibrary.Song{} = song) do
|
||
stream_insert(socket, :songs, %MediaLibrary.Song{song | status: :paused})
|
||
end
|
||
|
||
defp play_song(socket, %MediaLibrary.Song{} = song) do
|
||
%{active_song_id: active_song_id} = socket.assigns
|
||
song = %MediaLibrary.Song{song | status: :playing}
|
||
|
||
cond do
|
||
active_song_id == song.id ->
|
||
stream_insert(socket, :songs, song)
|
||
|
||
active_song_id ->
|
||
socket
|
||
|> stop_song(active_song_id)
|
||
|> stream_insert(:songs, song)
|
||
|> assign(active_song_id: song.id)
|
||
|
||
true ->
|
||
socket
|
||
|> stream_insert(:songs, song)
|
||
|> assign(active_song_id: song.id)
|
||
end
|
||
end
|
||
|
||
defp apply_action(socket, :show, _params) do
|
||
socket
|
||
|> assign(:page_title, "Listing Songs")
|
||
|> assign(:song, nil)
|
||
end
|
||
|
||
defp apply_action(socket, :new, _params) do
|
||
if socket.assigns.owns_profile? do
|
||
assign(socket, :page_title, "Add Music")
|
||
else
|
||
socket
|
||
|> put_flash(:error, "You can't do that")
|
||
|> redirect(to: profile_path(socket.assigns.current_user))
|
||
end
|
||
end
|
||
|
||
defp assign_presences(socket) do
|
||
socket = assign(socket, presences_count: 0, presences: %{}, presence_ids: %{})
|
||
|
||
if profile = socket.assigns.profile do
|
||
profile
|
||
|> LiveBeatsWeb.Presence.list_profile_users()
|
||
|> Enum.reduce(socket, fn {_, presence}, acc -> assign_presence(acc, presence) end)
|
||
else
|
||
socket
|
||
end
|
||
end
|
||
|
||
defp assign_presence(socket, presence) do
|
||
%{user: user} = presence
|
||
%{presence_ids: presence_ids} = socket.assigns
|
||
|
||
cond do
|
||
Map.has_key?(presence_ids, user.id) ->
|
||
socket
|
||
|
||
Enum.count(presence_ids) < @max_presences ->
|
||
socket
|
||
|> update(:presences, &Map.put(&1, user.id, user))
|
||
|> update(:presence_ids, &Map.put(&1, user.id, System.system_time()))
|
||
|> update(:presences_count, &(&1 + 1))
|
||
|
||
true ->
|
||
update(socket, :presences_count, &(&1 + 1))
|
||
end
|
||
end
|
||
|
||
defp remove_presence(socket, user) do
|
||
socket
|
||
|> update(:presences, &Map.delete(&1, user.id))
|
||
|> update(:presence_ids, &Map.delete(&1, user.id))
|
||
|> update(:presences_count, &(&1 - 1))
|
||
end
|
||
|
||
defp url_text(nil), do: ""
|
||
|
||
defp url_text(url_str) do
|
||
uri = URI.parse(url_str)
|
||
uri.host <> uri.path
|
||
end
|
||
end
|