Merge branch 'develop'

Author: ku1ik

README.md

@@ -2,43 +2,48 @@
 
 __asciinema server__ is a server-side component of the asciinema ecosystem.
 
-It implements a hosting platform for terminal session recordings. This includes
-an API endpoint for uploading recordings, which is used by the [asciinema
-CLI](https://docs.asciinema.org/manual/cli/), and offers a familiar web
-interface for viewing, browsing, sharing and managing recordings.
+It implements a hosting platform for terminal session recordings and live
+streaming. It offers a familiar web interface for viewing, browsing, sharing
+and managing recordings and streams. This includes [HTTP
+API](https://docs.asciinema.org/manual/server/api.md), which is used by the
+[asciinema CLI](https://docs.asciinema.org/manual/cli/index.md).
 
 The server is built with [Elixir language](https://elixir-lang.org/) and
-[Phoenix framework](https://www.phoenixframework.org/), and embeds asciinema's
-virtual terminal, [avt](https://github.com/asciinema/avt), to perform tasks such
-as preview generation and recording analysis.
+[Phoenix framework](https://www.phoenixframework.org/). It embeds asciinema's
+virtual terminal, [avt](https://github.com/asciinema/avt), which is utilized by
+tasks such as preview generation, recording analysis and live stream state
+bookkeeping.
 
 [asciinema.org](https://asciinema.org) is a public asciinema server instance
-managed by the asciinema team, offering free hosting for terminal recordings,
-available to everyone. Check [asciinema.org/about](https://asciinema.org/about)
-to learn more about this instance.
+managed by the asciinema project team, providing free hosting for terminal
+recordings and streams, available to everyone. Check
+[asciinema.org/about](https://asciinema.org/about) to learn more about this
+instance.
 
 You can easily [self-host asciinema
-server](https://docs.asciinema.org/manual/server/self-hosting/) and use the
-[asciinema CLI](https://docs.asciinema.org/manual/cli/) with your own instance.
-If you're not comfortable with uploading your terminal sessions to
+server](https://docs.asciinema.org/manual/server/self-hosting/index.md) and use
+the [asciinema CLI](https://docs.asciinema.org/manual/cli/index.md) with your
+own instance. If you're not comfortable with hosting your data at
 asciinema.org, if your company policy prevents you from doing so, or if you
 simply prefer self-hosting everything, then asciinema has you covered.
 
 Notable features:
 
 - hosting of terminal session recordings in
-  [asciicast](https://docs.asciinema.org/manual/asciicast/v2/) format,
+  [asciicast](https://docs.asciinema.org/manual/asciicast/v3/) format,
+- [live streaming](https://docs.asciinema.org/manual/server/streaming/) of
+  terminal sessions,
 - perfectly integrated [asciinema
   player](https://docs.asciinema.org/manual/player/) for best viewing experience,
 - easy [sharing](https://docs.asciinema.org/manual/server/sharing/) of
   recordings via secret links,
 - easy [embedding](https://docs.asciinema.org/manual/server/embedding/) of the
   player, or linking via preview images (SVG),
 - privacy friendly - no tracking, no ads,
-- visibility control for recordings: private, unlisted, or public,
-- editable recording metadata like title or long description (Markdown),
+- visibility control for recordings and streams: private, unlisted, or public,
+- editable recording/stream metadata like title or long description (Markdown),
 - configurable terminal themes and font families,
-- ability to download plain text version (`.txt`) of a recording.
+- download of plain text transcripts (`.txt`) of a recordings.
 
 Refer to [asciinema server docs](https://docs.asciinema.org/manual/server/) for
 further details.

assets/css/_base.css

@@ -198,7 +198,7 @@ body pre {
   margin-bottom: 1rem;
 }
 
-.has-error .form-control {
+.has-error .form-control, input[type="url"]:invalid {
   border-color: #dc3545;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 }
@@ -216,4 +216,4 @@ body pre {
 
 span.email b {
   display: none;
-}
+}

assets/package-lock.json

@@ -6,7 +6,7 @@
     "defaults"
   ],
   "dependencies": {
-    "asciinema-player": "3.10.0",
+    "asciinema-player": "3.12.1",
     "bootstrap": "^4.5.0",
     "jquery": "^3.5.1",
     "phoenix": "1.7.6",

assets/package.json

@@ -0,0 +1,10 @@
+default: serve
+
+serve:
+  iex -S mix phx.server
+
+test:
+  mix test
+
+format:
+  mix format

justfile

@@ -185,7 +185,7 @@ defmodule AsciinemaWeb.RecordingController do
 
   def edit(conn, _params) do
     changeset = Recordings.change_asciicast(conn.assigns.asciicast)
-    render(conn, "edit.html", changeset: changeset)
+    render(conn, "edit.html", changeset: changeset, instance_url: AsciinemaWeb.Endpoint.url())
   end
 
   def update(conn, %{"asciicast" => asciicast_params}) do

lib/asciinema_web/controllers/recording_controller.ex

@@ -30,7 +30,8 @@ defmodule AsciinemaWeb.RecordingHTML do
       poster: poster(asciicast.snapshot),
       markers: markers(asciicast.markers),
       idleTimeLimit: asciicast.idle_time_limit,
-      speed: asciicast.speed
+      speed: asciicast.speed,
+      audioUrl: asciicast.audio_url
     ]
     |> Keyword.merge(opts)
     |> Ext.Keyword.rename(t: :startAt)

lib/asciinema_web/controllers/recording_html.ex

@@ -223,6 +223,22 @@
           </div>
         </div>
 
+        <div class="form-group row">
+          <.label for={f[:audio_url]} class="col-sm-4 col-md-3 col-lg-3 col-form-label">
+            Audio URL
+          </.label>
+          <div class="col-sm-8 col-md-9 col-lg-9">
+            <.input field={f[:audio_url]} type="url" class="form-control" />
+            <.error field={f[:audio_url]} />
+            <small class="form-text text-muted">
+              Use it when you want to add a voice-over or a soundtrack to your
+              recording. The player will automatically sync audio playback
+              position with the terminal recording. The server providing the
+              audio file must be configured to allow CORS requests from {@instance_url}.
+            </small>
+          </div>
+        </div>
+
         <div class="form-group row">
           <.label for={f[:markers]} class="col-sm-4 col-md-3 col-lg-3 col-form-label">
             Markers

lib/asciinema_web/controllers/recording_html/edit.html.heex

@@ -79,7 +79,7 @@ defmodule AsciinemaWeb.StreamController do
       end
 
     changeset = Streaming.change_stream(conn.assigns.stream)
-    render(conn, :edit, changeset: changeset)
+    render(conn, :edit, changeset: changeset, instance_url: AsciinemaWeb.Endpoint.url())
   end
 
   def update(conn, %{"stream" => params}) do

lib/asciinema_web/controllers/stream_controller.ex

@@ -26,10 +26,11 @@ defmodule AsciinemaWeb.StreamHTML do
     [
       cols: term_cols(stream),
       rows: term_rows(stream),
-      autoplay: true,
+      autoplay: stream.audio_url == nil,
       theme: term_theme_name(stream),
       terminalLineHeight: stream.term_line_height,
-      customTerminalFontFamily: Media.font_family(stream)
+      customTerminalFontFamily: Media.font_family(stream),
+      audioUrl: stream.audio_url
     ]
     |> Keyword.merge(opts)
     |> Enum.into(%{})