tiptapify 0.3.5 → 0.4.0

package/src/extensions/components/media/video/index.test.ts

@@ -0,0 +1,154 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { Youtube } from '@tiptap/extension-youtube'
+import Iframe from '@tiptapify/extensions/components/media/iframe'
+import { applyVideoNode, selectedVideoNode, TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
+import { videoProviders } from '@tiptapify/extensions/components/media/video/providers'
+import { VideoFile } from '@tiptapify/extensions/components/media/video/videoFile'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Youtube.configure({ nocookie: true, controls: true }),
+      Iframe,
+      VideoFile,
+      TiptapifyVideo,
+    ],
+  })
+
+  return editor
+}
+
+function selectFirstNode() {
+  editor!.commands.setNodeSelection(0)
+}
+
+const [youtube, vimeo] = videoProviders
+
+describe('video dialog apply', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('finds no video to edit when none is selected', () => {
+    createEditor('<p>Text</p>')
+
+    expect(selectedVideoNode(editor!)).toBeNull()
+  })
+
+  it('does not edit an iframe of another site', () => {
+    createEditor('<iframe src="https://maps.example.com/embed"></iframe>')
+    selectFirstNode()
+
+    expect(selectedVideoNode(editor!)).toBeNull()
+  })
+
+  it('finds the selected Vimeo iframe', () => {
+    createEditor('<iframe src="https://player.vimeo.com/video/123#t=5s" width="640" height="360"></iframe>')
+    selectFirstNode()
+
+    expect(selectedVideoNode(editor!)).toMatchObject({
+      type: 'iframe',
+      attrs: { src: 'https://player.vimeo.com/video/123#t=5s', width: 640, height: 360 },
+    })
+  })
+
+  it('inserts a responsive YouTube video without a size', () => {
+    createEditor('<p></p>')
+
+    applyVideoNode(editor!, youtube.toNode('dQw4w9WgXcQ', 42, { width: null, height: null }), null)
+
+    const html = editor!.getHTML()
+    expect(html).toContain('src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=42&amp;rel=1"')
+    expect(html).not.toContain('width=')
+    expect(html).not.toContain('height=')
+  })
+
+  it('updates the selected video and keeps the attributes the dialog does not know', () => {
+    createEditor('<video src="/a.mp4" controls loop></video>')
+    selectFirstNode()
+    const edited = selectedVideoNode(editor!)
+
+    applyVideoNode(editor!, { type: 'video', attrs: { poster: '/a.jpg', loop: false } }, edited)
+
+    expect(editor!.state.doc.childCount).toBe(1)
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({ src: '/a.mp4', poster: '/a.jpg', controls: true, loop: false })
+  })
+
+  it('replaces the selected video when the provider changes', () => {
+    createEditor('<div data-youtube-video><iframe src="https://www.youtube-nocookie.com/embed/abc"></iframe></div>')
+    selectFirstNode()
+    const edited = selectedVideoNode(editor!)
+
+    expect(edited?.type).toBe('youtube')
+
+    applyVideoNode(editor!, vimeo.toNode('123', 0, { width: null, height: null }), edited)
+
+    expect(editor!.state.doc.childCount).toBe(1)
+    expect(editor!.state.doc.firstChild!.type.name).toBe('iframe')
+    expect(editor!.state.doc.firstChild!.attrs.src).toBe('https://player.vimeo.com/video/123')
+  })
+})
+
+describe('a video block in the editor', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  // A double click on the block (its player does not take clicks while editing) opens the dialog for it
+  function doubleClickNode(pos: number) {
+    const { view } = editor!
+    const node = view.state.doc.nodeAt(pos)!
+
+    return view.someProp('handleDoubleClickOn', handle => handle(view, pos, node, pos, new MouseEvent('dblclick'), true))
+  }
+
+  it.each([
+    ['an uploaded video', '<video src="https://cdn.example.com/a.mp4" controls></video>', 'video'],
+    ['a YouTube video', '<div data-youtube-video><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe></div>', 'youtube'],
+    ['a Vimeo video', '<iframe src="https://player.vimeo.com/video/76979871"></iframe>', 'iframe'],
+  ])('%s is selected and opens the video dialog on double click', (_, content, type) => {
+    createEditor(content)
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-tiptapifyVideo', listener)
+
+    const handled = doubleClickNode(0)
+
+    window.removeEventListener('tiptapify-show-tiptapifyVideo', listener)
+    expect(handled).toBe(true)
+    expect(editor!.state.selection.from).toBe(0)
+    expect(listener).toHaveBeenCalledOnce()
+    expect(listener.mock.calls[0][0].detail.node.type).toBe(type)
+  })
+
+  it('leaves other iframes to the embed dialog', () => {
+    createEditor('<iframe src="https://maps.example.com/embed"></iframe>')
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-tiptapifyVideo', listener)
+
+    doubleClickNode(0)
+
+    window.removeEventListener('tiptapify-show-tiptapifyVideo', listener)
+    expect(listener).not.toHaveBeenCalled()
+  })
+
+  it('wraps the player of an uploaded video in a block that takes the clicks', () => {
+    createEditor('<video src="https://cdn.example.com/a.mp4" controls></video>')
+
+    const block = editor!.view.nodeDOM(0) as HTMLElement
+    expect(block.classList.contains('tiptapify-video')).toBe(true)
+    expect(block.querySelector('video')!.getAttribute('src')).toBe('https://cdn.example.com/a.mp4')
+  })
+})

package/src/extensions/components/media/video/index.ts

@@ -1,4 +1,7 @@
-import { Extension } from '@tiptap/core'
+import { Editor, Extension } from '@tiptap/core'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state'
+import { parseVideoUrl, VideoNodeContent } from '@tiptapify/extensions/components/media/video/providers'
 
 const name: string = 'tiptapifyVideo'
 
@@ -10,6 +13,44 @@ declare module '@tiptap/core' {
   }
 }
 
+/**
+ * The selected node the video dialog edits: a youtube or `video` node, or an iframe with
+ * a provider's player (Vimeo); null when none is selected.
+ */
+export function selectedVideoNode(editor: Editor): VideoNodeContent | null {
+  const { selection } = editor.state
+
+  if (!(selection instanceof NodeSelection)) {
+    return null
+  }
+
+  const { type, attrs } = selection.node
+
+  return isVideoNode(selection.node) ? { type: type.name, attrs: { ...attrs } } : null
+}
+
+function isVideoNode({ type, attrs }: ProseMirrorNode): boolean {
+  return type.name === 'youtube' || type.name === 'video' || parseVideoUrl(attrs.src ?? '')?.provider.nodeType === type.name
+}
+
+/**
+ * Inserts the video node, or updates the selected one being edited. The edited node keeps the
+ * attributes the dialog does not know about; a node of another type (another provider) replaces it.
+ */
+export function applyVideoNode(editor: Editor, content: VideoNodeContent, edited: VideoNodeContent | null): boolean {
+  if (edited?.type === content.type) {
+    return editor.chain().focus().updateAttributes(content.type, content.attrs).run()
+  }
+
+  if (edited) {
+    const { from, to } = editor.state.selection
+
+    return editor.chain().focus().insertContentAt({ from, to }, content).run()
+  }
+
+  return editor.chain().focus().insertContent(content).run()
+}
+
 export const TiptapifyVideo = Extension.create({
   name,
 
@@ -18,9 +59,9 @@ export const TiptapifyVideo = Extension.create({
       showTiptapifyVideo: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            video: editor.getAttributes('video'),
-            editorId: editor.instanceId
-          }
+            node: selectedVideoNode(editor),
+            editorId: editor.instanceId,
+          },
         })
 
         window.dispatchEvent(event)
@@ -29,4 +70,28 @@ export const TiptapifyVideo = Extension.create({
       },
     }
   },
-})
+
+  // While editing, a player takes no clicks (see the editor styles): a click selects the video block, and
+  // a double click opens the dialog for it
+  addProseMirrorPlugins() {
+    const { editor } = this
+
+    return [
+      new Plugin({
+        key: new PluginKey(name),
+        props: {
+          handleDoubleClickOn: (_view, _pos, node, nodePos) => {
+            if (!isVideoNode(node)) {
+              return false
+            }
+
+            editor.commands.setNodeSelection(nodePos)
+            editor.commands.showTiptapifyVideo()
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/extensions/components/media/video/providers.test.ts

@@ -0,0 +1,148 @@
+import { describe, expect, it } from 'vitest'
+import {
+  formatTimecode,
+  isVideoFileWithoutProtocol,
+  parseTimecode,
+  parseVideoUrl,
+  videoProviders,
+} from '@tiptapify/extensions/components/media/video/providers'
+
+function link(input: string) {
+  const parsed = parseVideoUrl(input)
+
+  return parsed && { provider: parsed.provider.name, id: parsed.id, start: parsed.start }
+}
+
+describe('video providers', () => {
+  it.each([
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://m.youtube.com/watch?v=dQw4w9WgXcQ&list=PL1', 'dQw4w9WgXcQ'],
+    ['https://youtu.be/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['youtu.be/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://www.youtube.com/shorts/abc_-123', 'abc_-123'],
+    ['https://www.youtube.com/embed/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+  ])('recognizes the YouTube link %s', (input, id) => {
+    expect(link(input)).toEqual({ provider: 'youtube', id, start: 0 })
+  })
+
+  it.each([
+    ['https://vimeo.com/76979871', '76979871'],
+    ['https://player.vimeo.com/video/76979871', '76979871'],
+  ])('recognizes the Vimeo link %s', (input, id) => {
+    expect(link(input)).toEqual({ provider: 'vimeo', id, start: 0 })
+  })
+
+  it.each([
+    'https://example.com/video.html',
+    'https://www.youtube.com/',
+    'https://www.youtube.com/watch',
+    'https://vimeo.com/channels',
+    'https://notyoutube.com/watch?v=dQw4w9WgXcQ',
+    'not a link',
+    '',
+  ])('does not recognize %s', (input) => {
+    expect(parseVideoUrl(input)).toBeNull()
+  })
+
+  it.each([
+    ['https://youtu.be/dQw4w9WgXcQ?t=42', 42],
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=1m2s', 62],
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=1h0m5s', 3605],
+    ['https://www.youtube.com/embed/dQw4w9WgXcQ?start=90', 90],
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ#t=42', 42],
+    ['https://vimeo.com/76979871#t=42s', 42],
+    ['https://player.vimeo.com/video/76979871#t=1m30s', 90],
+  ])('reads the start time of %s', (input, start) => {
+    expect(parseVideoUrl(input)?.start).toBe(start)
+  })
+
+  it('builds the preview player URLs', () => {
+    const [youtube, vimeo] = videoProviders
+
+    expect(youtube.embedUrl('abc', 0)).toBe('https://www.youtube-nocookie.com/embed/abc')
+    expect(youtube.embedUrl('abc', 42)).toBe('https://www.youtube-nocookie.com/embed/abc?start=42')
+    expect(vimeo.embedUrl('123', 0)).toBe('https://player.vimeo.com/video/123')
+    expect(vimeo.embedUrl('123', 42)).toBe('https://player.vimeo.com/video/123#t=42s')
+  })
+
+  it('stores YouTube as a youtube node and Vimeo as an iframe', () => {
+    const [youtube, vimeo] = videoProviders
+
+    expect(youtube.toNode('abc', 42, { width: null, height: null })).toEqual({
+      type: 'youtube',
+      attrs: { src: 'https://www.youtube.com/watch?v=abc', start: 42, width: null, height: null },
+    })
+    expect(vimeo.toNode('123', 5, { width: 640, height: 360 })).toEqual({
+      type: 'iframe',
+      attrs: { src: 'https://player.vimeo.com/video/123#t=5s', width: 640, height: 360 },
+    })
+  })
+})
+
+describe('timecodes', () => {
+  it.each([
+    ['', 0],
+    ['  ', 0],
+    ['42', 42],
+    ['1:30', 90],
+    ['0:05', 5],
+    ['1:02:03', 3723],
+  ])('parses "%s" as %i seconds', (input, seconds) => {
+    expect(parseTimecode(input)).toBe(seconds)
+  })
+
+  it.each(['1:60', '1:61:00', 'abc', '1:2:3:4', '-5', '1.5', '1:'])('rejects "%s"', (input) => {
+    expect(parseTimecode(input)).toBeNull()
+  })
+
+  it.each([
+    [0, ''],
+    [5, '0:05'],
+    [90, '1:30'],
+    [3723, '1:02:03'],
+  ])('formats %i seconds as "%s"', (seconds, text) => {
+    expect(formatTimecode(seconds)).toBe(text)
+  })
+})
+
+describe('video file links', () => {
+  it.each([
+    ['https://www.w3schools.com/tags/mov_bbb.mp4', 'https://www.w3schools.com/tags/mov_bbb.mp4', 'MP4'],
+    ['http://intranet/media/clip.webm?v=2', 'http://intranet/media/clip.webm?v=2', 'WEBM'],
+    ['/media/clip.ogv', '/media/clip.ogv', 'OGV'],
+    ['//cdn.example.com/a.MOV', '//cdn.example.com/a.MOV', 'MOV'],
+  ])('%s is a video file played by the <video> node', (input, src, label) => {
+    const link = parseVideoUrl(input)!
+
+    expect(link.provider.nodeType).toBe('video')
+    expect(link.label).toBe(label)
+    expect(link.provider.toNode(link.id, 0, { width: null, height: null })).toEqual({
+      type: 'video',
+      attrs: { src, start: 0, width: null, height: null },
+    })
+  })
+
+  it('takes the start from the #t= fragment and keeps it out of the src', () => {
+    const link = parseVideoUrl('https://cdn.example.com/a.mp4#t=42')!
+
+    expect([link.id, link.start]).toEqual(['https://cdn.example.com/a.mp4', 42])
+    expect(link.provider.embedUrl(link.id, 42)).toBe('https://cdn.example.com/a.mp4#t=42')
+  })
+
+  it('never guesses a protocol for a file link', () => {
+    expect(parseVideoUrl('cdn.example.com/a.mp4')).toBeNull()
+    expect(isVideoFileWithoutProtocol('cdn.example.com/a.mp4')).toBe(true)
+    expect(isVideoFileWithoutProtocol('https://cdn.example.com/a.mp4')).toBe(false)
+    expect(isVideoFileWithoutProtocol('youtu.be/dQw4w9WgXcQ')).toBe(false)
+  })
+
+  it('is not a video file without a video extension', () => {
+    expect(parseVideoUrl('https://example.com/page.html')).toBeNull()
+    expect(parseVideoUrl('https://example.com/mp4')).toBeNull()
+  })
+
+  it('labels the embedded players with the provider name', () => {
+    expect(parseVideoUrl('https://youtu.be/dQw4w9WgXcQ')!.label).toBe('YouTube')
+  })
+})

package/src/extensions/components/media/video/providers.ts

@@ -0,0 +1,241 @@
+export type VideoProviderName = 'youtube' | 'vimeo' | 'file'
+
+export type VideoSize = { width: number | null, height: number | null }
+
+export type VideoNodeContent = { type: string, attrs: Record<string, unknown> }
+
+export interface VideoProvider {
+  name: VideoProviderName
+  label: string
+  // Whether the player can start at a given time (shows the "Start at" field)
+  supportsStart: boolean
+  // The editor node the provider's videos are stored in
+  nodeType: string
+  // The video id from a parsed link, or null when the link is not this provider's
+  parseId: (url: URL) => string | null
+  // The player URL for the preview
+  embedUrl: (id: string, start: number) => string
+  toNode: (id: string, start: number, size: VideoSize) => VideoNodeContent
+}
+
+// `label` is the badge of the dialog: the provider name, or the format of a video file (MP4)
+export type VideoLink = { provider: VideoProvider, id: string, start: number, label: string }
+
+const youtubeHosts = ['youtube.com', 'm.youtube.com', 'music.youtube.com', 'youtube-nocookie.com']
+
+const youtube: VideoProvider = {
+  name: 'youtube',
+  label: 'YouTube',
+  supportsStart: true,
+  nodeType: 'youtube',
+  parseId(url) {
+    const host = url.hostname.replace(/^www\./, '')
+
+    if (host === 'youtu.be') {
+      return url.pathname.match(/^\/([\w-]+)/)?.[1] ?? null
+    }
+
+    if (!youtubeHosts.includes(host)) {
+      return null
+    }
+
+    if (url.pathname === '/watch') {
+      return url.searchParams.get('v')?.match(/^[\w-]+$/)?.[0] ?? null
+    }
+
+    return url.pathname.match(/^\/(?:shorts|embed|live|v)\/([\w-]+)/)?.[1] ?? null
+  },
+  embedUrl: (id, start) => `https://www.youtube-nocookie.com/embed/${id}${start ? `?start=${start}` : ''}`,
+  // The youtube node builds the (nocookie) player URL itself from a watch link and its start
+  toNode: (id, start, size) => ({
+    type: 'youtube',
+    attrs: { src: `https://www.youtube.com/watch?v=${id}`, start, ...size },
+  }),
+}
+
+const vimeo: VideoProvider = {
+  name: 'vimeo',
+  label: 'Vimeo',
+  supportsStart: true,
+  nodeType: 'iframe',
+  parseId(url) {
+    const host = url.hostname.replace(/^www\./, '')
+
+    if (host === 'vimeo.com') {
+      return url.pathname.match(/^\/(\d+)(?:\/|$)/)?.[1] ?? null
+    }
+
+    if (host === 'player.vimeo.com') {
+      return url.pathname.match(/^\/video\/(\d+)/)?.[1] ?? null
+    }
+
+    return null
+  },
+  embedUrl: (id, start) => `https://player.vimeo.com/video/${id}${start ? `#t=${start}s` : ''}`,
+  // Vimeo has no node of its own: it is stored as a plain iframe with the player URL
+  toNode: (id, start, size) => ({
+    type: 'iframe',
+    attrs: { src: vimeo.embedUrl(id, start), ...size },
+  }),
+}
+
+// A new provider is added here; the dialog's badge shows its label
+export const videoProviders: VideoProvider[] = [youtube, vimeo]
+
+const videoFileRegex = /\.(mp4|m4v|webm|ogv|ogg|mov)$/i
+
+/**
+ * A link straight to a video file, played by the browser's own player (the `video` node). Its `id` is the
+ * file address as typed, without the `#t=` start: an absolute http(s) link, a protocol-relative `//host`
+ * or a path on the site. A protocol is never guessed: `cdn.example.com/a.mp4` could be http or https.
+ */
+export const videoFileProvider: VideoProvider = {
+  name: 'file',
+  label: '',
+  supportsStart: true,
+  nodeType: 'video',
+  parseId(url) {
+    return videoFileRegex.test(url.pathname) ? url.href.replace(/#.*$/, '') : null
+  },
+  embedUrl: (id, start) => `${id}${start ? `#t=${start}` : ''}`,
+  toNode: (id, start, size) => ({ type: 'video', attrs: { src: id, start, ...size } }),
+}
+
+// A video file address typed without a protocol (`cdn.example.com/a.mp4`): the dialog asks for one
+export function isVideoFileWithoutProtocol(input: string): boolean {
+  const value = input.trim()
+
+  return !/^[a-z][a-z\d+.-]*:|^\//i.test(value) && videoFileRegex.test(value.replace(/[?#].*$/, ''))
+}
+
+function parseVideoFile(input: string): VideoLink | null {
+  const value = input.trim()
+
+  if (!/^(https?:)?\/\/\S+$|^\/\S+$/i.test(value)) {
+    return null
+  }
+
+  // A base only to read the path and the fragment of a relative address; the address itself is kept as typed
+  const url = new URL(value, 'https://relative.invalid')
+  const extension = url.pathname.match(videoFileRegex)?.[1]
+
+  if (!extension) {
+    return null
+  }
+
+  return {
+    provider: videoFileProvider,
+    id: value.replace(/#.*$/, ''),
+    start: parseUrlStart(url),
+    label: extension.toUpperCase(),
+  }
+}
+
+function toUrl(input: string): URL | null {
+  const value = input.trim()
+
+  if (!value) {
+    return null
+  }
+
+  try {
+    // Links pasted without a scheme ("youtu.be/…") are common
+    return new URL(/^[a-z][a-z\d+.-]*:\/\//i.test(value) ? value : `https://${value}`)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Seconds from a link time value: "42", "42s", "1m2s", "1h2m3s"; 0 when it is not one.
+ */
+function parseDuration(value: string | null): number {
+  const match = value?.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/)
+
+  if (!match) {
+    return 0
+  }
+
+  const [, hours, minutes, seconds] = match
+
+  return Number(hours ?? 0) * 3600 + Number(minutes ?? 0) * 60 + Number(seconds ?? 0)
+}
+
+/**
+ * The start time a link carries: `?t=42`, `?t=1m2s`, `?start=42` or `#t=42`; 0 when there is none.
+ */
+export function parseUrlStart(url: URL): number {
+  const hashTime = new URLSearchParams(url.hash.replace(/^#/, '')).get('t')
+
+  return parseDuration(url.searchParams.get('t'))
+    || parseDuration(url.searchParams.get('start'))
+    || parseDuration(hashTime)
+}
+
+/**
+ * The provider, video id and start time of a link; null when no provider recognizes it.
+ */
+export function parseVideoUrl(input: string): VideoLink | null {
+  const file = parseVideoFile(input)
+
+  if (file) {
+    return file
+  }
+
+  const url = toUrl(input)
+
+  if (!url) {
+    return null
+  }
+
+  for (const provider of videoProviders) {
+    const id = provider.parseId(url)
+
+    if (id) {
+      return { provider, id, start: provider.supportsStart ? parseUrlStart(url) : 0, label: provider.label }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Seconds from a time typed in the dialog ("1:30", "1:02:03" or plain seconds); 0 for an empty
+ * value and null for an invalid one.
+ */
+export function parseTimecode(value: string): number | null {
+  const trimmed = value.trim()
+
+  if (!trimmed) {
+    return 0
+  }
+
+  if (!/^\d+(?::\d{1,2}){0,2}$/.test(trimmed)) {
+    return null
+  }
+
+  const parts = trimmed.split(':').map(Number)
+
+  // Every part after the first is a minute or a second part
+  if (parts.slice(1).some(part => part > 59)) {
+    return null
+  }
+
+  return parts.reduce((total, part) => total * 60 + part, 0)
+}
+
+/**
+ * "m:ss" or "h:mm:ss" for seconds; an empty string for 0.
+ */
+export function formatTimecode(seconds: number): string {
+  if (!seconds || seconds < 0) {
+    return ''
+  }
+
+  const whole = Math.floor(seconds)
+  const hours = Math.floor(whole / 3600)
+  const minutes = Math.floor((whole % 3600) / 60)
+  const secs = String(whole % 60).padStart(2, '0')
+
+  return hours ? `${hours}:${String(minutes).padStart(2, '0')}:${secs}` : `${minutes}:${secs}`
+}