Thank you all for the help. @Hawkeye64 yes from my understanding of youtube’s api that’s the method, but looks like you need to register for the event to be propagated.

Well at least the method never gets called for things like play/pause/volume change, which is what I was expecting, maybe I misunderstood the OnStateChange method?

On the copy/past frenzy I did not noticed that I pasted it wrong:

 <q-video
        :ratio="16/9"
        :src="embedUrl(video.id)"
        @onStateChange="changeState"
      ></q-video>

or

  <q-video
        :ratio="16/9"
        :src="embedUrl(video.id)"
        v-on:onStateChange="changeState"
      ></q-video>

Are both not working folks

@Ilia tried that too, won’t work either, but thanks for the suggestion

Hi folks, is it possible to receive events from the q-video component? I was reading the API here: https://developers.google.com/youtube/iframe_api_reference?csw=1 and it seems its possible to have events from the iframe player.

So I tried

      <q-video
        :ratio="16/9"
        :src="embedUrl(video.id)"
        @v-on:onStateChange="changeState"
      ></q-video>

But its not working. Any way to capture when a video started playing event?

Thank you

Awesome, thank you that was it

Hi folks, this framework is the best thing since PB&J sandwiches, really I have a blast every time.

So I’m writing a mock for a chatbot, and using q-message is just a breeze. However I bumped into an issue. At the end of each message I need to add an icon (using any of the typography available) to allow users to play the message via audio. It looks that vue components can’t be added as text to the q-chat component. Is there an way to append other components as text?

The slots did not work, because the default one creates a new line, and I would really like to have that floating after the last character of the payload.

Any directions would be awesome.

Cheers

Thank you @metalsadman that did the trick. Awesome!

Ok, right after posting I noticed that store is passed as a context and its commented out, but still using store.auth.getters.isLoggedIn returns undefined. Somehow store.state.auth.status for instance works (have no idea how) but store.getters.auth does not work. If anyone could chime in please

Hi folks, so first thing, what an amazing framework. I’m really enjoying learning about it. I have very little experience with node/javascript, so apologies on some of the questions here. But as I go through tutorials on the internet, I noticed that the structure of plain vue projects differ from quasar.
So I’m following this tutorial: https://www.digitalocean.com/community/tutorials/handling-authentication-in-vue-using-vuex And I got stuck on how to import my store module into the routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'
import store from '../store'

Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })
  Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (store.state.auth.getters.isLoggedIn) {
        next()
        return
      }
      next("/login")
    } else {
      next()
    }
  })
  return Router
}

So I figured this is where I should configure my beforeEach for the router, that works, but I can’t access the store getters

export function someGetter (state) {
}
*/

export function isLoggedIn (state) {
    !!state.token
}
export function authStatus (state) {
    state.status
}

I tried to import them on routes/index.js via import store from '../store/ but that returns undefined. How can I access the store object here?

Also, again apologies for my lack of knowledge on ES6, why is this.$store available on pages?

Thank you