Merge pull request #54 from ve1ld/chore/UI-polishing-prior-to-soft-la…

…unch

Basic UI polishing

assets/js/hooks/floater.js

@@ -1,6 +1,7 @@
 /*
  * Ideally generic hook for floating logic.
  */
+import {isMobileDevice} from "../utils/uncategorised_utils.js";
 
 Floater = {
   mounted() {
@@ -10,32 +11,38 @@ Floater = {
       floaterId,
       floaterReferenceSelector
     } = this.el.dataset;
-    this.floaterId = floaterId;
-    this.floaterReferenceSelector = floaterReferenceSelector;
   },
   beforeUpdate() { // gets called synchronously, prior to update
     console.log("[floater] Triggerred floater::beforeUpdate()")
     const {
       floater,
-      reference
-    } = getRelevantElements(this.floaterId, this.floaterReferenceSelector);
+      reference,
+      fallback,
+    } = this.getRelevantElements();
 
-    this.floater = floater;
-    this.reference = reference;
-    this.alignFloaterToRef()
+    // 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})
+    if (isReferenceOutOfView) {
+      console.log("[floater] Reference is out of viewport, should use fallback", {
+        floater,
+        reference,
+        fallback,
+      })
+    }
+    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
-    } = getRelevantElements(this.floaterId, this.floaterReferenceSelector);
-
-    this.floater = floater;
-    this.reference = reference;
+      reference,
+      fallback,
+    } = this.getRelevantElements();
   },
-  alignFloaterToRef() {
-    const canBeAligned = this.floater && this.reference
+  alignFloaterToRef(floater, reference) {
+    const canBeAligned = floater && reference
     if(!canBeAligned) {
       console.log("[floater] Can't be aligned")
       return
@@ -48,14 +55,14 @@ Floater = {
       offset,
     } = window.FloatingUIDOM;
 
-    computePosition(this.reference, this.floater, {
+    computePosition(reference, floater, {
       placement: 'right',
       // NOTE: order of middleware matters.
       middleware: [
         autoPlacement({
           allowedPlacements: [
             "right",
-            "top"
+            "top-end"
           ]
         }),
         shift({
@@ -66,36 +73,55 @@ Floater = {
       ],
     }).then(({x, y}) => {
       console.log("[floater] computed coordinates:", {x, y})
-      Object.assign(this.floater.style, {
+      Object.assign(floater.style, {
         left: `${x}px`,
         top: `${y}px`,
       });
     });
+  },
+  getRelevantElements() {
+    const {
+      floaterId,
+      floaterReferenceSelector,
+      floaterFallbackReferenceSelector,
+    } = this.el.dataset;
+    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,
+    }
 
   }
 }
 
-/**
- * Selects relevant elements.
- *
- * It is expected that the floaterReference shall be a valid DOM query for node selections. ref: https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors
- * */
-const getRelevantElements = (floaterId, floaterReferenceSelector) => {
-  const floater = document.getElementById(floaterId)
-  const reference = document.querySelector(floaterReferenceSelector)
-
-  console.log("[floater] check relevant elements: ", {
-    floaterId,
-    floaterReferenceSelector,
-    floater,
-    reference,
-  })
+// 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}) {
+  if (!el) {
+    console.log("[floater] el is null", el)
 
-  return {
-    floater,
-    reference
   }
-}
 
+  const rect = el.getBoundingClientRect();
+  const { top, bottom, left, right } = offsets;
+
+  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)
+  );
+}
 
 export default Floater;

assets/js/hooks/youtube_player.js

@@ -3,6 +3,7 @@
  * Validates if required parameters exist.
  * */
 import {seekTimeBridge, playPauseBridge} from "./media_bridge.js"
+import { isMobileDevice } from "../utils/uncategorised_utils.js"
 
 const isYouTubeFnCallable = (dataset) => {
   const {functionName, eventName} = dataset;
@@ -71,8 +72,9 @@ export const RenderYouTubePlayer = {
     console.log("Check dataset", this.el.dataset)
 
     const playerConfig = JSON.parse(serialisedPlayerConfig)
+    const updatedConfig = overrideConfigForMobile(playerConfig)
     injectIframeDownloadScript()
-    injectYoutubeInitialiserScript(videoId, playerConfig)
+    injectYoutubeInitialiserScript(videoId, updatedConfig)
 
     // TODO: capture youtube player events (play state changes and pub to the same event bridges, so as to control overall playback)
     this.eventBridgeDeregisterers = {
@@ -177,3 +179,21 @@ export const TriggerYouTubeFunction = {
   }
 }
 
+/// FIXME: this is a temp fix, that overrides the dimensions if it's a mobile.
+// there has to be a better, more generic way of handling this.
+// Alternatively, if we can reverse engineer a custom PIP mode (with resize and all that), then
+// we won't need to fix this.
+const overrideConfigForMobile = (playerConfig) => {
+  let overridedConfig = {...playerConfig}
+  if(isMobileDevice()) {
+    overridedConfig["height"] = "150",
+    overridedConfig["width"] = "200",
+    console.log("[iframe] updating the player config:", {
+      before: playerConfig,
+      after: overridedConfig,
+
+    })
+  }
+
+  return overridedConfig;
+}

assets/js/utils/uncategorised_utils.js

@@ -0,0 +1,19 @@
+/**
+ * For utils that can't be clearly categorised yet.
+ * */
+
+
+/**
+ * Returns true if the device is a touch device(?).
+ *
+ * Disclaimer: this fn may break.
+ *
+ * */
+export function isMobileDevice() {
+    var match = window.matchMedia || window.msMatchMedia;
+    if(match) {
+        var mq = match("(pointer:coarse)");
+        return mq.matches;
+    }
+    return false;
+}

lib/vyasa_web/components/layouts/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title prefix="Vyasa | ">
       <%= assigns[:page_title] || "Vyasa" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />

lib/vyasa_web/live/media_live/media_bridge.ex

@@ -457,6 +457,13 @@ end
     """
   end
 
+  # def volume_control(assigns) do
+  #   ~H"""
+
+  #   """
+
+  # end
+
   def video_player(assigns) do
     ~H"""
     <div>
@@ -467,6 +474,7 @@ end
         phx-hook={"Floater"}
         data-floater-id={"container-YouTubePlayer"}
         data-floater-reference-selector={".emphasized-verse"}
+        data-floater-fallback-reference-selector={"#media-player-container"}
         >
         <.live_component
           module={VyasaWeb.YouTubePlayer}

lib/vyasa_web/live/source_live/chapter/generate_image.ex

@@ -29,7 +29,7 @@ defmodule VyasaWeb.SourceLive.ImageGenerator do
     target_url
   end
 
-  defp generate_svg(content) do
+  def generate_svg(content) do
     svg_text_nodes =
       content
       |> ImageGenerator.wrap_text(@col_width)
@@ -73,8 +73,6 @@ defmodule VyasaWeb.SourceLive.ImageGenerator do
     Manually wraps a text to width of size @col_width.
   """
   def wrap_text(text, col_length \\ @col_width) do
-
-
     words = String.split(text, " ")
 
     Enum.reduce(words, [], fn word, acc_lines ->

lib/vyasa_web/live/source_live/chapter/index.ex

@@ -104,8 +104,9 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
           title: "#{socket.assigns.source_title} Chapter #{socket.assigns.chap.no} | #{socket.assigns.chap.title}",
           description: socket.assigns.chap.body,
           type: "website",
+          image: url(~p"/images/the_vyasa_project_1.png"),
           url: url(socket, ~p"/explore/#{socket.assigns.source_title}/#{socket.assigns.chap.no}"),
-              })
+      })
   end
 
   @doc """

lib/vyasa_web/live/source_live/chapter/index.html.heex

@@ -1,5 +1,5 @@
 <div id="chapter-index-container">
-    <.header class="p-4">
+    <.header class="p-4 pb-0">
         <div class="font-dn text-4xl mb-4">
            <%= @selected_transl.target.translit_title %> | <%= @chap.title%>
         </div>
@@ -8,7 +8,7 @@
         </div>
 
         <:subtitle>
-            <div id="chapter-preamble">
+            <div id="chapter-preamble" class="font-dn text-sm sm:text-lg">
                 <%= @selected_transl.target.body %>
             </div>
         </:subtitle>
@@ -19,7 +19,7 @@
             title={"#{verse.chapter_no}.#{verse.no}"}
             verse_id={verse.id}
         >
-            <p class="font-dn text-md sm:text-xl">
+            <p class="font-dn text-lg sm:text-xl">
                 <%= verse.body |> String.split("।।") |> List.first()  %>
             </p>
         </:item>

lib/vyasa_web/live/source_live/index.ex

@@ -22,9 +22,10 @@ defmodule VyasaWeb.SourceLive.Index do
 
   defp assign_meta(socket) do
     assign(socket, :meta, %{
-      title: "Sources",
-      description: "Explore the wealth of indic knowledge, distilled into words",
+      title: "Sources to Explore",
+      description: "Explore the wealth of indic knowledge, distilled into words.",
       type: "website",
+      image: url(~p"/images/the_vyasa_project_1.png"),
       url: url(socket, ~p"/explore/"),
     })
   end

lib/vyasa_web/live/source_live/show.ex

@@ -42,6 +42,7 @@ defmodule VyasaWeb.SourceLive.Show do
       title: socket.assigns.title,
       description: "Explore the #{socket.assigns.title}",
       type: "website",
+      image: url(~p"/images/the_vyasa_project_1.png"),
       url: url(socket, ~p"/explore/#{socket.assigns.title}")
     })
   end