Lesson 2: small changes

This commit proposes the following:

- enables partials rendering in development mode
to facilitate debugging
- adds a missing colon to a partial
- adds check in for ending lesson 2
- fixes a browser's console error when playing the audio:

`player_controller.js:5 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.`

Having `muted` in the partial didn't fix the issue but wrapping `play()`
in a check does. Please let me know if this doesn't look right.

There's one issue I'm getting in lesson 2 (and lesson 3)
that I couldn't figure it out. When I click in the big play button
below the episode's title, I see this error in the browser's console:

```
fetch_requests.js:12 Uncaught TypeError: Cannot read properties of null (reading 'set')
```

After finishing the lesson, I still can't get the big button to work.
When I click on it again to pause, it changes the icon but
the audio is still playing and clicking on the bottom audio bar doesn't
stop the audio either.

I couldn't figure out what was missing in the lesson 2 doc
but when I change to lesson 3, the buttons
are working as expected.

Author: stefannibrasil

app/javascript/controllers/player_controller.js

@@ -2,7 +2,11 @@ import ApplicationController from "controllers/application_controller"
 
 export default class extends ApplicationController {
   play() {
-    this.element.play()
+    this.element.play().catch((e) => {
+      window.addEventListener("click", () => {
+        this.element.play();
+      });
+    });
   }
 
   toggle() {

app/views/episodes/show.html.erb

@@ -54,7 +54,7 @@
     <div class="mb-[env(safe-area-inset-bottom)] flex flex-1 flex-col gap-3 overflow-hidden p-1">
       <%= link_to @episode.title, podcast_episode_path(@episode.podcast, @episode), class: "truncate text-center text-sm font-bold leading-6 md:text-left" %>
 
-      <%= audio_tag @episode.audio, id: dom_id(@episode, :audio), class: "w-full", controls: true, muted: Rails.env.test?,
+      <%= audio_tag @episode.audio, id: dom_id(@episode, :audio), class: "w-full", controls: true,
             data: {controller: "player", action: "loadeddata->player#play"} %>
     </div>
   <% end %>

config/environments/development.rb

@@ -62,7 +62,7 @@
   # config.i18n.raise_on_missing_translations = true
 
   # Annotate rendered view with file names.
-  # config.action_view.annotate_rendered_view_with_filenames = true
+  config.action_view.annotate_rendered_view_with_filenames = true
 
   # Uncomment if you wish to allow Action Cable access from any origin.
   # config.action_cable.disable_request_forgery_protection = true

lessons/lesson-2.md

@@ -29,7 +29,7 @@ the episode that was just clicked.
 You'll also note that we add `target: "_top"` to the `<turbo-frame>`. Prior to
 that change, any `<a>` or `<form>` elements nested within `<div id="audio">`
 would drive the entire page. For example, clicking the Podcast title in the
-audio player navigating the whole page to the Podcast in question.
+audio player navigates the whole page to the Podcast in question.
 
 Now that those `<a>` and `<form>` elements are nested underneath a
 `<turbo-frame>`, their navigations would get "caught" or "trapped", and would
@@ -149,6 +149,8 @@ In short, this just ensures we only load the audio once, even if the play button
 is clicked multiple times.
 
 ```diff
+--- a/app/javascript/controllers/application.js
++++ b/app/javascript/controllers/application.js
 +application.registerActionOption("reload", ({ event, value }) => {
 +  if (event.type == "submit") {
 +    const { submitter, target: form } = event
@@ -203,7 +205,7 @@ export default class extends ApplicationController {
 --- a/app/views/episodes/show.html.erb
 +++ b/app/views/episodes/show.html.erb
 -      <%= audio_tag @episode.audio, id: dom_id(@episode, :audio), class: "w-full", controls: true %>
-+      <%= audio_tag @episode.audio, id: dom_id(@episode, :audio), class: "w-full", controls: true
++      <%= audio_tag @episode.audio, id: dom_id(@episode, :audio), class: "w-full", controls: true,
 +            data: {controller: "player", action: "loadeddata->player#play"} %>
 ```
 
@@ -274,13 +276,24 @@ play state. This works because the `playerOutlet` is an instance of a
 `player_controller`, which defines a `toggle()` method.
 
 ```erb
+<%# app/views/episodes/_episode.html.erb %>
 data-play-button-player-outlet="#<%= dom_id(episode, :audio) %>"
 ```
 
 The `play-button` controller synchronizes the `<button>` element's
 `[aria-controls]` and `[aria-pressed]` attribute state with any `player`-side
 state changes, and routes `click` events to its own `play-button#toggle` action.
 
+### Check in
+
+To complete this lesson:
+
+- run `./bin/rails test` to verify the tests pass
+- click on the play buttons in the UI and verify the the audio player is coupled with the multiple
+play buttons on the page
+
+When you're ready, move on to the next lesson by running `./ta/start-lesson 3`.
+
 [data-turbo-permanent]: https://turbo.hotwired.dev/handbook/building#persisting-elements-across-page-loads
 [turbo-frame]: https://turbo.hotwired.dev/handbook/frames
 [data-turbo-frame]: https://turbo.hotwired.dev/handbook/frames#targeting-navigation-into-or-out-of-a-frame