Add anonymous video metric tracking

assets/js/video.js

@@ -1,5 +1,36 @@
+import { createClient } from "@boldvideo/bold-js";
+
 import "vidstack/player";
 import "vidstack/player/layouts/default";
 import "vidstack/player/ui";
 
 import "hls.js";
+
+let base = new URL("/api/bold/", window.location.href);
+let baseUrl = new URL("api/v1/", base);
+
+const bold = createClient("NO_API_KEY_HERE", {
+  baseURL: baseUrl.href,
+  debug: false,
+});
+
+document.querySelectorAll("media-player").forEach((player) => {
+  const video = {
+    id: player.dataset.id,
+    title: player.title,
+    duration: player.duration,
+  };
+
+  const handleEvent = (evt) => {
+    bold.trackEvent(video, evt);
+  };
+
+  const handleTimeUpdateEvent = (_evt, nativeEvt) => {
+    bold.trackEvent(video, nativeEvt);
+  };
+
+  player.addEventListener("play", handleEvent);
+  player.addEventListener("pause", handleEvent);
+  player.addEventListener("loaded-metadata", handleEvent);
+  player.addEventListener("time-update", handleTimeUpdateEvent);
+});

assets/package.json

@@ -4,6 +4,7 @@
   ],
   "dependencies": {
     "@appnest/masonry-layout": "^2.2.3",
+    "@boldvideo/bold-js": "^0.4.2",
     "hls.js": "^1.5.17",
     "phoenix": "workspace:*",
     "phoenix_html": "workspace:*",

config/config.exs

@@ -83,6 +83,9 @@ config :phoenix,
     PhoenixBakery.Zstd
   ]
 
+config :reverse_proxy_plug,
+  http_client: ReverseProxyPlug.HTTPClient.Adapters.Req
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"

lib/kobrakai/bold.ex

@@ -3,6 +3,11 @@ defmodule Kobrakai.Bold do
     defexception [:message]
   end
 
+  def api_key do
+    config = Application.fetch_env!(:kobrakai, __MODULE__)
+    Keyword.fetch!(config, :api_key)
+  end
+
   defp req_options do
     config = Application.fetch_env!(:kobrakai, __MODULE__)
 

lib/kobrakai_web/endpoint.ex

@@ -16,6 +16,7 @@ defmodule KobrakaiWeb.Endpoint do
   plug :health
   plug :router_url
   plug KobrakaiWeb.Plausible
+  plug KobrakaiWeb.BoldVideo
 
   # Serve at "/" the static files from "priv/static" directory.
   #

lib/kobrakai_web/plugs/bold_video.ex

@@ -0,0 +1,23 @@
+defmodule KobrakaiWeb.BoldVideo do
+  def init(_), do: []
+
+  def call(conn, _) do
+    case conn.path_info do
+      ["api", "bold" | rest] ->
+        conn
+        |> Plug.Conn.put_req_header("authorization", Kobrakai.Bold.api_key())
+        |> Plug.forward(
+          rest,
+          ReverseProxyPlug,
+          ReverseProxyPlug.init(
+            upstream: "https://app.boldvideo.io/",
+            response_mode: :buffer
+          )
+        )
+        |> Plug.Conn.halt()
+
+      _ ->
+        conn
+    end
+  end
+end

lib/kobrakai_web/plugs/plausible.ex

@@ -5,14 +5,7 @@ defmodule KobrakaiWeb.Plausible do
     case conn.path_info do
       path when path in [["js", "script.js"], ["api", "event"]] ->
         conn
-        |> Plug.run([
-          {
-            ReverseProxyPlug,
-            upstream: "https://plausible.io",
-            client: Kobrakai.ReverseProxyPlug.FinchClient,
-            response_mode: :buffer
-          }
-        ])
+        |> Plug.run([{ReverseProxyPlug, upstream: "https://plausible.io", response_mode: :buffer}])
         |> Plug.Conn.halt()
 
       _ ->

lib/kobrakai_web/views/video_html/show.html.heex

@@ -10,6 +10,7 @@
   </div>
   <media-player
     class="block w-full aspect-[16/9] mb-6"
+    data-id={@video.id}
     title={@video.title}
     src={@video.src}
     duration={@video.duration}

mix.exs

@@ -69,7 +69,7 @@ defmodule Kobrakai.MixProject do
       {:phoenix_storybook, "~> 0.6.0"},
       {:plug_cache_control, "~> 1.1.0", github: "tanguilp/plug_cache_control"},
       {:thumbor_path, github: "LostKobrakai/thumbor_path"},
-      {:reverse_proxy_plug, "~> 2.1"},
+      {:reverse_proxy_plug, "~> 3.0"},
       {:quantum, "~> 3.0"},
       {:extrace, "~> 0.5"},
       {:dns_cluster, "~> 0.1.1"},

mix.lock

@@ -52,7 +52,7 @@
   "recon": {:hex, :recon, "2.5.5", "c108a4c406fa301a529151a3bb53158cadc4064ec0c5f99b03ddb8c0e4281bdf", [:mix, :rebar3], [], "hexpm", "632a6f447df7ccc1a4a10bdcfce71514412b16660fe59deca0fcf0aa3c054404"},
   "redirect": {:hex, :redirect, "0.4.0", "98b46053504ee517bc3ad2fd04c064b64b48d339e1e18266355b30c4f8bb52b0", [:mix], [{:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}, {:plug, "~> 1.8.3 or ~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "dfa29a8ecbad066ed0b73b34611cf24c78101719737f37bdf750f39197d67b97"},
   "req": {:hex, :req, "0.5.7", "b722680e03d531a2947282adff474362a48a02aa54b131196fbf7acaff5e4cee", [:mix], [{:brotli, "~> 0.3.1", [hex: :brotli, repo: "hexpm", optional: true]}, {:ezstd, "~> 1.0", [hex: :ezstd, repo: "hexpm", optional: true]}, {:finch, "~> 0.17", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mime, "~> 2.0.6 or ~> 2.1", [hex: :mime, repo: "hexpm", optional: false]}, {:nimble_csv, "~> 1.0", [hex: :nimble_csv, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "c6035374615120a8923e8089d0c21a3496cf9eda2d287b806081b8f323ceee29"},
-  "reverse_proxy_plug": {:hex, :reverse_proxy_plug, "2.4.1", "851547dae91f563b12863f117c564f8a4bd252b2c1aa7f19ffee897f15a1a7bd", [:mix], [{:httpoison, "~> 1.2 or ~> 2.0", [hex: :httpoison, repo: "hexpm", optional: true]}, {:plug, "~> 1.6", [hex: :plug, repo: "hexpm", optional: false]}, {:tesla, "~> 1.4", [hex: :tesla, repo: "hexpm", optional: true]}], "hexpm", "9a2dff0250968a62a34330c6a88fcf9fbbba110966d84340f250b5156f0d59f9"},
+  "reverse_proxy_plug": {:hex, :reverse_proxy_plug, "3.0.2", "38fde2f59bca8b219ef4f1ec0c0849a67c6d9705160e426a2354f35399db5c7b", [:mix], [{:finch, "~> 0.18", [hex: :finch, repo: "hexpm", optional: true]}, {:httpoison, "~> 1.2 or ~> 2.0", [hex: :httpoison, repo: "hexpm", optional: true]}, {:plug, "~> 1.6", [hex: :plug, repo: "hexpm", optional: false]}, {:req, "~> 0.3.0 or ~> 0.4.0 or ~> 0.5.0", [hex: :req, repo: "hexpm", optional: true]}, {:tesla, "~> 1.4", [hex: :tesla, repo: "hexpm", optional: true]}], "hexpm", "31ae5e068f7f504fba1b5c17c31c87966c720809ac15140c6c181440fbd24eda"},
   "sweet_xml": {:hex, :sweet_xml, "0.7.4", "a8b7e1ce7ecd775c7e8a65d501bc2cd933bff3a9c41ab763f5105688ef485d08", [:mix], [], "hexpm", "e7c4b0bdbf460c928234951def54fe87edf1a170f6896675443279e2dbeba167"},
   "swoosh": {:hex, :swoosh, "1.16.10", "04be6e2eb1a31aa0aa21a731175c81cc3998189456a92daf13d44a5c754afcf5", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "756be04db173c0cbe318f1dfe2bcc88aa63aed78cf5a4b02b61b36ee11fc716a"},
   "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},