[Prod Trigger] Sangh #88
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
syncs commits in the prod branch with this feature branch Co-authored-by: ks0m1c_dharma <[email protected]> Co-authored-by: ks0m1c_dharma <[email protected]>
Things done: 1. Added a livecomponent which has a div. The div calls a js hook 2. the js hook creates a new script tag which inserts itself as the first script of the html document. * this is the most probable source of error because I think the callback functions are not being passed to the correct html element. I should explore this when I get back to this problem. The ideal case should be how it is shown on the iframe documentation that we see. 3. The cors issues have been resolved by adding the CORS plug that we saw. This CORS plug allows youtube.com/iframe_api to be a valid source. This actually works for all browsers. 4. If I embed this script tag directly to the heex template, it will work. However, it won't work when I'm attempting to create do it via a JS-Hook. There's a high likelyhood that it's just me being noob at Elixir/LiveView and that's why I can't get it to work yet. REF: https://developers.google.com/youtube/iframe_api_reference Hunch(es): 1. I might have to just insert things into the correct script tag properly. I had already tried inserting innerthtml but it just got parsed as a string. Maybe I should relook at that. 2. Kinda related to point 2 above
Co-authored-by: ks0m1c_dharma <[email protected]> Co-authored-by: ks0m1c_dharma <[email protected]>
Conflicts: (accepted both, HEAD for outdated areas) assets/js/hooks/index.js lib/vyasa_web/live/gita_live/show_verse.html.heex mix.exs mix.lock
As long as this reference exists, we will be able to invoke JS API calls that the youtube player exposes.
Currently, I've just supported "seekTo" and "loadVideoById" callbacks.
Got a bunch of video stats that gets spit out onhover of a button.
Built a custom tooltip here. Key Takeaways: 1. added import to root template. UMD import done as described here [1], other imports won't work well. 2. followed their tutorial on how to setup a custom tooltip, used show_verse to demonstrate it. Didn't create a generic template / component for it, but I think this is good enough since it shows an live-view-integrated version of the floating-ui tutorial as seen here [2] 3. the middleware is just magic. [1]: https://floating-ui.com/docs/getting-started#umd [2]: https://floating-ui.com/docs/tutorial
* Add route to show specific <chap, verse> * Add JS-hook for WebShare-API/clipboard-copy QQ: seems like I can only use buttons to do click events, how might I go about emitting click events from icons? * Cleanups based on PR review suggestions Added a /hooks subdir to throw in js-hooks and an indexer file for that. * Use external heex template for show_verse Just playing around with things... * Support the addition of meta tags in the html head This gets validated by just observing the html source code. The next step would be to add in the image generation. For a first pass, the image generation shall be done just-in-time, will add in some cacheing thereafter as a v1. * Add meta tags to other views in gita_live * Add image generation & routing * Attempt minor fixes * Navigate from chapter to individual verse * Improve clipboard content Things added: 1. chapter, verse number 2. both text and transliteration 3. url dump * Add just-in-time image creation for og-images * enable 404 templates * Consolidate Fallback Controller * Fix text * Add OgAdapter with filename encoder-decoder pair * Temporarily use atoms as text-id * [sync] prod to quotation-enginge-v0 (#14) syncs commits in the prod branch with this feature branch Co-authored-by: ks0m1c_dharma <[email protected]> Co-authored-by: ks0m1c_dharma <[email protected]> * [WIP] Attempt @ YT Iframe Embed Things done: 1. Added a livecomponent which has a div. The div calls a js hook 2. the js hook creates a new script tag which inserts itself as the first script of the html document. * this is the most probable source of error because I think the callback functions are not being passed to the correct html element. I should explore this when I get back to this problem. The ideal case should be how it is shown on the iframe documentation that we see. 3. The cors issues have been resolved by adding the CORS plug that we saw. This CORS plug allows youtube.com/iframe_api to be a valid source. This actually works for all browsers. 4. If I embed this script tag directly to the heex template, it will work. However, it won't work when I'm attempting to create do it via a JS-Hook. There's a high likelyhood that it's just me being noob at Elixir/LiveView and that's why I can't get it to work yet. REF: https://developers.google.com/youtube/iframe_api_reference Hunch(es): 1. I might have to just insert things into the correct script tag properly. I had already tried inserting innerthtml but it just got parsed as a string. Maybe I should relook at that. 2. Kinda related to point 2 above * Successfully use iframe embed * Add reference to obj via window.youtubePlayer As long as this reference exists, we will be able to invoke JS API calls that the youtube player exposes. * Add examples of interfacing w playr's playback fns Currently, I've just supported "seekTo" and "loadVideoById" callbacks. * Add examples of playr's videoStats APIs Got a bunch of video stats that gets spit out onhover of a button. * Add basic version of a mini-player * Make improvements from code review * Cleanup code --------- Co-authored-by: ks0m1c_dharma <[email protected]> Co-authored-by: ks0m1c_dharma <[email protected]>
Observations about segments:: 0. A negligible minority of the events won't have segments (only the first one it seems.) 1. [the text has instrumentals] there are text-events that just say "[संगीत]", which means instruments. I'm guessing that similar stuff will be there in other languages as well. If there's a need to filter these commented parts out, then we should be able to do so by just filtering away whatever is within `[]` 2. some events will overlap when displaying captions, that's why they are not chronologically unique segments.
I'll try to use the inltk library instead of this one, setting up my arch setup since it won't compile on MacOs.
It's done, pretty satisfactory, see the output json for example
Also done: 1. use maybe_stream_configure/3 (see note in definition) 2. change backlinks from navigate -> patch so that a full-page reload is NOT done. This is also what allows the state of ControlPanel and ActionBar to be maintained despite going back and forth content. 3. actually wiring up the event handlers and stuff that allowed the handshakes to happen TODOs: 1. fix css nonsense with how the content is being displayed. 2. future iteration needs a cleanup, this module is too fat.
* [WIP]: basic DM, demo state & assigned components
Still have no idea how the VyasaWeb.SourceLive.Chapter.Index is supposed
to be rendered as @inner_content within the new
display_manager.html.heex
* Rename CommandGroup -> ControlPanel
* Initial Wire up %UserMode{} to Control Panel
* Switch modes, add user_mode.ex to tw config
* Prevent full page-reloads via push_navigate()
This prevents the socket from being killed at every navigation, so the
overlay's states is still managed without any issue.
Actually, currently, there's a issue with definitions on the router-side
problem: if I do a push_navigate to the path matching =/explore/:source_title/:chap_no= from =/explore/:source_title/=,
it will trigger a socket error:
=phx-F-vfg0fv3-NR4yFB error: unauthorized live_redirect. Falling back to page request -=
Hunch: it's because of the router defining two different live_session scopes (anon vs sangh) so it's
not allowing a =push_navigate()= and hence it's reverting to a full page reload.
Do you know a quick fix to this?
live_session :gen_anon_session,
on_mount: [{VyasaWeb.Session, :anon}] do
live "/explore/", SourceLive.Index, :index
live "/explore/:source_title/", SourceLive.Show, :show
#live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index
live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index
live "/explore/:source_title/:chap_no/:verse_no", SourceLive.Chapter.ShowVerse, :show
end
live_session :gen_sangh_session,
on_mount: [{VyasaWeb.Session, :sangh}] do
live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index
end
* [temp] shift all from anon session to sangh sess
* Minor changes
* [WIP, Attempt] Shift from layout to heex template
Still the thing dies on me
basically took the whole day, a bunch of refactoring has happened # How to Verify / Test 1. navigate through the thing, if you change the mode then navigate into other parts of the content (e.g. :show_sources -> :show_chapters -> :show_verses) then the ControlPanel mode should be the same, no dismount and remounting or anything either 2. handshake gets done properly. The handshake will init when you're in the :show_verses content view and only then does the audio load. Note that once the audio is loaded, any content navigation will never kill the audio playback either. In fact the audio playback will continue and scribing and all that fun stuff will still happen # Workplan Notes ``` ***** Approach 2: ContentLiveview :LOGBOOK: CLOCK: [2024-08-16 Fri 08:39]--[2024-08-16 Fri 17:39] => 9:00 :END: ****** Test: 1. navigate through content without overlay states being affected ****** 0. Redefine Router, let everything point to DM ****** 1. Add content liveview - all 3 added - [LOW IMPORTANCE] TOVERIFY: seems like it's correct to preload the stream content @ the liveview then pass it onto a live_component? ([[https://elixirforum.com/t/how-to-use-phoenix-1-7-streams-on-livecomponent-preload/54454][ref]]) my own implementations: PRELOAD @ #+begin_src elixir # preload @ display_manager/display_live defp apply_action( %Socket{} = socket, :show_chapters, %{"source_title" => source_title} = params ) do [%Chapter{source: src} | _] = chapters = Written.get_chapters_by_src(source_title) socket |> assign(:content_action, :show_chapters) |> assign(:page_title, to_title_case(src.title)) |> assign(:source, src) |> assign(:meta, %{ title: to_title_case(src.title), description: "Explore the #{to_title_case(src.title)}", type: "website", image: url(~p"/og/#{VyasaWeb.OgImageController.get_by_binding(%{source: src})}"), url: url(socket, ~p"/explore/#{src.title}") }) |> stream_configure(:chapters, dom_id: &"Chapter-#{&1.no}") |> stream(:chapters, chapters |> Enum.sort_by(fn chap -> chap.no end)) end #+end_src INJECT INTO LIVE_COMPONENT: #+begin_src elixir <%= if @content_action == :show_chapters do%> <div> SHOW CHAPTERS <.live_component module={VyasaWeb.Content.Chapters} id={"content-sources"} source={@source} chapters={@streams.chapters} /> </div> <% end %> #+end_src ****** 2. defdelegate or add contentFetcher to separate out the repo logic SKIPPED this, not too important ****** 3. test the push_patch() for this WORKSSSS ``` ---- * [WIP]: basic DM, demo state & assigned components Still have no idea how the VyasaWeb.SourceLive.Chapter.Index is supposed to be rendered as @inner_content within the new display_manager.html.heex * Rename CommandGroup -> ControlPanel * Initial Wire up %UserMode{} to Control Panel * Switch modes, add user_mode.ex to tw config * Prevent full page-reloads via push_navigate() This prevents the socket from being killed at every navigation, so the overlay's states is still managed without any issue. Actually, currently, there's a issue with definitions on the router-side problem: if I do a push_navigate to the path matching =/explore/:source_title/:chap_no= from =/explore/:source_title/=, it will trigger a socket error: =phx-F-vfg0fv3-NR4yFB error: unauthorized live_redirect. Falling back to page request -= Hunch: it's because of the router defining two different live_session scopes (anon vs sangh) so it's not allowing a =push_navigate()= and hence it's reverting to a full page reload. Do you know a quick fix to this? live_session :gen_anon_session, on_mount: [{VyasaWeb.Session, :anon}] do live "/explore/", SourceLive.Index, :index live "/explore/:source_title/", SourceLive.Show, :show #live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index live "/explore/:source_title/:chap_no/:verse_no", SourceLive.Chapter.ShowVerse, :show end live_session :gen_sangh_session, on_mount: [{VyasaWeb.Session, :sangh}] do live "/explore/:source_title/:chap_no", SourceLive.Chapter.Index, :index end * [temp] shift all from anon session to sangh sess * Minor changes * [WIP, Attempt] Shift from layout to heex template Still the thing dies on me * Trigger DIFF * Use DM @ router actions, load data :show_sources * Add data load for :show_chapters action on DM * Use push_patch() @ :show_sources -> :show_chapters * Handle data load & nav:show_chapters->:show_verses * Create VyasaWeb.Content.Verses live_component * Wire up handshakes successfully, shift to patches Also done: 1. use maybe_stream_configure/3 (see note in definition) 2. change backlinks from navigate -> patch so that a full-page reload is NOT done. This is also what allows the state of ControlPanel and ActionBar to be maintained despite going back and forth content. 3. actually wiring up the event handlers and stuff that allowed the handshakes to happen TODOs: 1. fix css nonsense with how the content is being displayed. 2. future iteration needs a cleanup, this module is too fat. * Fix css issues * More minor css fixes
# HitList - [ ] Corpus Tasks: @KosmonautX - [ ] Sivapuranam 🌹 [high priority] - [x] Hanuman Chalisa w multiple audio -- to focus on this first, so that the workflow can be referred to and divided and conquered - [x] Gita Chap 1 Audio & Events (defer to later, divide & conquer this) - [ ] Media Sessions @rtshkmr - [x] API should use image-gen img - [ ] Attributions to be added to the medium's meta - [x] fix video media stream playback issue - [ ] Volume control - [x] Anchoring of video player for mobile view - [ ] manual timestamping @KosmonautX - [x] e.g. bookmarklet 🏴 [stretch goal] -- as a fallback, if this is not done, need to describe - [ ] Sangha Integrations @KosmonautX - [x] Sangh Session Routing - private **"circle of people"** - [x] Page Matrix - [x] Page Markup - [x] Integrate with Gita/Chalisa Verse Structure - [ ] Mark and drafting table event handling - [ ] Sangh Session Init upon first comment from draft (name) - [ ] prep for db and cleanup - [x] Internal Pipelines @KosmonautX - [x] chore: s3 integration for prod server - [x] prod migration chores - [x] Admin console - [x] mostly complete, just needs merging with the current webview - [x] @rtshkmr to review ---- - [x] Copy-System & Chores @rtshkmr - [x] ~Jekyll Site @KosmonautX~ -- changed to ox-hugo based copying for ease of writing quickly - [x] [landing page](https://mmm.page/) init - [x] @rtshkmr init copy for sat - [x] Image-gen: @rtshkmr - [x] theme standardise - [x] use a context-specific background - [x] UI Polishing @rtshkmr - [x] Follow Mode vs Non-Follow Mode - [x] Names to be prettified from snake_case - [x] General UI cleanups - [x] basic theming - [x] mobile view (media player) - [x] Hanuman Verse Struct & Events creation from existing .srt file (2 media inputs) @rtshkmr - [x] Media Player Tasks: @rtshkmr - [x] click verse to seek player #47 - [x] cleanup: break the player live component into core components instead. - [x] Keep audio / video player as a child of bridge, bridge manages the sync b/w the two players. - [x] edge case: bufferring video ==> hide video, display toast to alert user that their network is wonky (this is a depeer problem, will have to get back to this. it's the mp3 issue) ==> this got handled by @KosmonautX by making our audio files on S3 be stored at 320 bitrate - [x] test mp4 containerising the mp3 for timestamp based seeking -- sep independent child PR ==> abandoned because of the usage of higher bitrate for the audio - [x] Component positioning -- media bridge to be sticky and kept stuck to bottom # Bugs List - [x] progress bar seek on pause #65 - [x] sudden youtube iframe brokenness @rtshkmr - [x] Apple IOS bug for audio player init # Abandon List - cleanup: decouple the timer from the audio player, likely a singleton timer object that can be serialsed to store within the session storage, so that playback can resume ([ref comment](#41 (comment))) [candidate for abandonment]
* Add voices gen_changeset & update migration docs * Update README, add wow.json * Init ox-hugo for writing setup * Create CNAME * Delete CNAME * Create CNAME * Init workflow * Update workflow file * Rm erroneous working dir * Re-init submodule for theme * Add some basic routes * Make refs use https:// It's an attempt to prevent mixed use of http and https:// * Rm redundant migration file
rtshkmr
changed the title
rtshkmr
changed the title
Signed-off-by: a/vivekbala <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.