zcuric / plyrue Goto Github PK

tested with nuxtjs, yarn dev appears to show fullscreen toggle but yarn build + yarn start does not work.

Is your feature request related to a problem? Please describe.
Right now, no TypeScript definitions are provided and therefore, Plyrue does not support typing.

Describe the solution you'd like
Add Typescript definitions to the project.

Describe the bug
When building an app using Webpack 4.35.0 to build an app using Vue 2.6.10 and Plyrue 2.0.4, Webpack throws a Module not found error:

ERROR in ./node_modules/plyrue/dist/plyrue.js
Module not found: Error: Can't resolve 'vue-runtime-helpers/dist/normalize-component.js' in '/Users/julien/projects/ideation6/front/node_modules/plyrue/dist'
 @ ./node_modules/plyrue/dist/plyrue.js 5:40-98
 @ ./src/main.js

To Reproduce

1. Create a basic Vue project with a App.vue component
2. Add Plyrue as a dependency: npm i plyrue
3. Register Plyrue as a plugin in Vue, using the instructions in the doc:

import App from './App.vue';
import Plyrue from 'plyrue';
import Vue from 'vue';

Vue.use(Plyrue);

new Vue({
  render: h => h(App),
}).$mount('#app');

4. Build the app using Webpack: npx webpack --progress
5. The Webpack build fails and outputs the error message

Expected behavior
The Webpack build completes successfully.

Desktop:

• OS: MacOS 10.14.5
• Browser: Firefox
• Version: 68.0.1
• Node 12.4.0
• NPM 6.9.0

Additional context
The issue also appears when running the Webpack dev server.

I can't get the poster to work at all, just black player until video plays

Describe the bug

// player.vue
<template>
  plyrue(
    id="player"
    type="video"
    ref="plyrue"
    :poster="data.thumbnail"
    :src="data.stream_url"
    :emit="['loadedmetadata', 'timeupdate', 'playing', 'pause', 'ended']"
    :options="options"
    @loadedmetadata="setMetadata()"
    @playing="setStatus('playing')"
    @pause="setStatus('pause')"
    @ended="setStatus('ended')"
    @timeupdate="setCurrentTime(player.currentTime)"
    crossorigin
    autoplay
  )
...

To Reproduce
Steps to reproduce the behavior:

1. Pick a video from overview
2. Video plays and @timeupdate works
3. Go back to history (history.back())
4. Pick a video from overview
5. Video plays, but @timeupdate throws this.media is null and doesn't work anymore

Expected behavior
Is the event being cleared correctly?

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox Developer Edition
• Version: 70

Additional context
Using vue-router, Laravel 6 with latest packages.

even adding config to the plugin does not solve it, seems only speed works.

I managed to make it work with SSR just using the basic main.js -> plugin and editing nuxt.config.js to include the plugin. (+css)

the problem I have is it works on yarn dev, but not on production server and can't pinpoint why, I also noticed, even without it working on production, it only works on iOS, not chrome

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

At the moment I've simple disabled the Plyr controls and using a component with a z-index hack on top of the video instance.

Describe the solution you'd like
A clear and concise description of what you want to happen.

It would be great if one could inject a Vue component as customization would be a lot easier.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Current workaround works fine. I'm using a bus to handle events and the 'Controls' component simple sends them back to the player.

Additional context
Add any other context or screenshots about the feature request here.

Custom controls are possible, but I don't believe with Vue components. Please correct me when I'm wrong and if possible show me how it's done. :)

Thanks for your work!