[Refactor] Improve naming of major modules

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)
+    );
   }
 }
 

assets/js/hooks/hoverune.js

@@ -90,7 +90,6 @@ export default HoveRune = {
             target: `#${this.eventTarget}`,
             payload: { binding: binding },
           });
-          // TODO: rename to targetId
           this.pushEventTo(`#${this.eventTarget}`, "bindHoveRune", {
             binding: binding,
           });

assets/js/hooks/index.js

@@ -8,8 +8,6 @@ import MediaBridge from "./media_bridge.js";
 import AudioPlayer from "./audio_player.js";
 import ProgressBar from "./progress_bar.js";
 import Floater from "./floater.js";
-import ApplyModal from "./apply_modal.js";
-import MargiNote from "./marginote.js";
 import HoveRune from "./hoverune.js";
 import Scrolling from "./scrolling.js";
 import ButtonClickRelayer from "./button_click_relayer.js";
@@ -24,8 +22,6 @@ let Hooks = {
   AudioPlayer,
   ProgressBar,
   Floater,
-  ApplyModal,
-  MargiNote,
   HoveRune,
   Scrolling,
   ButtonClickRelayer,

assets/js/hooks/media_bridge.js

@@ -6,7 +6,7 @@
  *
  * Event-handling is done using custom bridged events as a proxy.
  * */
-import { formatDisplayTime } from "../utils/time_utils.js";
+import { formatDisplayTime } from "../utils/time.js";
 import {
   seekTimeBridge,
   playPauseBridge,

assets/js/hooks/youtube_player.js

@@ -4,7 +4,7 @@
  * */
 import { seekTimeBridge, playPauseBridge } from "./mediaEventBridges";
 
-import { isMobileDevice } from "../utils/uncategorised_utils.js";
+import { isMobileDevice } from "../utils/device.js";
 
 const isYouTubeFnCallable = (dataset) => {
   const { functionName, eventName } = dataset;

config/config.exs

@@ -31,7 +31,7 @@ config :vyasa, VyasaWeb.Endpoint,
 # at the `config/runtime.exs`.
 config :vyasa, Vyasa.Mailer, adapter: Swoosh.Adapters.Local
 
-#S3 Object Storage Services
+# S3 Object Storage Services
 config :ex_aws,
   access_key_id: [{:system, "AWS_ACCESS_KEY_ID"}, :instance_role],
   secret_access_key: [{:system, "AWS_SECRET_ACCESS_KEY"}, :instance_role],
@@ -47,7 +47,10 @@ config :esbuild,
     args:
       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => "#{Path.expand("../deps", __DIR__)}:#{Path.expand("../assets/vendor", __DIR__)}"}
+    env: %{
+      "NODE_PATH" =>
+        "#{Path.expand("../deps", __DIR__)}:#{Path.expand("../assets/vendor", __DIR__)}"
+    }
   ]
 
 # Configure tailwind (the version is required)

config/dev.exs

@@ -37,7 +37,8 @@ config :vyasa, VyasaWeb.Endpoint,
   debug_errors: true,
   secret_key_base: "TSFFKfQoGKCAjI5yxwt9DmxwnJg1U7CnuCsxpWjr+DqXs8EavSxtO3l3wk2PquSW",
   watchers: [
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.ttf=file)]},
+    esbuild:
+      {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.ttf=file)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
 
@@ -64,7 +65,7 @@ config :vyasa, VyasaWeb.Endpoint,
 # configured to run both http and https servers on
 # different ports.
 #
-#config :ssl, cacertfile: 'priv/cacerts.pem'
+# config :ssl, cacertfile: 'priv/cacerts.pem'
 
 # Watch static and templates for browser reloading.
 config :vyasa, VyasaWeb.Endpoint,

config/prod.exs

@@ -10,7 +10,8 @@ config :vyasa, VyasaWeb.Endpoint,
   force_ssl: [
     host: nil,
     rewrite_on: [:x_forwarded_port, :x_forwarded_proto],
-    hsts: false]
+    hsts: false
+  ]
 
 # Configures Swoosh API Client
 config :swoosh, api_client: Swoosh.ApiClient.Finch, finch_name: Vyasa.Finch

docs/ritesh_roughwork.livemd

@@ -26,7 +26,7 @@ loaded_voice = Vyasa.Repo.get(Vyasa.Medium.Voice, voice_id)
 
 loaded_voice.events
 
-module = VyasaWeb.Content.ReadingContent
+module = VyasaWeb.Context.Read
     module
     |> Atom.to_string()          # Convert the module atom to a string
     |> String.split(".")        # Split the string by "."
@@ -36,7 +36,7 @@ module = VyasaWeb.Content.ReadingContent
 ```
 
 ```elixir
-alias Vyasa.Display.{UiState}
+alias VyasaWeb.ModeLive.{UiState}
 
 mod = UiState
 mod.__info__(:functions)

lib/utils/string.ex

@@ -12,14 +12,14 @@ defmodule Utils.String do
   @doc """
   Converts a module name to an HTML selector format.
 
-  The module name is expected to be in the form of a module atom (e.g., `VyasaWeb.Content.ReadingContent`).
+  The module name is expected to be in the form of a module atom (e.g., `VyasaWeb.Context.Read`).
   The function extracts the last part of the module name and checks if it is in PascalCase.
   If valid, it converts the name to kebab-case format.
 
   ## Examples
 
-      iex> VyasaWeb.Utils.module_to_selector(VyasaWeb.Content.ReadingContent)
-      "reading-content"
+      iex> VyasaWeb.Utils.module_to_selector(VyasaWeb.Context.Read)
+      "read-context"
 
       iex> VyasaWeb.Utils.module_to_selector(VyasaWeb.Content.InvalidName)
       ** (ArgumentError) Last element of the module name must be in PascalCase

lib/utils/struct.ex

@@ -7,18 +7,20 @@ defmodule Utils.Struct do
   """
   def get_in(struct, keys) when is_list(keys) do
     do_get_in(struct, keys)
- end
+  end
 
- defp do_get_in(nil, _keys), do: nil
- defp do_get_in(value, []), do: value
- defp do_get_in(map, [key | rest_keys]) when is_map(map) do
+  defp do_get_in(nil, _keys), do: nil
+  defp do_get_in(value, []), do: value
+
+  defp do_get_in(map, [key | rest_keys]) when is_map(map) do
     map
     |> Map.get(key)
     |> do_get_in(rest_keys)
- end
- defp do_get_in(struct, [key | rest_keys]) do
+  end
+
+  defp do_get_in(struct, [key | rest_keys]) do
     struct
     |> Map.get(key)
     |> do_get_in(rest_keys)
- end
+  end
 end