Sangh Drafting Persistence et al (#100)

Dockerfile

@@ -84,7 +84,7 @@ RUN chown nobody /app
 
 # copies over font files, updates debian runner's font cache:
 RUN echo "...syncing font file(s)"
-COPY ./priv/static/fonts/gotu/* /usr/share/fonts/truetype/
+COPY ./priv/static/fonts/dn/* /usr/share/fonts/truetype/
 COPY ./priv/static/fonts/ta/* /usr/share/fonts/truetype/
 RUN apt-get update && apt-get install -y fontconfig
 RUN fc-cache -f -v

assets/css/app.css

@@ -53,10 +53,17 @@
 /* fonts declared from priv/assets/fonts */
 
 @font-face {
- font-family: "Gotu";
- src: url('/fonts/gotu/Gotu-Regular.woff2') format('woff2'),
-      url('/fonts/gotu/Gotu-Regular.woff') format('woff'),
-      url('/fonts/gotu/Gotu-Regular.ttf') format('ttf');
+ font-family: "Karm";
+ src: url('/fonts/dn/Karm-Medium.woff2') format('woff2'),
+      url('/fonts/dn/Karm-Medium.woff') format('woff'),
+      url('/fonts/dn/Karm-Medium.ttf') format('ttf');
+}
+
+@font-face {
+ font-family: "Vyas";
+ src: url('/fonts/ta/VyasaTA.woff2') format('woff2'),
+      url('/fonts/ta/VyasaTA.woff') format('woff'),
+      url('/fonts/ta/VyasaTA.ttf') format('ttf');
 }
 
 @font-face {

assets/js/app.js

@@ -28,18 +28,53 @@ let csrfToken = document
   .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-
   params: {
     _csrf_token: csrfToken,
     locale: Intl.NumberFormat().resolvedOptions().locale,
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     timezone_offset: -new Date().getTimezoneOffset(),
-    session: JSON.parse(localStorage.getItem("session")) || { active: true },
-  },
 
+    session: fetchSession(),
+  },
   hooks: Hooks,
 });
 
+function fetchSession() {
+  try {
+    sess = JSON.parse(localStorage.getItem("session"))
+    if(sess && sess.id && typeof sess.id == 'string' ) return sess
+    new_sess = {id: genAnonId()}
+    localStorage.setItem("session", JSON.stringify(new_sess))
+    return  new_sess;
+  } catch (error) {
+    new_sess = {id: genAnonId()}
+    localStorage.setItem("session", JSON.stringify(new_sess))
+    return new_sess
+  }
+};
+
+function genAnonId(length = 18) {
+  try {
+    // Generate cryptographically strong random bytes
+    const arrayBuffer = new Uint8Array(length);
+    window.crypto.getRandomValues(arrayBuffer);
+
+    // Convert the array buffer to a string
+    const binaryString = String.fromCharCode.apply(null, arrayBuffer);
+
+    // Encode the string using Base64
+    const base64String = btoa(binaryString);
+
+    return base64String;
+  } catch (error) {
+    console.error('Error generating random Base64 string:', error);
+    throw error;
+  }
+}
+
+
+
+
 // 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));

assets/js/hooks/audio_player.js

@@ -25,7 +25,7 @@ let execJS = (selector, attr) => {
     .forEach((el) => liveSocket.execJS(el, el.getAttribute(attr)));
 };
 
-import { formatDisplayTime, nowMs } from "../utils/time_utils.js";
+import { formatDisplayTime, nowMs } from "../utils/time.js";
 
 AudioPlayer = {
   mounted() {

assets/js/hooks/floater.js

@@ -1,7 +1,7 @@
 /*
  * Ideally generic hook for floating logic.
  */
-import {isMobileDevice} from "../utils/uncategorised_utils.js";
+import { isMobileDevice } from "../utils/device.js";
 import {
   computePosition,
   autoPlacement,
@@ -11,67 +11,64 @@ import {
 
 Floater = {
   mounted() {
-    console.log("[floater] floater mounted")
-    console.log("[floater] dataset check: ", this.el.dataset)
-    const {
-      floaterId,
-      floaterReferenceSelector
-    } = this.el.dataset;
+    console.log("[floater] floater mounted");
+    console.log("[floater] dataset check: ", this.el.dataset);
+    const { floaterId, floaterReferenceSelector } = this.el.dataset;
   },
-  beforeUpdate() { // gets called synchronously, prior to update
-    console.log("[floater] Triggerred floater::beforeUpdate()")
-    const {
-      floater,
-      reference,
-      fallback,
-    } = this.getRelevantElements();
+  beforeUpdate() {
+    // gets called synchronously, prior to update
+    console.log("[floater] Triggerred floater::beforeUpdate()");
+    const { floater, reference, fallback } = this.getRelevantElements();
 
     // TODO: this is hardcoded to the media bridge, refactor when more sane.
     const offsetHeight = fallback.offsetHeight; // so pretend it's lower by this amount
-    const isReferenceOutOfView = isElementOutOfViewport(reference, {top:0, bottom:offsetHeight, left: 0, right: 0})
+    const isReferenceOutOfView = isElementOutOfViewport(reference, {
+      top: 0,
+      bottom: offsetHeight,
+      left: 0,
+      right: 0,
+    });
     if (isReferenceOutOfView) {
-      console.log("[floater] Reference is out of viewport, should use fallback", {
-        floater,
-        reference,
-        fallback,
-      })
+      console.log(
+        "[floater] Reference is out of viewport, should use fallback",
+        {
+          floater,
+          reference,
+          fallback,
+        },
+      );
     }
-    const target = (isMobileDevice() || isReferenceOutOfView) ? fallback : reference
+    const target =
+      isMobileDevice() || isReferenceOutOfView ? fallback : reference;
     this.alignFloaterToRef(floater, target);
   },
-  updated() { // gets called when the elem changes
-    console.log("[floater] Triggerred floater::updated()")
-    const {
-      floater,
-      reference,
-      fallback,
-    } = this.getRelevantElements();
+  updated() {
+    // gets called when the elem changes
+    console.log("[floater] Triggerred floater::updated()");
+    const { floater, reference, fallback } = this.getRelevantElements();
   },
   alignFloaterToRef(floater, reference) {
-    const canBeAligned = floater && reference
-    if(!canBeAligned) {
-      console.log("[floater] Can't be aligned")
-      return
+    const canBeAligned = floater && reference;
+    if (!canBeAligned) {
+      console.log("[floater] Can't be aligned");
+      return;
     }
 
     computePosition(reference, floater, {
-      placement: 'right',
+      placement: "right",
       // NOTE: order of middleware matters.
       middleware: [
         autoPlacement({
-          allowedPlacements: [
-            "right",
-            "top-end"
-          ]
+          allowedPlacements: ["right", "top-end"],
         }),
         shift({
           padding: 8,
           crossAxis: true,
         }),
         offset(6),
       ],
-    }).then(({x, y}) => {
-      console.log("[floater] computed coordinates:", {x, y})
+    }).then(({ x, y }) => {
+      console.log("[floater] computed coordinates:", { x, y });
       Object.assign(floater.style, {
         left: `${x}px`,
         top: `${y}px`,
@@ -84,44 +81,45 @@ Floater = {
       floaterReferenceSelector,
       floaterFallbackReferenceSelector,
     } = this.el.dataset;
-    const floater = document.getElementById(floaterId)
-    const reference = document.querySelector(floaterReferenceSelector)
-    const fallback = document.querySelector(floaterFallbackReferenceSelector)
+    const floater = document.getElementById(floaterId);
+    const reference = document.querySelector(floaterReferenceSelector);
+    const fallback = document.querySelector(floaterFallbackReferenceSelector);
 
     console.log("[floater] getRelevantElements", {
       floater,
       reference,
       fallback,
       isMobileDevice: isMobileDevice(),
-    })
+    });
 
     return {
       floater,
       reference,
       fallback,
-    }
-
-  }
-}
+    };
+  },
+};
 
 // offset: more positive is more in that direction. so if left = 2 vs left = 3, then the second left is more left than the first left lol.
 // offest is to be applied to the value of the rect so rect with offset top = 2 is as though the original left +2 in height
-function isElementOutOfViewport(el, offsets = {top: 0, bottom:0, left: 0, right:0}) {
+function isElementOutOfViewport(
+  el,
+  offsets = { top: 0, bottom: 0, left: 0, right: 0 },
+) {
   if (!el) {
-    console.log("[floater] el is null", el)
-
+    console.log("[floater] el is null", el);
   } else {
+    const rect = el.getBoundingClientRect();
+    const { top, bottom, left, right } = offsets;
 
-  const rect = el.getBoundingClientRect();
-  const { top, bottom, left, right } = offsets;
-
-  return (
-    rect.top + top < 0 ||
+    return (
+      rect.top + top < 0 ||
       rect.left + left < 0 ||
-      rect.bottom + bottom > (window.innerHeight || document.documentElement.clientHeight) ||
-      rect.right + right > (window.innerWidth || document.documentElement.clientWidth)
-  );
-
+      rect.bottom + bottom >
+        (window.innerHeight || document.documentElement.clientHeight) ||
+      rect.right + right >
+        (window.innerWidth || document.documentElement.clientWidth)
+    );
   }
 }