Merge branch 'develop'

.formatter.exs

@@ -1,5 +1,6 @@
 [
-  import_deps: [:ecto, :phoenix],
-  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
-  subdirectories: ["priv/*/migrations"]
+  import_deps: [:ecto, :ecto_sql, :phoenix],
+  subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
 ]

.gitignore

@@ -19,6 +19,9 @@ erl_crash.dump
 # Also ignore archive artifacts (built via "mix archive.build").
 *.ez
 
+# Temporary files, for example, from tests.
+/tmp/
+
 # Ignore package tarball (built via "mix hex.build").
 sample_app-*.tar
 

README.md

@@ -34,6 +34,17 @@ Alternatively, you can set `ASCIINEMA_API_URL` environment variable:
 
     ASCIINEMA_API_URL=https://your.asciinema.host asciinema rec
 
+## Security
+
+Security of this web app and user data it manages is important.
+If you find anything that looks like a potential vulnerability please
+read on
+[how to report a security issue](https://github.com/asciinema/asciinema-server/blob/main/CONTRIBUTING.md#reporting-security-issues).
+
+## Consulting
+
+I offer consulting services for asciinema project. See https://asciinema.org/consulting for more information.
+
 ## Contributing
 
 Check out our [Contributing](http://asciinema.org/contributing) page, which
@@ -43,13 +54,6 @@ If you decide to contribute with the code then please
 read [CONTRIBUTING.md](https://github.com/asciinema/asciinema-server/blob/main/CONTRIBUTING.md), which covers submitting bugs,
 requesting new features, preparing your code for a pull request, etc.
 
-## Security
-
-We're serious about the security of this web app and the user data it manages.
-If you find anything that looks like a potential vulnerability please
-read on
-[how to report a security issue](https://github.com/asciinema/asciinema-server/blob/main/CONTRIBUTING.md#reporting-security-issues).
-
 ## Authors
 
 asciinema is developed by [Marcin Kulik](http://ku1ik.com) with the help of

assets/css/_base.scss

@@ -74,7 +74,7 @@ body, main {
   background-color: #f7f7f7;
 }
 
-.c-recording {
+.c-recording, .c-live-stream {
   main {
     h1, h2, h3 {
       margin-top: 2rem;

assets/css/_header.scss

@@ -14,6 +14,7 @@
       img {
         height: 20px;
         margin-right: 0.7rem;
+        border-radius: 2px;
       }
     }
   }

assets/css/_icons.css

@@ -0,0 +1,21 @@
+span.icon svg {
+  height: 1em;
+  margin-right: 0.2em;
+  margin-top: -0.15em;
+}
+
+span.icon-live {
+  font-weight: bold;
+  color: white;
+  background-color: #d40000;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+span.icon-offline {
+  font-weight: bold;
+  color: white;
+  background-color: #666;
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}

assets/css/_recording_card.scss

@@ -84,6 +84,7 @@ div.asciicast-card {
       img {
         width: 100%;
         height: 100%;
+        border-radius: 2px;
       }
     }
 

assets/css/_recording_show.scss

@@ -1,4 +1,4 @@
-.c-recording.a-show {
+.c-recording.a-show, .c-live-stream.a-show {
   section.info {
     small {
       font-size: 14px;
@@ -14,6 +14,7 @@
       img {
         width: 100%;
         height: 100%;
+        border-radius: 3px;
       }
     }
 
@@ -31,14 +32,50 @@
   }
 
   section.meta {
-    img {
-      width: 16px;
-    }
-
     code {
       color: #212529;
       background-color: #f7f7f7;
     }
+
+    .status-line-item {
+      margin-right: 2em;
+
+      .icon {
+        svg {
+          font-size: 1.5em;
+        }
+      }
+
+      .icon {
+        &.icon-live, &.icon-offline {
+          margin-right: 0.5em;
+        }
+      }
+    }
+  }
+
+  section.instructions {
+    padding-top: 0;
+
+    input[type=text] {
+      width: 100%;
+      font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace;
+      font-size: 14px;
+      color: #212529;
+      background-color: #fff;
+      border-radius: 3px;
+      border: 1px solid #e0e0e0;
+      margin-bottom: 8px;
+      padding: 9px;
+    }
+
+    h2 {
+      margin-top: 2em;
+    }
+
+    h3 {
+      font-weight: 600;
+    }
   }
 }
 

assets/css/_user_login.scss

@@ -14,9 +14,5 @@
 .c-login {
   h2 {
     margin-top: 30px;
-
-    span.glyphicon {
-      top: 4px;
-    }
   }
 }

assets/css/_user_profile.scss

@@ -8,6 +8,7 @@
       img {
         width: 100%;
         height: 100%;
+        border-radius: 3px;
       }
     }
 

assets/css/app.scss

@@ -6,6 +6,7 @@ $pagination-active-bg: #06989a;
 $primary: #06989a;
 
 @import "~bootstrap/scss/bootstrap";
+@import "./_icons.css";
 @import "./_base.scss";
 @import "./_header.scss";
 @import "./_footer.scss";

assets/js/app.js

@@ -3,25 +3,9 @@ import css from '../css/app.scss';
 import $ from 'jquery';
 import "bootstrap";
 import "phoenix_html";
-import { create } from 'asciinema-player';
-
-window.createPlayer = create;
-
-function createPlayer(src, container, opts) {
-  if (opts.customTerminalFontFamily) {
-    opts.terminalFontFamily = `${opts.customTerminalFontFamily},Consolas,Menlo,'Bitstream Vera Sans Mono',monospace,'Powerline Symbols'`;
-
-    document.fonts.load(`1em ${opts.customTerminalFontFamily}`).then(() => {
-      console.log(`loaded font ${opts.customTerminalFontFamily}`);
-      create(src, container, opts);
-    }).catch(error => {
-      console.log(`failed to load font ${opts.customTerminalFontFamily}`, error);
-      create(src, container, opts);
-    });
-  } else {
-    create(src, container, opts);
-  }
-}
+import { createPlayer } from './player';
+
+window.createPlayer = createPlayer;
 
 $(function() {
   $('input[data-behavior=focus]:first').focus().select();
@@ -34,10 +18,14 @@ $(function() {
   if ($('meta[name=referrer][content=origin]').length > 0) {
     $('a[href*=http]').attr('rel', 'noreferrer');
   }
+});
 
-  const players = window.players || new Map();
 
-  for (const [id, props] of players) {
-    createPlayer(props.src, document.getElementById(id), { ...props, logger: console });
-  };
-});
+import {Socket} from "phoenix";
+import {LiveSocket} from "phoenix_live_view";
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } });
+
+// Connect if there are any LiveViews on the page
+liveSocket.connect();

assets/js/iframe.js

@@ -1,14 +1,4 @@
 import css from '../css/iframe.scss';
+import { createPlayer } from './player';
 
-import { create } from 'asciinema-player';
-
-const [id, props] = window.players.entries().next().value;
-const player = create(props.src, document.getElementById(id), props);
-
-if (window.parent !== window) {
-  player.el.addEventListener('resize', e => {
-    const w = e.detail.el.offsetWidth;
-    const h = Math.max(document.body.scrollHeight, document.body.offsetHeight);
-    window.parent.postMessage(['resize', { width: w, height: h }], '*');
-  });
-}
+window.createPlayer = createPlayer;

assets/js/player.js

@@ -0,0 +1,17 @@
+import { create } from 'asciinema-player';
+
+export function createPlayer(src, container, opts) {
+  if (opts.customTerminalFontFamily) {
+    opts.terminalFontFamily = `${opts.customTerminalFontFamily},Consolas,Menlo,'Bitstream Vera Sans Mono',monospace,'Powerline Symbols'`;
+
+    document.fonts.load(`1em ${opts.customTerminalFontFamily}`).then(() => {
+      console.log(`loaded font ${opts.customTerminalFontFamily}`);
+      create(src, container, opts);
+    }).catch(error => {
+      console.log(`failed to load font ${opts.customTerminalFontFamily}`, error);
+      return create(src, container, opts);
+    });
+  } else {
+    return create(src, container, opts);
+  }
+}