Set up scaffolds for state changes and DM slots #94

rtshkmr · 2024-08-21T08:55:21Z

This PR establishes the pattern on how we may define individual user_modes that determine what's presented to the user.

there are the following things that can be slotted into:

control panel -- which has its own components
hoverune
typically for quick actions that are context specific (e.g. quick drafts)
action_bar
for common actions like navigation through an ordered list
content
for determining what content is to be displayed. This shall be user_mode-agnostic for now

When switching user modes from A to B, the DM will be able to switch what actions the user can do based on what's defined in the %UserMode{}

note: because of this, the PR requires the deployment to use a fresh json file this prepares for the info needed by media sessions does some linting using the latest elixir-ls

Not sure why it doesn't display when using the emulator. I think it's better if I test it on the deployed version directly, not sure if the testing method is accurate.

Init functions don't have action handlers yet

rtshkmr

Other than for the action bar, there's a pattern to how to declare UI elements specific to the user_mode

rtshkmr · 2024-08-26T05:59:31Z

lib/vyasa/display/user_mode.ex

this is the main place we define user modes, which determines what the user sees and what the user can do within a mode.

NOTE: the keys here might change, and some of them are really just for example purposes.

What's more or less fixed is this style of defining what is rendered and letting it get handler by render functions later, or being slotted into function components and such.
The "slotting" pattern that these try to follow is the main fixed part.

rtshkmr · 2024-08-26T05:59:54Z

lib/vyasa_web/components/control_panel.ex

  @impl true
+  # TODO: as a stop-gap we're using functions from Hoverune, this needs to be changed and


just a temp note for now.

rtshkmr · 2024-08-26T06:01:03Z

lib/vyasa_web/components/control_panel.ex

-          Change to Draft
-        </.button>
+        <%= for other_mode <- @mode.control_panel_modes do %>
+          <.control_panel_mode_button


this part is to show what other modes can be shifted to from this mode. This is the flow on how one can shift from one major mode to another

rtshkmr · 2024-08-26T06:03:21Z

lib/vyasa_web/components/user_mode_components.ex

function components specific to what's defined in user components get defined here.

so if I were to add another type of button to the hoverrune, then I shall:

update the user_mode definitions

add either a custom rendering function (component) or add mod existing stuff

rtshkmr · 2024-08-26T06:04:23Z

lib/vyasa_web/live/display_manager/display_live.ex

@@ -174,8 +172,15 @@ defmodule VyasaWeb.DisplayManager.DisplayLive do

  defp change_mode(socket, curr, target)


so mode changes get handled here

rtshkmr · 2024-08-26T06:05:27Z

lib/vyasa_web/live/display_manager/display_live.html.heex

@@ -25,6 +25,12 @@
            <.live_component module={@mode.control_panel_component} id="control_panel" mode={@mode} />
        </div>

+    <.live_component


hoverune is now a live component which is the responsiblity of the DM directly.

This allows emitting events from the live_component and handling it directly by the parent liveview (DM)

rtshkmr · 2024-08-26T06:06:08Z

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

removed all the old vyasa_web/source_live/* files

rtshkmr · 2024-08-26T06:08:22Z

mix.exs

@@ -47,7 +47,7 @@ defmodule Vyasa.MixProject do
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 4.0"},
      {:phoenix_live_reload, "~> 1.5", only: :dev},
-      {:phoenix_live_view, "~> 0.20.17"},
+      {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", ref: "440fd04", override: true},


note to self: to support the stickyness behaviour across browser history navigation (i.e. pressing back / fwd button), we had to bump live_view version to the most updated.

Warning
this means that managing the :live_admin dep ends up being manual

[Attempt] display topbar only if non-mobile Not sure if the ua_parsing actually works correctly Minor change

Now, we do a check using the family values and doing a regex. I suspect we'd need to keep updating this if the parsing breaks in thefuture. but should be good enough for now. also the different versions of the ua_parser lib seem to be giving different output

Primarily for quick drafts on mobile, 1. the mediabridge will be hidden (animated away by right) 2. once done typing, it should be visible again It corresponds to: 1. if phone keyboard is open, hide the media player, else show it so that more screen space is given for mobile devices

This should be the "interface" to judge what the DM displays. time to toh for now

rtshkmr · 2024-08-27T00:36:51Z

trim.0860DC37-2510-4684-AA85-86549E2947DD.MOV

Similar to the hoverune implementation, this action_bar.ex live_component also takes in an array of actions, which the user_mode defines and then renders buttons that trigger click events specific to the mode and action_name. This allows the DM to be the one with the necessary handlers to act on these events. ******* 1. Bars are soft appearing / disappearing This means that we don't mount / destroy nodes, simply hide and make them appear as and when we need. This means that we need to make some things "equivalent" and work the same way as it does on MediaBridge and ActionBar. Suppose there are nav buttons (the left and right stuff) which are generic. They will DEFINITELY appear on the MediaBridge. They may or may not appear on the ActionBar. This means that any button click on the nav buttons on MediaBridge may just be relayed to a optionally present button on the actionbar, along with other buttons on the action bar. ******* 2. Maintain equivalence in UI buttons b/w action-bar and media bridge by relaying button clicks This will Shim / Relay the nav button click from the media bridge to the corresponding action bar via hooks Essentially, clicking the nav buttons on the mediabridge will relay to the nav buttons on the action bar, which is mode-specific Here's some logs to show that the wire-up looks okay (have left the functions empty first). %Vix.Vips.Image{ref: #Reference<0.3949460734.1140719640.214139>} [debug] HANDLE EVENT "read::nav_back" in VyasaWeb.DisplayManager.DisplayLive Parameters: %{"value" => ""} TRACE: TODO handle nav_event @ action-bar region: %{"event" => "nav_back", "mode" => "read"} [debug] Replied in 430µs TRACE: TODO handle nav_event @ action-bar region: %{"event" => "nav_fwd", "mode" => "read"} [debug] HANDLE EVENT "read::nav_fwd" in VyasaWeb.DisplayManager.DisplayLive Parameters: %{"value" => ""} [debug] Replied in 375µs TRACE handle event for toggle_show_control_panel: false [debug] HANDLE EVENT "toggle_show_control_panel" in VyasaWeb.DisplayManager.DisplayLive Component: VyasaWeb.ControlPanel Parameters: %{"value" => ""} [debug] Replied in 342µs [debug] HANDLE EVENT "change_mode" in VyasaWeb.DisplayManager.DisplayLive Parameters: %{"current_mode" => "read", "target_mode" => "draft", "value" => ""} [debug] Replied in 162µs [debug] HANDLE EVENT "draft::nav_fwd" in VyasaWeb.DisplayManager.DisplayLive Parameters: %{"value" => ""} TRACE: TODO handle nav_event @ action-bar region: %{"event" => "nav_fwd", "mode" => "draft"} [debug] Replied in 562µs TRACE: TODO handle nav_event @ action-bar region: %{"event" => "nav_back", "mode" => "draft"} [debug] HANDLE EVENT "draft::nav_back" in VyasaWeb.DisplayManager.DisplayLive Parameters: %{"value" => ""} [debug] Replied in 573µs iex(test@127.0.0.1)1>

rtshkmr

With this, the last pattern of slottable action bar has a v1 implementation.

It's fairly rough around the edges, for example, the different patterns could definitely be more standardised and cleaned up.

I shall only tackle what very trivial refactors I can see, else will leave it to subsequent PRs to do the consolidation / cleanup of patterns here.

Also, customary video showing the magic on mobile phone:

freecompress-RPReplay_Final1724747990.mp4

rtshkmr · 2024-08-27T08:48:35Z

assets/tailwind.config.js

+      animation: {
+        ripple: "ripple 0.6s linear",
+      },
+      keyframes: {
+        ripple: {
+          "0%": { transform: "scale(0)", opacity: "0.5" },
+          "100%": { transform: "scale(4)", opacity: "0" },
+        },
+      },


was experimenting with ripple effect, it's not being used but shall just leave it here for future inspiration

rtshkmr · 2024-08-27T08:50:16Z

lib/vyasa_web/live/display_manager/display_live.ex

+      label: "TRACE: TODO handle nav_event @ action-bar region"
+    )
+
+    # TODO: implement nav_event handlers from action bar


Leaving this empty for now, this shall get wired up in a subsequent PR.

rtshkmr · 2024-08-27T08:51:01Z

lib/vyasa_web/live/display_manager/display_live.ex

+
+  @impl true
+  def handle_event(
+        "draft" <> "::" <> event = _nav_event,


the use of id-based click events allow us to pattern match for particular modes

Signed-off-by: a/vivekbala <avivekbala@gmail.com>

Acked-by: ks0m1c_dharma <sakiyamuni@sams.ara>

Persisting Marks Interim PR

Just comitting this while I make some UI mods next to that. The reason why a live_component works here is that I expect to use some collapsible state.

rtshkmr and others added 30 commits July 29, 2024 21:14

Cleanups: rm old .livemds

545952c

Update migrator script's save() to preload video

b209588

fix imprt stmt & add guard to hoverrune

4b1b404

Wire up voice metadata

021f797

note: because of this, the PR requires the deployment to use a fresh json file this prepares for the info needed by media sessions does some linting using the latest elixir-ls

Use og image for artwork

8d9e9f8

Not sure why it doesn't display when using the emulator. I think it's better if I test it on the deployed version directly, not sure if the testing method is accurate.

Minor cleanups

e6f06a2

Meta cleanup encode

607c9cf

Add comma

9938913

Simple changes

303e53a

Revert use of Map.from_struct

4f12674

Shift guarding to playback.ex instead of encoder

c77a4d6

Add nil clause for meta::Jason encode()

fe5d51f

@derive

3d3aa49

except artwork

ea797c9

Handle nil case for artwork better w better guard

f15ef26

Minor changes

56991b8

Use dummy metadata example

87ae225

Revert dummy example

d79b816

iAnother dummy attempt

cf05f76

Another attempt

211a794

test dict creation

9268fe9

test use of extra key in media metadata

6068efe

Test: use geenrated artwork

7277a9c

minor change

2a79d27

Change MIME type for generated_artwork jpeg -> png

d678583

Minor change

15d2d62

Use createMediaMetadataPayload()

91106e5

Server Logging to Console & Image Lib Update

81d1563

Init media session @ metadata load

05710d6

Init functions don't have action handlers yet

Guard against null playback

c60172c

rtshkmr changed the title ~~[WIP] Set up scaffolds for state changes and DM slots~~ Set up scaffolds for state changes and DM slots Aug 26, 2024

rtshkmr marked this pull request as ready for review August 26, 2024 05:49

rtshkmr commented Aug 26, 2024

View reviewed changes

rtshkmr added 2 commits August 26, 2024 18:02

Shift MediaBridge to be everpresent, improve style

6e604df

Add :show_media_bridge_default?, hides MediaBridge

a2532e8

rtshkmr force-pushed the feat/drafting-state-handling branch 2 times, most recently from a51ba19 to dbcebf7 Compare August 26, 2024 12:41

Add VyasaWeb.Hook.UserAgentHook to do ua_parsing

2caf3f5

[Attempt] display topbar only if non-mobile Not sure if the ua_parsing actually works correctly Minor change

rtshkmr force-pushed the feat/drafting-state-handling branch from cd223ee to 2caf3f5 Compare August 26, 2024 12:43

rtshkmr added 5 commits August 26, 2024 21:21

Fix ua_parsing issues

6353710

Now, we do a check using the family values and doing a regex. I suspect we'd need to keep updating this if the parsing breaks in thefuture. but should be good enough for now. also the different versions of the ua_parser lib seem to be giving different output

Minor changes

1e05d67

[Attempt] handle capture of enter button press

5945547

[WIP] prepare user_mode to inject action_bar slots

66619a1

This should be the "interface" to judge what the DM displays. time to toh for now

ks0m1c_dharma and others added 2 commits August 27, 2024 14:46

Stream of Marks

f6ce35b

rtshkmr commented Aug 27, 2024

View reviewed changes

rtshkmr requested a review from ks0m1c August 27, 2024 09:03

ks0m1c and others added 7 commits August 27, 2024 17:07

Merge branch 'feat/drafting-state-handling' into ops/zone0A/persist

7b85d1c

Signed-off-by: a/vivekbala <avivekbala@gmail.com>

Fixed Dupe

2c87ab3

Acked-by: ks0m1c_dharma <sakiyamuni@sams.ara>

Hygiene eq_verse_binding guard

dcd090c

Stream of Marks (#96)

a863d88

Persisting Marks Interim PR

Style the control panel with glass ui

a40491d

Create VerseMatrix live_component

2a0a146

Just comitting this while I make some UI mods next to that. The reason why a live_component works here is that I expect to use some collapsible state.

Minor cleanups / rearranging of code

7cfe5e0

Base automatically changed from ops/librarian to master September 23, 2024 14:51

Merge branch 'master' into feat/drafting-state-handling

fde607e

ks0m1c merged commit df554e2 into master Sep 23, 2024

ks0m1c deleted the feat/drafting-state-handling branch September 23, 2024 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set up scaffolds for state changes and DM slots #94

Set up scaffolds for state changes and DM slots #94

rtshkmr commented Aug 21, 2024 •

edited

Loading

rtshkmr left a comment

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr Aug 26, 2024

rtshkmr commented Aug 27, 2024

rtshkmr left a comment

rtshkmr Aug 27, 2024

rtshkmr Aug 27, 2024

rtshkmr Aug 27, 2024

		@impl true
		# TODO: as a stop-gap we're using functions from Hoverune, this needs to be changed and

		@@ -174,8 +172,15 @@ defmodule VyasaWeb.DisplayManager.DisplayLive do

		defp change_mode(socket, curr, target)

Set up scaffolds for state changes and DM slots #94

Set up scaffolds for state changes and DM slots #94

Conversation

rtshkmr commented Aug 21, 2024 • edited Loading

rtshkmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtshkmr commented Aug 27, 2024

rtshkmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtshkmr commented Aug 21, 2024 •

edited

Loading