Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hanuman to the Moon #46

Closed
wants to merge 203 commits into from
Closed

Hanuman to the Moon #46

wants to merge 203 commits into from

Conversation

ks0m1c
Copy link
Contributor

@ks0m1c ks0m1c commented Feb 25, 2024

No description provided.

rtshkmr and others added 30 commits December 5, 2023 00:04
QQ: seems like I can only use buttons to do click events, how might I go
about emitting click events from icons?
Added a /hooks subdir to throw in js-hooks and an indexer file for that.
Just playing around with things...
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.
Things added:
1. chapter, verse number
2. both text and transliteration
3. url dump
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
rtshkmr and others added 29 commits March 14, 2024 02:10
Co-authored-by: ks0m1c_dharma <[email protected]>
Co-authored-by: KosmonautX <[email protected]>
Co-authored-by: ks0m1c_dharma <[email protected]>
Co-authored-by: KosmonautX <[email protected]>
Introduction of Bindings && Cherrywrap Nimble OG Image
Introduction of Bindings && JIT OG Image
* [Refactor]: Use ms as time units

* [Attempt]: player_details -> %Meta{}, use ms

+ The key goals for this commit were:
1. for all the time operations, use milliseconds as units by default
2. instead of using player_details, directly use %Playback{}, any other
meta info can be expliclity defined via the %Meta{} which is a nested
struct within %Playback that is medium-agnostic.

+ The following were done:
1. update %Playback{} to contain an inner struct: %Meta{}
2. Deprecate player_details:
3. Deprecate use of TimeUtils::nowSeconds() ==> nowMs()

- Here are the issues that are yet to be addressed, in order of
importance:
1. TimeCalculation issue.
   Somehow, there's a new bug introduced when doing a progress_bar seek.
   The time calculation done @
   media_bridge.ex::update_playback_on_seek() is causing a crash,
   claiming a pattern mismatch for the inferred arity of 4. Oddly, I'm
   only passing in 3 arguments, so it should be an arity of 3...

2. Seeding issues: after loading events, the voice's embedded meta
attribute is nil ==> ensuring that it's non-nil overlaps with our
MediaSessionsApi task

3. to update attribute name in the voice::meta table column where
"artist" should actually be "artists" since it's an array. Low priority.

4. youtube_player.js:: is receiving %Playback{} but it's not using the
info within it. Maybe using the elapsed value here might improve the
audio-video sync.

* Fix time calculation issue by rounding ms

The learning here was that the calculation was failing when the ms value
was a non-integer.

The fix was to just make it an int.

Also learnt that for DateTime, there's two "formats":
1. ~U ==> which includes timezone info
2. ~N ==> which is the naive datetime, does not include timezone info

2 works well because it's backwards compatible, can consider using 2 by default.
Key Learnings:
1. crash was happening because of a known case encountered before: remember to use integers for DateTime.add()

2. As for the dom issues, using the browser's debugger showed that when using a watch expression for the style state, it would go out of scope (implying a re-render). Hence the realisation that it's a matter of ignoring the dom-patching by LiveView. Based on the documentation for it [^1], it seems that ignoring dom-patching should be considered whenever we use JS-hooks to programmatically manipulate the state.

[^1]: https://hexdocs.pm/phoenix_live_view/dom-patching.html
This is just to prevent the compilation warning.
* 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://
@ks0m1c ks0m1c closed this Jul 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants