Packages

exshome

0.1.5
0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

DIY Elixir-based smart home.

HexDocs

Current section

Files

Jump to
Readme
8 Versions
18 Dependencies
0 Dependants
Files
Activity
exshome lib exshome_player web templates playlist.html.heex
Raw

lib/exshome_player/web/templates/playlist.html.heex 

<section class="max-h-full h-full flex flex-col">

  <section class="flex items-center justify-center">

    <.button phx-click="open_file_modal">

      upload file

    </.button>

    <.button phx-click="open_new_link_modal">

      add a link

    </.button>

  </section>

  <section class="flex-grow h-full overflow-auto">

    <ul class="mx-2 min-h-full flex flex-col items-center justify-center">

      <%= for track <- @deps.playlist.tracks do %>

        <li class="bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700

               shadow-md shadow-gray-600 dark:shadow-gray-700

               rounded-xl flex items-center justify-between

               p-4 m-2 w-full sm:w-3/4 md:w-1/2

               ">

          <button

            phx-click="play"

            phx-value-id={track.id}

            class={"text-4xl #{if @deps.playlist.current_id == track.id, do: 'playing'}"}

          >

            <%= if @deps.playlist.current_id == track.id, do: "🎧", else: "▶️" %>

          </button>

          <div class={

            "#{if @deps.playlist.current_id == track.id, do: 'font-bold dark:text-yellow-200'} flex flex-col flex-grow pl-4 text-left justify-center overflow-x-auto overflow-y-hidden"

          }>

            <div class="text-xl">

              <%= if String.trim(track.title) == "", do: "Unknown", else: track.title %>

            </div>

            <div class="text-xs">

              <%= track.path %>

            </div>

          </div>

          <div class="pl-1 flex flex-row items-center justify-center">

            <%= if track.type == :url do %>

              <button phx-click="edit" phx-value-id={track.id} class="text-4xl">

                ️✏️

              </button>

            <% end %>

            <button

              phx-click="delete"

              phx-value-id={track.id}

              data-confirm="Do you really want to delete this track?"

              class="text-4xl"

            >

              🗑️

            </button>

          </div>

        </li>

      <% end %>

    </ul>

  </section>

</section>