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

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

@@ -0,0 +1,2417 @@
+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)
+})