Hanuman Midgard to Asgard

.env

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+AWS_ACCESS_KEY_ID=secrettunnel
+AWS_SECRET_ACCESS_KEY=secrettunnel
+AWS_DEFAULT_REGION=ap-southeast-1

.github/ISSUE_TEMPLATE/alchemy.md

@@ -9,6 +9,9 @@ assignees: ''
 
 ### Present Context
 
+<details>
+<summary>Helping words...</summary>
+
 Where we collectively investigate and interrogate the problem space and iteratively scope our approach.
 
 Breakdown to landmarks that communicate shared context we are working towards through 2-tiered task list, CRUD list elements as development unfolds.
@@ -25,8 +28,16 @@ Strike the scope of code that reveals the most about the problem/solution FIRST
 
 ```
 ---
+
+</details>
+
 ### Groundwork
 
+<details>
+<summary> Helping words...</summary>
+
+
+
 Introduce us to the problem space. Write out what you already know about the terrain you are the recce commander enriching us with details beyond the fog of war.
 
 Where have you tried applying and encountered difficulties?
@@ -42,8 +53,15 @@ Emphasis on previous or current practice to discover what is ugly, missing, or u
 INPUT UR ANSWER HERE
 ```
 ---
+
+
+</details>
+
+
 ### Reflection
 
+<details>
+<summary> Helping words...</summary>
 Where the eternal wheel returns back to practice and what we finally implemented is to be outlined. You are the historian or archivist bringing clarity to future-yous and us about your foray.
 
 Emphasis on approaching timeless solutions for well-defined problem space through distillation by decanting that which is un-needed and abstracting that which is essential to approaching the problem space. 
@@ -54,4 +72,7 @@ Add any reflections and internal links to future potential and blindsides.
 INPUT UR ANSWER HERE
 ```
 
+</details>
+
+
 

.gitignore

@@ -43,3 +43,4 @@ npm-debug.log
 
 # Any Secret Configs
 /config/*.secret.exs
+/venv/

README.org

@@ -6,8 +6,16 @@ Wherever there be anything you dost not comprehend, cease to continue writing
 -- Vyasa, Adi Parva - Mahabharatam
 #+END_QUOTE
 
+### CLI Helpsheet
+
+```elixir
+# build script
+mix escript.build
+# fetch from domain/path --storage :mode
+./vyasa fetch shlokam.org/hanumanchalisa --storage file
+```
 * Forms of Prior Art
-** [[http://worrydream.com/refs/Nelson-ComputerLibDreamMachines1975.pdf#page=57][Xanadu Pattern]]
+** [[http://worrydream.com/refs/Nelson-ComputerLibDreamMachines1975.pdf#page=57][Xanadu Pattern ]]
 
 Ted Nelson the granddaddy of hypertext media, need I say more. The introduction to [[https://cs.brown.edu/people/nmeyrowi/LiteraryMachinesChapter2.pdf#page=12][Literary Machines]] is instructive to delineating the problem boundaries for literature
 

assets/css/app.css

@@ -2,6 +2,54 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+/**
+ *  Root definitions that serve as overridable css variables
+ *
+--chili-red: #E83A21ff;
+--pearl: #E3DABEff;
+--black: #070302ff;
+--dun: #D4CAABff;
+--blood-red: #5B1208ff;
+ **/
+@layer base {
+    :root {
+        --chili-red: #E83A21ff;
+        --pearl: #E3DABEff;
+        --black: #070302ff;
+        --dun: #D4CAABff;
+        --blood-red: #5B1208ff;
+
+        --white-alabaster: #F3EFE3;
+        --linen: #FAF1E6;
+
+        --aerospace-orange: #FD4F00;
+        --coral-orange: #FF8349;
+        --atomic-tangerine: #FF9B6D;
+
+
+        --brown: #922E00;
+        --sienna: #7F2800;
+        --rust: #AE3700;
+
+        --color-brand: var(--aerospace-orange);
+        --color-brand-light: var(--atomic-tangerine);
+        --color-brand-extra-light: var(--linen);
+        --color-brand-accent: var(--aerospace-orange);
+        --color-brand-accent-light: var(--atomic-tangerine);
+
+        --color-brand-dark: var(--brown);
+        --color-brand-extra-dark: var(--sienna);
+
+
+        --color-primary: var(--chili-red);
+        --color-primary-accent: var(--chili-red);
+        --color-primary-background: var(--white-alabaster);
+        --color-secondary: var(--blood-red);
+        --color-secondary-background: var(--dun);
+        --color-text: var(--black)
+    }
+}
+
 /* fonts declared from priv/assets/fonts */
 
 @font-face {
@@ -10,4 +58,10 @@
       url('/fonts/gotu/Gotu-Regular.woff') format('woff'),
       url('/fonts/gotu/Gotu-Regular.ttf') format('ttf');
 }
+
+
 /* This file is for your main   application CSS */
+
+.emphasized-verse {
+  @apply bg-brandAccentLight border-b-0 border-l-8 border-black p-4 pl-8 rounded-sm;
+}

assets/js/app.js

@@ -16,26 +16,36 @@
 //
 
 // 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  Hooks  from "./hooks";
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute(
+  "content",
+);
+let liveSocket = new LiveSocket("/live", Socket, {
+  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}
+          },
+  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;

assets/js/hooks/audio_player.js

@@ -0,0 +1,171 @@
+/**
+ * Hooks for audio player.
+ * Leader
+ * This hook shall interact with the html5 player via it's known apis, on things like:
+ * 1. playback info relevant to the audio player
+ *
+ *
+ * Additionally, it shall emit events back to it's corresponding parent hook (MediaPlayer)
+ * so that the media player can effect changes to visual info like player timestamps, durations and such.
+ *
+ * In this way, "Playback" state is managed by MediaBridge, and is displayed by the Media Library hook to follow a
+ * general player-agnostic fashion. "Playback" and actual playback (i.e. audio or video playback) is decoupled, allowing
+ * us the ability to reconcile bufferring states and other edge cases, mediated by the Media Bridge.
+ * */
+let rand = (min, max) => Math.floor(Math.random() * (max - min) + min)
+let isVisible = (el) => !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0)
+
+let execJS = (selector, attr) => {
+  document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
+}
+
+import {seekTimeBridge, playPauseBridge, heartbeatBridge} from "./media_bridge.js"
+import {formatDisplayTime, nowSeconds} from "../utils/time_utils.js"
+
+AudioPlayer = {
+  mounted() {
+    this.isFollowMode = false;
+    this.playbackBeganAt = null
+    this.player = this.el.querySelector("audio")
+
+    document.addEventListener("click", () => this.enableAudio())
+
+    this.player.addEventListener("loadedmetadata", e => this.handleMetadataLoad(e))
+
+    this.handleEvent("initSession", (sess) => this.initSession(sess))
+
+    /// Audio playback events:
+    this.handleEvent("stop", () => this.stop())
+
+    /// maps eventName to its deregisterer:
+    this.eventBridgeDeregisterers = {
+      seekTime: seekTimeBridge.sub(payload => this.handleExternalSeekTime(payload)),
+      playPause: playPauseBridge.sub(payload => this.handleMediaPlayPause(payload)),
+      heartbeat: heartbeatBridge.sub(payload => this.echoHeartbeat(payload)),
+    }
+  },
+  /// Handlers:
+  handleMediaPlayPause(payload) {
+    console.log("[playPauseBridge::audio_player::playpause] payload:", payload)
+    const {
+      cmd,
+      player_details: playerDetails,
+    } = payload
+
+    if (cmd === "play") {
+      this.playMedia(playerDetails)
+    }
+    if (cmd === "pause") {
+      this.pause()
+    }
+  },
+  handleExternalSeekTime(payload) {
+    console.log("[audio_player::seekTimeBridgeSub::seekTimeHandler] this:", this);
+    const {seekToMs: timeMs} = payload;
+    const timeS = Math.round(timeMs/1000);
+    this.seekToS(timeS)
+  },
+  echoHeartbeat(heartbeatPayload) {
+    const shouldIgnoreSignal = heartbeatPayload.originator === "AudioPlayer";
+    if(shouldIgnoreSignal) {
+      return
+    }
+
+    console.log("[heartbeatBridge::audio_player] payload:", heartbeatPayload)
+    const echoPayload = {
+      originator: "AudioPlayer",
+      currentPlaybackInfo: {
+        isPlaying: !this.player.paused,
+        currentTime: this.player.currentTime,
+        duration: this.player.duration,
+      }
+    }
+    heartbeatBridge.pub(echoPayload)
+  },
+  initSession(sess) {
+    localStorage.setItem("session", JSON.stringify(sess))
+  },
+  handleMetadataLoad(e) {
+    console.log("Loaded metadata!", {
+      duration: this.player.duration,
+      event: e,
+    })
+  },
+  handlePlayPause() {
+    console.log("{play_pause event triggerred} player:", this.player)
+    if(this.player.paused){
+      this.play()
+    }
+  },
+  /**
+   * This "init" behaviour has been mimicked from live_beats.
+   * It is likely there to enable the audio player bufferring.
+   * */
+  enableAudio() {
+    if(this.player.src){
+      document.removeEventListener("click", this.enableAudio)
+      const hasNothingToPlay = this.player.readyState === 0;
+      if(hasNothingToPlay){
+        this.player.play().catch(error => null)
+        this.player.pause()
+      }
+    }
+  },
+  playMedia(params) {
+    console.log("PlayMedia", params)
+    const {filePath, isPlaying, elapsed, artist, title} = params;
+
+    const beginTime = nowSeconds() - elapsed
+    this.playbackBeganAt = beginTime
+    let currentSrc = this.player.src.split("?")[0]
+
+    const isLoadedAndPaused = currentSrc === filePath && !isPlaying && this.player.paused;
+    if(isLoadedAndPaused){
+      this.play({sync: true})
+    } else if(currentSrc !== filePath) {
+      currentSrc = filePath
+      this.player.src = currentSrc
+      this.play({sync: true})
+    }
+
+    const isMediaSessionApiSupported = "mediaSession" in navigator;
+    if(isMediaSessionApiSupported){
+      navigator.mediaSession.metadata = new MediaMetadata({artist, title})
+    }
+  },
+  play(opts = {}){
+    console.log("Triggered playback, check params", {
+      player: this.player,
+      opts,
+    })
+
+    let {sync} = opts
+
+    this.player.play().then(() => {
+      if(sync) {
+        const currentTime = nowSeconds() - this.playbackBeganAt
+        this.player.currentTime = currentTime;
+        const formattedCurrentTime = formatDisplayTime(currentTime);
+      }
+    }, error => {
+      if(error.name === "NotAllowedError"){
+        execJS("#enable-audio", "data-js-show")
+      }
+    })
+  },
+  pause(){
+    this.player.pause()
+  },
+  stop(){
+    this.player.pause()
+    this.player.currentTime = 0
+  },
+  seekToS(time) {
+    const beginTime = nowSeconds() - time
+    this.playbackBeganAt = beginTime;
+    this.player.currentTime = time;
+  },
+}
+
+
+export default AudioPlayer;