Urlaube CMS Podlove Web Player Plugin Development Probleme

[paviro (Paul-Vincent Roll)]

Hallo ihr lieben,

Ich habe gerade ein Plugin geschrieben um den Podlove Player mit dem Urlaube CMS zu nutzen, welches wir auf filmmakersforfuture.org einsetzen.
Im Grunde erzeugt es nur die DIVs für den Player und packt window.podlovePlayer("#div", episode, config)auf die Seite. Die Episode und die Konfiguration wird als json übergeben.

Dabei bin ich auf das folgende Problem gestoßen, was ich gerade nicht so richtig verstehe und lösen kann aber vielleicht hat ja hier jemand eine Idee.

Unter dem folgenden Link befindet sich eine Testseite mit dem Plugin: filmmakersforfuture.org/podlove-test

Das gleiche Problem tritt auch hier in der Test-Sandbox auf: codesandbox.io/s/player-configuration-p9obe

Meine beiden Probleme sind die folgenden:

• Ich bekomme es nicht hin, dass die iframe embedding option auf dem sharing tab angezeigt wird
• Theming funktioniert nicht, weder tokens, um die Farben anzupassen noch fonts

In der Sandbox scheint es auf der Version, welche die Konfiguration als JavaScript Objekt übergibt zu funktionieren (index.html / main.js) in der embedding Variante (embed.html / embed.js), welche wie ich json nutzt ändert sich das Design nicht, wie bei mir.

Ich würde mich sehr freuen, falls irgendjemand eine Idee hat!

LG,
Paul

[zusatzstoff (Alexander Heimbuch)]

Hey Paul,

ich freue mich immer sehr wenn Menschen den Player auf andere Systeme portieren Beide deiner Probleme haben mit der Art und Weise wie du die Konfiguration bereitstellst zu tun:

1. iFrame Embedding Option

Damit der Player auf anderen Seiten auch angezeigt werden kann muss die Konfiguration via URL angegeben sein. Im Wordpress Plugin bspw. realisiere ich das über eigene REST Endpunkte. Ohne diese absoluten Pfade kommt ein remote embedded Player nicht an die Daten

2. Theming Tokens werden nicht verwendet

Das sollte einfach zu lösen sein. Der 5er Player kann auch 4er Konfigurationen verarbeiten. Um die Formate zu identifizieren ist das ganze versioniert. Wird version: "5" mit angegeben, handelt es sich um eine 5er Konfiguration. Gibt man keine Version an dann geht der Player von Version 4 aus. Du gibtst in der Konfiguration gerade keine Version an, deshalb nimmt der Player an es handelt sich um eine 4er Konfiguration, findet keine Themetokens und nimmt deshalb die Standardwerte.

[paviro (Paul-Vincent Roll)]

Hi!
Vielen Dank für deine schnelle Antwort und natürlich deine Arbeit am Player generell! Wirklich ein tolles Stück Software!

1. Das macht natürlich Sinn, alles klar, dann werde ich mal versuchen ein paar Endpunkte einzubauen.
2. Ich habe gerade getestet die Version mit anzugeben und leider zur Zeit noch das gleiche Resultat. Ist diese config korrekt oder übersehe ich noch etwas?

 {
            "version": "5",
            "base": "/user/plugins/PodlovePlugin/lib/",
            "theme": {
                "tokens": {
                    "brand": "#E64415",
                    "brandDark": "#6B26A8FF",
                    "brandDarkest": "#1A3A4A",
                    "brandLightest": "#DEF0E0FF",
                    "shadeDark": "#807E7C",
                    "shadeBase": "#807E7C",
                    "contrast": "#000",
                    "alt": "#fff"
                }
            },
            "share": {
                "channels": ["facebook", "twitter", "mail", "link", "whats-app"],
                "sharePlaytime": true,
                "outlet": "/share.html"
            }
}

Noch eine Frage:
Gibt es irgendeine Möglichkeit diesen Fehler los zu werden?

[Daxi (Christian Daxberger)]

Sourcemap-Dateien sollten nur dann geladen werden, wenn die Entwickler-Tools offen sind.
Für die normalen Nutzer sind diese Fehler uninteressant.

Ich würde mir hier an dieser Stelle keine Sorgen machen.

[zusatzstoff (Alexander Heimbuch)]

versuchs mal mit version: 5 statt version: "5"

[paviro (Paul-Vincent Roll)]

facepalm sag ich nur… Danke! Dann muss ich jetzt ja nur noch die endpoints einbauen

[paviro (Paul-Vincent Roll)]

@zusatzstoff nochmal ein kleines Problem Wir wollen unseren Podcast feed und die Episoden unter podcast.fm4f.org hosten damit geht aber der Download nicht mehr weil der Browser das aus Security gründen verhindern, wegen der anderen Domain. Lässt sich da was machen?

Hier steht etwas davon, dass man es durch einen Ajax call und dann einen download blob umgehen könnte? Wäre das etwas, was man eventuell im Player hinzufügen könnte? Könnte mir vorstellen, dass ich nicht der Einzige bin der in das Problem läuft. Vor allem könnte man dann zum Beispiel auch PDFs von anderen Seiten oder so verlinken, wenn sie relevant für eine Folge sind.

[zusatzstoff (Alexander Heimbuch)]

Das könnte knifflig werden, da auch AJAX calls wahrscheinlich in CORS Probleme laufen werden: https://stackoverflow.com/questions/28318017/html5-download-attribute-not-working-when-downloading-from-another-server-even

[paviro (Paul-Vincent Roll)]

Dann vielleicht ein kleiner Hinweis sobald man auf einen Download Link mit externer URL klickt?
Like: Der Download befindet sich auf einem anderen Server, bitte Rechtsklick -> Datei laden oder etwas in der art?

[Daxi (Christian Daxberger)]

Wie tiefen Zugriff hast du auf den Server und das CMS?
Nachdem du das selbst integrierst dürfte der Zugriff doch etwas höher sein.

Im Grunde musst du CORS (Cross-Origin Resource Sharing) Header auf dem Server / der Domain mit den Audio-Dateien einrichten.
Apache:

Header set Access-Control-Allow-Origin 'https://podcast.fm4f.org/'

nginx:

add_header 'Access-Control-Allow-Origin' 'https://podcast.fm4f.org/'

Wenn ich das jetzt grad richtig im Kopf habe, ruft der Browser erst ein OPTIONS /datei.mp3 auf.
Dann wird der Header geprüft und die GET-Anfrage gesendet.

Ich würde eine .htaccess (Apache) oder eine location für nginx definieren um nur für den Ordner mit den Dateien explizit die Freigabe zu erteilen.

location /hier-sind/meine-podcastdateien/ {
  add_header 'Access-Control-Allow-Origin' 'https://podcast.fm4f.org/'
}

Ist zwar jetzt nicht getestet, aber das sollte dein Problem lösen.

Alternativ kannst du auch ein Verzeichnis in deine podcast.fm4f.org einbinden, das auf das gleiche Datei-Verzeichnis zeigt.

[zusatzstoff (Alexander Heimbuch)]

Es ist sehr schwer möglich herauszufinden ob die resource extern ist Alleine ein check ob es sich um eine externe URL handelt kann irreführend sein da das natürlich nicht ausschließt ob die absolute URL auf den gleiche Server zeigt (subdomains/ports …)

[paviro (Paul-Vincent Roll)]

Ich glaube das funktioniert leider nicht. Soweit ich gelesen habe ist das download Attribut explizit ausgenommen davon. Ich werde jetzt vermutlich auf ein symlink ausweichen, dennoch danke!

@zusatzstoff die Endpoints habe ich noch nicht eingebaut aber so schaut es jetzt aus mit der Nullnummer! https://filmmakersforfuture.org/podcast/episode-0/ Vielen Dank nochmal an euch für den tollen Player!

[paviro (Paul-Vincent Roll)]

@zusatzstoff aus irgendeinem Grund scheint das Teilen Tab zur Zeit nicht auf meinem iPhone zu funktionieren (also abgesehen vom embedding).

Irgendeine Idee? Die anderen Tabs funktionieren. Website Daten habe ich gelöscht.

Desktop:

iOS Simulator:

Mein iPhone:

[zusatzstoff (Alexander Heimbuch)]

So blöd es klingt, was für Contentblocker hast du denn unter iOS an?

[paviro (Paul-Vincent Roll)]

Das war natürlich das Problem! Die vergesse ich immer
Der subscribe-button ist zur Zeit noch nicht nutzbar oder? Ich hatte mir gerade den alten angeschaut, welcher eine sehr alte node version braucht zum builden ist das dennoch noch die Version, die man nutzen sollte?

[zusatzstoff (Alexander Heimbuch)]

Den gibt es leider gerade nur im Player mit ausgeliefert. Sobald ich etwas Zeit finde werde ich schauen ob man den auch eigenständig betreiben kann.

[paviro (Paul-Vincent Roll)]

Wundervoll aber der Button im Player reicht natürlich auch erstmal
Gibt es irgendwo eine Liste der unterstützten Clients für innerhalb des Players? Castro habe ich zum Beispiel beim alten Button gefunden aber bisher in keiner Config zum Webplayer nur damit ich keine Clients vergesse.

[zusatzstoff (Alexander Heimbuch)]

Hier solltest du fündig werden https://github.com/podlove/podlove-ui/tree/development/packages/clients

[paviro (Paul-Vincent Roll)]

Die Web Version von Pocket-Cast scheint nicht zu funktionieren oder mach ich da was falsch?
Was geht ist https://pca.st/n6s9wk61
Der Player macht aber https://pcasts.in/feed/https://podcast.fm4f.org/feed.xml was nur den RSS feed zeigt oder geht das nur, wenn man bei Pocket Casts eingeloggt ist?

Edit: Auch auf iOS bekomme ich einen Fehler. Laut dem code muss dort aber wirklich der feed und nicht die Pocket Casts ID rein oder?

[zusatzstoff (Alexander Heimbuch)]

Gute Frage,
kann sein das sich da was geändert hat. Da gab es auch einen Bug im Subscribe Button letztens. Schaue ich mir mal an