How to use slots on qmediaplayer?



  • I’ve searched for Vue slots and everything I’ve tried doesn’t seem to work. I’m using it to play live audio so I want to replace the duration slot with the word “Live”?

    I have tried different combinations like:

    <q-media-player type="audio">
    <span slot="duration-time">Live</span>
    </q-media-player>
    




  • Thanks, I’ve tried that. I tried the other slots and they didn’t work either. I think I have found the issue. The function h() inside of __renderDurationTime(h)

    __renderDurationTime(h) {
            return h('span', {
              staticClass: 'q-media__controls--video-time-text' + ' text-' + this.color
            }, this.state.durationTime, slot(this, 'durationTime'))
            // TODO: syntax on above line??
     },
    

    refers to the function createElement()

    function createElement (
      context,
      tag,
      data,
      children,
      normalizationType,
      alwaysNormalize
    ) {
      if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children;
        children = data;
        data = undefined;
      }
      if (isTrue(alwaysNormalize)) {
        normalizationType = ALWAYS_NORMALIZE;
      }
      return _createElement(context, tag, data, children, normalizationType)
    }
    

    As you can see in createElement() if data is an array then children is overwritten. As the slot is in the var children it is overwritten so ignored. I have tested with the following and it works as it should:

          __renderDurationTime(h) {
            let a = 'span'
            let b = {
              staticClass: 'q-media__controls--video-time-text' + ' text-' + this.color
            }
            let c = this.state.durationTime
            let d = slot(this, 'durationTime')
            c = d ? d : c
    
            return h(a, b, c)
            // TODO: syntax on above line??
          },
    

    Then

              <q-media-player
                type="audio"
              >
                <template>
                  <div slot="durationTime"><b>Live</b></div>
                </template>
              </q-media-player>
    


  • I’ll be fixing the slots in QMediaPlayer. It seems some are working and some not. Stay tuned for an announcement today or tomorrow. Thanks.




Log in to reply