Packages

livebook

0.9.2
0.19.8 0.19.7 0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.6 0.18.5 0.18.4 0.18.3 0.18.2 0.18.1 0.18.0 0.17.3 0.17.2 0.17.1 0.17.0 0.16.4 0.16.3 0.16.2 0.16.1 0.16.0 0.15.5 0.15.4 0.15.3 0.15.2 0.15.1 0.15.0 0.14.7 0.14.6 0.14.5 0.14.4 0.14.3 0.14.2 0.14.1 0.14.0 0.14.0-rc.1 0.14.0-rc.0 0.13.3 0.13.2 0.13.1 0.13.0 0.12.1 0.12.0 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.3 0.9.2 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.2 0.7.1 0.7.0 0.6.3 0.6.2 0.6.1 0.6.0 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.2 0.3.1 0.3.0 0.2.3 0.2.2 0.2.1 0.2.0 0.1.2 0.1.1 0.1.0

Automate code & data workflows with interactive notebooks

Security advisory: This version has known vulnerabilities. View advisories
HexDocs

Current section

Files

Jump to
Readme
82 Versions
16 Dependencies
3 Dependants
1 Advisory
Files
Activity
livebook lib livebook_web live output audio_input_component.ex
Raw

lib/livebook_web/live/output/audio_input_component.ex 

defmodule LivebookWeb.Output.AudioInputComponent do

  use LivebookWeb, :live_component



  @impl true

  def mount(socket) do

    {:ok, assign(socket, endianness: System.endianness(), value: nil)}

  end



  @impl true

  def update(assigns, socket) do

    {value, assigns} = Map.pop!(assigns, :value)



    socket = assign(socket, assigns)



    socket =

      if value == socket.assigns.value do

        socket

      else

        audio_info =

          if value do

            %{

              data: Base.encode64(value.data),

              num_channels: value.num_channels,

              sampling_rate: value.sampling_rate

            }

          end



        push_event(socket, "audio_input_change:#{socket.assigns.id}", %{audio_info: audio_info})

      end



    {:ok, assign(socket, value: value)}

  end



  @impl true

  def render(assigns) do

    ~H"""

    <div

      id={"#{@id}-root"}

      class="inline-flex flex-col gap-4 p-4 border-2 border-dashed border-gray-200 rounded-lg"

      phx-hook="AudioInput"

      phx-update="ignore"

      data-id={@id}

      data-phx-target={@myself}

      data-format={@format}

      data-sampling-rate={@sampling_rate}

      data-endianness={@endianness}

    >

      <input type="file" data-input class="hidden" name="value" accept="audio/*" capture="user" />

      <audio controls data-preview></audio>

      <div class="flex items-center justify-center gap-4">

        <button

          class="button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"

          data-btn-record

        >

          <.remix_icon icon="mic-line" class="text-lg leading-none mr-2" />

          <span>Record</span>

        </button>

        <button

          class="hidden button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500 items-center"

          data-btn-stop

        >

          <span class="mr-2 flex h-3 w-3 relative">

            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-gray-400 opacity-75">

            </span>

            <span class="relative inline-flex rounded-full h-3 w-3 bg-gray-500"></span>

          </span>

          <span>Stop recording</span>

        </button>

        <button

          class="hidden button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"

          data-btn-cancel

        >

          <.remix_icon icon="close-circle-line" class="text-lg leading-none mr-2" />

          <span>Cancel</span>

        </button>

        <button

          class="button-base button-gray border-transparent py-2 px-4 inline-flex text-gray-500"

          data-btn-upload

        >

          <.remix_icon icon="upload-2-line" class="text-lg leading-none mr-2" />

          <span>Upload</span>

        </button>

      </div>

    </div>

    """

  end



  @impl true

  def handle_event("change", params, socket) do

    value = %{

      data: Base.decode64!(params["data"]),

      num_channels: params["num_channels"],

      sampling_rate: params["sampling_rate"],

      format: socket.assigns.format

    }



    send_update(LivebookWeb.Output.InputComponent,

      id: socket.assigns.input_component_id,

      event: :change,

      value: value

    )



    {:noreply, socket}

  end

end