Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Audio UI pages #80

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Audio UI pages #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3635070
Create media endpoints, for audio & video content
amos-kibet May 9, 2024
2f5d136
Start creating UIs for audio content pages
amos-kibet May 9, 2024
c679b1d
Refactor code
amos-kibet May 9, 2024
fd666db
WIP
amos-kibet Jun 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
584 changes: 584 additions & 0 deletions lib/mazaryn_web/components/icons.ex
View file
Open in desktop

Large diffs are not rendered by default.

75 changes: 75 additions & 0 deletions lib/mazaryn_web/live/audio_live/components/components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
defmodule MazarynWeb.AudioLive.Components do
@moduledoc false

use Phoenix.Component
use Phoenix.VerifiedRoutes, endpoint: MazarynWeb.Endpoint, router: MazarynWeb.Router

alias MazarynWeb.Components.Icons

@type rendered :: Phoenix.LiveView.Rendered.t()

@spec recently_played_audio_component(map()) :: rendered()
def recently_played_audio_component(assigns) do
~H"""
<div class="md:col-span-3 lg:col-span-4 mb-10 py-6 px-11">
<div class="flex justify-between">
<h1>Recently Played</h1>
<a href="#" class="text-[#4385F5]">See All</a>
</div>
<div class="flex flex-wrap mt-8">
<%= for _ <- 1..5 do %>
<div class="flex flex-col mx-1 mt-3">
<img
src={~p"/images/recently_played_1.png"}
alt="JKRS - It's a Fine Day"
width="160"
height="120"
/>
<p>JKRS - It's a Fine Day</p>
<p>Lithuania</p>
</div>
<% end %>
</div>
</div>
"""
end

@spec trending_and_popular_audio_component(map()) :: rendered()
def trending_and_popular_audio_component(assigns) do
~H"""
<div class="relative grid grid-cols-1 md:grid-cols-3 justify-between md:col-span-3 lg:col-span-4 ml-80 w-full">
<div class="mr-2 mb-2">
<p class="">Trending</p>
<%= for _trending <- 1..4 do %>
<div class="flex mt-3 gap-x-2">
<img src={~p"/images/recently_played_1.png"} alt="JKRS - It's a Fine Day" width="60" />
<div class="flex flex-col">
<p>JKRS - It's a Fine Day</p>
<p>Lithuania</p>
</div>
<div class="flex items-center">
<p class="mr-3">6:56</p>
<Icons.play_icon />
</div>
</div>
<% end %>
</div>
<div class="md:col-span-2">
<p class="">Popular Albums</p>
<div class="flex flex-wrap mt-3 gap-x-2">
<%= for _popular <- 1..3 do %>
<div class="flex flex-col mb-2">
<img src={~p"/images/recently_played_1.png"} alt="JKRS - It's a Fine Day" width="200" />
<p class="mt-2">Kiss me more</p>
<p class="mt-2">Doja</p>
</div>
<% end %>
</div>
</div>
<div class="absolute top-0 right-4">
<p class="">See All</p>
</div>
</div>
"""
end
end
30 changes: 30 additions & 0 deletions lib/mazaryn_web/live/audio_live/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
defmodule MazarynWeb.AudioLive.Index do
use MazarynWeb, :live_view

import MazarynWeb.Live.Helper

alias Account.Users
alias MazarynWeb.AudioLive.Components

@type socket :: Phoenix.LiveView.Socket.t()

@impl Phoenix.LiveView
@spec mount(map(), map(), socket()) :: {:ok, socket()}
def mount(_params, %{"user_id" => user_id} = _session, socket) do
{:ok, do_mount(user_id, socket)}
end

# In case of redirect from login, signup
def mount(_params, %{"session_uuid" => session_uuid} = _session, socket) do
{:ok, do_mount(get_user_id(session_uuid), socket)}
end

defp do_mount(email, socket) do
{:ok, user} = Users.one_by_email(email)

socket
|> assign(search: "")
|> assign(user: user)
|> assign(recently_played: [])
end
end
20 changes: 20 additions & 0 deletions lib/mazaryn_web/live/audio_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<.live_component
module={MazarynWeb.MediaLive.NavComponent}
id="navigation"
user={@user}
search={@search}
/>
<div class="bg-[#282932] text-[#CFD0DD]">
<div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4 w-full max-w-[1440px] mx-auto px-16 2xl:px-0">
<div class="md:col-span-1 py-6 h-vh">
<.live_component
module={MazarynWeb.MediaLive.LeftSidebarComponent}
id="leftsidebar"
media="audios"
user={@user}
/>
</div>
<Components.recently_played_audio_component />
<Components.trending_and_popular_audio_component />
</div>
</div>
28 changes: 28 additions & 0 deletions lib/mazaryn_web/live/audio_live/show.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
defmodule MazarynWeb.AudioLive.Show do
use MazarynWeb, :live_view

import MazarynWeb.Live.Helper

alias Account.Users

@type socket :: Phoenix.LiveView.Socket.t()

@impl Phoenix.LiveView
@spec mount(map(), map(), socket()) :: {:ok, socket()}
def mount(_params, %{"user_id" => user_id} = _session, socket) do
{:ok, do_mount(user_id, socket)}
end

# In case of redirect from login, signup
def mount(_params, %{"session_uuid" => session_uuid} = _session, socket) do
{:ok, do_mount(get_user_id(session_uuid), socket)}
end

defp do_mount(email, socket) do
{:ok, user} = Users.one_by_email(email)

socket
|> assign(search: "")
|> assign(user: user)
end
end
151 changes: 151 additions & 0 deletions lib/mazaryn_web/live/media_live/left_sidebar_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
defmodule MazarynWeb.MediaLive.LeftSidebarComponent do
use MazarynWeb, :live_component
use Phoenix.VerifiedRoutes, endpoint: MazarynWeb.Endpoint, router: MazarynWeb.Router

alias MazarynWeb.Components.Icons

@spec render(map()) :: Phoenix.LiveView.Rendered.t()
def render(assigns) do
~H"""
<div>
<p class="mb-6 font-medium text-base leading-6 text-[#CFD0DD]">
<%= if(@media == "audios", do: "Music", else: "Video") %>
</p>
<div class="w-full bg-[#393a48] border border-[#323340] py-6 px-5 rounded-[1.25rem]">
<div class="flex justify-between align-center items-center">
<div class="flex justify-center items-center">
<ul>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/#{@media}"}
class="group flex align-center items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500"
>
<i>
<Icons.home_icon />
</i>
<div class="text-[#CFD0DD] text-base leading-6 group-hover:text-[#4385F5]">
Home
</div>
</.link>
</li>
<%= if @media == "audios" do %>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/audios"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500 "
>
<i>
<Icons.artist_icon />
</i>
<div class="text-[#CFD0DD] text-base leading-6 group-hover:text-[#4385F5]">
Artist
</div>
</.link>
</li>
<% end %>
<%= if @media == "audios" do %>
<li class="flex align-center items-center mx-2">
<.link
navigate={~p"/media/audios"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500 "
>
<i>
<Icons.album_icon />
</i>
<div class="text-[#CFD0DD] text-base leading-6 group-hover:text-[#4385F5]">
Album
</div>
</.link>
</li>
<% end %>
<%= if @media == "videos" do %>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/videos"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500 "
>
<i>
<Icons.video_icon />
</i>
<div class="text-[#CFD0DD] text-base leading-6 group-hover:text-[#4385F5]">
Your videos
</div>
</.link>
</li>
<% end %>
<%= if @media == "videos" do %>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/videos"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500"
>
<i>
<Icons.discover_icon />
</i>
<div class="text-base leading-6 text-[#CFD0DD] group-hover:text-[#4385F5]">
Discover
</div>
</.link>
</li>
<% end %>
<%= if @media == "videos" do %>
<li class="flex align-center items-center mx-2">
<.link
navigate={~p"/videos"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500"
>
<i>
<Icons.trending_icon />
</i>
<div class="text-base leading-6 text-[#CFD0DD] group-hover:text-[#4385F5]">
Trending
</div>
</.link>
</li>
<% end %>
</ul>
</div>
</div>
</div>
<div class="w-full pt-7 px-5 my-8 bg-[#393a48] border border-[#323340] rounded-[1.25rem]">
<div class="flex justify-between align-center items-center">
<div class="flex justify-center items-center">
<ul>
<%= if @media == "audios" do %>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/audios"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500"
>
<i>
<Icons.playlist_icon />
</i>
<div class="text-base leading-6 text-[#CFD0DD] group-hover:text-[#4385F5]">
Playlist
</div>
</.link>
</li>
<% end %>
<%= if @media == "videos" do %>
<li class="flex align-center items-center mx-2 mb-7">
<.link
navigate={~p"/media/videos"}
class="group flex items-start text-base text-[#CFD0DD] font-semibold hover:text-blue-500"
>
<i>
<Icons.settings_icon />
</i>
<div class="text-base leading-6 text-[#CFD0DD] group-hover:text-[#4385F5]">
Settings
</div>
</.link>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
"""
end
end
Loading