Evercam UI timeline

apps/ex_nvr/lib/ex_nvr/recordings.ex

@@ -25,7 +25,13 @@ defmodule ExNVR.Recordings do
       |> Multi.insert(:run, run, on_conflict: {:replace_all_except, [:start_date]})
       |> Repo.transaction()
       |> case do
-        {:ok, %{recording: recording, run: run}} -> {:ok, recording, run}
+        {:ok, %{recording: recording, run: run}} ->
+          Phoenix.PubSub.broadcast(
+            ExNVR.PubSub,
+            "new_runs",
+            :runs
+          )
+          {:ok, recording, run}
         {:error, _, changeset, _} -> {:error, changeset}
       end
     end
@@ -108,6 +114,11 @@ defmodule ExNVR.Recordings do
     |> Repo.transaction()
     |> case do
       {:ok, _params} ->
+        Phoenix.PubSub.broadcast(
+          ExNVR.PubSub,
+          "new_runs",
+          :runs
+        )
         :telemetry.execute([:ex_nvr, :recording, :delete], %{count: length(recordings)}, %{
           device_id: device.id
         })

apps/ex_nvr_web/assets/build.js

@@ -0,0 +1,45 @@
+const esbuild = require('esbuild')
+const vuePlugin = require("esbuild-vue")
+
+const args = process.argv.slice(2)
+const watch = args.includes('--watch')
+const deploy = args.includes('--deploy')
+
+const loader = {
+  // Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
+}
+
+const plugins = [
+  vuePlugin()
+]
+
+let opts = {
+  entryPoints: ['js/app.js'],
+  bundle: true,
+  target: 'es2017',
+  outdir: '../priv/static/assets',
+  logLevel: 'info',
+  loader,
+  plugins
+}
+
+if (deploy) {
+  opts = {
+    ...opts,
+    minify: true
+  }
+}
+
+if (watch) {
+    async function watchFunc() {
+        let ctx = await esbuild.context({
+            ...opts,
+            sourcemap: 'inline'
+        });
+        await ctx.watch();
+        console.log('Watching...');
+    }
+    watchFunc()
+} else {
+    esbuild.build(opts)
+}

apps/ex_nvr_web/assets/css/app.css

@@ -1,6 +1,8 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "@evercam/ui/dist/style.css";
+@import "@evercam/ui/dist/styles.css";
 
 /* This file is for your main application CSS */
 #timeline .x-axis g {

apps/ex_nvr_web/assets/js/app.js

@@ -21,10 +21,12 @@ import "phoenix_html"
 import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-import createTimeline, { updateTimelineSegments } from "./timeline"
 import "flowbite/dist/flowbite.phoenix"
 import Hls from "hls.js"
 
+import Timeline from "../vue/Timeline.vue"
+import vueWrapper from "./vueWrapper"
+
 const MANIFEST_LOAD_TIMEOUT = 60_000
 
 let Hooks = {
@@ -71,15 +73,15 @@ let Hooks = {
             videoElement.play();
         },
     },
-    Timeline: {
+    vueTimeLine: {
         mounted() {
-            createTimeline(this.el)
             window.TimelineHook = this
-        },
-        updated() {
-            updateTimelineSegments(this.el)
-        },
-    },
+            vueWrapper({
+                el: this.el,
+                component: Timeline,
+            })
+        }
+    }
 }
 
 let csrfToken = document

apps/ex_nvr_web/assets/js/vueWrapper.js

@@ -0,0 +1,8 @@
+import Vue from "vue"
+
+export default function vueWrapper({ el, component, data = {} }) {
+  return new Vue({
+    el: el,
+    render: (h) => h(component, data)
+  })
+}