[All] Setup CI for JS assets (#28)

* [All] Setup CI for JS assets
* Update version and licence

Author: sgfn

.github/workflows/build-check-app.yml

@@ -34,6 +34,17 @@ jobs:
         otp-version: ${{ matrix.otp }}
         elixir-version: ${{ matrix.elixir }}
 
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22
+
+    - name: Install libsrtp2
+      working-directory: .
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y libsrtp2-dev
+
     - name: Install FFmpeg development libraries
       if: ${{ inputs.with-ffmpeg }}
       working-directory: .
@@ -94,3 +105,12 @@ jobs:
     - name: Check with dialyzer
       if: ${{ !cancelled() && steps.compile.outcome == 'success' }}
       run: mix dialyzer
+
+    - name: Check assets formatting
+      if: ${{ !cancelled() }}
+      run: |
+        mix assets.format
+        if [[ -n "$(git status --porcelain)" ]]; then
+          echo "Assets formatter introduced changes. Run `mix assets.format` and commit the updated files"
+          exit 1
+        fi

broadcaster/assets/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "printWidth": 80
+}

broadcaster/assets/css/app.css

@@ -1,41 +1,41 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 /* This file is for your main application CSS */
 .invalid-input {
-    border-color: #d52b4d;
+  border-color: #d52b4d;
 }
 
 .chat-message {
-    display: flex;
-    flex-direction: column;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .chat-nickname {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 /* from https://stackoverflow.com/a/38994837/9620900 */
 /* Hiding scrollbar for Chrome, Safari and Opera */
 #chat-messages::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 /* Hiding scrollbar for IE, Edge and Firefox */
 #chat-messages {
-  scrollbar-width: none;  /* Firefox */
-  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
 }
 
 #chat-input::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 /* Hiding scrollbar for IE, Edge and Firefox */
 #chat-input {
-  scrollbar-width: none;  /* Firefox */
-  -ms-overflow-style: none;  /* IE and Edge */
-}
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}

broadcaster/assets/eslint.config.mjs

@@ -0,0 +1,32 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2021,
+      sourceType: "module",
+      globals: globals.browser
+    },
+    plugins: {
+      prettier: prettierPlugin
+    },
+    rules: {
+      "prettier/prettier": "error",
+      "no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ]
+    },
+    settings: {
+      prettier: prettierConfig
+    }
+  },
+  pluginJs.configs.recommended,
+];

broadcaster/assets/js/app.js

@@ -16,37 +16,38 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html';
 // Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix"
-import { LiveSocket } from "phoenix_live_view"
-import topbar from "../vendor/topbar"
+import { Socket } from 'phoenix';
+import { LiveSocket } from 'phoenix_live_view';
+import topbar from '../vendor/topbar';
 
-import { Home } from "./home.js"
-import { Player } from "./player.js"
+import { Home } from './home.js';
+import { Player } from './player.js';
 
-let Hooks = {}
-Hooks.Home = Home
-Hooks.Player = Player
+let Hooks = {};
+Hooks.Home = Home;
+Hooks.Player = Player;
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute('content');
+let liveSocket = new LiveSocket('/live', Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
   hooks: Hooks,
-})
+});
 
 // Show progress bar on live navigation and form submits
-topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
-window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
-window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' });
+window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300));
+window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
-
+window.liveSocket = liveSocket;

broadcaster/assets/js/chat.js

@@ -1,38 +1,43 @@
-import { Socket, Presence } from "phoenix"
+import { Socket, Presence } from 'phoenix';
 
 export async function connectChat() {
-  const viewercount = document.getElementById("viewercount");
-  const chatMessages = document.getElementById("chat-messages");
-  const chatInput = document.getElementById("chat-input");
-  const chatNickname = document.getElementById("chat-nickname");
-  const chatButton = document.getElementById("chat-button");
+  const viewercount = document.getElementById('viewercount');
+  const chatMessages = document.getElementById('chat-messages');
+  const chatInput = document.getElementById('chat-input');
+  const chatNickname = document.getElementById('chat-nickname');
+  const chatButton = document.getElementById('chat-button');
 
-  let socket = new Socket("/socket", { params: { token: window.userToken } });
+  let socket = new Socket('/socket', { params: { token: window.userToken } });
 
   socket.connect();
 
-  const channel = socket.channel("stream:chat");
+  const channel = socket.channel('stream:chat');
   const presence = new Presence(channel);
 
-  send = function() {
-    body = chatInput.value.trim();
-    if (body != "") {
-      channel.push("chat_msg", { body: body });
-      chatInput.value = "";
+  const send = function () {
+    const body = chatInput.value.trim();
+    if (body != '') {
+      channel.push('chat_msg', { body: body });
+      chatInput.value = '';
     }
-  }
+  };
 
   presence.onSync(() => {
     viewercount.innerText = presence.list().length;
   });
 
-  channel.join()
-    .receive("ok", resp => { console.log("Joined chat channel successfully", resp) })
-    .receive("error", resp => { console.log("Unable to join chat channel", resp) });
+  channel
+    .join()
+    .receive('ok', (resp) => {
+      console.log('Joined chat channel successfully', resp);
+    })
+    .receive('error', (resp) => {
+      console.log('Unable to join chat channel', resp);
+    });
 
-  channel.on("join_chat_resp", resp => {
+  channel.on('join_chat_resp', (resp) => {
     if (resp.result === 'success') {
-      chatButton.innerText = "Send";
+      chatButton.innerText = 'Send';
       chatButton.onclick = send;
       chatNickname.disabled = true;
       chatInput.disabled = false;
@@ -42,13 +47,13 @@ export async function connectChat() {
           ev.preventDefault();
           send();
         }
-      }
+      };
     } else {
       chatNickname.classList.add('invalid-input');
     }
   });
 
-  channel.on("chat_msg", msg => {
+  channel.on('chat_msg', (msg) => {
     if (msg.nickname == undefined || msg.body == undefined) return;
 
     const chatMessage = document.createElement('div');
@@ -71,15 +76,15 @@ export async function connectChat() {
 
     // allow for 1 scroll history
     if (chatMessages.scrollHeight > 2 * chatMessages.clientHeight) {
-     chatMessages.removeChild(chatMessages.children[0]); 
+      chatMessages.removeChild(chatMessages.children[0]);
     }
-  })
+  });
 
   chatButton.onclick = () => {
-    channel.push("join_chat", { nickname: chatNickname.value });
+    channel.push('join_chat', { nickname: chatNickname.value });
   };
 
   chatNickname.onclick = () => {
-    chatNickname.classList.remove("invalid-input");
-  }
+    chatNickname.classList.remove('invalid-input');
+  };
 }