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