How to use slots on qmediaplayer?

[steveleeroberts]

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>

[s.molinari]

https://github.com/quasarframework/app-extension-qmediaplayer/blob/397d91d133b02e3b911bed10433acc7666224368/src/component/QMediaPlayer.js#L1305

Try slot="durationTime".

Scott

[steveleeroberts]

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>

[Hawkeye64]

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.

[Hawkeye64]

v1.0.5 has been released
https://github.com/quasarframework/app-extension-qmediaplayer/releases/tag/v1.0.5