Make player container ("cinema") background match terminal background…

… color

assets/css/_base.scss

@@ -101,7 +101,6 @@ body, main {
 
 section.cinema {
   color: #fff;
-  background-color: #222;
   padding: calc(min(4vh, 4vw)) 0;
 }
 

assets/css/_recording_show.scss

@@ -1,4 +1,22 @@
+.c-live-stream.a-show {
+  section.cinema {
+    transition: background-color 0.2s;
+  }
+}
+
 .c-recording.a-show, .c-live-stream.a-show {
+  section.cinema {
+    background-color: color-mix(in oklab, var(--term-color-background) 80%, black);
+
+    .ap-player {
+      box-shadow: color-mix(in oklab, var(--term-color-background) 50%, black) 0px 0px 60px 5px;
+    }
+
+    div.ap-wrapper:fullscreen {
+      background-color: inherit;
+    }
+  }
+
   section.info {
     small {
       font-size: 14px;

lib/asciinema_web/controllers/live_stream_html.ex

@@ -83,4 +83,7 @@ defmodule AsciinemaWeb.LiveStreamHTML do
   defp owned_by_current_user?(stream, conn) do
     conn.assigns[:current_user] && conn.assigns[:current_user].id == stream.user_id
   end
+
+  def head("show.html", assigns), do: head_for_show(assigns)
+  def head(_, _), do: nil
 end

lib/asciinema_web/controllers/live_stream_html/head_for_show.html.heex

@@ -0,0 +1,6 @@
+<%= if @stream.visibility != :public do %>
+  <meta name="robots" content="noindex, nofollow" />
+  <meta name="referrer" content="origin" />
+<% end %>
+
+<.theme_style theme={theme(@stream)} />

lib/asciinema_web/controllers/live_stream_html/show.html.heex

@@ -192,5 +192,12 @@ script -f -O live.pipe</code></pre>
 
     player.addEventListener('reset', resizeCinema);
     player.addEventListener('resize', resizeCinema);
+
+    player.addEventListener('reset', () => {
+      const el = player.el.getElementsByClassName('ap-player')[0];
+      const style = window.getComputedStyle(el);
+      const color = style.getPropertyValue("--term-color-background");
+      container.style.setProperty('--term-color-background', color);
+    });
   });
 </script>

lib/asciinema_web/controllers/live_stream_html/theme_style.html.heex

@@ -0,0 +1,10 @@
+<style>
+  section.cinema, div.ap-player {
+    --term-color-foreground: <%= @theme.fg %>;
+    --term-color-background: <%= @theme.bg %>;
+
+    <%= for {c, i} <- Enum.with_index(Tuple.to_list(@theme.palette)) do %>
+    --term-color-<%= i %>: <%= c %>;
+    <% end %>
+  }
+</style>

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

@@ -31,4 +31,4 @@
   <meta name="referrer" content="origin" />
 <% end %>
 
-<.original_theme_style asciicast={@asciicast} />
+<.theme_style theme={theme(@asciicast)} />

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

@@ -1,4 +1,4 @@
-<.original_theme_style asciicast={@asciicast} />
+<.theme_style theme={theme(@asciicast)} />
 
 <div id="player" style="width: 100%"></div>
 

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

@@ -0,0 +1,10 @@
+<style>
+  section.cinema, div.ap-player {
+    --term-color-foreground: <%= @theme.fg %>;
+    --term-color-background: <%= @theme.bg %>;
+
+    <%= for {c, i} <- Enum.with_index(Tuple.to_list(@theme.palette)) do %>
+    --term-color-<%= i %>: <%= c %>;
+    <% end %>
+  }
+</style>