Podlove-Player ohne CDN in webpack einbinden

Podlove Podlove Web Player
1

Hallo,

Datenschutz ist überall wichtig und es erscheint mir aktuell nicht mehr soooo zeitgemäß den Player via CDN zu laden.
Ich würde ihn gerne als lokale Recource in mein Projekt einbinden.

Ehrlich gesagt habe ich mir in den Kopf gesetzt den Player in symfony 6 mit webpack encore sauber einzubinden. - Keine Chance!

Ich habe heute den Abend damit verbracht mit npm und lerna zu spielen um das Ding irgendwie zu „bauen“. - Hat nicht geklappt. Offenbar sind da erweiterte Kenntnisse nötig und ich weiß gar nicht, wo ich anfangen soll und welche Tutorials ich zuerst lesen soll.

CDN ist schön, ist up2date, einfach etc… CDN und der Datenschutz vertragen sich gerade aber auch nicht so gut und ich mag hier heute anregen dass die Podlove-Tools etwas besser abseits des CDN verfügbar werden / oder die Dokumentation mehr als 3 Zeilen zur Installation sagt.

Vielleicht spricht aus mir gerade der Frust. Ich habe mir aber nunmal in den Kopf gesetzt das irgendwie lokal aufzusetzen und bin kurz davor doch das CDN-Script einzubinden. - Noch mag ich aber nicht aufgeben.

Das ist keine Kritik am Player. Der ist unschlagbar.

2

Ich bin in diesem Projekt nicht involviert, aber es wäre bestimmt hilfreich zu wissen, auf welche Hindernisse genau du gestoßen bist :slight_smile:

3

Heyho,

du musst dafür natürlich nicht das Projekt selber bauen, es gibt jeden Release auch als NPM package: https://www.npmjs.com/package/@podlove/web-player Dort kannst du dir die Assets dann in deinen public Ordner kopieren (https://symfony.com/doc/current/frontend/encore/copy-files.html#referencing-image-files-from-a-template). Wichtig ist noch das du die base richtig setzt damit der Player Assets selbst nachladen kann. Siehe https://docs.podlove.org/podlove-web-player/v5/installation#npm :slight_smile:

4

Das ist die Lösung und TATA! - It works!

Für @kai
Ich ging davon aus, dass ich in app.js mit
import '@podlove/web-player/';
alles in gang setzen kann.

Klappt leider gar nicht. Webpack meint, da wäre nichts.

In webpack.config.js

    .copyFiles({
        from: './node_modules/@podlove/web-player',
        to: 'library/web-player/[path][name].[ext]'
    })

und in config.json

{
  "base": "/build/library/web-player/"
}

… bekomme ich das in den Build-Ordner und kann darauf verweisen.

Im Twig-Template tut dann das hier alles was es soll

 <script src="/build/library/web-player/embed.js"></script>

YEAH! - Ich quäle mich da wirklich durch. Das ist eben mein Lernprojekt.

@zusatzstoff
1000 Dank dafür!
Vielleicht hast Du noch einen Hint den ich gerade nicht sehe:

{{ encore_entry_script_tags('app') }}

Holt mir ja alles, webpack-seidank. Irgendwie mag ich Webpack noch beibringen /build/library/web-player/embed.js zu laden, damit ich später im Twig-Template das hier zum laufen bekomme:

    {% block javascripts %}
        {{ parent() }}
        {{ encore_entry_script_tags('player') }}
    {% endblock %}

Möglicherweise gibt es da auch noch einen Link zur Doku den ich noch nicht gefunden habe. - Die Tutorials gehen ja leider alle davon aus, dass man alles immer mit webpack „bauen“ kann.

1 „Gefällt mir“
5

Eigentlich brauchst du nur die embed.js im twig template einzubinden. Direkter import im app.js würde theoretisch mit dem expose-loader funktionieren, ist aber nicht so einfach.

1 „Gefällt mir“