feat(segmenter): pre/post roll label positioning

- change prx-input-group is-changed class to js-is-changed - segmentation value change detection - handle nil segmentation - add reset value buttons to pre/post roll inputs
PRX · Oct 4, 2023 · b1d9e66 · b1d9e66
1 parent cd5cc52
commit b1d9e66
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 82 deletions.
diff --git a/app/assets/stylesheets/shared/form.scss b/app/assets/stylesheets/shared/form.scss
@@ -10,7 +10,7 @@
     box-shadow: $input-focus-box-shadow;
   }
 
-  &.is-changed {
+  &.js-is-changed {
     border-color: $orange;
 
     &:focus-within {

diff --git a/app/javascript/controllers/audio_breakpoint_controller.js b/app/javascript/controllers/audio_breakpoint_controller.js
@@ -34,35 +34,36 @@ export default class extends Controller {
     if (!this.hasStartTimeTarget) return
 
     if (this.hasInitialMarkerValue) {
-      const isChanged = this.startTimeValue !== (this.initialMarkerValue.startTime || 0)
+      const isChanged = this.hasStartTimeValue && this.startTimeValue !== (this.initialMarkerValue.startTime || 0)
 
-      this.startTimeTarget.parentNode.classList.toggle("is-changed", isChanged)
+      this.startTimeTarget.parentNode.classList.toggle("js-is-changed", isChanged)
     } else {
-      this.startTimeTarget.parentNode.classList.add("is-changed")
+      this.startTimeTarget.parentNode.classList.add("js-is-changed")
     }
 
-    this.startTimeTarget.placeholder = convertSecondsToDuration(this.startTimeValue)
+    if (this.hasStartTimeValue) {
+      this.startTimeTarget.placeholder = convertSecondsToDuration(this.startTimeValue)
+    } else if (this.idValue === 'postRoll') {
+      this.startTimeTarget.placeholder = convertSecondsToDuration(this.initialMarkerValue.endTime)
+    }
   }
 
-  endTimeValueChanged(newValue) {
+  endTimeValueChanged() {
     if (!this.hasEndTimeTarget) return
 
-    console.log('endTimeValueChanged', newValue, this.endTimeValue, this.hasEndTimeValue)
-
     if (this.hasInitialMarkerValue) {
-      const isChanged = this.endTimeValue !== (this.initialMarkerValue.endTime || 0)
+      const isChanged = this.hasEndTimeValue && this.endTimeValue !== (this.initialMarkerValue.endTime || 0)
 
-      this.endTimeTarget.parentNode.classList.toggle("is-changed", isChanged)
+      this.endTimeTarget.parentNode.classList.toggle("js-is-changed", isChanged)
 
       if (this.hasStartTimeTarget) {
         const isStartTimeChanged =
-          this.startTimeTarget.parentNode.classList.contains("is-changed")
-          || (isChanged && !this.hasEndTimeValue)
+          this.startTimeTarget.parentNode.classList.contains("js-is-changed") || (isChanged && !this.hasEndTimeValue)
 
-        this.startTimeTarget.parentNode.classList.toggle("is-changed", isStartTimeChanged)
+        this.startTimeTarget.parentNode.classList.toggle("js-is-changed", isStartTimeChanged)
       }
     } else {
-      this.endTimeTarget.parentNode.classList.add("is-changed")
+      this.endTimeTarget.parentNode.classList.add("js-is-changed")
     }
 
     if (this.hasEndTimeValue) {
@@ -72,7 +73,11 @@ export default class extends Controller {
 
   updateStartTime(newTime) {
     this.dispatch("marker.update", {
-      detail: { id: this.idValue, startTime: newTime || this.startTimeValue, endTime: this.endTimeValue },
+      detail: {
+        id: this.idValue,
+        startTime: newTime || this.startTimeValue,
+        ...(this.hasEndTimeValue && { endTime: this.endTimeValue }),
+      },
     })
   }
 
@@ -84,8 +89,8 @@ export default class extends Controller {
     this.dispatch("marker.update-start-time-to-playhead", {
       detail: {
         id: this.idValue,
-        ...(this.hasEndTimeValue && { endTime: this.endTimeValue })
-      }
+        ...(this.hasEndTimeValue && { endTime: this.endTimeValue }),
+      },
     })
   }
 
@@ -113,6 +118,14 @@ export default class extends Controller {
     this.updateEndTime(null)
   }
 
+  minEndTime() {
+    this.updateEndTime(0)
+  }
+
+  maxStartTime() {
+    this.updateStartTime(Infinity)
+  }
+
   play() {
     this.dispatch("play", { detail: { id: this.idValue } })
   }

diff --git a/app/javascript/controllers/audio_breakpoints_controller.js b/app/javascript/controllers/audio_breakpoints_controller.js
@@ -20,7 +20,6 @@ export default class extends Controller {
     adBreaks: { type: Number, default: 1 },
     adBreaksValid: { type: Boolean, default: false },
     segments: Array,
-    markers: Array,
   }
 
   minTime = 0.000001
@@ -29,16 +28,6 @@ export default class extends Controller {
     this.initMarkers()
   }
 
-  /**
-   * Handle external changes to incoming marker values.
-   * Should only run when controller initializes, or we need to edit ad locations for a different episode.
-   * DO NOT UPDATE THIS VALUE AS A RESULT OF EDITS IN THE AD LOCATIONS UI.
-   */
-  markersValueChanged() {
-    if (!this.breakpointMarkers) return
-    this.initMarkers()
-  }
-
   durationValueChanged() {
     const endTimeInput = this.postRollControlTemplateTarget.content.querySelector(
       '[data-audio-breakpoint-target="endTime"]'
@@ -47,8 +36,13 @@ export default class extends Controller {
     endTimeInput?.setAttribute("placeholder", convertSecondsToDuration(this.durationValue))
   }
 
+  /**
+   * Handle external changes to incoming segments values.
+   * Should only run when controller initializes, or we need to edit ad locations for a different episode.
+   * DO NOT UPDATE THIS VALUE AS A RESULT OF EDITS IN THE AD LOCATIONS UI.
+   */
   segmentsValueChanged(value) {
-    console.log("segments", value)
+    if (!Array.isArray(value)) return
 
     this.preRollPoint = value[0][0]
     this.postRollPoint = value[value.length - 1][1]
@@ -60,8 +54,6 @@ export default class extends Controller {
       }, []),
     ]
 
-    console.log(this.preRollPoint, this.adBreaks, this.postRollPoint)
-
     if (!this.breakpointMarkers) return
     this.initMarkers()
   }
@@ -75,7 +67,7 @@ export default class extends Controller {
    * Initial render of ad markers.
    */
   initMarkers() {
-    if (!this.hasMarkersValue || !this.hasAdBreaksValue || !this.adBreaksValidValue) return
+    if (!this.hasSegmentsValue || !this.hasAdBreaksValue || !this.adBreaksValidValue) return
 
     const preRollMarker = this.breakpointMarkers?.shift()
     const postRollMarker = this.breakpointMarkers?.pop()
@@ -127,8 +119,6 @@ export default class extends Controller {
         })
     }
 
-    console.log(this.initialMarkers, this.breakpointMarkers)
-
     this.updateBreakpointMarkers()
   }
 
@@ -140,8 +130,6 @@ export default class extends Controller {
     const breakpointMarkerIndex = this.breakpointMarkers.findIndex((marker) => marker.id === id)
     const breakpointMarker = this.breakpointMarkers[breakpointMarkerIndex]
 
-    console.log('updateBreakpointMarker', id, startTime, endTime, breakpointMarker)
-
     if (!breakpointMarker) return
 
     const newStartTime = convertToSeconds(startTime)
@@ -150,8 +138,8 @@ export default class extends Controller {
     let newBreakpointMarker = {
       ...breakpointMarker,
       changed: new Date().getMilliseconds(),
-      startTime: hasEndTime ? Math.max(this.minTime, Math.min(newStartTime, newEndTime)) : newStartTime,
-      endTime: hasEndTime ? Math.min(this.durationValue, Math.max(newStartTime, newEndTime)) : undefined,
+      startTime: hasEndTime ? Math.max(this.minTime, Math.min(newStartTime, newEndTime, this.durationValue)) : newStartTime,
+      endTime: hasEndTime ? Math.min(this.durationValue, Math.max(newStartTime, newEndTime, this.minTime)) : undefined,
     }
     const isSegment = !!newBreakpointMarker.endTime
 
@@ -161,7 +149,6 @@ export default class extends Controller {
 
       // Prevent marker from starting before previous marker's end time.
       if (previousBreakpointMarker) {
-        console.log(newBreakpointMarker)
         newBreakpointMarker = {
           ...newBreakpointMarker,
           startTime: Math.max(
@@ -262,8 +249,6 @@ export default class extends Controller {
           id !== iId && newBreakpointMarker.startTime > iStartTime && newBreakpointMarker.startTime < iEndTime
       )
 
-      console.log(newBreakpointMarker, intersectingSegment, this.breakpointMarkers)
-
       // Prevent point marker from being dropped in a segment.
       if (intersectingSegment) {
         // If restored within a segment, clear start tie so itt can be reset by user.
@@ -291,10 +276,10 @@ export default class extends Controller {
    */
   renderMarkers() {
     // Convert ad markers to markers array.
-    const markers = this.getMarkersTimesArray()
+    const newSegments = this.getSegmentsTimesArray()
 
     // Updated markers form input value.
-    this.markersInputTarget.value = markers.length ? JSON.stringify(markers) : null
+    this.markersInputTarget.value = newSegments.length ? JSON.stringify(newSegments) : null
     this.markersInputTarget.dispatchEvent(new Event("change"))
 
     // Update waveform inspector.
@@ -328,7 +313,7 @@ export default class extends Controller {
    * Get ad markers as times only in array format. (e.g. [start, [start, end])
    * @returns Array of arrays containing start and end times for markers.
    */
-  getMarkersTimesArray() {
+  getSegmentsTimesArray() {
     return this.breakpointMarkers
       .filter(({ startTime }) => startTime !== undefined)
       .reduce((a, current, index, all) => {
@@ -359,21 +344,24 @@ export default class extends Controller {
       const { id, labelText, startTime, endTime } = marker
       const initialMarker = this.initialMarkers.find(({ id: iId }) => iId === id)
 
-      console.log('renderAdMarkerControls', marker);
-
       if (initialMarker) {
         control.dataset.audioBreakpointInitialMarkerValue = JSON.stringify(initialMarker)
       }
 
       control.dataset.audioBreakpointIdValue = id
       control.dataset.audioBreakpointLabelValue = labelText
 
-      if (startTime != null) {
+      if (startTime != null && startTime > this.minTime && startTime < this.durationValue) {
         control.dataset.audioBreakpointStartTimeValue = startTime
       }
 
-      if (endTime != null) {
+      if (endTime != null && endTime > this.minTime && endTime < this.durationValue) {
+        control.dataset.audioBreakpointEndTimeValue = endTime
+      }
+
+      if (marker.id === 'postRoll') {
         control.dataset.audioBreakpointEndTimeValue = endTime
+        control.querySelector('[data-audio-breakpoint-target="startTime"]').setAttribute('placeholder', convertSecondsToDuration(this.durationValue))
       }
 
       controls.push(control)

diff --git a/app/javascript/controllers/waveform_inspector_controller.js b/app/javascript/controllers/waveform_inspector_controller.js
@@ -175,7 +175,6 @@ export default class extends Controller {
       if (startTime == null) return
 
       if (endTime != null) {
-        console.log('init segment', id, startTime, endTime)
         segments.push({
           ...optionsDefault,
           id,
@@ -283,8 +282,6 @@ export default class extends Controller {
   updateBreakpointMarkerStartTimeToPlayhead({ detail }) {
     const { id, endTime } = detail || {}
 
-    console.log('updateBreakpointMarkerStartTimeToPlayhead', detail)
-
     // Dispatch marker update event.
     this.dispatch("marker.update", { detail: { id, startTime: this.peaks.player.getCurrentTime(), endTime } })
   }