Urlaube CMS Podlove Web Player Plugin Development Probleme

paviro · 27. Mai 2020 um 18:32

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 · 28. Mai 2020 um 06:13

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:

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

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 · 28. Mai 2020 um 10:52

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

Das macht natürlich Sinn, alles klar, dann werde ich mal versuchen ein paar Endpunkte einzubauen.
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 · 28. Mai 2020 um 12:09

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 · 28. Mai 2020 um 14:56

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

paviro · 28. Mai 2020 um 15:17

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

paviro · 28. Mai 2020 um 15:31

@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 · 28. Mai 2020 um 15:43

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 · 28. Mai 2020 um 15:47

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 · 28. Mai 2020 um 16:32

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 · 29. Mai 2020 um 05:51

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 · 31. Mai 2020 um 21:45

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 · 2. Juni 2020 um 12:52

@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:
dsdsdsdsdsd

iOS Simulator:

Mein iPhone:

zusatzstoff · 2. Juni 2020 um 13:03

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

paviro · 2. Juni 2020 um 15:06

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 · 2. Juni 2020 um 15:18

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 · 2. Juni 2020 um 15:27

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 · 2. Juni 2020 um 18:08

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

paviro · 5. Juni 2020 um 12:29

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 · 5. Juni 2020 um 15:14

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