@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/v4/VideoEditor.js

@@ -1,2417 +0,0 @@
-import closest from './dom/closest'
-import create from './dom/create'
-import noUiSlider from 'nouislider'
-import 'nouislider/distribute/nouislider.css'
-import onFind from './dom/onFind'
-import onFindOnce from './dom/onFindOnce'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
-import TabContainer from './TabContainer'
-
-const STATE_VIDEO_LOADING = 'is-VideoEditorLoading'
-const STATE_VIDEO_LOADED = 'is-VideoEditorLoaded'
-const STATE_OPEN = 'is-VideoEditorOpen'
-const COUNT_FILMSTRIP_CELL = 10
-const CROSS_ORIGIN_KEYWORD = 'use-credentials'
-
-export default class VideoEditor {
-  constructor(element) {
-    // The element which the video editor UI originated from.
-    // For instance the original form UI where all the inputs originate from.
-    this.originEl = element
-    // The element that the Video Editor UI becomes a sibling of.
-    // For instance a popup UI where the new editor elements are created.
-    this.rootEl = this.originEl.closest('form')
-
-    const asideTop = create('div', { class: 'VideoEditorAside-top' }, [
-      create('h2', 'Edit Video'),
-      create(
-        'button',
-        {
-          className: 'VideoEditor-stage-closeButton',
-          name: 'action-done',
-          onclick: (event) => {
-            this._VideoPlayer.pause()
-            this.rootEl.classList.remove(STATE_OPEN)
-            event.preventDefault()
-          },
-        },
-        'Done',
-      ),
-    ])
-    const asideBody = create('div', { class: 'VideoEditorAside-body' })
-    const aside = create('div', { class: 'VideoEditor-stage-aside' }, [
-      asideTop,
-      asideBody,
-    ])
-
-    // This Clip Model serves as a central point for multiple UIs to sync their view of the data.
-    this.ClipModel = {
-      clips: new Map(),
-      observers: [],
-      observersOnRemove: [],
-      addClip: function (data) {
-        const { key, placeholder } = data
-
-        // When both key and placeholder are present
-        // the placeholder data structure needs to be updated internally
-        // since it will be missing properties unavailable at the time of creation.
-        if (key && placeholder) {
-          if (this.clips.has(placeholder)) {
-            const clip = { ...this.clips.get(placeholder) }
-            this.clips.set(key, { ...data, ...clip })
-            this.clips.delete(placeholder)
-          } else if (this.clips.has(key)) {
-            const merged = { ...this.clips.get(key), ...data }
-            this.clips.delete(key)
-            this.clips.set(key, merged)
-          }
-        }
-
-        if (!this.clips.has(key)) {
-          this.clips.set(key || placeholder, data)
-        }
-
-        this.notify()
-      },
-      removeClip: function (key) {
-        if (this.clips.has(key)) {
-          this.clips.delete(key)
-          this.notifyOnRemove(key)
-        }
-      },
-      getClips: function () {
-        return this.clips
-      },
-      observe: function (callback) {
-        this.observers.push(callback)
-      },
-      observeOnRemove: function (callback) {
-        this.observersOnRemove.push(callback)
-      },
-      notifyOnRemove: function (removedKey) {
-        this.observersOnRemove.forEach((callback) => callback(removedKey))
-      },
-      notify: function () {
-        this.observers.forEach((callback) => callback(this.clips))
-      },
-    }
-
-    // Opener element.
-    onFind(this.originEl, '.FilePreview-actions', (target) => {
-      target.insertAdjacentElement(
-        'beforeend',
-        create(
-          'a',
-          {
-            class: 'icon icon-action-edit',
-            href: '#',
-            onclick: (event) => {
-              // Pause video that could be playing before showing the overlay.
-              this.rootEl
-                .querySelectorAll('video')
-                .forEach((videoPlayer) => videoPlayer.pause())
-              this.rootEl.classList.add(STATE_OPEN)
-            },
-          },
-          'Edit',
-        ),
-      )
-    })
-
-    // Popup UI.
-    this.rootEl.insertAdjacentElement(
-      'beforeend',
-      create(
-        'div',
-        {
-          class: 'VideoEditor-stage',
-        },
-        aside,
-      ),
-    )
-
-    this._initVideo().then(async (sourceVideo) => {
-      this._updateVideoState(STATE_VIDEO_LOADED)
-
-      await this._createVideoPlayer(sourceVideo)
-
-      // Move the video player into the overlay.
-      aside.insertAdjacentElement(
-        'beforebegin',
-        create(
-          'div',
-          { class: 'VideoEditor-stage-main' },
-          this._VideoPlayer.elements.container,
-        ),
-      )
-
-      aside.insertAdjacentElement(
-        'beforebegin',
-        create(
-          'div',
-          { className: 'VideoEditor-stage-bottom' },
-          create('div', { className: 'VideoEditor-minimap' }, [
-            create('div', { className: 'VideoEditor-overlays' }),
-            create('div', { className: 'VideoEditor-filmstrip' }, [
-              create('div', { className: 'VideoEditorFilmstrip-images' }),
-              create('div', { className: 'VideoEditorFilmstrip-clips' }),
-            ]),
-          ]),
-        ),
-      )
-
-      this._ColorUI = this._createColorUI()
-
-      // Creates the Clipping UI once the reference form elements exist.
-      await new Promise((resolve, reject) => {
-        onFind(this.originEl, '[data-field-name="clippings"]', (el) => {
-          resolve(el)
-        })
-      })
-        .then((referenceEl) => {
-          this._ClippingUI = this._createClippingUI(referenceEl)
-        })
-        .catch((error) => {
-          console.warn(`Failed to create the Clipping UI due to: ${error}`)
-        })
-
-      this._OverlayUI = this._createOverlayUI(
-        this._VideoPlayer,
-        sourceVideo.videoWidth,
-        sourceVideo.videoHeight,
-      )
-
-      this._MiniMap = this._createMiniMap(sourceVideo, this._OverlayUI)
-
-      if (this._ColorUI) asideBody.append(this._ColorUI.element)
-      if (this._OverlayUI) asideBody.append(this._OverlayUI.element)
-      if (this._ClippingUI) asideBody.append(this._ClippingUI.element)
-
-      new TabContainer(asideBody) // eslint-disable-line no-new
-
-      this._applyInitialValues([
-        this._ColorUI,
-        this._OverlayUI,
-        this._ClippingUI,
-      ])
-    })
-  }
-
-  getState = () => {
-    return this._currentVideoState
-  }
-
-  SMPTEToSeconds = (timecode, frameRate = 24) => {
-    const time = timecode.split(':')
-    const frames = Number(time[3])
-    const milliseconds = (1 / frameRate) * (isNaN(frames) ? 0 : frames)
-    return (
-      Number(time[0]) * 60 * 60 +
-      Number(time[1]) * 60 +
-      Number(time[2]) +
-      milliseconds
-    )
-  }
-
-  /** @preserve
-    VideoFrame: HTML5 Video - SMTPE Time Code capturing and Frame Seeking API
-    @version 0.2.2
-    @author Allen Sarkisyan
-    @copyright (c) 2013 Allen Sarkisyan
-    @license Released under the Open Source MIT License
-    Contributors:
-    Allen Sarkisyan - Lead engineer
-    Paige Raynes - Product Development
-    Dan Jacinto - Video Asset Quality Analyst
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, and/or distribute copies of the
-    Software, and to permit persons to whom the Software is furnished to do so,
-    subject to the following conditions:
-    - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-    - Attribution must be credited to the original authors in derivative works.
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-    OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-  */
-  secondsToSMPTE = (seconds, frameRate = 24) => {
-    const dt = new Date()
-    const format = 'hh:mm:ss:ff'
-    dt.setHours(0)
-    dt.setMinutes(0)
-    dt.setSeconds(0)
-    dt.setMilliseconds(seconds * 1000)
-    function wrap(n) {
-      return n < 10 ? '0' + n : n
-    }
-    return format.replace(/hh|mm|ss|ff/g, function (format) {
-      switch (format) {
-        case 'hh':
-          return wrap(dt.getHours() < 13 ? dt.getHours() : dt.getHours() - 12)
-        case 'mm':
-          return wrap(dt.getMinutes())
-        case 'ss':
-          return wrap(dt.getSeconds())
-        case 'ff':
-          return wrap(Math.floor((seconds % 1) * frameRate))
-      }
-    })
-  }
-
-  isIntersecting = (a, b) => {
-    return (
-      a.left <= b.right &&
-      b.left <= a.right &&
-      a.top <= b.bottom &&
-      b.top <= a.bottom
-    )
-  }
-
-  // Converts from an SMPTE time (HH:MM:SS:FF) to an x coordinate given:
-  // @SMPTE: the time expressed as SMPTE
-  // @secondsTotal: the total time in seconds
-  // @boundingEl: the DOM element that represents the total surface area from which the "x" coordinate will be determined.
-  fromSMPTEToXCoordinate = (SMPTE, secondsTotal, boundingEl) => {
-    const millis = this.SMPTEToSeconds(SMPTE) * 1000
-    const percent = millis / (secondsTotal * 1000)
-    const { width } = boundingEl.getBoundingClientRect()
-    return width * percent
-  }
-
-  combine = (r1, r2) => {
-    const x1 = Math.max(r1.left, r2.left)
-    const y1 = Math.max(r1.top, r2.top)
-    const x2 = Math.min(r1.left + r1.width, r2.left + r2.width)
-    const y2 = Math.min(r1.top + r1.height, r2.top + r2.height)
-    return { x: x1, y: y1, intersectionWidth: x2 - x1, height: y2 - y1 }
-  }
-
-  createSlider = (
-    root,
-    inputs,
-    onUpdate,
-    startvalueOverrides = null,
-    rangeOverrides = null,
-    formatOverrides = null,
-  ) => {
-    let startvalueOverridesArray = null
-    const inputArray = Array.isArray(inputs) ? inputs : [inputs]
-    if (startvalueOverrides) {
-      startvalueOverridesArray = Array.isArray(startvalueOverrides)
-        ? startvalueOverrides
-        : [startvalueOverrides]
-    }
-
-    const startValues = inputArray.map((obj) => {
-      return obj.value
-    })
-    const minRanges = inputArray.map((obj) => {
-      return +obj.getAttribute('min')
-    })
-    const maxRanges = inputArray.map((obj) => {
-      return +obj.getAttribute('max')
-    })
-
-    const defaultOptions = {
-      start: startvalueOverridesArray || startValues,
-      connect: true,
-      range: rangeOverrides || {
-        min: minRanges,
-        max: maxRanges,
-      },
-    }
-
-    let mergedOptions = { ...defaultOptions }
-    if (formatOverrides) {
-      mergedOptions.format = formatOverrides
-    }
-
-    noUiSlider.create(root, mergedOptions)
-
-    root.noUiSlider.on('update', (values, handle) => {
-      const value = values[handle]
-      onUpdate(value)
-    })
-
-    // Updates the original form input only after a change was made.
-    root.noUiSlider.on('set', (values, handle) => {
-      inputArray[handle].value = values[handle]
-      inputArray[handle].dispatchEvent(new Event('change', { bubbles: true }))
-    })
-  }
-
-  async _initVideo() {
-    this._updateVideoState(STATE_VIDEO_LOADING)
-    return new Promise((resolve, reject) => {
-      const videoSelector =
-        '.VideoEditor-fileContainer video:not(.VideoEditor-captureVideo):not(.awsElementalVideo)'
-      // Finds only the reference HTML5 video one time.
-      // This should ignore all other video elements. eg: clipping video elements and the temp video for filmstrip capture.
-      onFindOnce(videoSelector, () => {
-        const videoEl = document.querySelector(videoSelector)
-        videoEl.readyState >= 2
-          ? resolve(videoEl)
-          : videoEl.addEventListener('loadedmetadata', (event) => {
-              resolve(videoEl)
-            })
-      })
-    })
-  }
-
-  async _createMiniMap(video, OverlayUI) {
-    let frameLoop = null
-    let sourceVideo = video
-    const offset = 24
-    const STATE_SELECTING = 'is-selecting'
-    const filmstripEl = this.rootEl.querySelector('.VideoEditor-filmstrip')
-    const minimapEl = this.rootEl.querySelector('.VideoEditor-minimap')
-
-    this.createFilmstripPlaceholder(sourceVideo)
-
-    await this.createFilmstrip(
-      this.originEl.querySelector('.FilePreview-actions + video'),
-      sourceVideo.videoWidth,
-      sourceVideo.videoHeight,
-      sourceVideo.duration,
-    )
-
-    let resizingElement = false
-    let currentSelection = null
-    let _isUserClipping = false
-    let startX = 0
-    let startMillis, stopMillis // eslint-disable-line no-unused-vars
-
-    const playhead = create('span', { className: 'playhead' })
-    minimapEl.appendChild(playhead)
-
-    const playHeadWidthHalved = parseInt(playhead.offsetWidth) / 2
-
-    const _fromXCoordinateToSMPTE = (x) => {
-      const total = this.rootEl.querySelector(
-        '.VideoEditor-filmstrip',
-      ).offsetWidth
-      const percent = x / total
-      const durationMillis = sourceVideo.duration * 1000
-      return durationMillis * percent
-    }
-
-    const mouse = {
-      _x: 0,
-      x: 0,
-
-      setOrigin: (e) => {
-        this._x = e.offsetLeft
-      },
-    }
-
-    mouse.setOrigin(minimapEl)
-
-    const _drawSelection = (cursorX) => {
-      if (currentSelection) {
-        const left = parseInt(currentSelection.getAttribute('x'))
-
-        // Cursor is moving to the left of the starting coordinate.
-        if (cursorX < startX) {
-          currentSelection.setAttribute('x', `${cursorX}px`)
-          currentSelection.setAttribute(
-            'width',
-            `${Math.abs(cursorX - startX)}px`,
-          )
-          // Cursor is moving to the right of the starting coordinate.
-        } else {
-          currentSelection.setAttribute('x', `${startX}px`)
-          currentSelection.setAttribute(
-            'width',
-            `${Math.abs(cursorX - left)}px`,
-          )
-        }
-      }
-    }
-
-    const _cancelSelection = () => {
-      minimapEl.classList.remove(STATE_SELECTING)
-      if (currentSelection) currentSelection.remove()
-      // Cancel the frameloop to ensure the video playback is smooth.
-      window.cancelAnimationFrame(frameLoop)
-      currentSelection = null
-      _isUserClipping = false
-    }
-
-    const _createClippingSurface = (target, x, width) => {
-      const { width: containerWidth } = target.getBoundingClientRect()
-      let xPercent = ((x - offset) / containerWidth) * 100
-      let widthPercent = (width / containerWidth) * 100
-
-      const ClipSurfaces = this.rootEl.querySelectorAll(
-        `.VideoEditor-filmstrip .VideoEditorClip-surface`,
-      )
-
-      // Generate a unique placeholder key.
-      // This key is important as the model uses it to determine
-      // if an object in the model needs an update later once the CMS has generated a UUID.
-      const placeholder = `placeholder-${Date.now()}`
-      const surface = create('div', {
-        classList: 'VideoEditorClip-surface',
-        'data-placeholder': placeholder,
-      })
-      surface.style.left = `${xPercent}%`
-      surface.style.width = `${widthPercent}%`
-      target.appendChild(surface)
-
-      // Check if any existing Clipping surfaces are intersecting this new one and combine them.
-      let combinedSurfaceWidth
-      ClipSurfaces.forEach((ClipSurface) => {
-        // Don't process the same surface we just resized
-        if (surface === ClipSurface) {
-          return
-        }
-
-        const newSurfaceRect = surface.getBoundingClientRect()
-        const existingSurfaceRect = ClipSurface.getBoundingClientRect()
-
-        // Check if this new clipping rect intersects an existing one and combine them.
-        if (this.isIntersecting(newSurfaceRect, existingSurfaceRect)) {
-          const combinedRect = this.combine(newSurfaceRect, existingSurfaceRect)
-          // User is combining a clipping surface into one that exists "to the left"
-          // which requires shifting the element left before we change the width.
-          if (existingSurfaceRect.left < newSurfaceRect.left) {
-            xPercent =
-              ((existingSurfaceRect.left - offset) / containerWidth) * 100
-            surface.style.left = `${xPercent}%`
-          }
-
-          // Calculate the new width of the combined surfaces and convert to percentage of the whole.
-          combinedSurfaceWidth =
-            newSurfaceRect.width +
-            existingSurfaceRect.width -
-            combinedRect.intersectionWidth
-          widthPercent = (combinedSurfaceWidth / containerWidth) * 100
-          surface.style.width = `${widthPercent}%`
-
-          // Remove the merged Clip data from the model.
-          this.ClipModel.removeClip(ClipSurface.getAttribute('data-ref-key'))
-        }
-      })
-
-      return surface
-    }
-
-    const _createSelection = (left) => {
-      const svgns = 'http://www.w3.org/2000/svg'
-      const svg = document.createElementNS(svgns, 'svg')
-      svg.setAttribute('class', 'VideoEditorFilmstrip-selectionContainer')
-      svg.setAttribute('preserveAspectRatio', 'none')
-
-      const rect = document.createElementNS(svgns, 'rect')
-      rect.setAttribute('class', 'VideoEditorFilmstrip-selection')
-      rect.setAttribute('x', `${left}`)
-      rect.setAttribute('height', '100%')
-      svg.appendChild(rect)
-
-      return rect
-    }
-
-    const _removeSelection = (selectionBox) => {
-      selectionBox.parentElement.remove()
-    }
-
-    const _movePlayhead = (x) => {
-      playhead.style.transform = `translateX(${x}px)`
-    }
-
-    const minimumSize = 1
-    let downTarget = null
-    let originalWidth = 0
-    let originalX = 0
-    let originalMouseX = 0
-
-    const _resizeClippingSurface = (evt) => {
-      const containerRect = filmstripEl.getBoundingClientRect()
-      const { width: containerWidth } = containerRect
-      const relativeX = mouse.x - containerRect.left
-      const element = downTarget.closest('.VideoEditorClip-surface')
-
-      // Snaps to the edges of the container in either direction.
-      if (relativeX <= 0) {
-        element.style.left = '0%'
-        return
-      } else if (relativeX >= containerRect.width) {
-        const remainingPercent = 100 - parseFloat(element.style.left)
-        element.style.width = `${remainingPercent}%`
-        return
-      }
-
-      // Adjusting the right side of the clip surface
-      if (downTarget.classList.contains('VideoEditorClip-resizerRight')) {
-        const width = originalWidth + (evt.pageX - originalMouseX)
-        let widthPercent = (width / containerWidth) * 100
-
-        if (width > minimumSize) {
-          element.style.width = `${widthPercent}%`
-        }
-        // Adjusting the left side of the clip surface
-      } else {
-        const width = originalWidth - (evt.pageX - originalMouseX)
-        let widthPercent = (width / containerWidth) * 100
-
-        if (width > minimumSize) {
-          element.style.width = `${widthPercent}%`
-          const newX = originalX + (evt.pageX - offset - originalMouseX)
-          let xPercent = (newX / containerWidth) * 100
-          element.style.left = `${xPercent}%`
-        }
-      }
-    }
-
-    const onMouseEnterHandler = (evt) => {
-      this._VideoPlayer.stop()
-      window.cancelAnimationFrame(frameLoop)
-      frameLoop = window.requestAnimationFrame(doFrameLoop)
-      playhead.classList.remove('is-hidden')
-    }
-
-    const onMouseLeaveHandler = (evt) => {
-      window.cancelAnimationFrame(frameLoop)
-      playhead.classList.add('is-hidden')
-    }
-
-    const onMouseDownHandler = (evt) => {
-      downTarget = evt.target
-
-      const handleResize = (element) => {
-        resizingElement = element
-
-        originalWidth = parseFloat(
-          window
-            .getComputedStyle(element, null)
-            .getPropertyValue('width')
-            .replace('px', ''),
-        )
-        originalX = element.getBoundingClientRect().left
-        originalMouseX = mouse.x
-      }
-
-      if (downTarget.classList.contains('VideoEditorClip-resizerLeft')) {
-        evt.preventDefault()
-        handleResize(downTarget.closest('.VideoEditorClip-surface'))
-      } else if (
-        downTarget.classList.contains('VideoEditorClip-resizerRight')
-      ) {
-        evt.preventDefault()
-        handleResize(downTarget.closest('.VideoEditorClip-surface'))
-      } else {
-        _handleSelection(evt)
-      }
-    }
-
-    const onMouseUpHandler = (evt) => {
-      if (resizingElement) {
-        const surface = resizingElement
-        const placeholder = `placeholder-${Date.now()}`
-        surface.setAttribute('data-placeholder', placeholder)
-
-        resizingElement = false
-
-        const ClipSurfaces = this.rootEl.querySelectorAll(
-          `.VideoEditor-filmstrip .VideoEditorClip-surface`,
-        )
-
-        let combinedSurfaceWidth
-        ClipSurfaces.forEach((ClipSurface) => {
-          // (Exit Early) Don't process the same surface that triggered the handler
-          if (surface === ClipSurface) {
-            return
-          }
-
-          const newSurfaceRect = surface.getBoundingClientRect()
-          const existingSurfaceRect = ClipSurface.getBoundingClientRect()
-
-          // Check if this new clipping rect intersects an existing one and combine them.
-          if (this.isIntersecting(newSurfaceRect, existingSurfaceRect)) {
-            const combinedRect = this.combine(
-              newSurfaceRect,
-              existingSurfaceRect,
-            )
-            // User is combining a clipping surface into one that exists "to the left"
-            // which requires shifting the element left before we change the width.
-            if (existingSurfaceRect.left < newSurfaceRect.left) {
-              surface.style.left = `${existingSurfaceRect.left - offset}px`
-            }
-
-            combinedSurfaceWidth =
-              newSurfaceRect.width +
-              existingSurfaceRect.width -
-              combinedRect.intersectionWidth
-
-            surface.style.width = `${combinedSurfaceWidth}px`
-
-            // Remove the merged Clip data from the model.
-            this.ClipModel.removeClip(ClipSurface.getAttribute('data-ref-key'))
-          }
-        })
-
-        const { x: surfaceX, width: surfaceWidth } =
-          surface.getBoundingClientRect()
-
-        // Recalculates the coordinates as timecodes since clipping surfaces may have been combined.
-        startMillis = _fromXCoordinateToSMPTE(surfaceX - offset)
-        stopMillis = _fromXCoordinateToSMPTE(surfaceX + surfaceWidth - offset)
-        const startTimeSMPTE = this.secondsToSMPTE(startMillis / 1000)
-        const endTimeSMPTE = this.secondsToSMPTE(stopMillis / 1000)
-
-        // Updates the model to notify all observing views.
-        this.ClipModel.addClip({
-          key: surface.getAttribute('data-ref-key'),
-          placeholder: surface.getAttribute('data-placeholder'),
-          startTimeSMPTE,
-          endTimeSMPTE,
-        })
-      }
-    }
-
-    const onMouseLeaveBottomHandler = (evt) => {
-      _cancelSelection()
-    }
-
-    const onMouseMoveHandler = (evt) => {
-      mouse.x = evt.pageX
-      mouse.clientX = evt.clientX
-
-      if (resizingElement) {
-        _resizeClippingSurface(evt)
-      }
-    }
-
-    const onKeyDownHandler = (evt) => {
-      if (evt.key === 'Escape') {
-        if (_isUserClipping) {
-          _cancelSelection()
-        }
-      }
-    }
-
-    const _makeResizeable = (targetEl) => {
-      const resizeLeft = create('div', {
-        className: 'VideoEditorClip-resizerLeft',
-      })
-      const resizeRight = create('div', {
-        className: 'VideoEditorClip-resizerRight',
-      })
-
-      targetEl.appendChild(
-        create('div', { className: 'VideoEditorClip-resizeUI' }, [
-          resizeLeft,
-          resizeRight,
-        ]),
-      )
-    }
-
-    const _handleSelection = (evt) => {
-      startX = evt.x - offset
-      const target = this.rootEl.querySelector('.VideoEditor-filmstrip')
-      const percent = startX / minimapEl.offsetWidth
-      const millis = sourceVideo.duration * percent * 1000
-
-      // There are 2 possible states when clicking:
-      // A: A clip surface isn't defined yet and the User is creating one.
-      // B: A clip surface is defined and the User is finishing it.
-      if (!currentSelection) {
-        _isUserClipping = true
-        minimapEl.classList.add(STATE_SELECTING)
-
-        const selection = _createSelection(startX)
-        target.appendChild(selection.parentElement)
-
-        currentSelection = selection
-        startMillis = millis
-      } else {
-        const selection = currentSelection
-        _isUserClipping = false
-        currentSelection = false
-        stopMillis = millis
-
-        const { x: selectionX, width: selectionWidth } =
-          selection.getBoundingClientRect()
-
-        const surface = _createClippingSurface(
-          target,
-          selectionX,
-          selectionWidth,
-        )
-
-        _makeResizeable(surface)
-        _removeSelection(selection)
-
-        minimapEl.classList.remove(STATE_SELECTING)
-
-        const { x: surfaceX, width: surfaceWidth } =
-          surface.getBoundingClientRect()
-
-        // Recalculates the coordinates as timecodes since clipping surfaces may have been combined.
-        startMillis = _fromXCoordinateToSMPTE(surfaceX - offset)
-        stopMillis = _fromXCoordinateToSMPTE(surfaceX + surfaceWidth - offset)
-        const placeholder = surface.getAttribute('data-placeholder')
-        const startTimeSMPTE = this.secondsToSMPTE(startMillis / 1000)
-        const endTimeSMPTE = this.secondsToSMPTE(stopMillis / 1000)
-
-        // Updates the model to notify all observing views.
-        this.ClipModel.addClip({
-          placeholder,
-          startTimeSMPTE,
-          endTimeSMPTE,
-        })
-      }
-    }
-
-    const stageBottom = this.rootEl.querySelector('.VideoEditor-stage-bottom')
-
-    stageBottom.onmouseleave = onMouseLeaveBottomHandler
-    minimapEl.onmousedown = onMouseDownHandler
-    minimapEl.onmouseup = onMouseUpHandler
-    minimapEl.onmouseenter = onMouseEnterHandler
-    minimapEl.onmouseleave = onMouseLeaveHandler
-    minimapEl.onmousemove = onMouseMoveHandler
-    document.onkeydown = onKeyDownHandler
-
-    const doFrameLoop = (time) => {
-      const rect = minimapEl.getBoundingClientRect()
-      const newX = mouse.lastX - minimapEl.offsetLeft
-
-      _movePlayhead(newX - playHeadWidthHalved)
-      _drawSelection(newX)
-
-      this._VideoPlayer.currentTime = sourceVideo.duration * (newX / rect.width)
-
-      mouse.lastX = mouse.x
-      mouse.lastY = mouse.y
-      frameLoop = window.requestAnimationFrame(doFrameLoop) // get next frame
-    }
-
-    // Store the SVG namespace for easy reuse.
-    const svgns = 'http://www.w3.org/2000/svg'
-
-    // Create <svg>, <defs>, <linearGradient> and <rect> elements using createElementNS to apply the SVG namespace.
-    const svg = document.createElementNS(svgns, 'svg')
-    const GRADIENT_ID = `gradient-${Date.now()}`
-    const gradient = document.createElementNS(svgns, 'linearGradient')
-    const rect = document.createElementNS(svgns, 'rect')
-
-    // Assign an id, classname, width and height
-    svg.setAttribute('width', '100%')
-    svg.setAttribute('height', '100%')
-    svg.setAttribute('version', '1.1')
-    svg.setAttribute('xmlns', svgns)
-    svg.setAttribute('class', 'VideoOverlays-clipBackground')
-
-    // Apply the <lineargradient> to <defs>
-    gradient.id = GRADIENT_ID
-    gradient.setAttribute('x1', '0')
-    gradient.setAttribute('x2', '100%')
-    gradient.setAttribute('y1', '0')
-    gradient.setAttribute('y2', '0')
-    svg.appendChild(gradient)
-
-    // Setup the <rect> element.
-    rect.setAttribute('fill', `url(#${GRADIENT_ID})`)
-    rect.setAttribute('width', '100%')
-    rect.setAttribute('height', '100%')
-    svg.appendChild(rect)
-
-    this.rootEl.querySelector('.VideoEditor-overlays').appendChild(svg)
-
-    const clipSvg = document.createElementNS(svgns, 'svg')
-    const clipDefs = document.createElementNS(svgns, 'defs')
-    const clipPath = document.createElementNS(svgns, 'clipPath')
-    clipSvg.setAttribute('version', '1.1')
-    clipSvg.setAttribute('xmlns', svgns)
-    clipSvg.setAttribute('class', 'VideoOverlays-clippingSvg')
-
-    clipPath.setAttribute('id', 'VideoEditorOverlays-svgPath')
-    clipDefs.appendChild(clipPath)
-    clipSvg.appendChild(clipDefs)
-
-    this.rootEl.querySelector('.VideoEditor-overlays').appendChild(clipSvg)
-
-    const _createStop = (offset, color) => {
-      const stop = document.createElementNS(svgns, 'stop')
-      stop.setAttribute('offset', `${offset}%`)
-      stop.setAttribute('stop-color', `${color}`)
-      return stop
-    }
-
-    // Forces the browser to repaint the SVG otherwise it seems to cache the fill.
-    const _repaintMinimap = () => {
-      const GRADIENT_ID = `gradient-${Date.now()}`
-      gradient.id = GRADIENT_ID
-      rect.setAttribute('fill', `url(#${GRADIENT_ID})`)
-    }
-
-    const redrawOverlays = () => {
-      const HEIGHT = 4
-      const GAP = 4
-      const Overlays = OverlayUI.getOverlays()
-      const duration = sourceVideo.duration
-
-      // Always start with a blank slate.
-      clipPath.innerHTML = ''
-
-      let i = 1
-      Overlays.forEach((Overlay) => {
-        const startPercent = (Overlay.getStartSeconds() / duration) * 100
-        const stopPercent = (Overlay.getStopSeconds() / duration) * 100
-        const clipRect = document.createElementNS(svgns, 'rect')
-        const offset = i === 1 ? HEIGHT : HEIGHT * i + GAP * (i - 1)
-
-        clipRect.setAttribute('x', `${startPercent}%`)
-        clipRect.setAttribute('width', `${stopPercent - startPercent}%`)
-        clipRect.setAttribute('y', `calc(100% - ${offset})`)
-        clipRect.setAttribute('height', `${HEIGHT}`)
-        clipPath.appendChild(clipRect)
-        i++
-      })
-    }
-
-    const redrawClips = (Clips) => {
-      const stops = new Set()
-      const duration = sourceVideo.duration
-
-      // Always start with a blank slate.
-      gradient.innerHTML = ''
-
-      // (Exits early) Uses the default appearance when there aren't any Clips.
-      if (!Clips.size) {
-        gradient.append(_createStop('0', 'white'), _createStop('100', 'white'))
-        return
-      }
-
-      Clips.forEach((Clip) => {
-        const { startTimeSMPTE, endTimeSMPTE } = Clip
-
-        const startMillis =
-          startTimeSMPTE === '' ? 0 : this.SMPTEToSeconds(startTimeSMPTE) * 1000
-        const stopMillis =
-          endTimeSMPTE === '' ? 0 : this.SMPTEToSeconds(endTimeSMPTE) * 1000
-
-        const startPercent = (startMillis / 1000 / duration) * 100
-        const stopPercent = (stopMillis / 1000 / duration) * 100
-
-        stops.add(startPercent)
-        stops.add(stopPercent)
-      })
-
-      // Sort the stops least to greatest.
-      const s = [...stops].sort((a, b) => a - b)
-
-      s.forEach((stop, index) => {
-        // This is the "startTime" stop:
-        if (index % 2 === 0 || index === 0) {
-          gradient.append(_createStop(stop, 'white'))
-          gradient.append(_createStop(stop, 'rgb(113, 133, 162)'))
-        } else {
-          // This is the "stopTime" stop:
-          gradient.append(_createStop(stop, 'rgb(113, 133, 162)'))
-          gradient.append(_createStop(stop, 'white'))
-        }
-      })
-    }
-
-    // Paints the entire Clip background white initially.
-    gradient.append(_createStop('0', 'white'), _createStop('100', 'white'))
-
-    const onClipModelUpdate = (data) => {
-      data.forEach((ClipData) => {
-        const { key, placeholder } = ClipData
-        const ClipSurface = this.rootEl.querySelector(
-          `.VideoEditor-filmstrip .VideoEditorClip-surface[data-placeholder="${placeholder}"]`,
-        )
-
-        if (key && ClipSurface) {
-          // Syncronize the DOM view with the model.
-          ClipSurface.removeAttribute('data-placeholder')
-          ClipSurface.setAttribute('data-ref-key', key)
-        }
-      })
-
-      // Updates the minimap clip view
-      redrawClips(data)
-      _repaintMinimap()
-    }
-
-    const onClipModelRemoveClip = (key) => {
-      const ClipSurface = this.rootEl.querySelector(
-        `.VideoEditor-filmstrip .VideoEditorClip-surface[data-ref-key="${key}"]`,
-      )
-
-      if (ClipSurface) {
-        ClipSurface.remove()
-        redrawClips(this.ClipModel.getClips())
-      }
-
-      _repaintMinimap()
-    }
-
-    const reset = () => {
-      redrawOverlays()
-      redrawClips(this.ClipModel.getClips())
-
-      const path = this.rootEl.querySelector(
-        '.VideoOverlays-clippingSvg clipPath',
-      )
-      if (path) {
-        path.innerHTML = ''
-      } else {
-        console.warn(
-          `querySelector('.VideoOverlays-clippingSvg clipPath') returned null. Overlay path may not have reset properly.`,
-        )
-      }
-
-      _repaintMinimap()
-    }
-
-    const setVideo = (video) => {
-      sourceVideo = video
-    }
-
-    // Display any initial clip model data prior to notification of user changes.
-    this.ClipModel.getClips().forEach((ClipModel) => {
-      const x1 = this.fromSMPTEToXCoordinate(
-        ClipModel.startTimeSMPTE,
-        sourceVideo.duration,
-        filmstripEl,
-      )
-      const x2 = this.fromSMPTEToXCoordinate(
-        ClipModel.endTimeSMPTE,
-        sourceVideo.duration,
-        filmstripEl,
-      )
-
-      const width = x2 - x1
-      const { key } = ClipModel
-
-      const clipsurface = _createClippingSurface(
-        filmstripEl,
-        x1 + offset,
-        width,
-      )
-      clipsurface.removeAttribute('data-placeholder')
-      clipsurface.setAttribute('data-ref-key', key)
-      _makeResizeable(clipsurface)
-    })
-
-    // Display the minimap's clip ui according to the initial data.
-    redrawClips(this.ClipModel.getClips())
-
-    this.ClipModel.observe(onClipModelUpdate)
-    this.ClipModel.observeOnRemove(onClipModelRemoveClip)
-
-    doFrameLoop()
-
-    this._VideoPlayer.on('playing', (event) => {
-      window.cancelAnimationFrame(frameLoop)
-    })
-
-    return {
-      element: minimapEl,
-      redrawClips,
-      redrawOverlays,
-      reset,
-      setVideo,
-    }
-  }
-
-  // Renders a filmstrip placeholder graphic while the filmstrip images are created.
-  createFilmstripPlaceholder(sourceVideo) {
-    const filmstripImagesContainer = this.rootEl.querySelector(
-      '.VideoEditorFilmstrip-images',
-    )
-    const filmstripPlaceholders = []
-    const step = sourceVideo.duration / COUNT_FILMSTRIP_CELL
-    for (let i = 1; i <= COUNT_FILMSTRIP_CELL; i++) {
-      const placeholder = create(
-        'div',
-        { className: 'VideoEditorFilmstrip-placeholder' },
-        create(
-          'span',
-          { className: 'VideoEditorFilmstrip-placeholderLabel' },
-          `${this.secondsToSMPTE(i * step)}`,
-        ),
-      )
-      filmstripPlaceholders.push(placeholder)
-    }
-
-    filmstripPlaceholders.forEach((placeholder) =>
-      filmstripImagesContainer.appendChild(placeholder),
-    )
-  }
-
-  async createFilmstrip(video, width, height, duration) {
-    const count = 10 // number of filmstrip images to create.
-    const scale = 0.2 // resize amount to create images at a resolution that is close to the target size.
-    const step = duration / count // size of the jumps made while seeking through the video.
-    const target = this.rootEl.querySelector('.VideoEditorFilmstrip-images')
-    const filmstripEl = this.rootEl.querySelector('.VideoEditor-filmstrip')
-    const captureVideo = video.cloneNode(true)
-    captureVideo.crossOrigin = CROSS_ORIGIN_KEYWORD
-
-    // Wait for the capture video data.
-    await new Promise((resolve, reject) => {
-      captureVideo.readyState >= 2
-        ? resolve()
-        : captureVideo.addEventListener('loadedmetadata', (event) => {
-            resolve()
-          })
-    })
-
-    captureVideo.className = 'VideoEditor-captureVideo' // overwrites any copied classnames.
-    captureVideo.removeAttribute('controls')
-    captureVideo.setAttribute('muted', true)
-    captureVideo.setAttribute('playsinline', true)
-    video.insertAdjacentElement('afterend', captureVideo)
-
-    const svgns = 'http://www.w3.org/2000/svg'
-    const clipSvg = document.createElementNS(svgns, 'svg')
-    const clipDefs = document.createElementNS(svgns, 'defs')
-    const clipPath = document.createElementNS(svgns, 'clipPath')
-    clipSvg.setAttribute('version', '1.1')
-    clipSvg.setAttribute('xmlns', svgns)
-    clipSvg.setAttribute('class', 'VideoEditorFilmstrip-clippingSvg')
-
-    clipPath.setAttribute('id', 'VideoEditorFilmstrip-svgPath')
-    clipDefs.appendChild(clipPath)
-    clipSvg.appendChild(clipDefs)
-
-    const clipRect = document.createElementNS(svgns, 'rect')
-
-    clipRect.setAttribute('x', `0`)
-    clipRect.setAttribute('width', `50%`)
-    clipRect.setAttribute('height', `100%`)
-    clipPath.appendChild(clipRect)
-
-    target.parentElement.appendChild(clipSvg)
-
-    const seek = (time) => {
-      return new Promise((resolve, reject) => {
-        const seekedCallback = (event) => {
-          captureVideo.removeEventListener('seeked', seekedCallback)
-          resolve()
-        }
-
-        captureVideo.addEventListener('seeked', seekedCallback)
-        captureVideo.currentTime = time
-      })
-    }
-
-    let index = 0
-    let captureAbort = false
-    const capture = (time) => {
-      // Reduce the initialization time by aborting the whole capture process once the first error is thrown.
-      if (captureAbort) return
-      return seek(time)
-        .then(() => {
-          const canvas = create('canvas', {
-            width: width * scale,
-            height: height * scale,
-          })
-          canvas
-            .getContext('2d')
-            .drawImage(captureVideo, 0, 0, canvas.width, canvas.height)
-          const img = create('img')
-          img.crossOrigin = CROSS_ORIGIN_KEYWORD
-          img.src = canvas.toDataURL()
-          const placeholder = target.children[index]
-          placeholder.replaceWith(img)
-          ++index
-        })
-        .catch((err) => {
-          captureAbort = true
-          console.warn(`Video screen shot failed due to:\n${err}`)
-        })
-    }
-
-    // Creates a clone of each filmstrip reference node giving the appearance of highlighted sections of the filmstrip.
-    const _createFilmstripClips = () => {
-      filmstripEl.classList.add('is-clipped')
-
-      let referenceNodes = target.querySelectorAll('img')
-      if (!referenceNodes.length) {
-        referenceNodes = target.querySelectorAll(
-          'img, .VideoEditorFilmstrip-placeholder',
-        )
-      }
-
-      referenceNodes.forEach((referenceNode) => {
-        this.rootEl
-          .querySelector('.VideoEditorFilmstrip-clips')
-          .append(referenceNode.cloneNode(true))
-      })
-    }
-
-    // Draw "cutouts" in the mask to reveal the clipped visualization of the filmstrip.
-    const _redrawClippedFrames = (Clips) => {
-      const duration = video.duration
-
-      // Always start with a blank slate.
-      clipPath.innerHTML = ''
-
-      Clips.forEach((Clip) => {
-        const clipRect = document.createElementNS(svgns, 'rect')
-        const x1 = this.fromSMPTEToXCoordinate(
-          Clip.startTimeSMPTE,
-          duration,
-          filmstripEl,
-        )
-        const x2 = this.fromSMPTEToXCoordinate(
-          Clip.endTimeSMPTE,
-          duration,
-          filmstripEl,
-        )
-        const width = x2 - x1
-
-        // Converts pixels to percentage of whole.
-        const { width: containerWidth } = filmstripEl.getBoundingClientRect()
-        const xPercent = (x1 / containerWidth) * 100
-        const widthPercent = (width / containerWidth) * 100
-
-        clipRect.setAttribute('x', `${xPercent}%`)
-        clipRect.setAttribute('width', `${widthPercent}%`)
-        clipRect.setAttribute('height', `100%`)
-        clipRect.setAttribute('data-ref-key', Clip.key || Clip.placeholder)
-        clipPath.appendChild(clipRect)
-      })
-    }
-
-    const onClipModelUpdate = (data) => {
-      // Once the first clip is added construct the filmstrip clip UI.
-      if (
-        this.rootEl.querySelector('.VideoEditorFilmstrip-clips')
-          .childElementCount === 0
-      ) {
-        _createFilmstripClips()
-      }
-
-      _redrawClippedFrames(data)
-    }
-
-    const onClipModelRemoveClip = (data) => {
-      const match = clipPath.querySelector(`rect[data-ref-key="${data}"]`)
-      if (match) {
-        match.remove()
-      }
-
-      // When all Clips have been removed from the Model, return the filmstrip to the intial UI.
-      if (!this.ClipModel.getClips().size) {
-        filmstripEl.classList.remove('is-clipped')
-        this.rootEl.querySelector('.VideoEditorFilmstrip-clips').innerHTML = ''
-      }
-    }
-
-    // Take pictures of the frames.
-    for (let i = 1; i <= count; i++) {
-      await capture(i * step)
-    }
-
-    // Remove the temp video now that we've taken the pictures.
-    captureVideo.remove()
-
-    // If Clips are initially provided, clone the images into the filmstrip
-    // clip area so they will appear as "clipped".
-    if (this.ClipModel.getClips().size) {
-      _createFilmstripClips()
-    }
-
-    // Display the clipped frames according to the initial data.
-    _redrawClippedFrames(this.ClipModel.getClips())
-
-    this.ClipModel.observe(onClipModelUpdate)
-    this.ClipModel.observeOnRemove(onClipModelRemoveClip)
-  }
-
-  resetFilmstrip() {
-    const clipSvg = this.rootEl.querySelector(
-      '.VideoEditorFilmstrip-clippingSvg',
-    )
-    if (clipSvg) {
-      clipSvg.remove()
-    } else {
-      console.warn(
-        `querySelector('.VideoEditorFilmstrip-clippingSvg') returned null. Filmstrip clip-path may not have reset properly.`,
-      )
-    }
-
-    const imageContainer = this.rootEl.querySelector(
-      '.VideoEditorFilmstrip-images',
-    )
-    imageContainer.innerHTML = ''
-  }
-
-  _applyInitialValues(UIs) {
-    const getEditValues = (inputs) => {
-      return [...inputs].reduce((accum, val) => {
-        const propname = val.name.substring(val.name.lastIndexOf('/') + 1)
-        Object.assign(accum, {
-          [propname]: val.type === 'checkbox' ? val.checked : val.value,
-        })
-        return accum
-      }, {})
-    }
-
-    UIs.forEach((ui) => {
-      const initialValues = getEditValues(
-        ui.element.querySelectorAll('input[name]'),
-      )
-      ui.handleUpdate(initialValues)
-    })
-  }
-
-  _createClippingUI(sourceEl) {
-    const Clips = new Map()
-
-    if (sourceEl.classList.contains('is-inHiddenCluster')) {
-      sourceEl.classList.remove('is-inHiddenCluster')
-    }
-
-    const element = create(
-      'div',
-      {
-        class: 'VideoEditor-ClippingUI',
-        'data-tab': 'Clip',
-      },
-      create('h2', 'Click on the filmstrip area to clip your video.'),
-      create(
-        'em',
-        {},
-        'Tip: Creating a clip can be cancelled by pressing the escape key.',
-      ),
-      this.originEl.querySelector('[data-name$="/frameRate"]'),
-      sourceEl,
-    )
-
-    // Returns a Promise that resolves the key value.
-    const _getKey = async (item) => {
-      return new Promise((resolve, reject) => {
-        onFind(item, '.CIG', (cig) => {
-          const key = cig.getAttribute('data-id').split('/')[0]
-          resolve(key)
-        })
-      })
-    }
-
-    // Preload the Clip RCIG item contents (step #1).
-    onFind(sourceEl, '.RCIG-list > li:not(.is-removing)', (item) => {
-      // collapsed items lazy-load their contents so they need to be triggered to load the content.
-      if (item.classList.contains('is-collapsed')) {
-        const evt = new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-        })
-
-        const title = item.querySelector('.RCIG-title')
-        // click on the title to trigger the lazy-load.
-        title.dispatchEvent(evt)
-        // click again to collapse the expanded item so no one notices what was done :)
-        title.dispatchEvent(evt)
-      }
-    })
-
-    // Sync removal of an RCIG item to remove the clips as well.
-    onFind(sourceEl, '.RCIG-item.is-removing', async (item) => {
-      const key = await _getKey(item)
-      Clips.delete(key)
-    })
-
-    // The RCIG item content is loaded. (step #2)
-    // const clipTarget = this.rootEl.querySelector('.VideoEditor-filmstrip')
-    onFind(sourceEl, '.RCIG-list > li:not(.is-removing) .CIG', (clipItem) => {
-      const key = clipItem.getAttribute('data-id').split('/')[0]
-      const startTimeSMPTE = clipItem.querySelector(
-        '[data-name$="startTimecode"] textarea',
-      ).value
-      const endTimeSMPTE = clipItem.querySelector(
-        '[data-name$="endTimecode"] textarea',
-      ).value
-
-      // Default to a unique placeholder unless there is already an object in the Clip model that is a "placeholder".
-      // Which means it was the last object the User generated and should be used as the current placeholder in this case.
-      let placeholder = `placeholder-${Date.now()}`
-      this.ClipModel.getClips().forEach((val, key) => {
-        if (key.includes('placeholder')) {
-          placeholder = key
-        }
-      })
-
-      this.ClipModel.addClip({
-        placeholder,
-        key,
-        startTimeSMPTE,
-        endTimeSMPTE,
-      })
-    })
-
-    onFind(sourceEl, '.RCIG-list > li .RCIG-remove', (removeButton) => {
-      removeButton.onclick = (evt) => {
-        const CIG = evt.currentTarget.parentNode.querySelector('.CIG')
-        const key = CIG.getAttribute('data-id').split('/')[0]
-        this.ClipModel.removeClip(key)
-      }
-    })
-
-    const handleUpdate = (data) => {}
-
-    const createClip = () => {
-      const button = element.querySelector('.RCIG-add')
-      button.click()
-    }
-
-    const onClipModelUpdate = (data) => {
-      data.forEach((ClipData) => {
-        const { key, placeholder, startTimeSMPTE, endTimeSMPTE } = ClipData
-        // This is the scenario where a clip was created outside this component (for example via the "minimap UI").
-        if (!key && placeholder) {
-          createClip()
-        } else {
-          // Update the DOM inputs to reflect the changes made to the data model.
-          const list = element.querySelector('[data-name$="/clippings"]')
-          const inputGroup = list.querySelector(`.CIG[data-id="${key}"]`)
-
-          const inputStartTime = inputGroup.querySelector(
-            '[data-name$="startTimecode"] textarea',
-          )
-          const inputStopTime = inputGroup.querySelector(
-            '[data-name$="endTimecode"] textarea',
-          )
-
-          inputStartTime.value = startTimeSMPTE
-          inputStopTime.value = endTimeSMPTE
-
-          // Trigger a content state change.
-          inputStartTime.dispatchEvent(new Event('change', { bubbles: true }))
-          inputStopTime.dispatchEvent(new Event('change', { bubbles: true }))
-        }
-      })
-    }
-
-    const onClipModelRemoveClip = (key) => {
-      const item = sourceEl.querySelector(`.RCIG-list .CIG[data-id="${key}"]`)
-      const listItem = item.closest('li')
-      if (item && listItem && !listItem.classList.contains('is-removing')) {
-        // Trigger the CIG's built-in removal logic.
-        const removeButton = item.parentNode.querySelector('.RCIG-remove')
-        if (removeButton) {
-          removeButton.click()
-        }
-      }
-    }
-
-    const reset = () => {
-      // Removes any clip CIGs that have been added to this video.
-      const clipRemoveButtons = sourceEl.querySelectorAll(
-        '.RCIG-list > li:not(.is-removing) .RCIG-remove',
-      )
-
-      clipRemoveButtons.forEach((button) => {
-        button.click()
-      })
-    }
-
-    this.ClipModel.observe(onClipModelUpdate)
-    this.ClipModel.observeOnRemove(onClipModelRemoveClip)
-
-    return {
-      createClip,
-      element,
-      handleUpdate,
-      reset,
-    }
-  }
-
-  _createColorUI() {
-    const defaults = {
-      hue: 0,
-      saturation: 50,
-      brightness: 50,
-      contrast: 50,
-    }
-
-    const filtersApplied = new Map()
-    const FILTERABLE_SELECTORS = '.VideoEditor-stage-main video'
-
-    const applyAllEdits = (data) => {
-      const { hue, saturation, brightness, contrast } = { ...data }
-
-      if (hue !== '') {
-        hueSlider.noUiSlider.set(hue)
-      }
-      if (saturation !== '') {
-        saturationSlider.noUiSlider.set(saturation)
-      }
-      if (brightness !== '') {
-        brightnessSlider.noUiSlider.set(brightness)
-      }
-      if (contrast !== '') {
-        contrastSlider.noUiSlider.set(contrast)
-      }
-    }
-
-    // Server values range from 1 to 100 and for CSS should be converted to 0 - 200 (max).
-    const convertValueToPercent = (val, max = 100) => {
-      let amount = ((2 * parseFloat(val)) / 100) * max
-      return amount
-    }
-
-    // Applies a CSS filter to the "filterable" elements.
-    // Combines filters if multiple are used in the UI.
-    // @name: the CSS filter function to use.
-    // @val: the CSS filter function percentage to use. *Note: passing null will remove the filter.
-    const applyFilter = (name, val) => {
-      let cssFilterProp = ''
-      const elements = [...this.rootEl.querySelectorAll(FILTERABLE_SELECTORS)]
-
-      val ? filtersApplied.set(name, val) : filtersApplied.delete(name)
-
-      filtersApplied.forEach((val, name) => {
-        cssFilterProp += ` ${name}(${val}) `
-      })
-
-      elements.forEach(
-        (element) => (element.style.filter = `${cssFilterProp.trim()}`),
-      )
-    }
-
-    const sourceEl = this.originEl.querySelector('.VideoEditor-InputColors')
-
-    const hueInput = sourceEl.querySelector('input[name$="hue"]')
-    const hueContainer = hueInput.closest('.inputContainer')
-    hueInput.type = 'range'
-    hueInput.min = '-180'
-    hueInput.max = '180'
-    hueInput.value = hueContainer.hasAttribute('data-interacted')
-      ? hueInput.value
-      : defaults.hue
-
-    const hueSlider = create('div', { className: 'is-slideable' })
-    hueInput.insertAdjacentElement('beforebegin', hueSlider)
-
-    this.createSlider(hueSlider, hueInput, (value) => {
-      applyFilter('hue-rotate', `${value}deg`)
-    })
-
-    const saturationInput = sourceEl.querySelector('input[name$="saturation"]')
-    saturationInput.type = 'range'
-    saturationInput.min = '0'
-    saturationInput.max = '100'
-
-    const saturationSlider = create('div', { className: 'is-slideable' })
-    saturationInput.insertAdjacentElement('beforebegin', saturationSlider)
-
-    this.createSlider(saturationSlider, saturationInput, (value) => {
-      applyFilter('saturate', `${convertValueToPercent(value)}%`)
-    })
-
-    const brightnessInput = sourceEl.querySelector('input[name$="brightness"]')
-    brightnessInput.type = 'range'
-    brightnessInput.min = '0'
-    brightnessInput.max = '100'
-
-    const brightnessSlider = create('div', { className: 'is-slideable' })
-    brightnessInput.insertAdjacentElement('beforebegin', brightnessSlider)
-
-    this.createSlider(brightnessSlider, brightnessInput, (value) => {
-      applyFilter('brightness', `${convertValueToPercent(value)}%`)
-    })
-
-    const contrastInput = sourceEl.querySelector('input[name$="contrast"]')
-    contrastInput.type = 'range'
-    contrastInput.min = '0'
-    contrastInput.max = '100'
-
-    const contrastSlider = create('div', { className: 'is-slideable' })
-    contrastInput.insertAdjacentElement('beforebegin', contrastSlider)
-
-    this.createSlider(contrastSlider, contrastInput, (value) => {
-      applyFilter('contrast', `${convertValueToPercent(value)}%`)
-    })
-
-    const handleUpdate = (data) => {
-      const { saturation, brightness, contrast, hue } = { ...data }
-
-      applyFilter(
-        'saturate',
-        saturation ? `${convertValueToPercent(saturation)}%` : null,
-      )
-      applyFilter(
-        'brightness',
-        brightness ? `${convertValueToPercent(brightness)}%` : null,
-      )
-      applyFilter(
-        'contrast',
-        contrast ? `${convertValueToPercent(contrast)}%` : null,
-      )
-      applyFilter('hue-rotate', hue ? `${hue}deg` : null)
-    }
-    const element = create(
-      'div',
-      {
-        class: 'VideoEditor-ColorUI',
-        'data-tab': 'Color',
-      },
-      create('h2', 'Adjust Color'),
-      create(
-        'em',
-        'Tip: Increment/decrement with up and down keys after clicking the slider.',
-      ),
-      sourceEl.querySelectorAll('.CIG-row'),
-    )
-
-    const reset = () => {
-      applyAllEdits(defaults)
-    }
-
-    const resetButton = create(
-      'a',
-      {
-        class: 'VideoEditor-resetButton',
-        onclick: (event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          applyAllEdits(defaults)
-        },
-      },
-      'Reset',
-    )
-
-    element.append(resetButton)
-
-    return {
-      element,
-      handleUpdate,
-      reset,
-    }
-  }
-
-  _createOverlayUI(videoPlayer, nativeVideoWidth, nativeVideoHeight) {
-    const Overlays = new Map()
-    const sourceEl = this.originEl.querySelector(
-      '[data-field-name="imageOverlayOptions"]',
-    )
-
-    sourceEl.removeAttribute('hidden')
-
-    // Handles removing the Overlay layer from the video player when overlay CIGs are removed.
-    onFind(sourceEl, '.RCIG-list > li .RCIG-remove', (removeButton) => {
-      removeButton.onclick = (evt) => {
-        const CIG = evt.currentTarget.parentNode.querySelector(
-          '.VideoEditor-InputOverlay',
-        )
-        const key = CIG.getAttribute('data-id').split('/')[0]
-        const overlayLayer = this.rootEl.querySelector(
-          `.VideoOverlay-layer[data-name-ref="${key}"]`,
-        )
-        if (overlayLayer) {
-          overlayLayer.remove()
-        } else {
-          console.warn(
-            `querySelector('.VideoOverlay-layer[data-name-ref="${key}"]') returned null. Overlay layer may not have been removed.`,
-          )
-        }
-
-        // Update the Minimap view.
-        this._MiniMap.then((minimap) => {
-          minimap.redrawOverlays()
-        })
-      }
-    })
-
-    const element = create(
-      'div',
-      {
-        class: 'VideoEditor-OverlayUI',
-        'data-tab': 'Overlay',
-      },
-      create('h2', {}, 'Add Image Overlays'),
-      create('em', {}, 'Up to 8 images can be added and overlapped.'),
-      sourceEl,
-    )
-
-    // This is a candidate for optimization as it is called all the time while the video is seeked or is playing.
-    videoPlayer.on('timeupdate', (event) => {
-      const secondsCurr = +event.detail.plyr.currentTime
-      Overlays.forEach((overlay) => {
-        const secondsStart = overlay.getStartSeconds()
-        const secondsEnd = overlay.getStopSeconds()
-        if (secondsStart <= secondsCurr && secondsEnd >= secondsCurr) {
-          overlay.show()
-        } else {
-          overlay.hide()
-        }
-      })
-    })
-
-    // Returns the overlay image that matches the provided key.
-    const _getOverlayImage = (key) => {
-      const target = this.rootEl.querySelector(
-        `.VideoEditor-stage-main .plyr__video-wrapper [data-name-ref="${key}"]`,
-      )
-      return target
-    }
-
-    const handleUpdate = (data) => {}
-
-    const _changeOverlayOrder = (key, newIndex) => {
-      const target = this.rootEl.querySelector(
-        '.VideoEditor-stage-main .plyr__video-wrapper',
-      )
-      const layer = target.querySelector(`[data-name-ref="${key}"]`)
-      layer.style.setProperty('--index', newIndex)
-    }
-
-    const _initOverlay = (item) => {
-      const MARGIN = 10
-
-      /* eslint-disable-next-line no-async-promise-executor */
-      return new Promise(async (resolve, reject) => {
-        const imageData = await _getImage(item)
-        const id = imageData.id
-        // Native width / height are necessary so that the browser knows how to size the bitmaps drawn into the canvas.
-        // Using a canvas allows the browser to match the letterbox and windowbox scenarios which can occur with responsive video sizes.
-        // This is important so that the overlay(s) are positioned as they would be in the video frame and not in relationship to its edges.
-        const layer = create('canvas', {
-          class: 'VideoOverlay-layer is-hidden',
-          width: nativeVideoWidth,
-          height: nativeVideoHeight,
-        })
-
-        const ctx = layer.getContext('2d')
-        ctx.drawImage(imageData.element, MARGIN, MARGIN)
-
-        const nativeImageWidth = imageData.element.naturalWidth
-        const nativeImageHeight = imageData.element.naturalHeight
-
-        layer.setAttribute('data-name-ref', id)
-        const target = this.rootEl.querySelector(
-          '.VideoEditor-stage-main .plyr__video-wrapper',
-        )
-
-        const existingLayer = target.querySelector(`[data-name-ref="${id}"]`)
-        existingLayer
-          ? target.replaceChild(layer, existingLayer)
-          : target.appendChild(layer)
-
-        const remove = () => {
-          layer.classList.add('is-removing')
-        }
-
-        // @percent: 0 - 1
-        const updateOpacity = (percent) => {
-          recipientEl.style.opacity = percent
-        }
-
-        const _hideUnusedInputs = () => {
-          item
-            .querySelectorAll(
-              '.CIG-row[data-name$="/xPercent"], .CIG-row[data-name$="/yPercent"], .CIG-row[data-name$="/widthPercent"], .CIG-row[data-name$="/heightPercent"], .CIG-row[data-name$="/startTime"], .CIG-row[data-name$="/duration"], .CIG-row[data-name$="/fadeIn"], .CIG-row[data-name$="/fadeOut"]',
-            )
-            .forEach((input) => {
-              input.classList.add('is-hidden')
-            })
-        }
-
-        const inputOpacity = item.querySelector('input[name$="/opacity"]')
-        inputOpacity.type = 'range'
-        inputOpacity.min = 0
-        inputOpacity.max = 100
-
-        const opacitySlider = create('div', { className: 'is-slideable' })
-        inputOpacity.insertAdjacentElement('beforebegin', opacitySlider)
-
-        const key = inputOpacity.getAttribute('name').split('/')[0]
-        const recipientEl = _getOverlayImage(key)
-
-        this.createSlider(opacitySlider, inputOpacity, (value) => {
-          updateOpacity(value / 100)
-        })
-
-        const inputWidth = item.querySelector('input[name$="/widthPercent"]')
-        const inputHeight = item.querySelector('input[name$="/heightPercent"]')
-        // @percent: 1 - 100%
-        const updateScale = (percent) => {
-          // recipientEl.querySelector('img').style.width = `${percent}%`
-          // TODO: Resizing the canvas data.
-          inputWidth.value = parseInt(percent)
-          inputHeight.value = parseInt(percent)
-          inputWidth.dispatchEvent(new Event('change', { bubbles: true }))
-          inputHeight.dispatchEvent(new Event('change', { bubbles: true }))
-        }
-
-        const inputScale = create('input')
-        inputScale.type = 'range'
-        inputScale.min = 1
-        inputScale.max = 100
-        inputScale.step = '1'
-
-        const scaleSlider = create('div', { className: 'is-slideable' })
-        inputScale.insertAdjacentElement('beforebegin', scaleSlider)
-
-        this.createSlider(
-          scaleSlider,
-          inputScale,
-          (value) => {
-            updateScale(value)
-          },
-          +inputWidth.value,
-        )
-
-        // Positioning UI:
-        const inputX = item.querySelector('input[name$="/xPercent"]')
-        const inputY = item.querySelector('input[name$="/yPercent"]')
-
-        const getPositionAsPercent = (x, y) => {
-          // Convert back to percentages using the top-left of the image as the 0,0 coordinate.
-          let left = x || 0
-          let top = y || 0
-
-          // Convert negative values to "0"
-          left = Math.sign(left) === -1 ? 0 : left
-          top = Math.sign(top) === -1 ? 0 : top
-
-          return {
-            xPercent: parseInt((left / nativeVideoWidth) * 100),
-            yPercent: parseInt((top / nativeVideoHeight) * 100),
-          }
-        }
-
-        // Moving left-to-right, top-to-bottom.
-        const LAYOUTS_NORMAL = new Map([
-          ['0,0', '0,0'],
-          ['50,0', `${nativeVideoWidth / 2 - nativeImageWidth / 2},0`],
-          ['100,0', `${nativeVideoWidth - nativeImageWidth},0`],
-          ['0,50', `0,${nativeVideoHeight / 2 - nativeImageHeight / 2}`],
-          [
-            '50,50',
-            `${nativeVideoWidth / 2 - nativeImageWidth / 2},${
-              nativeVideoHeight / 2 - nativeImageHeight / 2
-            }`,
-          ],
-          [
-            '100,50',
-            `${nativeVideoWidth - nativeImageWidth},${
-              nativeVideoHeight / 2 - nativeImageHeight / 2
-            }`,
-          ],
-          ['0,100', `0,${nativeVideoHeight - nativeImageHeight}`],
-          [
-            '50,100',
-            `${nativeVideoWidth / 2 - nativeImageWidth / 2},${
-              nativeVideoHeight - nativeImageHeight
-            }`,
-          ],
-          [
-            '100,100',
-            `${nativeVideoWidth - nativeImageWidth},${
-              nativeVideoHeight - nativeImageHeight
-            }`,
-          ],
-        ])
-
-        const layoutParent = create('div', {
-          class: 'VideoOverlay-layoutUI',
-        })
-
-        const updatePosition = (x, y) => {
-          const intX = parseInt(x)
-          const intY = parseInt(y)
-          ctx.clearRect(0, 0, layer.width, layer.height)
-          ctx.drawImage(imageData.element, intX, intY)
-        }
-
-        const updatePositionInputs = (x, y) => {
-          const { xPercent, yPercent } = getPositionAsPercent(x, y)
-
-          inputX.value = xPercent
-          inputY.value = yPercent
-
-          // Trigger a content state change.
-          inputX.dispatchEvent(new Event('change', { bubbles: true }))
-          inputY.dispatchEvent(new Event('change', { bubbles: true }))
-        }
-
-        const selectLayout = (key) => {
-          const layoutEl = layoutParent.querySelector(`[data-coords="${key}"]`)
-          layoutParent
-            .querySelectorAll('* > .is-selected')
-            .forEach((layout) => layout.classList.remove('is-selected'))
-          layoutEl.classList.add('is-selected')
-        }
-
-        LAYOUTS_NORMAL.forEach((origin, key) => {
-          const { 0: x, 1: y } = origin.split(',')
-          const { xPercent, yPercent } = getPositionAsPercent(x, y)
-
-          layoutParent.appendChild(
-            create('div', {
-              className: 'VideoOverlay-layout-item',
-              'data-coords': `${xPercent},${yPercent}`,
-              onclick: (event) => {
-                updatePosition(x, y)
-                updatePositionInputs(x, y)
-                selectLayout(`${xPercent},${yPercent}`)
-                event.preventDefault()
-              },
-            }),
-          )
-        })
-
-        // Duration Start:
-        const inputStart = item.querySelector('textarea[name$="/startTime"]') // SMPTE format
-        // Create a new duration start (hidden) input so that the start value and end value can both be the same format (millis).
-        // When this hidden input changes, we convert the value to SMPTE and update the startTime input.
-        const inputDurationStart = create('input')
-        inputDurationStart.style.display = 'none'
-        inputDurationStart.setAttribute('hidden', 'true')
-        inputDurationStart.value = inputStart.value
-          ? this.SMPTEToSeconds(inputStart.value) * 1000
-          : 0
-        inputDurationStart.onchange = (evt) => {
-          const seconds = inputDurationStart.value / 1000
-          inputStart.value = this.secondsToSMPTE(seconds)
-          this._MiniMap.then((minimap) => {
-            minimap.redrawOverlays()
-          })
-          gotoAndPlay(seconds)
-        }
-
-        // Duration Stop:
-        const inputDurationStop = item.querySelector('input[name$="/duration"]') // Milliseconds format
-        const durationSlider = create('div', { className: 'is-slideable' })
-        inputDurationStop.insertAdjacentElement('beforebegin', durationSlider)
-        inputDurationStop.onchange = (evt) => {
-          const seconds = inputDurationStop.value / 1000
-          this._MiniMap.then((minimap) => {
-            minimap.redrawOverlays()
-          })
-          gotoAndPlay(seconds)
-        }
-
-        this.createSlider(
-          durationSlider,
-          [inputDurationStart, inputDurationStop],
-          (value) => {},
-          [+inputDurationStart.value, +inputDurationStop.value],
-          {
-            min: 0,
-            max: this._VideoPlayer.duration * 1000,
-          },
-          {
-            to: function (value) {
-              return parseInt(value)
-            },
-            from: function (value) {
-              return parseInt(value)
-            },
-          },
-        )
-
-        const gotoAndPlay = (seconds) => {
-          // Isn't guaranteed to work:
-          // https://github.com/sampotts/plyr/issues/208#issuecomment-400539990
-          this._VideoPlayer.currentTime = parseFloat(seconds)
-        }
-
-        // Fade Effect selector:
-
-        const inputFadeInMillis = item.querySelector('input[name$="/fadeIn"]')
-        const inputFadeOutMillis = item.querySelector('input[name$="/fadeOut"]')
-
-        const updateFadeEffect = (millis) => {
-          inputFadeInMillis.value = millis
-          inputFadeOutMillis.value = millis
-          layer.style.setProperty('--transitionDuration-millis', `${millis}ms`)
-        }
-
-        const inputFadeNone = create('input', {
-          type: 'radio',
-          name: `effect-for-${id}`,
-          className: 'radio-button',
-          value: 0,
-          onchange: (event) => {
-            updateFadeEffect(0)
-          },
-        })
-
-        const inputFadeFast = create('input', {
-          type: 'radio',
-          name: `effect-for-${id}`,
-          className: 'radio-button',
-          value: 350,
-          onchange: (event) => {
-            updateFadeEffect(350)
-          },
-        })
-
-        const inputFadeSlow = create('input', {
-          type: 'radio',
-          name: `effect-for-${id}`,
-          className: 'radio-button',
-          value: 1000,
-          onchange: (event) => {
-            updateFadeEffect(1000)
-          },
-        })
-
-        item
-          .querySelector('.VideoEditor-InputOverlay > [data-field$="file"]')
-          .insertAdjacentElement(
-            'afterend',
-            create('div', { className: 'CIG-row', visible: true }, [
-              create('div', { className: 'CIG-label' }, 'Position'),
-              layoutParent,
-            ]),
-          )
-
-        item
-          .querySelector('.VideoEditor-InputOverlay > [data-field$="opacity"]')
-          .insertAdjacentElement(
-            'afterend',
-            create('div', { className: 'CIG-row scale', visible: true }, [
-              create('div', { className: 'CIG-label' }, 'Scale'),
-              create('div', { className: 'CIG-small' }, scaleSlider),
-            ]),
-          )
-
-        item
-          .querySelector('.VideoEditor-InputOverlay > [data-field$="xPercent"]')
-          .insertAdjacentElement(
-            'beforebegin',
-            create('div', { className: 'CIG-row', visible: true }, [
-              create('div', { className: 'CIG-label' }, 'Duration'),
-              create(
-                'div',
-                {
-                  className: 'CIG-small',
-                  style: 'position:relative',
-                },
-                [inputDurationStart, durationSlider],
-              ),
-            ]),
-          )
-
-        item
-          .querySelector(
-            '.VideoEditor-InputOverlay > [data-field$="widthPercent"]',
-          )
-          .insertAdjacentElement(
-            'beforebegin',
-            create('div', { className: 'CIG-row', visible: true }, [
-              create('div', { className: 'CIG-label' }, 'Fade Effect'),
-              create(
-                'div',
-                { className: 'CIG-small VideoOverlay-fadeEffect-group' },
-                [
-                  create(
-                    'label',
-                    {
-                      for: inputFadeNone.id,
-                      className: 'radio-button-click-target',
-                    },
-                    inputFadeNone,
-                    'None',
-                  ),
-
-                  create(
-                    'label',
-                    {
-                      for: inputFadeFast.id,
-                      className: 'radio-button-click-target',
-                    },
-                    inputFadeFast,
-                    'Brief',
-                  ),
-
-                  create(
-                    'label',
-                    {
-                      for: inputFadeSlow.id,
-                      className: 'radio-button-click-target',
-                    },
-                    inputFadeSlow,
-                    'Gradual',
-                  ),
-                ],
-              ),
-            ]),
-          )
-
-        const getInputValues = () => {
-          return [
-            item.querySelector('input[name$="/opacity"]'),
-            item.querySelector('input[name$="/xPercent"]'),
-            item.querySelector('input[name$="/yPercent"]'),
-            item.querySelector('input[name$="/widthPercent"]'),
-            item.querySelector('input[name$="/heightPercent"]'),
-            item.querySelector('textarea[name$="/startTime"]'),
-            item.querySelector('input[name$="/duration"]'),
-            item.querySelector('input[name$="/fadeIn"]'),
-            item.querySelector('input[name$="/fadeOut"]'),
-          ].reduce((accum, val) => {
-            const propname = val.name.substring(val.name.lastIndexOf('/') + 1)
-            Object.assign(accum, {
-              [propname]: val.type === 'checkbox' ? val.checked : val.value,
-            })
-            return accum
-          }, {})
-        }
-
-        const applyAllEdits = (data) => {
-          const {
-            opacity,
-            xPercent,
-            yPercent,
-            widthPercent,
-            heightPercent,
-            startTime,
-            duration,
-            fadeIn,
-          } = { ...data }
-
-          if (opacity !== '') {
-            opacitySlider.noUiSlider.set(opacity)
-          }
-
-          if (xPercent !== '' && yPercent !== '') {
-            // Convert to pixels using the top-left of the image as the 0,0 coordinate.
-            let x = nativeVideoWidth * (xPercent / 100)
-            let y = nativeVideoHeight * (yPercent / 100)
-
-            x = Math.sign(x) === -1 ? 0 : x || 0
-            y = Math.sign(y) === -1 ? 0 : y || 0
-
-            updatePosition(x, y)
-            selectLayout(`${xPercent},${yPercent}`)
-          }
-
-          if (widthPercent !== '' && heightPercent !== '') {
-            scaleSlider.noUiSlider.set(widthPercent)
-          } else {
-            scaleSlider.noUiSlider.set(50)
-          }
-
-          const startSeconds =
-            startTime !== '' ? this.SMPTEToSeconds(startTime) : 0
-          const durationStart = startTime !== '' ? startSeconds * 1000 : 0
-          const durationStop =
-            duration || parseFloat(this._VideoPlayer.duration * 1000)
-
-          durationSlider.noUiSlider.set([+durationStart, +durationStop])
-
-          const fadeValue = fadeIn
-          if (fadeValue !== '') {
-            const matchedFadeInput = item.querySelector(
-              `input[name="effect-for-${id}"][value="${fadeValue}"]`,
-            )
-
-            if (matchedFadeInput) {
-              matchedFadeInput.checked = true
-              updateFadeEffect(fadeValue)
-            }
-          }
-
-          show()
-        }
-
-        const hide = () => {
-          layer.classList.add('is-hidden')
-          layer.style.opacity = 0
-        }
-        const show = () => {
-          layer.classList.remove('is-hidden')
-          layer.style.opacity = opacitySlider.noUiSlider.get() / 100
-        }
-
-        const getStartSeconds = () => inputDurationStart.value / 1000
-        const getStopSeconds = () => inputDurationStop.value / 1000
-
-        applyAllEdits(getInputValues())
-        _hideUnusedInputs()
-
-        this._MiniMap.then((minimap) => {
-          minimap.redrawOverlays()
-        })
-
-        resolve({
-          item,
-          hide,
-          show,
-          getStartSeconds,
-          getStopSeconds,
-          remove,
-        })
-      }).catch((err) => {
-        console.warn(`Overlay failed to initialize due to: \n${err}`)
-      })
-    }
-
-    onFind(sourceEl, '.RCIG-list', (list) => {
-      // Respond to overlay objects being re-ordered.
-      const onSourceOrderChanged = (mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.addedNodes.length) {
-            const CIG = mutation.addedNodes[0].querySelector('.CIG')
-            if (CIG) {
-              // sync the stacking order of all overlay items.
-              CIG.closest('ol').childNodes.forEach(async (item, index) => {
-                const key = await _getOverlayKey(item)
-                _changeOverlayOrder(key, index)
-                // Redraw the minimap each time an Overlay is found.
-                this._MiniMap.then((minimap) => {
-                  minimap.redrawOverlays()
-                })
-              })
-            }
-          }
-        })
-      }
-      const observer = new MutationObserver(onSourceOrderChanged)
-      observer.observe(list, {
-        attributes: false,
-        childList: true,
-      })
-    })
-
-    // React to the addition of a file preview node.
-    // Returns an Object with:
-    // - key: The unique data-name of the file element
-    // - element: The image element
-    const _getImage = (item) => {
-      return new Promise((resolve, reject) => {
-        onFind(item, '.filePreview', (filePreview) => {
-          if (filePreview) {
-            // setup an inner-observer to determine when the file preview image is rendered.
-            const previewObserver = new MutationObserver((mutations) => {
-              mutations.some((mutation) => {
-                if (
-                  mutation.target.classList.contains('is-imageEditorLoaded')
-                ) {
-                  previewObserver.disconnect()
-                  const element = filePreview.querySelector('img.cropper-hide')
-                  if (!element) return
-
-                  const id = filePreview.parentElement
-                    .getAttribute('data-name')
-                    .split('/')[0]
-
-                  element.setAttribute('class', 'VideoOverlay-image')
-                  element.setAttribute(
-                    'style',
-                    `filter:${element.style.filter}`,
-                  )
-                  element.setAttribute('data-name-ref', id)
-                  element
-                    .closest('.VideoEditor-InputOverlay')
-                    .classList.add('is-overlay-ready')
-
-                  resolve({
-                    id,
-                    element,
-                  })
-                }
-              })
-            })
-            previewObserver.observe(filePreview, {
-              attributeFilter: ['class'],
-            })
-            return true
-          }
-        })
-      })
-    }
-
-    // Returns a Promise that resolves the key value.
-    const _getOverlayKey = async (overlay) => {
-      return new Promise((resolve, reject) => {
-        onFind(overlay, '.filePreview', (preview) => {
-          const key = preview.parentElement
-            .getAttribute('data-name')
-            .split('/')[0]
-          resolve(key)
-        })
-      })
-    }
-
-    // Returns the CIG element's numeric child index.
-    const _getSourceIndexByOverlayCIG = (cig) => {
-      const rcig = cig.closest('li')
-      return [...rcig.parentNode.children].indexOf(rcig)
-    }
-
-    // Wait for the overlay object's preview image to be ready then initialize the overlay layer. (step #2)
-    onFind(sourceEl, '.RCIG-list .VideoEditor-InputOverlay', (item) => {
-      _initOverlay(item)
-        .then(async (overlay) => {
-          const key = await _getOverlayKey(overlay.item)
-          Overlays.set(key, overlay)
-          _changeOverlayOrder(key, _getSourceIndexByOverlayCIG(overlay.item))
-          // Redraw the minimap each time an Overlay is found.
-          this._MiniMap.then((minimap) => {
-            minimap.redrawOverlays()
-          })
-        })
-        .catch((err) => {
-          console.warn(`Failed to initialize Overlay due to: \n${err}`)
-        })
-    })
-
-    onFind(sourceEl, '.RCIG-item.is-removing', async (item) => {
-      // remove this from the Map of Overlays using it's key
-      const key = await _getOverlayKey(item)
-      const overlay = Overlays.get(key)
-      overlay.remove()
-      Overlays.delete(key)
-    })
-
-    // Preload the overlay objects (step #1).
-    onFind(sourceEl, '.RCIG-list > li:not(.is-removing)', (item) => {
-      // collapsed items lazy-load their contents so let's open them to load the preview images.
-      if (item.classList.contains('is-collapsed')) {
-        const evt = new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-        })
-
-        const title = item.querySelector('.RCIG-title')
-        // click on the title to trigger the lazy-load.
-        title.dispatchEvent(evt)
-        // click again to collapse the expanded item so no one notices what was done :)
-        title.dispatchEvent(evt)
-      }
-    })
-
-    const getOverlays = () => {
-      // Finds each matching CIG Overlay object that isn't in a "removing" state by key.
-      // This guarantees that the returned Overlay elements are in the same order as the DOM.
-      let overlayItems = []
-      sourceEl
-        .querySelectorAll(
-          '.RCIG-list .RCIG-item:not(.is-removing) .VideoEditor-InputOverlay.is-overlay-ready',
-        )
-        .forEach((item) => {
-          const Overlay = Overlays.get(item.getAttribute('data-object-id'))
-          if (Overlay) {
-            overlayItems.push(Overlay)
-          }
-        })
-      return overlayItems
-    }
-
-    const reset = () => {
-      // Removes any overlay CIGs that have been added to this video.
-      const overlayRemoveButtons = sourceEl.querySelectorAll(
-        '.RCIG-list > li:not(.is-removing) .RCIG-remove',
-      )
-
-      overlayRemoveButtons.forEach((button) => {
-        button.click()
-      })
-    }
-
-    return {
-      element,
-      handleUpdate,
-      getOverlays,
-      reset,
-    }
-  }
-
-  _createVideoPlayer(videoEl) {
-    const clone = videoEl.cloneNode(true)
-    this.originEl.appendChild(clone)
-
-    // Instantiate the Plyr UI.
-    return new Promise((resolve, reject) => {
-      this._VideoPlayer = new Plyr(clone, {
-        hideControls: false,
-        invertTime: false,
-        controls: ['play', 'progress', 'current-time', 'mute', 'volume'],
-      })
-
-      this._VideoPlayer.on('ready', (event) => {
-        resolve()
-      })
-    })
-  }
-
-  _updateVideoState(state) {
-    const stateEl = document.querySelector('.Page-content .content-edit')
-    if (this._currentVideoState) {
-      stateEl.classList.remove(this._currentVideoState)
-    }
-    stateEl.classList.add(state)
-    this._currentVideoState = state
-  }
-}
-
-let Editor = null
-
-const destroyEditor = (targetEl) => {
-  const stateEl = document.querySelector('.Page-content .content-edit')
-  stateEl.classList.remove(Editor.getState())
-
-  Editor._VideoPlayer.destroy()
-
-  const referenceVideos = targetEl.querySelectorAll('video')
-  referenceVideos.forEach((video) => video.remove())
-
-  const stageVideo = Editor.rootEl.querySelector('.VideoEditor-stage video')
-  stageVideo.remove()
-}
-
-const observeOnVideoSourceChanged = (target) => {
-  const row = closest(target, '.CIG-row')
-  onFind(row, '.fileSelector', (fileSelector) => {
-    const select = fileSelector.querySelector('select')
-    if (select) {
-      select.addEventListener('change', (e) => {
-        if (Editor) {
-          destroyEditor(target)
-          Editor._initVideo().then(async (sourceVideo) => {
-            const target = Editor.rootEl.querySelector(
-              '.VideoEditor-stage-main',
-            )
-            Editor._updateVideoState(STATE_VIDEO_LOADED)
-            await Editor._createVideoPlayer(sourceVideo)
-            target.appendChild(Editor._VideoPlayer.elements.container)
-
-            if (Editor._ColorUI) Editor._ColorUI.reset()
-            if (Editor._OverlayUI) Editor._OverlayUI.reset()
-            if (Editor._ClippingUI) Editor._ClippingUI.reset()
-
-            Editor._MiniMap.then((minimap) => {
-              minimap.reset()
-              minimap.setVideo(sourceVideo)
-            })
-
-            Editor.resetFilmstrip()
-            Editor.createFilmstripPlaceholder(sourceVideo)
-
-            await Editor.createFilmstrip(
-              sourceVideo,
-              sourceVideo.videoWidth,
-              sourceVideo.videoHeight,
-              sourceVideo.duration,
-            )
-          })
-        }
-      })
-    } else {
-      console.warn(`Missing <select> in .fileSelector element!`)
-    }
-  })
-}
-
-onFind('.VideoEditor', (target) => {
-  Editor = new VideoEditor(target)
-  observeOnVideoSourceChanged(target)
-})