Find a way to require vidstack library without CDN usage

Created on 15 April 2025, about 2 months ago

Problem/Motivation

Currently, the CDN approach for requiring the Vidstack library works fine, but is not conform with the GDPR.
The original idea was to also include the library via NPM as a GDPR conform alternative, but as our dive into the package code concluded, even the NPM package loads some code from the CDN at runtime, which is unfeasible.

Steps to reproduce

Take a look into the NPM library code and see that it is using CDN imports.

Proposed resolution

There already is an issue on Vidstack's GitHub, so let's hope that they provide a solution sooner rather than later.
If that is the case, then we will implement the integration of that solution into the module here.

Remaining tasks

User interface changes

API changes

Data model changes

🌱 Plan
Status

Active

Component

Code

Created by

🇩🇪Germany lrwebks Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lrwebks
  • 🇩🇪Germany lrwebks Porta Westfalica
  • 🇩🇪Germany Grevil

    @thomas.frobieter suggested, that we simply build the library ourselves and put it in the module (if the license allows this). Assigning to him for now, so he can check that. Also, this is major, as we can not use the library in the current state unfortunately.

  • Right, I built it and its a massive pain. However, as a temporary solution, until https://github.com/vidstack/player/issues/719 is hopefully fixed one day, we build it ourselves to push things forward.

    To build successfully the vidstack/player repo needs to be modified:
    - package.json: change workspaces "./packages/*" to "packages/*"
    - pnpm-workspace.yaml: change 'packages/*' to './packages/*'
    - Ensure to install pnpm@8.7.0 globaly using npm
    - Ensure to use npm version 18.17.1 using nvm (nvm install v18.17.1)
    - In packages/react/package.json replace "vidstack": "workspace:*" with "vidstack": "^1.12.13"
    - Afterwards run npm cache clear --force rm -rf node_modules npm install. Next run pnpm install.
    - Then you should be able to run npm run build

    To be sure, used versions:
    - node: 18.17.1
    - npm 9.6.7
    - pnpm: 8.7.0

    Welcome to the node.js building rabbit hole from hell.

    Afterwards the required files are located here:
    - packages/react/dist-npm/prod/vidstack.js (unminified, I was to able to build the minified version)
    - packages/vidstack/styles/player/plyr/theme.css
    - packages/vidstack/styles/player/default/layouts/video.css

    Maybe we should simply copy the current files from the CDN source instead using this, overcomplicated, bug prone build process:
    - vidstack.js: https://cdn.vidstack.io/player
    - theme.css: https://cdn.vidstack.io/player/theme.css
    - video.css: https://cdn.vidstack.io/player/video.css

    Instead of adding the library to the modules repo, we could release it as an NPM package ourselves and use this as a Composer dependency. Seems like a cleaner approach?

Production build 0.71.5 2024