def render(~M{player, myname, messages}) do
    [[:div, %{id: "player", class: "player", phxUpdate: "replace"},
          [:div, %{class: "thumbnail", style: "background-image: url(#{player.thumbnail})"}],
          [:div, %{class: "audiopanel"},
            [:div, %{class: "audioline"},
              [:div, [:label, player.file],
              [:div, player.status]],
              [:progress, %{value: 1, max: 5, class: "audioprogress"}]]]],
    [:form, %{phxSubmit: "submit", phxThrottle: "2000"},
      [:input, %{type: "text", name: "userinput", placeholder: "type: ':help' to see the help message"}],
      [:label, "Logged as #{myname}"]],
    [:div, %{id: "chat-messages", name: "div", phxUpdate: "append"}],
      for ~M{id, author, text} <- messages do
        [:div, %{id: "msgid#{id}"},
          [:p, [:span, "#{author}:"],
            for line <- text do
              line
            end
            |> Enum.intersperse([:br])]]
      end]
  end

def render(assigns) do
    ~L"""
    <div id="player" class="player" phx-update="replace">
      <div
        class="thumbnail"
        style="background-image: url(<%= @player.thumbnail %>)"
      >
      </div>
      <div class="audiopanel">
        <div class="audioline">
          <div><label><%= @player.file %></label></div>
          <div><%= @player.status %></div>
        </div>
        <progress value="1" max="5" class="audioprogress"/></progress>
      </div>
    </div>
    <form phx-submit="submit" phx-throttle="2000">
      <input
        type="text"
        name="userinput"
        placeholder="type: ':help' to see the help message"
      >
      <label>Logged as <%= @myname %></label>
    </form>
    <div id="chat-messages" name="div" phx-update="append">
      <%= for message <- @messages do %>
        <div id="msgid<%= message.id %>">
          <p>
            <span><%= message.author %>: </span>
            <%= for line <- message.text  do %>
              <%= line %> <br>
            <% end %>
          </p>
        </div>
      <% end %>
    </div>
    """
  end