How to use Web Player as a standalone component of a Vuejs app

[Severin]

Hello,
I’m frontend developper, I need to create an app (working online as offline) to listen podcasts or music inside PodLove Web-player (V5).

I managed to import it in my package.json from npm, but I can’t use it , because I don’t know how to import it inside a vuecomponent. I tried to follow this steps but even after doing my npm install @podlove/web-player --save, I don’t know where are the components in my app (impossible to found them).

I managed to import & use it with the CDN method, The problem is that with CDN, if I lost my internet connection, my web-player is broken. I thought that it could be possible to use PodLove web-player as a vuejs component (imported localy from my app) following this repo setup :

podlove-ui/apps/player at development · podlove/podlove-ui

I know that my topic is close to this one :

Integrating Web Player in VueJS application (no WordPress)

Hey, I just asked myself what would be the best approach to integrate the Podlove Web Player into a VueJS single page application. Do I need the web player as a whole, or is it enough to use the player components. I know there is a feature list regarding the functionality of the web player (https://github.com/podlove/podlove-ui/tree/development/apps/web-player) compared to the player components, but maybe you can help me. What I need/don’t need: I don’t need a web player launching facility v…

but I didn’t find answers to my questions or I didn’t understood them…

I tried to build the player parts without success because of some troubles concerning use of lerna that are not longer working, or my “npm run build” that return permission issues…

So I wanted to know if there is a way to know exactly how to get PodLove Web-player (V5) as a standalone component of my vuejs app.

• How to get it ?
• What are the requirements to import it and to use it ? to finally be able to use it online & offline

Would be glad if I could have some helps

[zusatzstoff]

Hey, sorry for the late response. With the WebPlayer 5 this will be a bit tricky to do but if you could provide me a repo I can give you an example for WebPlayer 6. It is still in alpha but should fit your needs.

[Severin]

No worries,

Unfortunately I am not allowed to provide a repository

In addition, the project schedule forced me to have to look for another solution unfortunately (fairly tight deadlines). So I quickly built my own audio player using HTML5, without the features that PodLove Web-player offered.

Do you mention a version 6 of the web-player? do you know when it will be available?

Regarding my project (if this can answer some questions) I use VueJs 3 (Composition API), with Typescript & SCSS. This is a purely front project. The player had to be able to play podcasts via JSON, and music hosted locally.

I needed something like that for example :

Picture of the media (podcast or music)
Title
Author / Channel
Timeline with currentTime / total duration
controls like :
-30sec, previous media, play / pause, next media, +30sec

each controls had their own styles…

That’s why I needed to import only some components from PodLove web-player. I’m curious to know more about the web-player v6