@gcorevideo/player 2.24.10 → 2.24.13

package/src/playback/dash-playback/DashPlayback.ts

@@ -325,11 +325,10 @@ export default class DashPlayback extends BasePlayback {
   }
 
   _ready() {
-    this._isReadyState = true
-    this.trigger(Events.PLAYBACK_READY, this.name)
+    !this._dash && this._setup()
+    super._ready()
   }
 
-  // override
   private override _setupSrc() {
     // this playback manages the src on the video element itself
   }
@@ -558,10 +557,7 @@ export default class DashPlayback extends BasePlayback {
 
   override play() {
     trace(`${T} play`, { dash: !!this._dash })
-    if (!this._dash) {
-      this._setup()
-    }
-
+    !this._dash && this._setup()
     super.play()
     this._startTimeUpdateTimer()
   }
@@ -579,14 +575,12 @@ export default class DashPlayback extends BasePlayback {
   override stop() {
     if (this._dash) {
       this._stopTimeUpdateTimer()
-      this._dash.reset()
+      this.destroyInstance()
       super.stop()
-      this._dash = null
     }
   }
 
-  override destroy() {
-    this._stopTimeUpdateTimer()
+  private destroyInstance() {
     if (this._dash) {
       this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError)
       this._dash.off(
@@ -598,8 +592,13 @@ export default class DashPlayback extends BasePlayback {
         this.getDuration,
       )
       this._dash.reset()
+      this._dash = null
     }
-    this._dash = null
+  }
+
+  override destroy() {
+    this._stopTimeUpdateTimer()
+    this.destroyInstance()
     return super.destroy()
   }
 
@@ -673,7 +672,7 @@ export default class DashPlayback extends BasePlayback {
     return toClapprTrack(t)
   }
 
-  switchAudioTrack(id: string): void {
+  override switchAudioTrack(id: string): void {
     assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized')
     const tracks = this._dash.getTracksFor('audio')
     const track = tracks.find((t) => t.id === id)
@@ -681,6 +680,14 @@ export default class DashPlayback extends BasePlayback {
     this._dash.setCurrentTrack(track)
   }
 
+  override load(srcUrl: string) {
+    this._stopTimeUpdateTimer()
+    this.options.src = srcUrl
+    // TODO destroy the instance first?
+    this.destroyInstance()
+    this._setup()
+  }
+
   private checkAudioTracks() {
     // @ts-ignore
     const tracks = this._dash.getTracksFor('audio')

package/src/playback/hls-playback/HlsPlayback.ts

@@ -87,8 +87,6 @@ export default class HlsPlayback extends BasePlayback {
 
   private _hls: HLSJS | null = null
 
-  private _isReadyState = false
-
   private _lastDuration: number | null = null
 
   private _lastTimeUpdate: TimePosition | null = null
@@ -121,10 +119,16 @@ export default class HlsPlayback extends BasePlayback {
 
   private _timeUpdateTimer: TimerId | null = null
 
+  /**
+   * @internal
+   */
   get name() {
     return 'hls'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
@@ -137,10 +141,6 @@ export default class HlsPlayback extends BasePlayback {
     return this._currentLevel ?? AUTO
   }
 
-  get isReady() {
-    return this._isReadyState
-  }
-
   set currentLevel(id: number) {
     this._currentLevel = id
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
@@ -369,6 +369,7 @@ export default class HlsPlayback extends BasePlayback {
       {
         maxBufferLength: 2,
         maxMaxBufferLength: 4,
+        autoStartLoad: false,
       },
       this.options.playback.hlsjsConfig,
     )
@@ -393,6 +394,7 @@ export default class HlsPlayback extends BasePlayback {
       this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
     })
 
+    // TODO drop?
     const onPlaying = () => {
       if (this._hls) {
         this._hls.config.maxBufferLength =
@@ -405,14 +407,15 @@ export default class HlsPlayback extends BasePlayback {
 
     this.el.addEventListener('playing', onPlaying)
 
-    this._hls.on(
-      HLSJS.Events.MANIFEST_PARSED,
-      () => (this._manifestParsed = true),
-    )
+    this._hls.on(HLSJS.Events.MANIFEST_PARSED, () => {
+      this._manifestParsed = true
+      this._hls!.startLoad(-1)
+    })
     this._hls.on(
       HLSJS.Events.LEVEL_LOADED,
-      (evt: HlsEvents.LEVEL_LOADED, data: LevelLoadedData) =>
-        this._updatePlaybackType(evt, data),
+      (evt: HlsEvents.LEVEL_LOADED, data: LevelLoadedData) => {
+        this._updatePlaybackType(evt, data)
+      },
     )
     this._hls.on(
       HLSJS.Events.LEVEL_UPDATED,
@@ -458,7 +461,9 @@ export default class HlsPlayback extends BasePlayback {
     this._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (evt, data) =>
       this._onAudioTracksUpdated(evt, data),
     )
-    this._hls.on(HlsEvents.AUDIO_TRACK_SWITCHED, (evt, data) => this._onAudioTrackSwitched(evt, data))
+    this._hls.on(HlsEvents.AUDIO_TRACK_SWITCHED, (evt, data) =>
+      this._onAudioTrackSwitched(evt, data),
+    )
     this.bindCustomListeners()
   }
 
@@ -499,15 +504,15 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   protected override _ready() {
-    if (this._isReadyState) {
-      return
-    }
     !this._hls && this._setup()
-    this._isReadyState = true
-    this.trigger(Events.PLAYBACK_READY, this.name)
+    super._ready()
   }
 
-  private _recover(evt: HlsEvents.ERROR, data: HlsErrorData, error: PlaybackError) {
+  private _recover(
+    evt: HlsEvents.ERROR,
+    data: HlsErrorData,
+    error: PlaybackError,
+  ) {
     assert(this._hls, 'HLS.js is not initialized')
     if (!this._recoveredDecodingError) {
       this._recoveredDecodingError = true
@@ -808,13 +813,13 @@ export default class HlsPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered)
   }
 
-  load(url: string) {
+  override load(url: string) {
     this._stopTimeUpdateTimer()
     this.options.src = url
     this._setup()
   }
 
-  play() {
+  override play() {
     !this._hls && this._setup()
     !this._manifestParsed &&
       !this.options.hlsPlayback.preload &&
@@ -824,7 +829,7 @@ export default class HlsPlayback extends BasePlayback {
     this._startTimeUpdateTimer()
   }
 
-  pause() {
+  override pause() {
     if (!this._hls) {
       return
     }
@@ -1129,12 +1134,21 @@ export default class HlsPlayback extends BasePlayback {
     this._hls.audioTrack = Number(id) // TODO or find index by .id == id?
   }
 
-  private _onAudioTracksUpdated(_: HlsEvents.AUDIO_TRACKS_UPDATED, data: AudioTracksUpdatedData) {
+  private _onAudioTracksUpdated(
+    _: HlsEvents.AUDIO_TRACKS_UPDATED,
+    data: AudioTracksUpdatedData,
+  ) {
     trace(`${T} onAudioTracksUpdated`)
-    this.trigger(Events.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack))
+    this.trigger(
+      Events.PLAYBACK_AUDIO_AVAILABLE,
+      data.audioTracks.map(toClapprTrack),
+    )
   }
 
-  private _onAudioTrackSwitched(_: HlsEvents.AUDIO_TRACK_SWITCHED, data: AudioTrackSwitchedData) {
+  private _onAudioTrackSwitched(
+    _: HlsEvents.AUDIO_TRACK_SWITCHED,
+    data: AudioTrackSwitchedData,
+  ) {
     trace(`${T} onAudioTrackSwitched`)
     // @ts-ignore
     const track = this._hls.audioTracks[data.id]
@@ -1156,4 +1170,4 @@ function toClapprTrack(t: MediaPlaylist): AudioTrack {
     kind: t.type === 'main' ? 'main' : 'description', // TODO check
     label: t.name,
   }
-}
+}

package/src/plugins/audio-selector/AudioTracks.ts

@@ -88,7 +88,7 @@ export class AudioTracks extends UICorePlugin {
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
     this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-      mediaControl.mount('audiotracks', this.$el)
+      mediaControl.slot('audiotracks', this.$el)
     })
     this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
     this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from: string) => {

package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts

@@ -34,7 +34,7 @@ describe('AudioTracks', () => {
       emitTracksAvailable(core, TRACKS)
     })
     it('should not attach to the media control', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
+      expect(mediaControl.slot).not.toHaveBeenCalledWith(
         'audiotracks',
         expect.anything(),
       )
@@ -45,7 +45,7 @@ describe('AudioTracks', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should attach to the media control', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith(
+      expect(mediaControl.slot).toHaveBeenCalledWith(
         'audiotracks',
         audioTracks.$el,
       )

package/src/plugins/bottom-gear/BottomGear.ts

@@ -320,7 +320,7 @@ export class BottomGear extends UICorePlugin {
 
   private mount() {
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.mount('gear', this.$el)
+    mediaControl.slot('gear', this.$el)
   }
 
   private alignSubmenu($subMenu: ZeptoResult) {

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -61,7 +61,7 @@ describe('BottomGear', () => {
     })
     describe('until media control is rendered', () => {
       it('should not attach to media control', () => {
-        expect(mediaControl.mount).not.toHaveBeenCalledWith(
+        expect(mediaControl.slot).not.toHaveBeenCalledWith(
           'gear',
           expect.anything(),
         )
@@ -72,7 +72,7 @@ describe('BottomGear', () => {
         mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
       })
       it('should attach to media control', () => {
-        expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+        expect(mediaControl.slot).toHaveBeenCalledWith('gear', bottomGear.$el)
       })
     })
     describe('when clicked', () => {

package/src/plugins/clips/Clips.ts

@@ -139,7 +139,7 @@ export class Clips extends UICorePlugin {
   private onMcRender() {
     trace(`${T} onMcRender`)
     const mediaControl = this.core.getPlugin('media_control')
-    mediaControl.mount('clips', this.$el)
+    mediaControl.slot('clips', this.$el)
   }
 
   private onContainerChanged() {

package/src/plugins/clips/__tests__/Clips.test.ts

@@ -66,7 +66,7 @@ describe('Clips', () => {
       mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
     })
     it('should mount the indicator', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith('clips', clips.$el)
+      expect(mediaControl.slot).toHaveBeenCalledWith('clips', clips.$el)
     })
   })
 })

package/src/plugins/dvr-controls/DvrControls.ts

@@ -1,14 +1,14 @@
 import { Events, Playback, UICorePlugin, template } from '@clappr/core'
 import assert from 'assert'
+import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 import dvrHTML from '../../../assets/dvr-controls/index.ejs'
 import '../../../assets/dvr-controls/dvr_controls.scss'
-// import { trace } from '@gcorevideo/utils'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-// const T = 'plugins.dvr_controls'
+const T = 'plugins.dvr_controls'
 
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
@@ -46,7 +46,7 @@ export class DvrControls extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .live-button': 'click',
+      'click #gplayer-mc-back-to-live': 'clicked',
     }
   }
 
@@ -56,6 +56,7 @@ export class DvrControls extends UICorePlugin {
   override get attributes() {
     return {
       class: 'dvr-controls',
+      'data-dvr': '',
     }
   }
 
@@ -91,7 +92,7 @@ export class DvrControls extends UICorePlugin {
     )
   }
 
-  private click() {
+  private clicked() {
     const container = this.core.activeContainer
     if (!container.isPlaying()) {
       container.play()
@@ -103,19 +104,18 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override render() {
+    trace(`${T} render`)
     this.$el.html(
       DvrControls.template({
         i18n: this.core.i18n,
       }),
     )
+    this.$el.find('#gplayer-mc-back-to-live').hide()
+    this.$el.find('#gplayer-mc-live').hide()
 
     return this
   }
 
-  private onMediacontrolRendered() {
-    this.render()
-  }
-
   private onMetadataLoaded() {
     this.mount()
     this.toggleState(this.core.activeContainer.isDvrInUse())
@@ -128,10 +128,10 @@ export class DvrControls extends UICorePlugin {
     }
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
     assert(mediaControl, 'media_control plugin is required')
-    // TODO -> to MediaControl
+    // TODO -> to MediaControl (auto hide)
     mediaControl.toggleElement('duration', false)
     mediaControl.toggleElement('position', false)
-    mediaControl.mount('dvr', this.$el)
+    mediaControl.mount('left', this.$el) // TODO use independent mount point
   }
 
   private onDvrStateChanged(dvrInUse: boolean) {
@@ -140,11 +140,11 @@ export class DvrControls extends UICorePlugin {
 
   private toggleState(dvrInUse: boolean) {
     if (dvrInUse) {
-      this.$el.find('#media-control-back-to-live').show()
-      this.$el.find('#media-control-live').hide()
+      this.$el.find('#gplayer-mc-back-to-live').show()
+      this.$el.find('#gplayer-mc-live').hide()
     } else {
-      this.$el.find('#media-control-back-to-live').hide()
-      this.$el.find('#media-control-live').show()
+      this.$el.find('#gplayer-mc-back-to-live').hide()
+      this.$el.find('#gplayer-mc-live').show()
     }
   }
 }

package/src/plugins/dvr-controls/__tests__/DvrControls.test.ts

@@ -33,10 +33,7 @@ describe('DvrControls', () => {
   })
   describe('while playback type is unknown', () => {
     it('should not mount', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'dvr',
-        dvrControls.$el,
-      )
+      expect(mediaControl.slot).not.toHaveBeenCalledWith('dvr', dvrControls.$el)
     })
   })
   describe('live stream', () => {
@@ -75,33 +72,29 @@ describe('DvrControls', () => {
         )
       })
       it('should mount to the media control', () => {
-        expect(mediaControl.mount).toHaveBeenCalledWith('dvr', dvrControls.$el)
+        expect(mediaControl.mount).toHaveBeenCalledWith('left', dvrControls.$el)
       })
       if (dvrEnabled) {
         if (dvrInUse) {
           it('should show back_to_live button', () => {
             expect(
-              dvrControls.$el
-                .find('#media-control-back-to-live')
-                .css('display'),
+              dvrControls.$el.find('#gplayer-mc-back-to-live').css('display'),
             ).not.toBe('none')
           })
-          it('should hide live inficator', () => {
+          it('should hide live indicator', () => {
             expect(
-              dvrControls.$el.find('#media-control-live').css('display'),
+              dvrControls.$el.find('#gplayer-mc-live').css('display'),
             ).toBe('none')
           })
         } else {
-          it('should show live inficator', () => {
+          it('should show live indicator', () => {
             expect(
-              dvrControls.$el.find('#media-control-live').css('display'),
+              dvrControls.$el.find('#gplayer-mc-live').css('display'),
             ).not.toBe('none')
           })
           it('should hide back_to_live button', () => {
             expect(
-              dvrControls.$el
-                .find('#media-control-back-to-live')
-                .css('display'),
+              dvrControls.$el.find('#gplayer-mc-back-to-live').css('display'),
             ).toBe('none')
           })
         }
@@ -118,7 +111,7 @@ describe('DvrControls', () => {
           Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
           true,
         )
-        dvrControls.$el.find('#media-control-back-to-live').click()
+        dvrControls.$el.find('#gplayer-mc-back-to-live').click()
       })
       it('should play stream', () => {
         expect(core.activeContainer.play).toHaveBeenCalled()
@@ -139,9 +132,19 @@ describe('DvrControls', () => {
     // TODO handle mount points in MediaControl
     it('should not mount', () => {
       expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'dvr',
+        'left',
         expect.anything(),
       )
     })
+    it('should not alter position and duration indicators', () => {
+      expect(mediaControl.toggleElement).not.toHaveBeenCalledWith(
+        'duration',
+        false,
+      )
+      expect(mediaControl.toggleElement).not.toHaveBeenCalledWith(
+        'position',
+        false,
+      )
+    })
   })
 })

package/src/plugins/dvr-controls/__tests__/__snapshots__/DvrControls.test.ts.snap

@@ -1,7 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DvrControls > basically > should render 1`] = `
-"<div class="live-info" id="media-control-live">live</div>
-<button type="button" class="live-button" aria-label="back_to_live" id="media-control-back-to-live">back_to_live</button>
+"<div class="live-info" id="gplayer-mc-live" style="display: none;">live</div>
+<button type="button" class="live-button" aria-label="back_to_live" id="gplayer-mc-back-to-live" style="display: none;">
+    back_to_live
+</button>
 "
 `;

package/src/plugins/media-control/MediaControl.ts

@@ -56,7 +56,7 @@ export type MediaControlLeftElement =
  * Media control elements that appear in main layer, spanning the entire width of the player.
  * @beta
  */
-export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' // TODO rename seekbar
+export type MediaControlLayerElement = 'seekbar' | 'seekBarContainer' | '_' // TODO remove seekbar
 
 /**
  * Media control elements that appear in the right area.
@@ -91,6 +91,14 @@ const MANAGED_ELEMENTS: MediaControlElement[] = [
   'volume',
 ]
 
+export type MediaControlSlotSelector =
+  | 'root'
+  | 'base'
+  | 'left'
+  | 'right'
+  | 'center'
+  | 'seekbar'
+
 /**
  * Specifies the allowed media control elements in each area.
  * Can be used to restrict rendered media control elements.
@@ -723,7 +731,9 @@ export class MediaControl extends UICorePlugin {
   }
 
   private togglePlayStop() {
-    this.container.isPlaying() ? this.container.stop({ ui: true }) : this.container.play()
+    this.container.isPlaying()
+      ? this.container.stop({ ui: true })
+      : this.container.play()
   }
 
   private startSeekDrag(event: MouseEvent) {
@@ -897,19 +907,19 @@ export class MediaControl extends UICorePlugin {
   }
 
   private hideVolumeBar(timeout = 400) {
-    if (!this.$volumeBarContainer) {
-      return
-    }
     if (this.hideVolumeId) {
       clearTimeout(this.hideVolumeId)
     }
     if (this.draggingVolumeBar) {
-      this.hideVolumeId = setTimeout(() => this.hideVolumeBar(), timeout)
+      this.hideVolumeId = setTimeout(() => {
+        this.hideVolumeId = null
+        this.hideVolumeBar()
+      }, timeout)
     } else {
-      this.hideVolumeId = setTimeout(
-        () => this.$volumeBarContainer?.addClass('volume-bar-hide'),
-        timeout,
-      )
+      this.hideVolumeId = setTimeout(() => {
+        this.hideVolumeId = null
+        this.$volumeBarContainer.addClass('volume-bar-hide')
+      }, timeout)
     }
   }
 
@@ -1133,8 +1143,7 @@ export class MediaControl extends UICorePlugin {
       newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback()
     }
 
-    const settingsChanged =
-      serializeSettings(this.settings) !== serializeSettings(newSettings)
+    const settingsChanged = !isEqualSettings(this.settings, newSettings)
 
     if (settingsChanged) {
       this.settings = newSettings
@@ -1182,34 +1191,52 @@ export class MediaControl extends UICorePlugin {
   /**
    * Get a media control element DOM node
    * @param name - The name of the media control element
-   * @returns The DOM node to render to or extend
+   * @param element - The DOM node/fragment to mount
+   * @deprecated Use {@link MediaControl.mount} instead
+   */
+  slot(name: MediaControlElement, element: ZeptoResult): void {
+    const panel = this.getElementLocation(name)
+    if (panel) {
+      element.attr(`data-${name}`, '')
+      mountTo(panel, element)
+    }
+  }
+
+  /**
+   * Mounts a media control element at a specific location
+   * @param name - The location to mount the element
+   * @param element - The element to mount
    * @remarks
    * Use this method to render custom media control UI in a plugin
    * @example
    * ```ts
    * class MyPlugin extends UICorePlugin {
    *   override render() {
-   *     this.$el.html('<div data-clips>Here we go</div>')
-   *     this.core.getPlugin('media_control').mount('clips', this.$el)
+   *     this.$el.html('<div id="my-element" class="my-class">Here we go</div>')
+   *     this.core.getPlugin('media_control').mount('left', this.$el)
    *     return this
    *   }
    * }
    * ```
    */
-  mount(name: MediaControlElement, element: ZeptoResult) {
-    const panel = this.getElementLocation(name)
-    if (panel) {
-      const current = panel.find(`[data-${name}]`)
-      element.attr(`data-${name}`, '')
-      // TODO test
-      if (current.length) {
-        if (current[0] === element[0]) {
-          return
-        }
-        current.replaceWith(element)
-      } else {
-        panel.append(element)
-      }
+  mount(name: MediaControlSlotSelector, element: ZeptoResult) {
+    mountTo(this.getMountParent(name), element)
+  }
+
+  private getMountParent(name: MediaControlSlotSelector): ZeptoResult {
+    switch (name) {
+      case 'root':
+        return this.$el
+      case 'base':
+        return this.$el.find('.media-control-layer')
+      case 'center':
+        return this.getCenterPanel()
+      case 'left':
+        return this.getLeftPanel()
+      case 'right':
+        return this.getRightPanel()
+      default:
+        assert.fail(`Invalid mount parent name: ${name}`)
     }
   }
 
@@ -1452,17 +1479,14 @@ export class MediaControl extends UICorePlugin {
       }
     }
 
+    // TODO check if needed
     this.$seekBarPosition?.addClass('media-control-notransition')
     this.$seekBarScrubber?.addClass('media-control-notransition')
 
-    let previousSeekPercentage = 0
-
-    if (this.displayedSeekBarPercentage) {
-      previousSeekPercentage = this.displayedSeekBarPercentage
-    }
+    const prevSeekPercentage = this.displayedSeekBarPercentage || 0
 
     this.displayedSeekBarPercentage = null
-    this.setSeekPercentage(previousSeekPercentage)
+    this.setSeekPercentage(prevSeekPercentage)
 
     setTimeout(() => {
       !this.settings.seekEnabled &&
@@ -1609,3 +1633,13 @@ function serializeSettings(s: MediaControlSettings) {
     .concat([s.seekEnabled as any])
     .join(',')
 }
+
+function isEqualSettings(a: MediaControlSettings, b: MediaControlSettings) {
+  return serializeSettings(a) === serializeSettings(b)
+}
+
+function mountTo(parent: ZeptoResult, element: ZeptoResult) {
+  if (!parent.find(element).length) {
+    parent.append(element)
+  }
+}