Merge pull request #831 from PRX/fix/audio-segmentor-ad-breaks-change

830: Audio Segmenter Ad Breaks Change
PRX · Oct 2, 2023 · 18b2213 · 18b2213
2 parents cb2144c + 0dbbffd
commit 18b2213
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 73 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/app/assets/stylesheets/app/audio-segmenter/audio-breakpoints-table.scss b/app/assets/stylesheets/app/audio-segmenter/audio-breakpoints-table.scss
@@ -38,15 +38,14 @@
     }
   }
 
-  :is(tr) {
-    &:first-of-type {
-      &::before {
-        content: "";
-        display: block;
-        grid-column: 1 / -1;
-        height: $table-border-width * 2;
-        background-color: var(--#{$prefix}table-border-color);
-      }
+  :is(thead > tr) {
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      grid-column: 1 / -1;
+      height: $table-border-width * 2;
+      background-color: var(--#{$prefix}table-border-color);
     }
   }
 

diff --git a/app/assets/stylesheets/shared/form.scss b/app/assets/stylesheets/shared/form.scss
@@ -10,6 +10,14 @@
     box-shadow: $input-focus-box-shadow;
   }
 
+  &.is-changed {
+    border-color: $orange;
+
+    &:focus-within {
+      box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width rgba($orange, $input-btn-focus-color-opacity);
+    }
+  }
+
   & > :is(.form-control, .input-group-text, .btn) {
     border: none;
 

diff --git a/app/javascript/controllers/audio_breakpoint_controller.js b/app/javascript/controllers/audio_breakpoint_controller.js
@@ -8,10 +8,11 @@ export default class extends Controller {
   static classes = ["completed"]
 
   static values = {
+    initialMarker: Object,
     id: String,
     label: String,
-    startTime: String,
-    endTime: String,
+    startTime: Number,
+    endTime: Number,
   }
 
   connect() {
@@ -30,10 +31,29 @@ export default class extends Controller {
   }
 
   startTimeValueChanged() {
+    if (this.hasInitialMarkerValue) {
+      const isChanged = this.startTimeValue !== (this.initialMarkerValue.startTime || 0)
+
+      this.startTimeTarget.parentNode.classList.toggle("is-changed", isChanged)
+    } else {
+      this.startTimeTarget.parentNode.classList.add("is-changed")
+    }
+
     this.startTimeTarget.placeholder = convertSecondsToDuration(this.startTimeValue)
   }
 
   endTimeValueChanged() {
+    if (this.hasInitialMarkerValue) {
+      const isChanged = this.endTimeValue !== (this.initialMarkerValue.endTime || 0)
+      const isStartTimeChanged =
+        this.startTimeTarget.parentNode.classList.contains("is-changed") || (isChanged && !this.hasEndTimeValue)
+
+      this.endTimeTarget.parentNode.classList.toggle("is-changed", isChanged)
+      this.startTimeTarget.parentNode.classList.toggle("is-changed", isStartTimeChanged)
+    } else {
+      this.endTimeTarget.parentNode.classList.add("is-changed")
+    }
+
     this.endTimeTarget.placeholder = convertSecondsToDuration(this.endTimeValue)
   }
 
@@ -48,19 +68,13 @@ export default class extends Controller {
   }
 
   updateStartTimeToPlayhead() {
-    const playheadTime = this.getPlayheadTime()
-
-    if (playheadTime) {
-      this.updateStartTime(playheadTime)
-    }
+    this.dispatch("marker.update-start-time-to-playhead", { detail: { id: this.idValue, endTime: this.endTimeValue } })
   }
 
   updateEndTimeToPlayhead() {
-    const playheadTime = this.getPlayheadTime()
-
-    if (playheadTime) {
-      this.updateEndTime(playheadTime)
-    }
+    this.dispatch("marker.update-end-time-to-playhead", {
+      detail: { id: this.idValue, startTime: this.startTimeValue },
+    })
   }
 
   changeStartTime() {
@@ -81,12 +95,6 @@ export default class extends Controller {
     this.updateEndTime(null)
   }
 
-  getPlayheadTime() {
-    const playerContainer = this.element.closest("[data-playhead-time]")
-
-    return playerContainer ? playerContainer.dataset.playheadTime : 0
-  }
-
   play() {
     this.dispatch("play", { detail: { id: this.idValue } })
   }