From e0762beaa97d4e9434871c709a7fc469f305ce3c Mon Sep 17 00:00:00 2001
From: Mauricio Fierro <mauriciofierrom@gmail.com>
Date: Sat, 11 Nov 2023 00:35:37 -0500
Subject: [PATCH] Edit section via Lesson#show player

- Make the player controller manage the state of the edition mode
  instead of relying on the starting player element's dataset
- Listen to the turbo events to change the player mode to edit when the
  sections section is replaced by the section edit
- Listen to the turbo events to reset the player (and the edit mode)
  when the section form is cancelled or submitted (shotgun for now)
---
 .../controllers/player_controller.js          | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/player_controller.js b/app/javascript/controllers/player_controller.js
index 3a0e131..153f3bd 100644
--- a/app/javascript/controllers/player_controller.js
+++ b/app/javascript/controllers/player_controller.js
@@ -13,6 +13,7 @@ export default class extends Controller {
   startPending;
   endPending;
   settingCount = 3;
+  edit = false;
 
   static targets = [ "source", "duration" ]
 
@@ -29,6 +30,7 @@ export default class extends Controller {
     this.loop = this.element.dataset.loop === "true" ? true : false
     this.start = parseFloat(this.element.dataset.start) || 0.00
     this.end = parseFloat(this.element.dataset.end)
+    this.edit = this.element.dataset.edit === "true" ? true : false
 
     window.onYouTubeIframeAPIReady = () => {
       this.loaded = true
@@ -37,7 +39,7 @@ export default class extends Controller {
         height: '390',
         videoId: this.videoId || '',
         playerVars: {
-          'autoplay': this.element.dataset.edit === "true" ? 1 : 0,
+          'autoplay': this.edit,
           'disablekb': 1,
           'controls': 0,
           'start': this.start || 0
@@ -70,6 +72,20 @@ export default class extends Controller {
         }
       })
     }
+
+    document.documentElement.addEventListener('turbo:before-fetch-request', (e) => {
+      if (e.srcElement.id === "sections") {
+        this.edit = !this.edit
+        if (!this.edit) {
+          this.#resetPlayer()
+        }
+      }
+    })
+
+    document.documentElement.addEventListener('turbo:submit-end', (e) => {
+      this.edit = !this.edit
+      this.#resetPlayer()
+    })
   }
 
   load() {
@@ -116,7 +132,7 @@ export default class extends Controller {
     console.log(`Play from: ${this.start} to: ${this.end}`)
     this.#resetPlayback()
 
-    if (this.element.dataset.edit === "true" ? true : false)
+    if (this.edit)
     {
       if (this.start !== start) {
         console.log(`Start changed: from ${this.start} to ${start}`)
@@ -180,4 +196,10 @@ export default class extends Controller {
       this.settingEnd = false
     }
   }
+
+  #resetPlayer() {
+    this.player.stopVideo()
+    this.start = parseFloat(this.element.dataset.start) || 0.00
+    this.end = parseFloat(this.element.dataset.end)
+  }
 }