91 lines
3.7 KiB
Elixir
91 lines
3.7 KiB
Elixir
defmodule ElixirAiWeb.Voice.Recording do
|
|
use Phoenix.Component
|
|
alias Phoenix.LiveView.JS
|
|
|
|
attr :state, :atom, required: true
|
|
|
|
def recording(assigns) do
|
|
~H"""
|
|
<div class="p-4 flex flex-col gap-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<%= if @state == :idle do %>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 text-seafoam-500 shrink-0"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
|
|
</svg>
|
|
<span class="text-seafoam-400 font-semibold text-sm">Voice Input</span>
|
|
<% end %>
|
|
<%= if @state == :recording do %>
|
|
<span class="relative flex h-3 w-3 shrink-0">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75">
|
|
</span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
|
</span>
|
|
<span class="text-seafoam-50 font-semibold text-sm">Recording</span>
|
|
<% end %>
|
|
<%= if @state == :processing do %>
|
|
<span class="relative flex h-3 w-3 shrink-0">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75">
|
|
</span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
|
|
</span>
|
|
<span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
|
|
<% end %>
|
|
</div>
|
|
<button
|
|
phx-click="minimize"
|
|
title="Minimize"
|
|
class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M5 12h14" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<%= if @state in [:recording, :processing] do %>
|
|
<div id="voice-viz-wrapper" phx-update="ignore">
|
|
<canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
|
|
</canvas>
|
|
</div>
|
|
<% end %>
|
|
<%= if @state == :idle do %>
|
|
<button
|
|
phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
|
|
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
|
|
>
|
|
<span>Start Recording</span>
|
|
<kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
|
|
Ctrl+Space
|
|
</kbd>
|
|
</button>
|
|
<% end %>
|
|
<%= if @state == :recording do %>
|
|
<button
|
|
phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
|
|
class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
|
|
>
|
|
<span>Stop Recording</span>
|
|
<kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
|
|
Space
|
|
</kbd>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|