[Operation]: Youtube Player Integration

[KosmonautX]

Present Context

YouTube videos are a common way for people to interact with hymns and talks and the like. We should view these sources as a richer evolution of text-based scriptures.

At the moment it is not clear to @rtshkmr what would be the best version of this feature that is well-integrated with the rest of the text-based features that we will have.

Here's the current roadmap for it:

• [x] 1. Explore YouTube APIs, put up a POC for anything that plays youtube content.
  • [x] Must support pulling of closed captions / transcripts -- check if it's possible to discriminate auto-generated CCs vs user-provided CCs (which are likely to be more accurate).
• [x] 2. Basic Embed of Video Player APIs
  • [ ] A good checkpoint would be to make it similar to a karaoke machine / similar to youglish. Support transcript / text-first interaction
• [ ] 3. Navigation?

Helping words...

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. Strike the scope of code that reveals the most about the problem/solution FIRST not necessarily the easiest or hardest parts - [ ] Alternative Frontend APIs - [ ] Stream content from youtube tied to their video ids - [ ] Archiving audio(?) - [ ] Embed Video Player APIs - [ ] Jump to Timestamp - [ ] timestamping of verses

---

Groundwork

Will add more information as comments during my discovery phase.

References:

1. Youtube JS: a js wrapper for the internal api
2. Youtube iframe API details
3. Youtube fastplayer -- good for reference on feature supports..

For video,

it's going to be transcript focused, similar to youglish

A dive into Youtube API: https://tyrrrz.me/blog/reverse-engineering-youtube-revisited

Helping words...

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? How have others attempted to scale or explore these challenges? (Embed internal & external links to related or possible paths of exploration, stackoverflow, documentation, github etc) Who should be notified? Emphasis on previous or current practice to discover what is ugly, missing, or unnecessary. ``` INPUT UR ANSWER HERE ```

---

Reflection

Helping words...

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. Add any reflections and internal links to future potential and blindsides. ``` INPUT UR ANSWER HERE ```

[rtshkmr]

Some References

1. Youtube JS: a js wrapper for the internal api
2. Youtube iframe API details
3. Youtube fastplayer -- good for reference on feature supports..

For video,

it's going to be transcript focused, similar to youglish

A dive into Youtube API: https://tyrrrz.me/blog/reverse-engineering-youtube-revisited

[rtshkmr]

Understanding the Youtube API

1. it's all been consolidated into /youtubei/ path.
2. POST requests that require an API key corresponding to the youtube client -- supposedly okay to be hardcoded in since the keys don't rotate.
   • ANDROID as a client seems like a good idea
3. There should be sufficient data that is given by youtube's video related APIs

The reverse engineering example didn't really work.

Possible Edge Cases to Consider:

1. handling geographically restricted videos -- likely just a bunch of hurdles to navigate around but should be possible by picking the correct youtube client key (based on that reverse engineering article)

References

1. tyrrrz.me/blog/reverse-engineering-youtube-revisited

[rtshkmr]

Video Player Frontend Choices

1. Mux player (hopefully this is entirely free..) https://www.mux.com/player
2. Youtube JS
3. Youtube fastplayer -- good for reference on feature supports..

[rtshkmr]

2 examples:

1. scrimba -- tag-along media, with notes and other interactive features
2. heavybit -- it's a jump to from text to the media

the video acts as the IR to the timestamp, so can annotate through the video

1. for us, we'll find an authoritative video for that particular text

---

Priority list

• [ ] 1. video player capabilities: seeking and video navigation
• [ ] 2. mobile-first UI: double check mobile behaviour -- this needs to be well handled on mobile
  • [ ] explore just audio-out from the video to min distraction
• [ ] 3. visual modes -- expanded, miniplayer. this is more css ish stuff. --> use scrimba as a primary reference to balance the distracting / focus mode...

[rtshkmr]

API References

1. Embedded player related configuration