[#92] Enable New Section button when the video has loaded

app/assets/stylesheets/section.css

@@ -2,6 +2,9 @@
   /* border: 2px solid blue; */
   grid-area: sections;
   margin-bottom: 10px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: start;
 
   form {
     display: flex;

app/javascript/controllers/player/dummy_player.js

@@ -76,8 +76,15 @@ export default class extends Player {
 
   static create(params) {
     return new Promise((resolve) => {
-      debug("Dummy needs no preparation")
-      resolve(new this(params))
+      const simulateLoad = window.localStorage.getItem("simulateLoad")
+
+      if (simulateLoad) {
+        setTimeout(() => {
+          resolve(new this(params))
+        }, 1000)
+      } else {
+        resolve(new this(params))
+      }
     })
   }
 

app/javascript/controllers/player_controller.js

@@ -9,7 +9,7 @@ import LoopManager from "controllers/player/loop_manager"
 import YoutubePlayer from "controllers/player/youtube_player"
 import DummyPlayer from "controllers/player/dummy_player"
 import { PlayerRestriction } from "controllers/player/player"
-import { debug, debounce, show, Env } from "controllers/util"
+import { debug, debounce, show, enable, Env } from "controllers/util"
 import { ZoomType } from "controllers/zoom/zoom"
 
 /** Controller for the YouTube player custom functionality */
@@ -130,6 +130,10 @@ export default class extends Controller {
 
         // With the Player and Loop manager initialized we're ready to rumble
         this.state = this.readyState
+
+        // Enable the New Section button
+        const newSectionButton = document.querySelector("#new-section")
+        enable(newSectionButton)
       })
       .catch((error) => {
         console.error("Player initialization failed", error)

app/views/lessons/show.html.erb

@@ -43,9 +43,9 @@
        data-player-video-id-value="<%= video_id(@lesson) %>">
     <div id="player"></div>
   </div>
-
+  
   <%= turbo_frame_tag "sections", class: "sections" do %>
-    <%= link_to "#{t("actions.new")} #{Section.model_name.human}", new_lesson_section_path(@lesson) %>
+    <%= button_to "#{t("actions.new")} #{Section.model_name.human}", new_lesson_section_path(@lesson), id: "new-section", method: :get, class: "button link disabled" %>
     <div class="sections-selector">
       <%= render partial: "sections/section_item", collection: @lesson.sections, as: :section, locals: { lesson: @lesson }%>
     </div>

cypress/e2e/lesson.cy.js

@@ -17,7 +17,9 @@ describe("Lesson", () => {
       })
 
       it("doesn't disable fields nor button", () => {
-        cy.findByText("This video is restricted from being embedded").should('not.exist')
+        cy.findByText("This video is restricted from being embedded").should(
+          "not.exist",
+        )
       })
 
       context("and the a new url is used that fails to load", () => {
@@ -50,7 +52,7 @@ describe("Lesson", () => {
       })
 
       it("disables the rest of the fields and the submit button and shows the error message", () => {
-          cy.findByText("This video is restricted from being embedded")
+        cy.findByText("This video is restricted from being embedded")
       })
 
       context("and a new url is used that succeeds to load", () => {
@@ -61,12 +63,31 @@ describe("Lesson", () => {
               .invoke("val", "https://some-other.com")
               .trigger("input")
             cy.findByLabelText("Name").should("not.have.class", "disabled")
-            cy.findByLabelText("Instrument").should("not.have.class", "disabled")
+            cy.findByLabelText("Instrument").should(
+              "not.have.class",
+              "disabled",
+            )
             cy.findByText("Create Lesson").should("not.have.class", "disabled")
-            cy.findByText("This video is restricted from being embedded").should('not.exist')
+            cy.findByText(
+              "This video is restricted from being embedded",
+            ).should("not.exist")
           })
         })
       })
     })
   })
+
+  describe("Show", () => {
+    it.only("enables the New Section button after video load", () => {
+      cy.appFactories([["create", "lesson"]]).then(([lesson]) => {
+        cy.window().then((window) => {
+          window.localStorage.setItem("simulateLoad", true)
+        })
+        cy.forceLogin({ redirect_to: `/lessons/${lesson.id}` })
+      })
+
+      cy.get("#new-section").should("have.class", "disabled")
+      cy.get("#new-section").should("not.have.class", "disabled")
+    })
+  })
 })