SSR compability

[redxtech]

SSR compability

[redxtech]

Sounds good. I can do that as well. Also, isn't the mounted() method not called on the server ? Wouldn't putting in there be fine? I don't have any experience with SSR so not 100% sure what goes where. I can also do this tonight as well.

[iCrawl]

Ah, if thats the only place you use it that should be fine yea.

But I guess my issue is pointing at plyr itself as it seems. You import it in the script tag (like you kinda have to) and plyr then already tries to associate with document as it seems.

The relevant portion of that code is here:

I'm a bit unsure if this is an easy fix at the moment. I'm not sure about the implications of importing only on the client 🤔

[redxtech]

Ah ok. I'll see if I can do a conditional import within the mounted hook to fix that.
Can you push that to a github repo (or a branch if it's an existing project) so I can clone it and run to see if I got it working ?

[iCrawl]

This project is sadly not open to the public, but you can simply use this example here with ream (which is what I use for this project too):
https://github.com/ream/ream/tree/master/examples/custom-root-component
And just import vue-plyr into the index.js and you'll immediately see the error, you don't even need to include it in the Root component for the error to pop up.

[redxtech]

Sounds good. I'll take a look at this as soon as I've added v3 support.

[iCrawl]

After some testing, an easy way around it would be:

<template>
      <div>
            <plyr>
                  <audio><source :src="somelink"></audio>
            </plyr>
      </div>
</template>

<script>
if (process.browser) var { Plyr } = require('vue-plyr');

export default {
	components: {
		plyr: Plyr
	}
}
</script>

One would have to do that for every component that plyr is needed, since the usual import into index.js and then apply Vue.use() wont work.

[redxtech]

That does seem to work. Give me a sec and I'll throw that into the component by default.

[redxtech]

@iCrawl I just pushed an update with this to feature/add-ssr-support
Try cloning this repo and switch to that branch. Then just run the build script yarn build || npm run build and import the files from the dist folder. Or you can just import from the src files. Lemme know how this works.

Will release and push v3 to npm once we have this sorted out.

[iCrawl]

I assume you want me to do it the usual way right?

import VuePlyr from '../../vue-plyr/dist/vue-plyr';
Vue.use(VuePlyr);

If so, no that did not do the trick.

[redxtech]

@iCrawl Hmm. I'll give that look

[redxtech]

@iCrawl ok so I did that and it's working just fine. Here's what I have:
I extended the ream example root component. Only file that I changed was the index file:

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import VuePlyr from '../../../vue-plyr/src/index.js'

Vue.use(Router)
Vue.use(VuePlyr)

export default {
  root: () => import('./Root.vue'),
  router: () => new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: {
          render(h) {
            return h('h1', 'homepage')
          }
        }
      },
      {
        path: '/plyr',
        component: {
          render (h) {
            return h('plyr-video', {
              props: {
                poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1',
                videos: [{ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', format: 'mp4' }],
                subtitles: [{ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', label: 'English', srclang: 'en' }],
                crossorigin: true
              }
            })
          }
        }
      }
    ]
  })
}

[iCrawl]

Oh jeez, I was importing the wrong thing as it seems. Now that's embarrassing, haha 😃

Thank you very much, I would say this is resolved then!

[redxtech]

Sounds good. I will push a release to npm (v3 for plyr v3) later today.
Happy to help :)