collavre 0.20.3 → 0.22.0

data/app/javascript/controllers/comments/popup_controller.js

@@ -289,6 +289,15 @@ export default class extends Controller {
 
   async notifyChildControllers({ creativeId, canComment, highlightId }) {
     this.topicsController?.clearOverrideTopicId()
+    // Drop the previous creative's topic selection from the form controller
+    // synchronously, BEFORE topics loadTopics() dispatches `comments--topics:change`
+    // (which repopulates these via handleTopicChange). Doing it later — e.g. in
+    // formController.onPopupOpened, which runs after the topics await — would
+    // erase the topic that restoreSelection() just restored from the server.
+    if (this.formController) {
+      this.formController.currentTopicId = ''
+      this.formController._mainTopicId = null
+    }
     // Pre-set creativeId on list controller BEFORE loading topics.
     // Topics loading triggers a change event that list controller handles.
     // Without this, list controller still holds the previous creative's ID

data/app/javascript/controllers/comments/presence_controller.js

@@ -7,7 +7,7 @@ const TYPING_TIMEOUT = 3000
 const AGENT_STATUS_TIMEOUT = 10000 // Safety timeout for agent_status (heartbeat expected every 3s)
 
 export default class extends Controller {
-  static targets = ['participants', 'typingIndicator', 'textarea', 'privateCheckbox']
+  static targets = ['participants', 'typingIndicator', 'textarea', 'privateCheckbox', 'channelChips', 'scrollRow']
 
   connect() {
     this.creativeId = null
@@ -24,11 +24,13 @@ export default class extends Controller {
     this.handleInput = this.handleInput.bind(this)
     this.handleFocus = this.handleFocus.bind(this)
     this.handleBlur = this.handleBlur.bind(this)
+    this.handleTopicChange = this.handleTopicChange.bind(this)
 
     this.textareaTarget.addEventListener('input', this.handleInput)
     this.textareaTarget.addEventListener('focus', this.handleFocus)
     this.textareaTarget.addEventListener('blur', this.handleBlur)
     this.privateCheckboxTarget?.addEventListener('change', () => this.stoppedTyping())
+    this.element.addEventListener('comments--topics:change', this.handleTopicChange)
   }
 
   disconnect() {
@@ -36,6 +38,16 @@ export default class extends Controller {
     this.textareaTarget.removeEventListener('input', this.handleInput)
     this.textareaTarget.removeEventListener('focus', this.handleFocus)
     this.textareaTarget.removeEventListener('blur', this.handleBlur)
+    this.element.removeEventListener('comments--topics:change', this.handleTopicChange)
+  }
+
+  handleTopicChange(event) {
+    const topicId = event.detail?.topicId
+    if (topicId) {
+      this.refreshChannelChips(topicId)
+    } else {
+      this.clearChannelChips()
+    }
   }
 
   get listController() {
@@ -56,6 +68,23 @@ export default class extends Controller {
     this.subscribe()
     this.renderParticipants([])
     this.renderTypingIndicator()
+    // Bootstrap chips for the topic that is already active when the popup opens.
+    // Without this, chips only appear after a `topics:change` event fires
+    // (i.e. a topic switch) or after a webhook arrives — leaving the user
+    // unable to detach existing channels until something else triggers a paint.
+    this.bootstrapChannelChips()
+  }
+
+  bootstrapChannelChips() {
+    const topicsCtrl = this.application.getControllerForElementAndIdentifier(
+      this.element, 'comments--topics'
+    )
+    const topicId = topicsCtrl?.currentTopicId
+    if (topicId) {
+      this.refreshChannelChips(topicId)
+    } else {
+      this.clearChannelChips()
+    }
   }
 
   onPopupClosed() {
@@ -167,8 +196,14 @@ export default class extends Controller {
     }
     if (data.typing) {
       const { id, name } = data.typing
+      const isNewTyper = !(id in this.typingUsers)
+      // The user always wants to see their OWN typing indicator the moment it
+      // appears — they just started typing. Stick-to-end (which pauses while the
+      // user is scrolled back looking at badges) must not suppress that, so force
+      // the scroll for the local user's first typing frame.
+      const isSelf = String(id) === String(this.currentUserId)
       this.typingUsers[id] = name
-      this.renderTypingIndicator()
+      this.renderTypingIndicator({ newItem: isNewTyper, force: isNewTyper && isSelf })
       clearTimeout(this.typingTimers[id])
       this.typingTimers[id] = setTimeout(() => {
         delete this.typingUsers[id]
@@ -201,12 +236,16 @@ export default class extends Controller {
       this.loadParticipants({ closeOnForbidden: shareChange.has_access === false })
       return
     }
+    if (data.channel_chips) {
+      this.refreshChannelChips(data.channel_chips.topic_id)
+    }
     if (data.agent_status) {
       const { id, name, status, task_id, creative_id: agentCreativeId } = data.agent_status
       // Only show typing indicator if agent is working on this specific creative
       if (agentCreativeId && String(agentCreativeId) !== String(this.creativeId)) {
         return
       }
+      const isNewAgent = (status === 'thinking' || status === 'streaming') && !(id in this.typingUsers)
       if (status === 'thinking' || status === 'streaming') {
         this.typingUsers[id] = name
         if (!this.activeAgentTasks) this.activeAgentTasks = {}
@@ -230,7 +269,7 @@ export default class extends Controller {
         }
       }
       this.syncGlobalAgentTasks()
-      this.renderTypingIndicator()
+      this.renderTypingIndicator({ newItem: isNewAgent })
     }
   }
 
@@ -314,8 +353,16 @@ export default class extends Controller {
   }
 
 
-  renderTypingIndicator() {
+  renderTypingIndicator({ newItem = false, force = false } = {}) {
     if (!this.hasTypingIndicatorTarget) return
+
+    // Capture stick-to-end BEFORE mutating the DOM: only auto-scroll a newly
+    // added item into view when the user was already parked at the right edge,
+    // so we never yank them away from a chip they scrolled back to look at.
+    // `force` overrides that guard for cases where the scroll is always wanted
+    // (e.g. the local user's own typing indicator first appearing).
+    const stickToEnd = force || (newItem && this.isScrollRowAtEnd())
+
     this.typingIndicatorTarget.innerHTML = ''
 
     if (this.manualTypingMessage) {
@@ -381,6 +428,33 @@ export default class extends Controller {
     const text = document.createElement('span')
     text.textContent = `${names.join(', ')} ...`
     this.typingIndicatorTarget.appendChild(text)
+
+    if (stickToEnd) this.scrollRowToEnd()
+  }
+
+  // Distance (px) from the right edge still counted as "at the end". A small
+  // slack absorbs sub-pixel rounding and momentum scroll so stick-to-end stays
+  // engaged when the user is effectively, but not exactly, at the edge.
+  static STICK_TO_END_THRESHOLD = 24
+
+  get scrollRowElement() {
+    return this.hasScrollRowTarget ? this.scrollRowTarget : null
+  }
+
+  // True when the horizontal scroll row is at (or near) its right edge — i.e.
+  // the user is looking at the newest items rather than scrolled back. Returns
+  // true when there is no scroll row or no overflow (nothing to yank away from).
+  isScrollRowAtEnd() {
+    const el = this.scrollRowElement
+    if (!el) return true
+    const threshold = this.constructor.STICK_TO_END_THRESHOLD
+    return el.scrollLeft + el.clientWidth >= el.scrollWidth - threshold
+  }
+
+  scrollRowToEnd() {
+    const el = this.scrollRowElement
+    if (!el) return
+    el.scrollLeft = el.scrollWidth
   }
 
   syncGlobalAgentTasks() {
@@ -417,6 +491,65 @@ export default class extends Controller {
       .catch((err) => console.warn('[presence] cancel agent task failed:', err))
   }
 
+  clearChannelChips() {
+    const target = this.hasChannelChipsTarget ? this.channelChipsTarget : null
+    if (!target) return
+    target.innerHTML = ''
+    delete target.dataset.topicId
+  }
+
+  refreshChannelChips(topicId) {
+    const target = this.hasChannelChipsTarget ? this.channelChipsTarget : null
+    if (!target) return
+    if (!this.creativeId) return
+    if (!topicId) {
+      this.clearChannelChips()
+      return
+    }
+
+    // Source of truth for "what the user is looking at" is the topics
+    // controller's currentTopicId, NOT the chip container's data-topic-id:
+    // - On initial popup open the container is empty (no data-topic-id),
+    //   so a stray broadcast for any topic in the same creative used to
+    //   paint chips for the wrong topic.
+    // - After the user switches topics the container's data-topic-id is
+    //   stale until something repaints it, blocking legit updates.
+    const topicsCtrl = this.application.getControllerForElementAndIdentifier(
+      this.element, 'comments--topics'
+    )
+    const activeTopicId = topicsCtrl?.currentTopicId || ''
+    if (String(activeTopicId) !== String(topicId)) return
+
+    fetch(`/creatives/${this.creativeId}/topics/${topicId}/channel_chips`, {
+      headers: { Accept: 'text/html' },
+      credentials: 'same-origin',
+    })
+      .then((r) => (r.ok ? r.text() : null))
+      .then((html) => {
+        if (!html) return
+        // A newly attached channel (e.g. a fresh PR/Preview badge) is a "new
+        // item" in the scroll row. Count chips before/after and scroll the new
+        // one into view, but only when the user was already at the right edge.
+        const row = this.scrollRowElement
+        const prevChipCount = row ? row.querySelectorAll('.channel-chip').length : 0
+        const wasAtEnd = this.isScrollRowAtEnd()
+        target.outerHTML = html
+        const newChipCount = row ? row.querySelectorAll('.channel-chip').length : 0
+        if (wasAtEnd && newChipCount > prevChipCount) this.scrollRowToEnd()
+      })
+      .catch((err) => console.warn('[presence] refresh channel chips failed:', err))
+  }
+
+  detachChannel(event) {
+    const btn = event.currentTarget
+    const id = btn.dataset.channelId
+    if (!id) return
+    csrfFetch(`/channels/${id}`, {
+      method: 'DELETE',
+      headers: { Accept: 'application/json' },
+    }).catch((err) => console.warn('[presence] detach channel failed:', err))
+  }
+
   clearTypingTimers() {
     Object.values(this.typingTimers).forEach((timer) => clearTimeout(timer))
     this.typingTimers = {}

data/app/javascript/controllers/comments/topics_controller.js

@@ -34,6 +34,15 @@ export default class extends Controller {
 
     onPopupOpened({ creativeId }) {
         this.creativeIdValue = creativeId
+        // Clear stale cached state from the previous creative — otherwise
+        // chat-context autofill (command_menu) reads stale values during the
+        // window between popup switch and the new topics fetch completing.
+        // form_controller's currentTopicId is cleared upstream in
+        // popup_controller.notifyChildControllers; here we clear our own
+        // mainTopicId (read directly as the autofill fallback) and the cached
+        // effective_creative_id. loadTopics() repopulates both.
+        delete this.element.dataset.effectiveCreativeId
+        this.mainTopicId = null
         this.subscribe()
         return this.loadTopics()
     }
@@ -88,6 +97,12 @@ export default class extends Controller {
                 this.isInbox = !!data.is_inbox
                 this.systemTopicId = data.system_topic_id ? String(data.system_topic_id) : null
                 this.mainTopicId = data.main_topic_id ? String(data.main_topic_id) : null
+                // Expose effective origin id so chat-context autofill (slash commands)
+                // and any other consumer can target the same creative the server uses
+                // (linked creatives resolve params[:creative_id] through effective_origin).
+                if (data.effective_creative_id) {
+                    this.element.dataset.effectiveCreativeId = String(data.effective_creative_id)
+                }
 
                 // Migrate localStorage to server if server has no value
                 this.migrateLocalStorage()

data/app/javascript/controllers/creatives/__tests__/sync_controller.test.js

@@ -0,0 +1,89 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const subscribeToCreatives = jest.fn()
+
+jest.unstable_mockModule('../../../services/creatives_channel', () => ({
+  subscribeToCreatives,
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const SyncController = (await import('../sync_controller')).default
+
+describe('CreativesSyncController subscribe timing', () => {
+  let application
+  let container
+
+  beforeEach(() => {
+    subscribeToCreatives.mockReset()
+    subscribeToCreatives.mockReturnValue({
+      cleanup: jest.fn(),
+      sendEditing: jest.fn(),
+      sendStoppedEditing: jest.fn(),
+    })
+
+    container = document.createElement('div')
+    container.id = 'sync-root'
+    container.setAttribute('data-controller', 'creatives--sync')
+    container.setAttribute('data-creatives--sync-root-id-value', '991')
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('creatives--sync', SyncController)
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ''
+  })
+
+  test('does NOT subscribe immediately when rootIdValue > 0 — waits for tree to load', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(subscribeToCreatives).not.toHaveBeenCalled()
+  })
+
+  test('subscribes after creative-tree:updated event fires', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(subscribeToCreatives).not.toHaveBeenCalled()
+
+    container.dispatchEvent(
+      new CustomEvent('creative-tree:updated', { bubbles: true }),
+    )
+
+    expect(subscribeToCreatives).toHaveBeenCalledTimes(1)
+    expect(subscribeToCreatives).toHaveBeenCalledWith(991, expect.any(Object))
+  })
+
+  test('subscribes only once even if creative-tree:updated fires multiple times', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    container.dispatchEvent(new CustomEvent('creative-tree:updated', { bubbles: true }))
+    container.dispatchEvent(new CustomEvent('creative-tree:updated', { bubbles: true }))
+    container.dispatchEvent(new CustomEvent('creative-tree:updated', { bubbles: true }))
+
+    expect(subscribeToCreatives).toHaveBeenCalledTimes(1)
+  })
+
+  test('subscribes immediately when tree is already loaded (Turbo cache restore)', async () => {
+    // Simulate Turbo restoring a cached tree page: data-loaded is already set
+    // before sync_controller connects, so tree_controller skips load() and
+    // never dispatches creative-tree:updated.
+    const cached = document.createElement('div')
+    cached.id = 'sync-cached'
+    cached.setAttribute('data-controller', 'creatives--cached-sync')
+    cached.setAttribute('data-creatives--cached-sync-root-id-value', '991')
+    cached.setAttribute('data-loaded', 'true')
+    cached.innerHTML = '<creative-tree-row creative-id="1"></creative-tree-row>'
+    document.body.appendChild(cached)
+
+    application.register('creatives--cached-sync', SyncController)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(subscribeToCreatives).toHaveBeenCalledTimes(1)
+    expect(subscribeToCreatives).toHaveBeenCalledWith(991, expect.any(Object))
+  })
+})

data/app/javascript/controllers/creatives/__tests__/tree_controller.test.js

@@ -0,0 +1,120 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+jest.unstable_mockModule('../../../creatives/tree_renderer', () => ({
+  renderCreativeTree: jest.fn(),
+  dispatchCreativeTreeUpdated: jest.fn(),
+  applyRowProperties: jest.fn(),
+}))
+
+jest.unstable_mockModule('../../../utils/emoji_parser', () => ({
+  parseEmojis: jest.fn(() => ['✨']),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TreeController = (await import('../tree_controller')).default
+
+const TRANSIENT_RETRY_DELAYS = [200, 600]
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const collectRetryDelays = (spy) =>
+  spy.mock.calls
+    .map((args) => args[1])
+    .filter((delay) => TRANSIENT_RETRY_DELAYS.includes(delay))
+
+const installController = () => {
+  const container = document.createElement('div')
+  container.setAttribute('data-controller', 'creatives--tree')
+  container.setAttribute('data-creatives--tree-url-value', '/creatives?format=json&id=991')
+  document.body.appendChild(container)
+
+  const application = Application.start()
+  application.register('creatives--tree', TreeController)
+
+  return { container, application }
+}
+
+describe('CreativesTreeController retry on transient network errors', () => {
+  let originalFetch
+  let setTimeoutSpy
+
+  beforeEach(() => {
+    originalFetch = global.fetch
+    setTimeoutSpy = jest.spyOn(global, 'setTimeout')
+  })
+
+  afterEach(() => {
+    setTimeoutSpy.mockRestore()
+    global.fetch = originalFetch
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('schedules 200ms then 600ms backoff retry on TypeError "Failed to fetch"', async () => {
+    global.fetch = jest
+      .fn()
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockRejectedValueOnce(new TypeError('Failed to fetch'))
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: [] }),
+      })
+
+    const { application } = installController()
+    // Allow time for the 200ms + 600ms retries to fire
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual(TRANSIENT_RETRY_DELAYS)
+
+    application.stop()
+  })
+
+  test('does NOT schedule retry on HTTP error responses', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      json: async () => ({}),
+    })
+
+    const { application } = installController()
+    await flush()
+    await flush()
+    await flush()
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual([])
+
+    application.stop()
+  })
+
+  test('does NOT schedule retry on AbortError', async () => {
+    const abortErr = new Error('aborted')
+    abortErr.name = 'AbortError'
+    global.fetch = jest.fn().mockRejectedValue(abortErr)
+
+    const { application } = installController()
+    await flush()
+    await flush()
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual([])
+
+    application.stop()
+  })
+
+  test('gives up after exactly 2 retries on persistent transient errors', async () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    const { application } = installController()
+    // Allow time for both retries to complete (200 + 600 = 800ms)
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    expect(collectRetryDelays(setTimeoutSpy)).toEqual(TRANSIENT_RETRY_DELAYS)
+
+    application.stop()
+  })
+})

data/app/javascript/controllers/creatives/sync_controller.js

@@ -24,20 +24,41 @@ export default class extends Controller {
       }
     }
 
-    document.addEventListener('creative-editing:start', this.handleEditStart)
-    document.addEventListener('creative-editing:stop', this.handleEditStop)
+    // Defer ActionCable subscribe until tree finishes loading. Opening the
+    // WebSocket while the tree fetch is in flight triggers ERR_NETWORK_CHANGED
+    // in Chromium because the browser tears down the in-flight HTTP connection.
+    // Exception: Turbo cache restores leave data-loaded="true" so tree_controller
+    // skips load() and never dispatches creative-tree:updated — subscribe now.
+    const subscribeForRoot = () => {
+      if (this.rootIdValue > 0) {
+        this.subscribe()
+      } else {
+        this.inferAndSubscribe()
+      }
+    }
 
-    if (this.rootIdValue > 0) {
-      this.subscribe()
+    if (this.element.dataset.loaded === 'true') {
+      subscribeForRoot()
     } else {
-      // Top-level /creatives page — try to infer root from tree rows
-      this.inferAndSubscribe()
+      this._handleTreeUpdated = () => {
+        this.element.removeEventListener('creative-tree:updated', this._handleTreeUpdated)
+        this._handleTreeUpdated = null
+        subscribeForRoot()
+      }
+      this.element.addEventListener('creative-tree:updated', this._handleTreeUpdated)
     }
+
+    document.addEventListener('creative-editing:start', this.handleEditStart)
+    document.addEventListener('creative-editing:stop', this.handleEditStop)
   }
 
   disconnect() {
     document.removeEventListener('creative-editing:start', this.handleEditStart)
     document.removeEventListener('creative-editing:stop', this.handleEditStop)
+    if (this._handleTreeUpdated) {
+      this.element.removeEventListener('creative-tree:updated', this._handleTreeUpdated)
+      this._handleTreeUpdated = null
+    }
 
     if (this.subscription) {
       this.subscription.cleanup()
@@ -50,9 +71,9 @@ export default class extends Controller {
       this.subscription.cleanup()
       this.subscription = null
     }
-    if (this.rootIdValue > 0) {
-      this.subscribe()
-    }
+    // Skip re-subscribing here — connect() defers the first subscribe until
+    // creative-tree:updated fires so the WebSocket handshake doesn't race
+    // the tree's HTTP fetch.
   }
 
   inferAndSubscribe() {

data/app/javascript/controllers/creatives/tree_controller.js

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 import { parseEmojis } from '../../utils/emoji_parser'
 
+const TREE_RETRY_DELAYS_MS = [200, 600]
+
 export default class extends Controller {
   static values = {
     url: String,
@@ -49,6 +51,10 @@ export default class extends Controller {
       this.abortController.abort()
       this.abortController = null
     }
+    if (this._retryTimer) {
+      clearTimeout(this._retryTimer)
+      this._retryTimer = null
+    }
     window.removeEventListener('resize', this.handleResize)
     this.element.removeEventListener('creative-tree:updated', this.handleTreeUpdated)
     document.removeEventListener('creative-editing:start', this._handleEditStart)
@@ -138,8 +144,12 @@ export default class extends Controller {
       this.abortController.abort()
     }
     this.abortController = new AbortController()
+    this._retryCount = 0
     this.showLoadingIndicator()
+    this._fetchTree()
+  }
 
+  _fetchTree() {
     fetch(this.urlValue, {
       headers: { Accept: 'application/json' },
       signal: this.abortController.signal,
@@ -154,12 +164,25 @@ export default class extends Controller {
       })
       .catch((error) => {
         if (error.name === 'AbortError') return
+        // Transient network failures (ERR_NETWORK_CHANGED, offline blips, VPN
+        // toggles) surface as TypeError "Failed to fetch". Retry briefly so a
+        // momentary network event doesn't leave the user with an empty tree.
+        if (this._isTransientNetworkError(error) && this._retryCount < TREE_RETRY_DELAYS_MS.length) {
+          const delay = TREE_RETRY_DELAYS_MS[this._retryCount]
+          this._retryCount += 1
+          this._retryTimer = setTimeout(() => this._fetchTree(), delay)
+          return
+        }
         console.error(error)
         this.hideLoadingIndicator()
         this.showEmptyState()
       })
   }
 
+  _isTransientNetworkError(error) {
+    return error instanceof TypeError && /fetch|network/i.test(error.message || '')
+  }
+
   renderData(data) {
     const nodes = Array.isArray(data?.creatives) ? data.creatives : []
 

data/app/javascript/controllers/index.js

@@ -33,6 +33,7 @@ import CommentBadgeController from "./comment_badge_controller"
 import ShareModalController from "./share_modal_controller"
 import ImageLightboxController from "./image_lightbox_controller"
 import SearchPopupController from "./search_popup_controller"
+import LandingVideoController from "./landing_video_controller"
 
 // Export all controllers
 export {
@@ -67,7 +68,8 @@ export {
   ShareModalController,
   ImageLightboxController,
   SearchPopupController,
-  CommentBadgeController
+  CommentBadgeController,
+  LandingVideoController
 }
 
 // Registration function for use with a Stimulus application
@@ -105,4 +107,5 @@ export function registerControllers(application) {
   application.register("image-lightbox", ImageLightboxController)
   application.register("search-popup", SearchPopupController)
   application.register("comment-badge", CommentBadgeController)
+  application.register("landing-video", LandingVideoController)
 }

data/app/javascript/controllers/landing_video_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["video", "progressBar", "progressFill", "toggle", "icon"]
+
+  connect() {
+    this._raf = null
+    this._updateProgress = this._updateProgress.bind(this)
+    this.videoTarget.addEventListener("play", () => this._startProgress())
+    this.videoTarget.addEventListener("pause", () => this._stopProgress())
+    this.videoTarget.addEventListener("ended", () => this._stopProgress())
+    if (!this.videoTarget.paused) this._startProgress()
+  }
+
+  disconnect() {
+    this._stopProgress()
+  }
+
+  togglePlay() {
+    if (this.videoTarget.paused) {
+      this.videoTarget.play()
+      this.iconTarget.textContent = "❚❚"
+    } else {
+      this.videoTarget.pause()
+      this.iconTarget.textContent = "▶"
+    }
+  }
+
+  _startProgress() {
+    this._stopProgress()
+    this._tick()
+  }
+
+  _stopProgress() {
+    if (this._raf) {
+      cancelAnimationFrame(this._raf)
+      this._raf = null
+    }
+  }
+
+  _tick() {
+    this._updateProgress()
+    this._raf = requestAnimationFrame(() => this._tick())
+  }
+
+  _updateProgress() {
+    const v = this.videoTarget
+    if (v.duration) {
+      const pct = (v.currentTime / v.duration) * 100
+      this.progressFillTarget.style.width = `${pct}%`
+    }
+  }
+}