Info
Wir holen uns Simon zur Hilfe um über die Anfänge des Podlove Web Player zu sprechen: Warum es ihn gibt und wie die ersten Versionen aussahen. In der zweiten Hälfte geht es tief in den Technik-Kaninchenbau: Alex erläutert seine Motivation für den Neubau für Podlove Web Player 4 und 5. Zum Schluss besprechen wir das holprige Release des aktuellen Web Player Plugins.
Shownotes
Begrüßung & Feedback
Erfahrungen beim Publishen: Was haben wir gelernt?
- Mikrofon (USB Kondensator t.bone SC 440) Probleme
- Noise Filter in Reaper: ReaFIR
- Transkripte im Publisher nicht löschbar
- niederschrift: Transkribierungs-Hilfstool
- shownot.es Projekt
- „Sendegate Audio Setup“ / HMC 660
- Unfurl
- Tailwind CSS
Podlove Web Player
- Gerrit van Aaken
- Podlove Web Player 1.2 Blogpost
- Podlove Web Player 2.0 Blogpost
- git
- Podlove Web Player WordPress Plugin
- jQuery
- Juri @line_o
- Alexandra @plutonik8
- Podlove Deep Link
- Sven @Graphorama
- React JS
- Redux
- Vue JS
- Podlove Web Player 5 Dokumentation
- Redux Vuex
- Sagas
- Mediaelement JS
- Auphonic
- Adobe Flash
- Microsoft Silverlight
- Podlove Subscribe Button
- GitHub WordPress Plugin Deployment Workflow
Timeline
Begrüßung
00:00
Dann sage ich einfach mal: Hallo und willkommen zu Episode drei des Podlovers Podcasts. Heute das erste Mal mit Gast. Hallo Simon.
Hallo.
Außerdem wieder mit Michi.
Hallo.
Und Alex.
Hallöchen Eric.
Und außerdem mit mir. Ja, da sind mal wieder zusammen in der Runde, und das erst Mal mit Gast. Simon, erzähl doch mal, warum wir dich eingeladen haben und wie es dich hierher getrieben hat.
Simon
00:26
Wollt ihr mich gleich ins kalte Wasser werfen. Okay.
Sag doch einfach mal zwei, drei Sätze zu dir und später gibt's dann noch ein bisschen mehr Einleitung.
Also in der ersten Folge haben ja alle erzählt, wie sie zu Podlove gekommen sind. Und ich habe jetzt heute, eine Stunde vor der Aufnahme,noch in meinem E-Mail-Account gesucht, wie es denn bei mir dazu kam. Denn ich habeAnfang 2013 im Januar Tim einfach eine Mail geschrieben undso einen kleinen Änderungsvorschlag für den Podlove Web Player geschickt. Undeben dann mit Link auf eine Testinstallation und ja, die hat Tim anscheinend gefallen undso kam das Eine zum Anderen und dann war ich mit dabei.Das war damals noch zu Zeiten vom Podlove Web Player 1.Genau und ja, dann war ich mit dabei in der Entstehung des PWP 2.
Also einfach mal so eine Mail geschickt und schon war es um dich geschehen.
So schnell kann das gehen.
Da hatte Tim dich im Griff. Ja, also wie ihr schon hört, es geht heute um den Podlove Web Player im Großen und Ganzen. Aber wir machen, wie wir das auch mit der zweiten Episode schon angefangen haben, erstmal ein bisschen eine Feedback-Runde.Auch so was wir gelernt haben in der Veröffentlichung und so weiter bevor wir zum Hauptthema kommen.Alex, die ersten Punkte sind von dir?
Feedback
01:56
Ja, genau. Und zwar gibt es ja auf unserer wunderbaren Seite auch eine Kommentarfunktion, die ja sich in unsere Community mit einklinkt, die community.podlove.org.Und da hatte ich einen Poll zur Nutzung von den Podlove-Publisher-Modulen sowie von Auphoniceinmal gestartet. Da gab's noch nicht so viel Feedback, wie ich mir das wünschen würde, um so ein Gefühl dafür zu bekommen,auf was wir uns in der nächsten Zeit zu konzentrieren sollten. Deshalb wäre es sehr schön, dass falls Hörer dabei sind, die den Publisher und auch Auphonic verwenden,dort einmal noch einem ihr Feedback geben.Und das zweite, auch in den Kommentaren der Community, ist es so, dass wir, glaube ich, über den GPL-Kram und die kommerzielle Nutzung etwas Unsinn erzählt haben.Da hatte Nona uns Feedback dazu gegeben. Tim hat auch schon etwas Aufklärung geschaffen. Kann man da auch nachlesen. Ich werd's jetzt nicht zitieren.Ich glaube, die Kern-Essenz ist, dass es natürlich durchaus möglich ist, auch eine GPL-Lizenz kommerziell zu nutzen,Ich vermute – korrigiert mich, werdet ihr wahrscheinlich eh machen, wenn's falsch ist, hoffe ich –dass der wichtigste Punkt ist, um mit der GPL-Lizenz kompatibel zu sein, ist dass Source-Code tatsächlich öffentlich einsehbar ist.
Genau, ja.
Und wen's ganz genau interessiert: wir verlinken den GPL-Text auch nochmal komplett in den Shownotes.Du, außerdem kam auf Twitter wieder Feedback. Das war ohnehin so ein bisschen unser Hauptkanal.Da gab's die Kritik des Kapitelmarken doch besser verfügbar gemacht werden sollten. Da ging's drum, ich habe das auch festgestellt, die sind nicht in der mp3-Datei, kann das sein? In der zweiten Episode.
In der mp3-Datei sollten die, glaube ich, sogar drinnen sein. Da ging's eigentlich eher darum, dass auf der Seite zwar die Timeline die Kapitel mit abbildet, aber du kannst die nicht zum Springen so richtig in der Episode verwenden.Das ist etwas, das sollten wir, glaube ich, nochmal anpassen. Ich bin noch nicht so ... also ich habe eine grobe Vorstellung, wie ich sein kann,aber noch kein Konzept ist mir direkt ins Hirn gesprungen.
Also ich hatte die Episode heute noch in Overcast offen.Auf Overcast, weil Castro natürlich nicht geht. Und da, also vielleicht habe ich die Kapitel auch einfach nicht gefunden. Keine Ahnung, habe Overcast leider nicht mehr genutzt, vielleicht ist mir die UI auch einfacher Behandlung gekommen.Deswegen hatte ich jetzt den Gedanken, dass vielleicht die Chapter-Dateien einfach nicht in der MP3 drin sind, aber ja, vielleicht schauen wir da nochmal nach.Dann steht hier Übersicht Episoden verwirrend. Ach so, das war von Dom und so. Ja, dann auch von mir.
Nicht nur vom Dom, das kam von mehreren Seiten. War sehr lustig. Es war auch im Sendegate, war es so, dass mir zugetragen wurde, dass die Seite sich noch nicht aktualisiert hätte. Und ich so: Nee, doch. Vielleicht ist der Cache dann doch irgendwie ein bisschen blöd eingestellt.Stimmt aber nicht. Es war einfach nur sehr verwirrend, dass die erste Episode immer ganz oben war, sodass wir jetzt die Übersichtsseite etwas umgestellt haben. Das heißt, ganz zum Start kommt jetzt ein bisschen mehr Informationen über die Show und danach geht's erst mit den Episoden los.
Stimmt. Das hast du auch schon umgesetzt, habe ich gesehen. Außerdem schon umgesetzt ist, dass das ganze mobil etwas besser funktioniert. Also viel besser. Also ich weiß nicht, was das für Gerät betroffen hat, wahrscheinlich alle, dass es irgendwie oft über die Breite ging.Es hat quasi auf den Mobilgeräten links und rechts so ein bisschen was vom Content abgeschnitten. Ja, auch das ist jetzt behoben.Vielen Dank dafür, Alex für die schnelle Reaktion.
Find's gut, wenn ich da Feedback kriege, was man da verbessern kann. Weil das ja etwas ... es ist ja ein Testgelände tatsächlich. Wie dieser ganze Podcast.
Außerdem – mal sehen, ob das zum Dauerbrenner wird oder habt ihr jetzt jemals gelöst bekommen – Castrogeht immer noch nicht, aber wir haben jetzt ganz gutes Feedback auf Twitter bekommen. Da hat jemandmal im Netzwerk gegraben und festgestellt, dass unser Feed vorgibt IPv6 sechs zu sprechen, aber tatsächlich kommt der Request gar nicht an.Ich habe schon eine Vermutung, woran's liegt. Also, ich weiß, dass der Droplet, also auf DigitalOcean, wo das Ganze läuft, eine Adresse hat. Die ist eben auch im DNS eingetragen, nur dummerweise geht's halt nicht komplett in die Applikation durch. Ichvermutet es da im Docker-Setup, was da steckt im Netzwerk, was miskonfiguriert ist. Ich kümmere mich drum, hoffentlich bis zur nächsten Episode. Ja aber auf jeden Fall danke fürs Feedback @jzdmauf Twitter der da ganz fleißig debugged und geschrieben hat. Was haben wir bei Episode 2 gelernt?Alex, du hast dich mit Transkriptionen beschäftigt. Da hast dudich an der Zwei-Stunden-Episode versucht.
Ich könnte auch anfangen, wenn Alex die ganze Zeit gesprochen hat, dann sind wir so chronologisch mit Produktion und dann Transkription.Software zu tun hat, das Erste nicht, aber ich habe ein bisschen was gelernt und Alex meinte das würde vielleicht interessant sein. Ich nehme hier mit so einem USB.Kondensator-Mikrofon auf.Und es hat so das Problem, dass es irgendwie... ;an muss ziemlich genau davor sitzen. Das hab ich dann der letzten Folge scheinbar nicht getan, auf jeden Fall war ich super, super leise. Undum mich dann so voll aufzudrehen, dann war ich total verrauscht. Und das ist ganz übles Rauschen, es war die ganze Zeit im Hintergrund. Und ich hatte dannja auch das erste Mal da in Ultraschall und Reaper rumgemacht, und einen Freund gefragt und der hat mir so einen Filter gezeigt, der ziemlich cool war,mit dem man einfach das Rauschen so aufnehmen konnte und danach rausfiltern konnte. Das können wir auch verlinken, der hieß ReaFIR. Genau.Und dannsind wir eigentlich schon fast auch bei Alex' Stelle. Ich war da nämlich schon dabei, alles zu produzieren und es lief auch meiner Meinung nach ... Also es musste nicht viel nachschauen, es lief meiner Meinung nach alles total seamless für den Prozess, wo man zu viel verschiedeneSoftware verwendet. Aber ich bin dann über was gestolpert, weil ich zuerst die automatisch erstellten Transkripte hochgeladen hab,weil ich natürlich auf Alex gewartet habe, der nicht nur das .vttbearbeiten sollte, und das auch gemacht hat, sondern gleich noch ein Tool dafür geschrieben hat und damit's schneller geht. Das hat dann also ein bisschen gedauert und ich habe die ursprünglichen Shownotes mit Fehlern hochgeladen. Und dann ist mir aufgefallen,dass ich ja jetzt eigentlich gar nicht veröffentlichen kann, weil ich finde den Transkripte-bitte-alle-wieder-löschen-Button nicht.
Weil's den nicht gibt.Wie wir dann festgestellt haben. Also ich ja.
Ja, ich dachte noch, wo könnte der sein?
Wo könnte der sein? Wo könnte der sein? Ja.Wir haben festgestellt, glaube ich, dass es beim Kapitelmarken das Problem auch gibt. Also da sowohl im Kapitelmarken- als auch im Transkript-Interfacegibt's einfach keinen Alles-löschen-Button. Bei Kapitelmarken mag das noch gehen, weil man einzelne Kapitelmarken löschen kann. Und so viele sind's am Ende auch nicht.Aber bei Transkripten ist das schwierig.
Meine große Frage ist auch, ist es noch nie jemanden aufgefallen? Würde mich interessieren.
Man müsste mal durch die Github-Issues schauen. Vielleicht ist da irgendwo ein Feature-Request, den ich ignoriert habe.
Ich wollte natürlich sagen: "Ich habe jetzt eigentlich schon alles gelöst, weil ich habe Github-Issue angelegt" Aber wenn das so ist.
Dann gibt's dann halt zwei. Vielleicht erhöht das ja die Chance, dass es mal implementiert wird.
Gleich als Duplikat geschlossen.
Okay.
Dann sind wir schon bei Alex.
Alex hat ein Tool geschrieben. Warum denn Alex?
Ja.Also erstmal hatte ich mich, ich möchte festhalten, ich hatte mich natürlich vorher freiwillig gemeldet, in der Annahme, dass wir wieder nur so 50 Minuten aufnehmen. Aber dann war mir klar, wir sprechen über den Publisher, das wird wahrscheinlich ein bisschen mehr werden.Und wurde dann etwas nervös während der Aufnahme als so langsam so die Zwei-Stunden-Marke gerissen wurde.Und dann habe ich angefangen und habe versucht das VTT zu editieren. Und zwar erst mit VSCode und VLC.Und es gibt irgendwie jetzt um direkt einen VTT zu bearbeiten, keine richtig dedizierte Software dafür. Das war mega nervig.weil man kann nämlich in unter MacOS und dem VLC sehr schlecht globale Shortcuts machen. Also das habe ich erst eine halbe Stunde lang probiert und dann habe ich gedacht, ja, fuck it,dann schreibe ich's halt selber. Und habe quasi einen kleinen Webserver hochgezogen, der dann im Hintergrund das VTT geladen hat und gleichzeitig noch einen Shortcuts für Audio-Playback hatte.Ist noch nicht super perfekt, aber für die erste Transkruption hat's eigentlich ganz gut getaugt. Da ist noch viel Luft nach oben.Aber ich vermute mal, dass je mehr Übung wir mit dem Transkribieren von Audioinhalten haben, umso mehr Features werden wir da einbauen.Unddas war trotzdem – so in zehn Minuten-Abschnitten habe ich das dann immer gemacht – eine verdammt mühsame Arbeit und hat den Respekt vor professionellen Audio-,na ja, -Niederschriftlern, -Transkribierern, wie auch immer man diese Menschengruppe nennt, doch sehr gestärkt.Transkribiererin.
Transkribierende. Ich wollte fragen, hast du das auf Github gepackt? Und wenn ja, wie heißt's? Damit ich's dann auch verwenden kann.
Also das ganze Tool heißt Niederschrift, weil ich erstmal...
Unter Podlove?
Ist nicht unter Podlove, ist unter meinen privaten GitHub-Repos. Ich könnte vielleicht dann, soll sollte es einegrößere Produktreife erreichen, dann können wir das auch auf Podlove stellen. Aber so ist es jetzt erstmal vorgesehen, dass man sich das über npm einfach installiert und dann über einen Kommandozeilen-Befehl den Server hochfährt.Gibt auch kein Doku dazu.
Ich werde es dann ja vielleicht mal ausprobieren. Weil ich glaube, ich bin dran und mal sehen, wie lange diese Web-Player-Episode wird.
Du bist tatsächlich diesmal nicht dran, weil es kann nicht dieselbe Person Aufnahmeleitung und gleichzeitig das Transkript machen.
Ich weiß auch nicht, wie das geschehen konnte, aber scheinbar bin ich schon wieder dran. Es ist mir auch gerade irgendwie, während wir da drüber gesprochen haben, aufgefallen.
Da müssen wir vielleicht im Nachhinein nochmal das Regelwerk unserer Produktionskette überdenken.
Simon, hast du zufällig Zeit? Der Gast muss Transkripte schreiben
Nein, nein, nein.
Ich muss mal schnell weg.
Tja, schauen wir mal, vielleicht wird's ja noch eine 20-Minuten-Episode, aber dann müssen wir in zwei Minuten fertig sein. Mal schauen. Was mir außerdem noch auffiel ist, wir haben ja ganz gute Shownots, also recht ausführliche Linklisten.Was eigentlich ideal ist. Ja?
Shownotes
13:29
Ja.
Du hast einen Kommentar.
Ich habe da einen einen Hintergrund.
Du hast einen Hintergrund. Ja, erzähl doch mal.
Ich war früher – beziehungsweise ja also das Shownotes-Projekt ist ja jetzt nicht mehr so aktiv – aber ich war damals einer der vielen, die da mitgewirkt haben, ja.Und wir haben da einiges an Software geschrieben unddas erinnert mich gerade dran. Also auch das Thema Transkription war bei uns damals auch ein großes Thema und wie man das dannirgendwo unterbringt auf der Webseite oder im Player. Oder wie die Kapitelmarken direkt in der MP3-Datei.Und da haben wir uns viele Gedanken gemacht und viel Code geschrieben, der teilweise noch verwendet wird, aber zum größten Teil wahrscheinlich auf Githubseine letzten Stunden hat.
Also, ich denke, das, was bis jetzt noch lebt, ist das Shownotes-Format. Also, das Textformat, was ihr da mal definiert habt. Weil das... Ich weiß nicht, ob's noch geschrieben wird, aber es wird auf jeden Fall noch gelesenvon Software. Tatsächlich mein Shownotes-Modul hat auch einen Parser dafür geschrieben, weil einfach damit ich das konvertieren kann, also die Legacy-Shownotes nenn ich's mal,entschuldigung, in ein moderners Format, was einfach ein Datenbank-Format ist.
Ja, das war eben damals die Anforderung, die wir uns überlegt haben. Es sollnicht alle möglichen Wünsche und Features unterstützen, sondern es soll möglichst einfach für den Otto-Normalzuhörer zu schreiben sein, deswegen haben wir uns da für die Lösung, die wiruns da überlegt haben, entschieden. Und das Ganzewar ja so gedacht, dass gemeinsam die Hörer im Pad sich versammeln und während der Liveshow praktisch mitschreibenund dann kollaborativ an den Shownotes mitarbeiten. Und ja,Liveshows gibt's jetzt leider nicht allzu oft. Dann haben wir uns überlegt, wie können wir das dann umsetzen, dass man auch beianderen Sendungen irgendwie die Shownotes dann erzeugen kann. Und dann gab's halt manche Podcaster:innen, die dann ebennach der Aufnahme das Ganze dann nochmal einfachgesendet haben, so wie es aufgezeichnet worden ist. Und dann dazu nochmal die Shownotes teilweise eben schon zur geschnittenen Folge geschrieben worden sind.
Also ich denke im Nachhinein so ein einfaches Textformat war schon der richtige Weg. Einfach, dass es genutztwerden kann, also aus den verschiedenen Anwendungsfällen heraus. Ist immer das Interessanteste. Weil natürlich das kollaborative Arbeiten dann in einem Etherpad oder Ähnlichem,wenn man da irgendwie eine Web-UI gebaut hatte, auf irgendwie einer Datenbank-basierten Anwendungen, das wäre halt unfassbar komplex gewesen. Unser einfaches Textformat ist da auf jeden Fallsinnvoll, weil's eben sowas wie Etherpad halt schon gab.
Ja, wir haben dann auch gemerkt, je komplexer wir das Ganze drumherum bauen, je mehr Features wir mit einbauen ... Wir haben, angefangen, eigentlich nur mit einem normalen Etherpad, also damals noch vor Etherpad-Lightund haben dann ein paar Plugins dazu geschrieben, die automatisch die Timestamps einfügen. Das war so der Beginn.Und nach und nach ist halt immer mehr drum rumgebaut worden. Dann sind wir auf Etherpad Light umgestiegen und haben dann auch User-Verwaltung und APIs mit integriert.Und je komplexer das Ganze geworden ist, desto mehr haben wir gemerkt, dass die User oder die Hörer oder Hörerinnen dann die Lust dran verlieren.Und das, was einfach auch am Anfang alles als ja, spaßige Nebenbeschäftigung neben dem Hörengedacht war, dann irgendwie ein Arbeit ausartete.
Und das will keiner.
Also die Shownotes so wie sie jetzt im Publisher sind, sind tatsächlich auch rein fokussiert auf der Podcastende pflegt selbst seine Shownotes. Also da ist nichts mit Kollaboration. Das ist auch ganz simpel gehalten. Letztendlich ist es für Linklisten.Und da haben wir auch die extra Features drum rumgebaut.Also das kann Feature, das ist so ein "Unfurling" habe ich's genannt. Also dass einfach alle möglichen Metadaten zu der URL automatisch extrahiert werden. Also das irgendwie Open-Graph-Information, das ein Favicon und so was automatisch extrahiert wirdim Publisher hinterlegt wird, so, dass man das dann irgendwie rendern kann.Was uns da jetzt noch fehlt, dass wir's auf unserer Podcast-Seite benutzen können, ist tatsächlich ein API.Weil das Shownotes Modul ist zwar so ein bisschen in flux auch, weil wir – also grad Tim und ich – noch nicht so richtig zufrieden damit sind. Wir wissen noch nicht so richtig, wo die Reise hingeht.Das ist auch jetzt schon wieder seit längerer Zeit ohne Entwicklung. Es ist in der Form, wie es jetzt ist nutzbar, abersoll noch sehr anders werden. Aber wie anders? Mal schauen. Aber wir schweifen ab. Was dazu fehlt, dasswir es nutzen können, also "wir" im Sinne von Podlover-Podcast im Frontend, ist eine API. Weil wir ja im Frontend kein normales WordPress-Theme haben. Also das ginge. Also es gibt eine Templating-API,die die Metaebene eben auch schon nutzt, um die Shownotes da auf die Webseite zu bringen. Aber wir mit Podlovers ... Alex hatte ja das alles auf JavaScript und APIs gebaut.Und da gibt's einfach noch kein Endpunkte. Das müsste ich mal noch ... oder das müsste mal jemand TM noch bauen und dann könnten wir das auch nutzen.Gut, à propos Webseite. Was haben wir da geändert seit dem letzten Mal?
Ja, ein paar Bugfixes. Dann haben wir noch das Theme angepasst, weil Michi ja gerade dabei ist auch die Podlove-CI so ein bisschen aufzumöbeln.Und da habe ich ganz dreist einfach mal mir die Tailwind-Konfiguration geschnappt und habe mal die ganzen Farben entsprechend angepasst.Und dann, ja, die Übersichtsseite mit der Show, aber das hatte ich schon erwähnt. Genau. Da ist auch ein bisschen was passiert.
Audio-Hardware
20:43
In der Technik hat sich ein bisschen was geändert. Also wenn ich jetzt anders klinge als vorher,ich hab jetzt das Standard-Sendegate-TM-Setup hier mit HMC660 und Behringer Xenyx.Weil ich mir dachte, ich hatte halt vor so einem Rode-Podcaster auf Arm, weil das einfach noch von dem ersten Podcast herum lag.
Das ist auch diese Episode mal wieder untergebracht. Sehr gut.
Natürlich, mal sehen wie lange ich das durchhalte.Aber ich ich finde es einfach irgendwieanstrengend und wollte mal den anderen Weg ausprobieren. Zumal, das ist ja relativ günstig, ist irgendwie eine knapp Einhundert-Euro-Investition. Und aber auch aus Interesse, weil das ja irgendwie so das Hardware-Setup ist mit dem viele einsteigen.Und ich dachte mir auch, ich klicke mir das einfach mal auf Thomann. Ich frage mal niemanden, der mir das irgendwie noch erklären kann, sondern ich versuch's einfach mal, mich sehr selbst reinzufetzen.Und tatsächlich hat's mehr oder weniger auf Anhieb geklappt. Ich hatte nur so ein bisschen so einen Netzbrummen und da habe ich mir jetzt aber so ein Erdungsarmband gekauft, dass ich gerade jetzt auchum den Arm hab. Man muss nur beim Aufstehen aufpassen. Also mal gucken, ob ich da noch eine bessere Dauerlösung finde. Da gibt's auch einen kompletten Thread dazu im Sendegate. Aber das tut erstmal so.
Kannste auch nutzen, das Erdungsarmband, wenn du deinen Hackintosh dann aufmöbelst.
Mein Hackintosh ... Oder auch nicht.Nee, aber ich bin soweit ganz zufrieden. Ist ja jetzt einfach entspannender irgendwie mit Headset und man kann sich irgendwie freier bewegen und ja. Michi guckt ganz schmerzend.Magst du dein Mikro nicht, Michi?
Ich hätte gerne halt nur das Headset ausprobiert. Und nein. Nächstes Mal. Nächstes Mal probieren wir alle zusammen nicht nur vorher das Setup aus mit Discord, sondern auch schon mit StudioLink.Ich bin da ganz zuversichtlich.
Aber vielleicht mal zum Hauptthema Podlove Web Player.Das ist ja auch eins der großen Projekte, nachdem wir das letzte Mal den Podlove Publisherausführlich besprochen haben, ist, denke ich, der Podlove Web Player das andere große Projekt, womit irgendwie jeder Kontakt hat, irgendwie mit Podlove Kontakt hat. Tja, was ist der Player?Der Player, der spielt Audiodateien ab. Und warum braucht man da eigentlich was Neues? Weil gab's das nicht vorher schon? Simon hast du deine Meinung dazu?
Der Tim hat damals, wenn ich mich richtig erinnere, immer gesagt Podlove Web Player der ist das Instrument zum anfixen neuer Hörer, die das erstmalProbe hören wollen und noch nicht wissen, obder Podcast eben was für einen ist.Ja, das ist der erste Kontakt, bevor man irgendwas abonniert.Ja, alles andere: Also es gab schon Player. Aber alles andere war halt, ja, nicht so schön.
Ich denke ein großer Kritikpunkt am Anfang war auch, dass die Player, die es gab,sehr zurückhaltend waren. Also ich glaube, es gab regelmäßige Rants über 16x16-Pixel-Player. Die man irgendwo in Blogpost suchen musste.Wobei ja das Audio tatsächlich einfach mal das wesentliche Element des Podcasts ist. Aber klar,man kann argumentieren, den Web Player braucht keiner, weil man das ja eh oder den Podcatcher abonniert. Aber wie du sagst, wenn manden Podcast noch nicht abonniert, dann ist so ein prominenter Web Player mit irgendwie einem netten Feature-Set eine schöne Maßnahme für die Hörer:innen, um da einfach mal reinzuhören und den Leuten dasHören angenehm zu machen. Später kam natürlich noch mehr dazu, was mehr als nur das mal reinhören angenehm macht. Also gerade jetzt finde ich,wenn ich unsere Transkripte zum Beispiel sehe. Das letzte große Feature, was es in den Web Player geschafft hat.Da geht's ja auch darum, dass man Dinge vielleicht mal wiederfindet, was im Podcast zum Anfang eine schwierige Angelegenheit ist.
Oder auch Kapitelmarken. Das war ja auch ein Feature, das im Podlove Web Player zum ersten Mal groß in die Masse getragen wurde.
War auch immer so ein bisschen so eine Technologie-Demo. Um erstmal verständlich zu machen, was man überhaupt mit Podcasts und Metadaten machen kann.
Mhm. Wie ging's denn dann los? Podlove Web Player 1. Aber das warst noch gar nicht du, Simon, stimmt's?
Podlove Web Player 1
25:41
Das war noch nicht ich, das war damals noch der Gerrit van Aaken. Und ja, dazu kann ich relativ wenig sagen, also nur aus Hörer-Sicht.
Ja, also ich habe da ein bisschen, wie soll ich sagen, versucht Historiker zu spielen.
Was hast du denn ausgegraben?
Genau. Und ich habe auch Zeitzeugen eingeladen. Weil damals habe ich ... Ich weiß ich nicht, ob ich über den ersten Web Player mal gestoppt bin. Wahrscheinlich, aber nicht bewusst. Ja, damals war er noch schwarz-weiß der Web Player.Ist er mittlerweile nicht mehr. Und so wie ich es zumindest denDate-Stamps der Dateien, die ich von WordPess runtergeladen habe, entnehmen konnte, war im Juli 2012 die erste Version und im November 2012, dann der 1.2-Release. Und ich glaube das Design und die Implementierung waren von Gerrit.War alles auf jQuery und MediaElement.js aufgebaut.Und war ein sehr, wie so sagen, ich rudimentärer Prototyp würde ich jetzt mal so sagen. Also wenn man sich so anguckt, wie danach dann sich die Komplexität des Players auch verändert hat,war das erstmal, glaube ich, ein sehr guter Anfang, um zu zu zeigen, dass das möglich ist.
Was war da das Feature-Set? Also wahrscheinlich ein großer Playbutton. Ich glaube, den hatten wir von Anfang an. Progressbar statt Zeitanzeige. Titel.
Und Kapitel glaube ich.
Ach Kapitel waren auch schon von Anfang an? Waren das dann auch schon Tabs? Oder waren die einfach drunter, einfach immer ausgeklappt?
Das ist eine sehr, sehr gute Frage. Ich habe dazu leider keinen Screenshot mehr gefunden.
Also in der E-Mail vom Januar 2013, die ich ausgegraben habe, stand was von"Jetzt sind die Kapitelmarken auch irgendwie in den Player integriert."Also irgendwie waren die zwar schon mit Bezug auf dem Player und man konnte, glaube ich, auch schon durch die Kapitelmarken springen, aberDesign-technisch gab's noch keinen Bezug zwischen Player und Kapitelmarken. Die standen einfach nur drunter.Und ja, das hat sich dann mit der 2.0 geändert.
Podlove Web Player 2
28:16
Ja, in der 2.0 hattest du schon deine Finger drin?
Genau, genau. Also das war dann entsprechend die E-Mail undich habe dann einfach ein paar Änderungsdiffs geschickt. Das war damals noch gar nicht auf Git oder auf Github.
Ja, man kann auch E-Mails mit Code hin und her schicken. Das funktioniert auch.
Kann man sich heute gar nicht mehr vorstellen, dass es eine Zeit vor Git gab, ja. Das war dann auch ein wichtiger Schritt, das Ganze dann auf Git zu bringen undja, dann auch andere Helfer:innen da mit heranzuführen an die gemeinsame Entwicklung.
Du hast dann auch, dass Standalone-Plugin geschrieben?
Ich habe dann... Genau, ja. Also ich habemich in mehreren Bereichen ausgetobt und einfach mal die Punkte angegangen, die ich interessant fand.Ohne großes Konzept, in welche Richtung das gehen soll. Glücklicherweise, Tim hat dann geschrieben, das waren seine Top-Prios.Das hat dann schön gepasst.Und ja, das waren dann Design-Änderungen, das waren eben die Integration der Kapitelmarken,die Standalone-Funktionalität. Es gab dann schon einige Podcasts, die ich auch selbst gehört habe, die dann auchabseits von WordPress gehostet haben. Und das hat mich natürlich sehr gefreut, dass das dann auch eingesetzt worden ist.Und wir haben natürlich auch verschiedene Features ausprobiert,die nie irgendwie beworben worden sind. Also vorher ist ja gesagt worden, "der war damals noch schwarz-weiß". Wir haben dann auch ziemlich früh dann schon einenEditor gehabt, der ermöglicht, dass man einfach sein Farbschiema auswählt.
Ja, also ich erinnere mich, es gab eine richtige Standalon-Webseite, wo man sich so ein Theme bauen konnte. Also mehr oder weniger, Farben zusammenklicken. War das das? Oder war das nochmal was anderes?
Genau.Das gab's als Standalone-Webseite, die man sich importieren konnte. Und das gab's dann auch, wenn man die entsprechenden Configs aktivierte, direkt auch in den Einstellungen vom Wb Player,für diejenigen, die es eben mit WordPress verwendet haben.
Grundsätzlich war das Themen mit dem Web Player Version 2 noch relativ einfach. Alsoeinfach im Sinne von jemandem, der technisch versiert ist. Weil der Player noch nicht gesandboxed war. Das heißt, man konnte einfach irgendwie CSS in sein Wortpreis reinwerfen. Und damit einfach direkt den Player stylen. Das war von der Perspektive ja sehr angenehm.Aber sorgte auch dafür, dass einfach ständig der Player irgendwie visuell auseinanderflog.Jedes Mal, wenn jemand irgendwie nicht ein normales Theme haben, die dann einfach mal <p>-Tags mehr Padding gegeben haben oder keine Ahnung, alles Mögliche. Irgendwelche Borders gesetzt haben und Leuteverzweifelt nachfragten, wie sie denn irgendwie diese komischen Linien aus ihrem Player wegbekommen. Das war irgendwie ein Dauerbrenner dieses Problem.
Nach und nach im CSS alle möglichen Einstellungen auf important und irgendwie überschreiben.
Und als das alles durch war, dann wurde entschieden, dass der nächste gesandboxed wird?
Das war auch die richtige Entscheidung. Also aus meiner Sicht.
War, glaube ich, einer der treibenden Gründe,die Technik mal wirklich neu anzufassen. Also bis dahin zum Web Player 2 war es glaube ich immer nur eine Weiterentwicklung. Richtig? Da gab's vielleicht hier und da mal refactoring, aber es wurde nicht wirklich neu geschrieben, oder?Genau.
Man kann schon sagen, dass zwischen 1 und 2 schon ein krasser Unterschied ist. Also die Codebase ist schon deutlich anders.
Es war ein krasser Unterschied. Aber es wurde nie nochmal in neu begonnen. Also es waren immer nur Änderungen von bestehendem Code und nie ein kompletter Neustart.
Aber das geht mit jQuery ja ganz gut. Einfach mal immer noch ein bisschen mehr drauf werfen.Aber ich erinnere mich, ...
Das hatten wir halt damals, ne?
Ich habe auch irgend so einen Punkt-Release vom Web Player 2 habe ich auch mal gemacht. Irgendwie ganz gegen Ende.Um das mal so ein bisschen responsive zu machen. Ich glaube, da habe ich mal was geliefert, weil der Webplayer 3, das Release, sich irgendwie immer länger verzögert hatte und ich mir dachte, "okay, es nutzen einfach noch so viele Leute im Webplayer 2,dass ich da auch mal Hand anlegen muss".
Gab's damals schon so Features, wie Geschwindigkeit regeln.
Nee, die gab's in der 2 noch nicht.
Den Satz, den ich abschließen wollte war, glaube ich, schon ganz schön Spaghetti. Man sah auch die Not,das ganze mal zu rewriten und nicht einfach nur weiter zu refactoren und das umzubauen. Also ich glaube, da gab's schon wirklich viele triftige Gründe, das Ganze mal from Scratch wirklich anzufassen.Und das ist dann auch passiert. Hast du das noch mit angefangen? Oder war das dann schon sofort Juri? Simon?
Podlove Web Player 3
33:44
Also ich war in der Theorie noch dabei. Habe noch mitgeredet, aber am Code für den 3er habe ich relativ wenig bis gar nichts beigesteuert.
Mhm. Vielleicht zum Features-Set, also was man schon angesprochen haben: Sandboxing war auf jeden Fall eine Top-Priorität. Also was technisch bedeutet,dass der Player nicht direkt in der Webseite liegt, sondern in einem iframe eingebunden wird. Das heißt, dass CSS oder Styling, derHauptseite kein Einfluss auf den Player haben kann.Das klingt irgendwie ganz sinnvoll, aber hat sehr viele irgendwie Tücken im Detail,weil der Play hat verschiedene Größen, Breiten, Höhen und das ist in dem iframe gar nicht so einfach, das irgendwie nachträglich zu ändern. Um nur irgendwie ein schwieriges Thema zu nennen. Alex, du hast genickt?
Ja, da kommt später noch mehr dazu.
Dann, Theming hatten wir auch schon angesprochen. Das ist natürlich einschwierigeres Thema, weil sobald der Player gesandboxed ist, kann man ihn von außen nicht mehr stylen.Das heißt da wurde ein richtiges Theming-System mitgedacht. Das heißt inder Realität wurden dann, glaube ich, eine Handvoll vorgefertigte Color-Themes mitgeliefert, die manauswählen konnte. Ich weiß gar nicht, wie der Status war, ob man irgendwie da sein eigenes CSS reinbekommen hat, aber ich glaube ...
Ich vermute, dass das möglich war, weil es unterschiedliche Theme-CSS-Dateien auch gab. Und so wie die da reingelinked waren, das auch glaube ich so war, dass wenn man zumindest an die Codebasis kam, wie der Player embedded war, dass man auch das austauschen konnte.
Okay.Sharing war ein großes Thema. Ich weiß nicht, wie weit waren wir da im Player 2? Da hatten wir die Time-Codes schon, oder? Das, wenn man irgendwie andie URL irgendwie "Hashtag Time-Code" gesetzt hat, dass der Player dann anfing da abzuspielen.
Das ist übrigens auch ein Standard, den wir da, glaube ich, definiert haben.
Ja, also für das Zeitformat haben wir uns an ein PT gehalten. PlayTime glaube ich.Aber es gibt auf podlove.org eine Spezifikation dazu, die auch vorgibt, also nicht nur einen Start- sondern auch einen End-Zeitpunkt. Also, dass man eine Range angeben kann. Konnte das der Player 2? Eine Range abspielen?
Ich denke nicht. Also wir konnten den Startzeitpunkt mitgeben. Gab's ja auch die Social-Media-Links, wo man dann entsprechend auswählen konnte, ob man einfach nur die Episode verlinken möchte oder eben auchzu dem entsprechenden Zeitpunkt. Aber also ein Zeitpunkt gab's damals noch nicht.
Und der Gedanke da war letztlich, dass man eine Sektion auswählen kann und diese direktper Social Media teilen kann. "Hier, hör mal, da, der Witz war lustig." Aber letztendlich das Hauptfeature war schon überhaupt eine Zeitmarke setzen zu können, dass man eben irgendwohinverlinken kann im Audio. Wie man's eben auch Webseiten gewohnt ist, dass man da zu einem Anker springen kann.
Wir hatten auch in den, wenn ich mich richtig erinnere, in den Kapitelmarken die Möglichkeit, dass man dann die Kapitelmarken verlinkt hat.
Was dann sicherlich einfach nur Sprung war. Also das da hat dann diese URLs mit der Zeitmarke dran generiert.
Genau, genau. Aber dann konnte man halt sagen "Hör dir dieses Kapitel an", und hat dann halt nichtvorher im Player nochmal zurückspulen müssen auf genau die Position, wo das Kapitel anfängt, sondern halt einfach im Player auf das Kapitel geklickt und dann da den Link bekommen.
Das was Overcast und Castro jetzt ja quasi als Video zum Sharen gelöst hat. Das war damals da schon, glaube ich, die erste Idee,dass man da so eine Sektion einfach teilen kann und dann, dass ich die Nutzer:innen dann tatsächlich genau diesen Ausschnitt angehört haben.
Die Videos sind natürlich da, weil's einfach Social-Media-tauglich sind. Weil auch immer noch Videos einfach viel besser bedient sind, also von den Social-Media-Plattformen.
Also das Problem ist weniger, dass es jetzt unbedingt ein Video ist. Das Problem ist eher, dass zum Beispiel Plattformen wie Instagram einfach dir keine Media-Erweiterung geben. Facebook und Twitter können das,aber Instagram zum Beispiel hat da gar keine Möglichkeit, irgendwelchen Fremd-Code tatsächlich mitin einem, wie auch immer die Einheit heißt, mitzuembedden.
"Stories" Fragezeichen?
Stories? Es gibt ja mehr als Stories. Nicht, dass ich mir so da was einfange, dass ich Instagram falsch erklärt habe.
Alle Angaben ohne Gewähr. Was noch neu war im 3er-Player waren Downloads. Die waren bisherquasi immer unter dem Player.Also vom Publisher so by default gerendert. Und wir dachten uns, dass es doch ganz sinnvoll wäre, die Downloadmöglichkeit auch direkt im Player mit anzugeben.
Also generell hat sich Sven, also Graphorama, der das Design für den Web Player 3 gemacht hat, sehr ausgetobt, was das angeht. Es gibt auch sehr viele Konzepte, die wir noch haben,die theoretisch mit in den Player 3 hätten kommen können. Und da neben Downloads auchbeispielsweisedas Anzeigen von Bildern, für bestimmte Audiomarken auch mit vorgesehen und so weiter. Da gibt's auch eine ganze Bibliothek an Designs, die vorliegen.Aber ich vermute, dass Juri Leino und Alexandra von Kriegern einfach nicht dazu gekommen sind, dass da noch mit zu implementieren.Weil's dann doch noch ein ganze Menge Komplexität mit aufgeworfen hat.
Ja, ich meine so ein Rewrite... Also jeder hier, der irgendwie an Software arbeitet und mal so ein Rewrite gemacht hat, von einem Stück Software, weiß, dass...Wenn man es das erste Mal macht, denkt man sich, "Okay, jetzt machen wir es mal ordentlich und wir wissen jetzt, die ganzen Probleme schon. Also, wenn wir jetzt neu anfangen, dann wird's ja irgendwie bestimmt alles ganz einfach. Und als Feature Set nehmen wir uns einfach mal die Basis von dem, was es bisher gab,"und das geht halt meist nach hinten los. Also das istdann doch irgendwie immer viel komplexer als gedacht. Und ich glaube, das war auch beim Player 3, so ein bisschen ... Da ganz einfach Durststrecken, dass einfach viele Dinge, sehr viel länger gedauert haben alsgeplant. Weil's eben doch nicht nur das Alte, auf neue Technologien gehoben ist, sondern auch hier hatten wir ja mitTheming, Sandboxing, Sharing, Downloads und solchen Sachen irgendwie neue Sachen, die einfach neue technologische Herausforderungen waren, die irgendwie bewältigt werdenmussten. Und auch alleindie standardmäßig mitgelieferten Themes waren, ich weiß mehr, wie viele es waren, aber bestimmt, sagen wir mal, sechs bis zehn.DAs hat, glaube ich, alles die Alexandra gebaut. Also die hat sich da sehr auf das CSS geworfen, wenn ich mich recht entsinne. Das ist ja auch schon irgendwie ein riesiger Batzen Arbeit, der da zu leisten gewesen war.
Es wurde durch die ganzen neuen Features, neben dem Rewriting, wurderder ganze Player plötzlich total komplex. Und wenn der vorher so zwei States hatte, nämlich Play und Nicht-Play, und dann plötzlich kommen die ganzen Features dazu. Ist das Download-Tab jetzt gerade offen?Ist das Info-Tab grade offen? Welche Kapitelmarke ist aktiv?
Also ich hab jetzt gerade noch einen Screenshot des Web Players 2 angeschaut und hab gesehen, den Downloads-Button hatten wir damals anscheinend auch schon.Und auch die Bilder zu den Kapitelmarken gab's damals schon. Also lange ist es her, aber das gab's auch damals schon.Die Infobox gab's auch, genau.
Also ich erinnere mich gerade, das war nicht so wirklich ein Tab-Interface, sondern anders, oder? Ich hab's gerade vor meinem Auge, aber ich kann's nicht beschreiben.
Es waren Buttons im... Also den Player gab's aufgeklappt und zugeklappt. Undim zugeklappten Player gab's Buttons, mit dem man die verschiedenen Menüs, also das Info-Menü, des Download-Menü und nachher ist, glaube ich, auch das Sharing-Menü dazugekommen,und eben das Kapitelmarken-Menü aufklappen konnte. Was dann auch eben die Frage war:Verschiebt das das restliche Design von der Webseite?Und wenn man das Ganze dann sandboxed, wie sieht's dann aus? Also die Diskussion gab's damals schon, das Ganze abzukapseln.Und wie macht man's mit wechselnden Größen vom Player? Weil entsprechend die Infobox ebenmal mehr, mal weniger gefüllt ist. Die Kapitelmarken mal mehr mal weniger sind. Macht man die dann zum Scrollen oder zeigt man immer alle an? Das waren damals auch schon Fragen.Es war einfacher durch das Ganze, dass es nicht gekapselt war.Führte aber allerdings auch dazu, dass das Ganze dann eben auch die Webseite, so den nächsten Post oder den Blogbeitrag, der dazugehört, nach unten weggeschoben hat.
Ja, das ist auch noch heute so.
Ja schwer zu verhindern, oder? Ich meine, du willst halt auch die Kapitelmarken irgendwie in ihrer Ganzheit oder zumindest irgendwie sinnvoll scrollbar anzeigen können, oder?Sogar noch auf Transkripte. Also da hast du ja noch viel mehr Platzbedarf. Aber ja, kommen wir vielleicht später dazu im4er-, 5er-Player. Da können wir eigentlich direkt schon mal rübergehen, ne?
Podlove Web Player 4
44:17
Genau, der 4er-Player. Da bin ich dann eingestiegen. Das war Anfang 2017. Was mir gerade noch eingefallen ist, was wir so gar nicht erwähnt hatten, ist dass der Web Player von Anfang an, dasMindset hatte, dass er tatsächlich ein Visualisierer der Metadaten, die auch im Feed sind, quasi ist.Das heißt, die Audiodatei wird ja im Feed auch durch weitere Metadaten beschrieben, und der Player nimmt quasi diese Audiodateien nur als eine weitere Information wahr.Das ist, glaube ich... Das begegnet mir relativ häufig: Warum denn der Player beispielsweise nicht die Kapitelmarken aus der MP3-Datei ausliest. Das hatviele Gründe,aber einer der Hauptgründe ist, weil das Konzept nicht konsistent ist. Weil beispielsweise auch das Transkript natürlich nicht in der MP3-Datei drinnen ist. Oder die Bilder sind zwar in der MP3-Datei, aber vielleicht nicht in anderen Audioformaten mit drinne.Deswegen wäre das, glaube ich, nochmal ganz wichtig zu sagen, das ist halt wirklich eine Visualisierung der Informationen oder Metainformationen rund um eine Podcast-Episode.So als Mindset.
Ja und wenn man jetzt die ganze Logik nochmal in den Player einbauen würde,dass der aus aus allen möglichen Dateien oder aus der MP3-Datei Bilder extrahiert und Kapitelmarken extrahiert, dann hätte man die ganze Logik mehrfach an allen möglichen Stellen.Und so hat man einfacheine zentrale Single Source of Truth, von der alles kommt und die man dann auch pflegt und die funktioniert.Wenn die funktioniert, dann funktioniert der Rest.
Ja. Und das war jetzt auch beispielsweise beim Web Player 3. Der wurde auch anders als der Web Player 2 nicht mehr mit dem WordPress-Plugin ausgeliefert,sondern – und da die Brücke – der Web Player 4 auch nicht. Sondern der wurde exklusiv nur mit dem Publisher vertrieben. Als quasi Add-on. Undder Publisher liefert in dem Moment quasi auch den Player. Das war relativ schnell klar, dass auch im 4er-Player wir die Information direkt von Publisher bekommen. Und zwar in einem JSON-Format, was man relativ einfach passen kann. Und als ich angefangen habe mit dem Web Player 4war es so, dass ich ziemlich schnell mir gesagt habe, dass die Konfiguration, die ich tatsächlich vom Publisher bekomme,eigentlich auch schon ein Ausdruck von einem Zustand ist. Also ab Web Player 4 ist es so, dass das halt sehr umfangreiche Zustandsmaschinen geworden sind. Und diese Zustandsübergänge sind halt isoliert voneinander zu betrachten.Das heißt, die Idee ist einfach, dass je nachdem, was ich für eine Konfiguration reingebe oder je nachdem, was für einen Zustand der Player hat, dass er immer gleich aussieht. Das heißt,für einen bestimmten definierten Zustand,ist die Repräsentation des Players immer gleich. Das ist so ein mentales ... oder beziehungsweise ein Modell, was wir bei der UI-Entwicklung, was glaube ich so 2016 so richtig Traktion gefunden hat und was ich 2017 dannangewendet habe am Player. War auch mein tatsächlich fast erstes Projekt damit. Hatte auch einige Fallhöhen.Und deshalb war die erste Implementierung – also ich ich rede von Redux als Pattern, was genau das ist – die erste Implementierung war in React. Dann gab's aber 2017 so ein bisschen die Probleme, dass die Lizenz nicht einhundertprozentig klar war.Das verfolgt uns.Und dann wurde mir vorgeschlagen – ich weiß es gar nicht mehr, wer wer es war im Slack – "Ja, nimmt doch hier VueJS". Sieht ganz gut aus, probiere ich mal. Dann habe ich das angefangen und bin dann aber reingelaufen, dass es dafür gar keineRedux-Anbindung gibt. Weil nämlich die interne Art und Weise wie Komponenten oder React-Komponenten ihren State verwalten und wie VueJS-Komponenten ihren State verwalten sehr unterschiedlich sind.Sodass ich dann erstmal angefangen habe und eine quasi Binding zwischen Redux und Vue anzufangen.Was auch in relativ vielen Projekten auch verwendet wird. Was ich immer als so Basis-Set mitverwende.Das ging dann weiter, dass beispielsweise auch der... Ich habe dann mir einige Audio-Libraries angeschaut und war mit keiner so richtig zufrieden. Weil nämlich zwar viele Audio Libraries existierten,aber die waren nicht so richtig voneinander ... oder die Aktionen waren nicht so richtig von der UI getrennt. Das heißt, ich wollte irgendwas haben, was mir im Hintergrund meinen tatsächlich Audio-, ich hab's damals Treiber genannt,mein Audio-Backend befeuert und was mir dann einfach nur über Events in meinem Player den State ändert.
Und damals... Tschuldigung, um den Rückbezug zu den Plänen davor zu nehmen: Bis dahin, war es halt immer MediaElement.js? Also das ist jetzt die Komponente letztendlich, die du da austauschen wolltest? Und die war einfach... War die noch maintained?
Die war nicht mehr so richtig maintained, aber es gab auch andere, die zum Beispiel auf der WebAudio API aufgesetzt hatten.Aber da bin ich... Also HTML5 Audio ist auch wirklich ein absolutes Mienenfeld. Meine Güte, da prägt sich so die gesamte Diversität von Browsern aus und jeder implementiert bestimmte Methoden anders und die Library hat haltan allen möglichen Stellen, irgendwelche Spezialbehandlungen für einen Safari, der sich irgendwieanders verhält. Das ging dann sogar so weit, dass ich bei bestimmten Properties, die so normalerweise so ein HTML5-Audio-Element hat, auch ans Ende der Specgekommen bin, die dann einfach nicht mehr ausdefiniert war, was für Error-Codes da eventuell rauskommen können. Das gibt's dann einfach nicht mehr, da haben sie aufgehört, das zu spezifizieren. Was bedeutet, dass in der Realität es tatsächlich so ist, dass jeder Browser dann selber implementiert.
Genau dazu sollten die vielleicht noch sagen: Damals in in den Anfangsjahren des Web Players gab's ja auch noch Flash.Und viele andere Player hatten sich entschieden, das Ganze einfach mit Flash abzuwickeln, weil jeder Browser anders mit Audiodateien umgegangen ist.Und wir hatten halt die glückliche Lage, dass wir mit Auphonic dann auch einfach sagen konnten,na ja, wir haben alle möglichen Audioformate und wir bieten einfach das Audioformat an, dass der jeweilige Browser unterstützt. Und wenn's jetzt ein Firefox ist, dann bekommt er sein OGG und wenn'sein Safari ist, dann bekommt er sein M4A.Und andere haben sich's halt leicht gemacht und das Ganze dann mit Flash umgesetzt, was halt andere Nachteile mit sich brachte.
Ja, ich erinnere mich dran, also MediaElement hatte ja Support sowohl für Flash als auch für Silverlight.
Noch Fallbacks, ja.
Wer kennt noch Silverlight?
Wer traut sich das zuzugeben?
Ich erinnere mich auf jeden Fall daran, dass es da mal einen Hotfix für den Web Player 2 gab, glaube ich,weil irgendein richtig fieser Flash-Bug rauskam, einSecurity Exploit, und ich da einfach ganz schnell mal diese Flash-Fallback rausnehmen musste... aus diesem MediaElement-Fallback. Ja. Das nur als kleine Intermission, aber diesen Klotz haben wir ja nicht mehr am Bein, also seit der neuen Audio-Chore-Geschichte.
Trotzdem gibt's auch manchmal soEffekte, die man nicht vorhersieht. Beispielsweise, wenn man MP3s mit so dynamischen Bitraten hat, dann kann's halt auch sein, dass die Time-Stamps ab einem gewissen Punkt nicht mehr stimmen, weil die Browser das halt einfach nicht mehr gebacken kriegen.Ja, er ist halt alles Browsertechnologie, ne? Ja. Das hat so seine Fallstrecke. Ja, jedenfalls war beispielsweise auch das Sandboxing, so eines der ersten Dinger,wo ich mir Gedanken drüber gemacht hatte, weil's ja tatsächlich so ist, dass der Web Player einen eigenen iframe hochzieht.Und da gibt's eine Library, die nennt sich iframe Resizer. Und das war dann so ein bisschen der Punkt, wo ich merkte, dass es funktionieren könnte.Also die Idee von beim 4er-Player war, so schnell wie möglich irgendwie an die Grenze zu kommen, wo ich nicht mehr weiter implementieren kann, um zu sehen, ob dann irgendwie die Konzepte funktionieren.Und das war also eine der kritischen Punkte, wo ich nicht so richtig wusste, wie kann das funktionieren, dass ich den iframe an die entsprechenden inneren iframe-Größen anpasse?Ohne auch solche Sachen, wie wenn man beispielsweise, der 3er-Player hatte auch versucht, das über eine statische URL zu machen.Das führt aber oftmals dazu, dass du Cross-Site-Skripting-Effekte hast oder dass bestimmte Sicherheitsmechanismen im Browser ziehen.Und der 4er-Player hat von Anfang an seinen eigenen iframe aufgezogen und hat den iframe selber mit dem Dom-Content befüllt, sodass du diese ganzen Probleme nicht mehr hattest.Und was auch deshalb möglich war, war dadurch, dass ich diese Barriere zwischen iframe und Browser so ein bisschen angelöst hatte,war, dass man Redux auch als API verwenden konnte. Das heißt, das fand ich als...Also Redux ist im Endeffekt eine klare Definition, wie man Verhalten in einer Applikation abbildet. Und zwar passiert das, indem man da sogenannte Actions, das ist also ein Typ, wie beispielsweise "der Playbutton wurde geklickt",mit einem Payload, also irgendeine Information, die dann noch optional dazu ist,in einen Store reingeschickt wird. Ich merke gerade, das könnte ganz schön explodieren jetzt die Erklärung.Jedenfalls es ist quasi der Zugang zum gesamten Zustand des Players und zur Änderung des Zustand des Players und damit die perfekte API eigentlich von außen, weil damit man alles machen kann.Das heißt also, man kann seit dem 4er-Player, wenn man den erweitern wollte, konnte man von außen irgendwiedas Theme ändern. Man konnte die Beschreibung ändern. Man konnte irgendwie an eine bestimmte Stelle springen. Das war quasi so die Erweiterung in die Seite,die aber nicht von vielen verwendet wurde. Tatsächlich. Weil ist ein sehr mächtiges Interface, aber man muss es halt auch kennen.Und ja, das war dann so einer der Knackpunkte.Ich überlegt gerade. Genau, die ganze Architektur habe ich dann zügig auf Sagas noch mit umgestellt. Also das heißt, dadurch, dass man quasi einen Zustand hat, der immer ein bestimmte Visualisierung hat,möchte man alles, was diesen Zustand ändert, irgendwie einigermaßen abspalten. Beispielsweiseder HTML-Audiotreiber im Hintergrund, hat ja eine große Auswirkung darauf, ob jetzt tatsächlich gerade etwas spielt, ob die Zeit läuft und so weiter.Und das ist etwas, was ich isoliert betrachten möchte. Und da gibt's ein sogenanntes Konzept der Sagas. Es ist auch relativ alt schon.Und das ist so, dass man die Seiteneffekte als isolierte und langlebigere Threads wahrnimmt. Das sind am Ende Generatoren, JavaScript-Generatoren,und das Interessante ist, dass man die mit dem Redux-Patternschön verwenden kann und auf andere Actions, die da reinkommen, reagieren kann und auch selber Actions da rein emitten kann. Und daserhöht die Lesbarkeit und macht es möglich, den Player sehr gut zu testen.Und dann quasi näherten wir uns schon recht schnell der Alpha, nämlich das war bereits im Juni.Da muss man dazu sagen, da waren die Transkripte noch nicht mit dabei. Also Transkripte waren ja so einer der Treiber des Web Players 4, die Markus Stuhr, der das Design dafür gemacht hatte,schon von Anfang an mitgedacht hatte. Also ich glaube, dass das so einer der Kernpunkte war, wie das Desig nrundrum entstanden ist.Ein anderer Kernpunkt dabei war, dass das Styling, dynamisch sein sollte, und zwar so, dass der Nutzerzwei Farben maximal definieren kann und der Player und alle Elemente des Players sich entsprechend anpassen. Das heißt, der gesamte Player hat auch natürlich sein Theme irgendwie in den State persistiert und alle Elemente leiten sich davon ab.Und das hat zur Folge, dass man auch die Farbe während der Laufzeit ändern kann. Sinnlos, aber man kann's machen.
Also der Gedanke dahinter war, schon ein Theming zu erlauben, aber möglichst eins, dasimmer noch gut aussieht. Also quasi man sagt, man erlaubt dem Nutzer nur zwei Farben zu setzen, was den meisten sicherlich ausreicht, um irgendwie das Farb-Schema der eigenen Webseite zu treffen,aber errechnet sich alle anderen Schattierungen der Farben selbst, um zu gewährleisten, dass die Kontraste stimmen, dass die Lesbarkeitstimmt und das es einfach noch okay aussieht.
Großer Spaß übrigens.
Hat noch nie jemand gefragt, danach, je nachdem, wer im Transkript spricht, danach soll sich die Farbe ändern?
Hm, ne, hat noch nie jemand gefragt.
Fänd ich für unsere Seite gar nicht so schlecht.
Was immer mal aufkam, war, dass man die Avatare der Leute anzeigt. Die Information sind eigentlich auch da, theoretisch, von den Auphonic-Daten, aber...
Das ist möglich, aber...Viele der Tabs tatsächlich, die der Player hatte – also das war ja auch das Sharing und so weiter, das hatte auch so ein so ein Scope of Show, Chapter,einen bestimmten Time-Stamp und so weiter... Ach ja und eines der Features mit war das Embedding.Das heißt, sowas wie in so einem YouTube-Video, dass man einfach den Player nehmen konnte, in dem iframe,und irgendwo auf eine andere Seite draufwerfen konnte und da renderte der da. Das war auch seit dem 4er-Player möglich.Das hat aber ganz schöne Herausforderungen mit sich gebracht, weil nämlich dann genau man nicht mehr die Möglichkeit hat, den iframe zu resizen.So dass man dann darin endet, wie man die Tabs abbildet, beispielsweise. Das heißt, im 4er-Player ist es noch so,dass der die Tabs noch mitbringt und dass der auch tatsächlich die Tabs dann nach oben öffnen, statt nach unten öffnet und man in den Tab scrollen kann. Was, ehrlich gesagt, jetzt auch nicht so eine richtig geile User-Experience ist.Aber die einzige Möglichkeit damit umzugehen, ohne jetzt JavaScript auf eine Fremdseite zu embedden.
Was viele Seiten ja auch gar nicht erlauben. Weil dieArt wie man's embedded: Das eine ist halt ein iframe, das andere ein Script-Tag. Also das Script-Tag ist das, was einem quasi die volle Gewalt gibt unddas, was man bräuchte, aber was eben aus genau dem Grund... Volle Gewalt finden halt viele Seitenbetreiber nicht so gut, deswegen wird's nicht erlaubt, aber iframes sind eben gekapselt auf ihren eigenen frameund deswegen sind die immer im embeddbar. Also wie, wenn man was von YouTube zu einem Embed-Code generiert, dann ist das ja auch ein iframe. Kennt man daher.
Genau. Und ja, dann auf der Subscribe 9 habe ich das ganze Konzept dann nochmal etwas ausführlicher präsentiert,wie der ganze Playern entstanden ist und kurz nach, also ich kann mich noch dran erinnern, auf der Zugfahrt zurück von der Subscribe aus München raus, habe ich den dann auch released.Da, wie gesagt, noch nicht mit Transkripten, aber die wurden dann relativ zügig nachgeliefert, nämlich zügig nachgeliefert, ein Jahr später, nein.
Gefühlt zügig.
Zügig im Zug.
Im Mai 2019 kamen dann die Transkripte tatsächlich. Mhm. Aber da... Also die Transkripte waren auch nochmal so ein extra Biest, weil...Also sagen wir es mal so, das hat wirklich nochmal eine ganz neues Level an Herausforderungen gegeben, weil nämlich es ja so Podcasts gibt die vier Stunden gehen,und dann so ein Transkript, mal sehr lang wird und die gesamten... Also das Besondere an den Transkripten ist, dass die sich highlighten, wo man gerade ist. Man kann draufdrücken und dannspielt der Player von dort aus ab.Das bedeutet aber, dass auf jedem Dom-Element da drinnen ein Eventhandler drauf ist. Was sofort dazu führt, wenn du so einen riesigen, Vier-Stunden-Podcast hast, dass dir der gesamte Browser abschmiert.Und deshalb gibt's da sehr viel Aufwand dahinter, nur die Transkripte gerade anzuzeigen, die tatsächlich auch jetzt im Hörbereich sind.Was aber wiederum dazu führt, dass man irgendwie sowas wie... Also man kennt das ja so ein Lazyloading von Bildern oder so ein Endless-Scrolling, wo man wirklich nur so ein Fenster hat, wo man über die Seite geht.Das Ding ist aber, dass Transkripte Tags sind, und Tags keine definierte Höhe haben.Und das dazu führte, dass der Player im Hintergrund die ganze Zeit angefangen hat, erstmal sich auszurechnen, "Wie hoch sind denn eigentlich die Blöcke, die ich habe?". Und jedes Mal, wenn man den Player resized hat, hat diese Kalkulation von Neuem betrieben.Und das ist wirklich... Alsoes funktioniert, aber es gibt solche Dinge, die nicht funktionieren, wie beispielsweise zwischen den Suchergebnissen hin und her zu springen. Das hat damit zu tun, weil ich einfach in dem Moment, wo ich die die Suchergebnisse habe, noch gar nicht so richtig weiß, wo jetzt das Ergebnis ist, sodass ich da hin und her springen könnte.Und das Highlight gehört da auch da mit dazu.
Aber Transkrips durchsuchen, ist auf jeden Fall ein sehr schönes Feature. War sehr praktisch.
Auf jeden Fall.
Das war woeder so ein Schritt, wo man gemerkt hat, "Okay, jetzt sind wir echt einen großen Schritt weiter, was einfach Nutzbarkeit und Spaß angeht". Das war sehr schön.
Woran wir jetzt gerade auch noch arbeiten, auch mit der der Podlovers Webseite ist ja, dass man das auch natürlich von Google indexieren lassen kann, richtig? Ohne jetzt nochmal extra Content da drauf zu packen.Und ja, das sollte jetzt eigentlich funktionieren und da gibt's noch sehr viele Spielereien, die man in die Transkripte noch mit reinbringen kann, aber da...Mal sehen, was die Vorstellungskraft so hergibt.Genau, dann ging's weiter, nämlich Ende 2018stellte sich natürlich die logische Frage, was kommt nach der Vier? Und die Antwort war: "Nicht die Fünf". Weil nämlichEnde 2018 ich erstmal angefangen habe, das in einPodlove-UI-Repository zu migrieren.Der Hintergrund war da, dass wir schon häufiger die Anfragen und auch beispielsweise vom Spiegel bekommen hätten, ob man so eigene Varianten vom Player haben kann.Die Idee war da, ein Monorepro zu erstellen, wo alle Komponenten, die für den Player tatsächlich relevant sind, drinne liegen, wie beispielsweise so ein Playbutton,und auch wieder, wo der State isoliert ist und das dann alles getrennt voneinander zu releasen, sodass man sich nur die Dinger da rausnimmt, die man tatsächlich benötigt. So funktioniert übrigens die Podlovers-Webseite.Das nutzt tatsächlich dieselben Repositories oder dieselben Packages, wie auch der Web Player, aber nur die, die es wirklich benötigt.Undda dachte ich mir – bin ich relativ zuversichtlich reingegangen – "ja, das ist ja genau das, was man haben möchte". Und das hat dann aber dazu geführt, dass man das theoretisch machen könnte, aber bisher gibt's außerdem Web Player selber wenig Elementeoder wenig Applikationen, die das tatsächlich verwenden.Und das hat halt hauptsächlich damit zu tun, dass es schwierig ist, solche isolierten Komponenten, wie so ein Playbuttonzur Verfügung zu stellen, aber gleichzeitig zu sagen, aber du musst dir jetzt aber auch gleichzeitig mal die... Also das hat folgende Zustände, das spuckt folgende Aktion aus. Und wenn du das dann mit diesem anderen LEGO-Block verbindest, dann funktioniert das.Und das ist halt ein ganz anderes Mindset, wie man entwickelt. Und sehr schwer zu transportieren.Und zwingt natürlich die Leute auch beispielsweise wenn man die Web-Player-Komponenten verwenden möchte, VueJS zu verwenden.Aber alles andere, zum Beispiel wie die Sagas, wie den State und die Actions an sich, könnte man mit jeder anderen Frontendsprache auch verwenden.Macht aber keiner.Und der Hintergrund ist der, dass wir 2018 halt in Gesprächen mit dem Spiegel gekommen sind, weil die den Web Player auf der Webseite einsetzen wollten. Und ja, das war halt meine logische Antwort zu sagen, "Wo hier ist das,Leute. Ihr habt ja Frontend-Entwickler. Viel Spaß damit!" Und da stellte sich dann aber relativ schnell raus, dassso wie ich eine Applikation entwickle, obwohl ich jetzt sagen würde, "ja, so würde das wahrscheinlich jeder machen", das halt nicht jeder macht. Weil das ja natürlich auch...
Podlove UI
1:02:41
Hast du schon mal jemanden anders gefunden, der es auch so macht?
Also ich meine, ich kenne viele.
Zum Beispiel? Okay.
Also ich glaube auch, dass das möglich gewesen wäre. Aber es war auch so zum gewissen Teil so ein Maintenance-Problem und auch so ein Ressourcen-Problem tatsächlich.Und das Design beispielsweise vom Web Player 5 war relativ früh klar,also das grobe Design. Aber die Implementierung davon war nicht klar. Und was man nicht wollte, oder was wir nicht wollten, war dass jetzt da quasi so ein Fork entsteht vom Web Player,der doppelte maintained werden musste.Und deswegen sind wir dann dazu übergegangen, tatsächlich das semantische Rendern, also den Web Player in eine ArtBuilder oder Framework für Player umzuwandeln.Was nämlich der Web Player 5 dann... Da hat Daniel Kramer hauptsächlich die Leitung über das UX gehabt. Das ist ein Designer vom Spiegel gewesen, derfinde ich, logische Schlüsse daraus gezogen hat, was jetzt im 4er-Player nicht so richtig gut funktioniert hatte. Zum Beispiel das Sharing war viel zu kompliziert.Da hatten wir sehr viele Anfragen dazu bekommen, was da geklickt werden müsste, um dann das rauszuteilen. Im Konzept hat das super funktioniert, aber man kann halt nicht von den Nutzern erwarten, dass sie die gleichen mentalen Modelle da im Hintergrund haben.
Podlove Web Player 5
1:05:50
Da gibt's sehr viele Optionen, oder? Also irgendwie Episode teilen? Segmente teilen? Podcast teilen?
Ja, genau.Und die Icons ... Also es war ja auch so, dass der 4er sich auch an Konzepten des 3ers noch von Sven bedient hatte, und das hat alles nicht so super zusammengepasst, weil ich bin einfach kein UXler bin.Das merkt man sofort. Ich habe eine grobe Vorstellung, wie etwas funktionieren könnte, und wie es auch gut aussehen könnte, aber das selber zu bauen und auszuarbeiten, dass ist eine ganz andere Disziplin.Und deshalb war ich ziemlich dankbar, dass dann tatsächlich so ein komplettes Audio-UI beim Spiegel dann rausfiel,was den Nebeneffekt hatte, dass die zum ersten Mal auch unterschiedliche Anwendungsszenarien für den Player bedienen wollten.Das hatten wir, diese Idee, tatsächlich auch beim 4er-Player, haben sie aber nie so richtig umgesetzt, weil wir dann jedes Mal... Also ich weiß nicht, vielleicht kann sich Eric da noch dran erinnern? Ich hatte mal an einem Live-Player gearbeitetund habe mich sehr schwer damit getan, ohne jetzt noch einen komplett neuen Player hochzuziehen, das zu realisieren.
Wage. Hat halt schonandere Anforderungen so ein Live-System. Also es ist halt nicht nur, dass man irgendwo einen Live-Button anzeigt.Du hast halt sofort irgendwie die Progressbar. Was zeigt die eigentlich an? Oder zeigt man da gar nichts an? Sind irgendwie dann viele Teilfragen, die sich sofort aufdrängen,wenn man einmal anfängt. Das ist nicht trivial.
Und da war dann die Antwort von uns ein Templating zu verwenden. Und für das Templateing haben wir uns dafür entschieden, oder habeich mich dafür entschieden, dass wir Bootstrap verwenden. Äh nicht Bootstrap, sondern Tailwind verwenden.Weil das genau dieser... Also das große Problem, was Eric und Simon angesprochen haben, ist sobald man irgendwie anfängt und da Stylesheets zulässt in dem Player,hat man das Problem, nicht nur dass der Player vielleicht kaputt geht, sondern auch, dass bei Updates es dazu führt, dass der Player nicht mehr so aussieht, wie man das sich vorher zusammengebaut hatte, auch wenn der Anwender gar keine Fehler dabei gemacht hätte, das anzupassen.Man verbaut sich da einfach sehr viel von einem Upgrade-Pfad.Und dann hat mich Eric auf Tailwind geschubst und dann dachte ich mir, das könnte genau das Framework sein, was man dafür verwenden könnte.Und die ganzen Web Player 5 Templates – es gibt mittlerweile, glaube ich, drei oder vier –sind mit Tailwind realisiert und man verwendet im Großen und Ganzenetwas komplexere Komponenten von Player, kann die neu arrangieren – zumindest den groben Header, die Tabs gehen noch nicht. Unddas führte dann dazu, dass ich angefangen habe... Der 4er-Player ist tatsächlichvom Fußabdruck in Browser nicht ganz so kräftig, wie der 5er. Und das hat damit zu tun, dass VuewJS zwei unterschiedliche Möglichkeitendes Renderings anbietet. Einmal das Live-Rendering... Also beispielsweise tatsächlich das, was du da reinschmeißt, wird gerendert an Komponenten und das precompilete Rendern.Und der 4er hat das Precompiling dann verwendet. Und beim 5er habe ich genau dieses Feature verwendet, um dynamische Templates, die entweder direkt in den Player mit reingepackt werden können oder von außen über eine URL mit reingegeben werden,darzustellen. Ja und das führt dann dazu, dasstatsächlich im 5er-Player man alle Elemente rausschmeißen kann, neu arrangieren kann. Man kann eigene... Im Theming ist es jetzt auch möglich eigene Fonts noch mitzudefinieren.Man kann eigene neue Elemente noch mit hinzufügen, wenn man das möchte. Also es ist tatsächlich weniger eher so ein Player an sich geworden, sondern tatsächlich eher so ein Framework oder eine Sandbox, um Player-Elemente zu visualisieren.
Und da kann ich auch sagen, dass das gut funktioniert, weil das habe ich schon bei verschiedenen Kunden da zum Einsatz gebracht. Also dass ich da tatsächlich Elemente rauswerfen konnte, anpassen konnte, umschieben konnte. Ja, das fandguten Anklang und war relativ einfach umzusetzen durch die Templates. Ja, das ist aus meiner Sicht ein gutes System.
Jo. Was auch im 5er-Player war, ist der Subscribe Button.Da ist es auch so, dass es eine eigene Library dafür gibt, für Podlove. Also die nennt sich Podlove Clients.Also die Podcast Clients und ihre URIs oder Schemas, die man bedienen muss, beziehungsweise auch die Icons mit anbietet.So ist auch beispielsweise der Subscribe-Button auf der Podlovers-Seite gebaut. Das ist nicht der alte Subscribe-Button, sondern das ist eigentlich eher der Subscribe-Button, derim Web Player drinnen ist, aber als eigene Libery konsumiert.Und da hatte Letty auch eine sehr gute Vorarbeit geleistet und ich habe das dann noch so weitergetrieben, dass man dannden Subscribe-Button tatsächlich in dem Player hat. Und tatsächlich sind das zwei isolierte Applikationen im neuen Player. Das heißt, sowohl der Subscribe-Button, auch da als auch der Player, haben eigene Sandboxen.Die haben miteinander nichts zu tun, sondern was die machen ist, natürlich,die tauschen State untereinander aus oder schicken Actions hin und her. Da gibt's so einen Bus dazwischen, was es möglich macht, vom Player aus den Subscribe-Button zu öffnen.Weil im Player tatsächlich dieser Knopf schickt nur nach außen, "Öffne mir mal bitte mal den Subscribe-Button" und draußen ist dann noch ein Stück Sandbox, was darauf lauscht, und dann öffnet er sich und schließt sich wieder.Und das ging dann auch Anfang 2020 live auf spiegel.de.
Noch bevor es offiziell released wurde durch dich?
Ja und das hat hauptsächlich damit zu tun... Oh, das ist eine Überleitung aus der Hölle nicht schlecht. Das hat hauptsächlich damit zu tun,dass beim 4er-Player wir gemerkt haben, dass es ganz schön viel Maintenance bedeutet, sogar dass Eric sich ein Skript geschrieben hat, was ich erst letztens entdeckt habe,um den 4er-Player zu updaten.
Ich schreibe gerne Bash-Skripte.
Weil der 4er-Player ja also ausschließlich mit dem Podlove Publisher ausgeliefert wurde. Und das wollten wir beim Webplayer dann nicht mehr so machen. Und haben uns gesagt, Mensch, der Simon, der hat doch vorsieben Jahren mal ein Plugin geschrieben. Das können wir doch verwenden dafür. Und da machen wir mal einen Versionssprung von zwei auf fünf. Und das haben wir gemacht.Und das führte zu, glaube ich, gemischten Gefühlen. Unter anderem auch einer der Gründe, warum ihr uns jetzt gerade reden hört.Weil nämlich das Upgrade... Also zum einen war eine Anforderung, dass die API gleich bleibt. Also, Simon, da ist auch noch Code von dir mit drinne.Da ist auch zum Beispiel der Code, der die Chaptermarks parsed. Ich weiß nicht, wer den geschrieben hat, aber ich hab's nicht hinterfragt. Ich hab's einfach übernommen gesagt, "Aas lasse ich lieber so, ich will's gar nicht genau wissen." Der ist da noch mit drinnen. Die ganzen Shortcodes sind kompatibel untereinander.Und was aber eigentlich hinzugekommen ist, ist ein sehr umfangreicher Konfigurator und auch Gutenberg Blocks.Und der Konfigurator gibt dir die Möglichkeit, unterschiedliche Flavors von dem Player darzustellen. Und ich glaube, das ist auch so eines der Konzepte, die wir nicht gut kommuniziert haben.
Aber bevor wir auf diese Integration eingehen... Also es gab ja nach dem 2er-Player schon Versuche, das Ganze nochmal als eigenständigenPlayer, als WordPress-Plugin zu veröffentlichen. Also beim 3er-Player weiß ich's grad gar nicht mehr genau.Ich weiß, dass es durchgängig Nachfragen gab. Also der Bedarf war immer da, dass die Nutzer:innen gesagt haben, "Okay, ich möchte den Player nutzen, aber eben ohne Publisher und jetzt bitte auch den neuen".Und das war einfach immer ein Maintenance-Problem. Es gab da einfach jahrelang jemanden, der das machen wollte. Weil gut, WordPress ist jetzt nicht unbedingtdie Lampe, die die Motten anzieht. Da muss man eher schonmit mit einem großen Sack Zucker ankommen, keine Ahnung.
Es ist eher so dieses Elektrodings, wo die Mücken drinnen verenden.
Man kommt an, aber ja... Ich nehme mal an, wenn man da ist, dann bleibt man irgendwie drin stecken.Ja also es ist einfach, dass uns da die Maintenance gefehlt hat. Es gab einfach niemanden, der es machen wollte. Oder Alex, hattest du nicht mit dem 4er-Player da malangefangen und es ist dann irgendwie versandet?
Ich hatte es probiert. Ich habe auch schon mit einigen aus dem Sendegate... Die hatten so eine Beta-Version von dem 4er am Laufen, aber das Hauptproblem ist einfach, dass man auf so viele unterschiedliche Environments stößt, dass ich irgendwann gesagt habe, ichweiß nicht, ob ich das irgendwie einigermaßen mit angemessenen Maintenance-Aufwand zum Laufen bringen kann. Aber der...Gerade dann beim 5er und die ganzen Optionen, die man dann hatte, auch dass man ein eigenes Template haben kann, dass man irgendwie auch mehrere Player gleichzeitig unterschiedlich definieren kann,das hat dann einfach nur nochmal getriggert und gesagt, "Das müssen wir jetzt irgendwie über die Bühne kriegen" .
Also, hast du dir doch nochmal nen Ruck gegeben?
Ja, ich kann mich noch an Anfang des Jahres erinnern, als ich so Tim sagte, "Ja, ja, dann mach ich irgendwie Januar, Februar, mache ichdann fix das Plugin fertig, da hab ich schon mal ein bisschen angefangen".Danach wollte ich eigentlich am Subscribe-Button weiterarbeiten, aber wie ihr wisst, ist der noch nicht geupdatet.
Was hat das denn für Gründe? Erzähl mal.
Ja, also generell finde ich den...Eigentlich benötige einen UXler oder einen Designer, der mal über dieses Plugin drüber geht und einfach mal so einen Realitätsabgleich mit tatsächlichen Nutzer:innen macht und sagt,"Ja, das ist ein gutes Konzept und das haben die nicht verstanden. Da müssen wir vielleicht nochmal drüber reden."Das haben wir eher schmerzhaft, glaube ich, gemacht diesen Prozess. Nämlich indem wir irgendwann das Upgrade rausgeschoben haben. Übrigens,WordPress ist eines so der wenigen Systeme, was tatsächlich für die Versions-Updates noch ein SVN verwendet.Das hat lange gedauert.
Und zwar ein SVN, in dem alle Plugins drinliegen.
Ja.Dass ich war so kurz davor, irgendwie eine Automatisierung dafür zu schreiben, aber dann... Oh, da muss ich auf jeden Fall Credits geben. Moment, ichsuche gerade noch den Namen dazu. Krafit war das. Und zwar der Simon Kraft.Dass es dafür tatsächlich eine Github-Action war. Und zwar diese Github-Action ist absolutes Gold, wenn man irgendwie von Git in SVN von WordPress was pushen möchte. Ohne das würde ich wahrscheinlich immer noch fluchend davor sitzen.
Tja, ich habe dafür einen Ruby-Skript.
Ja, mein Ruby-Skript läuft nicht so lange.
Ja. Ich habe auch mal reingeguckt in die Action. Die macht ein paar Sachen sehr geschickt. Also, ich musste das irgendwann mal umstellen. Die ist wirklich... Ja, kann ich weiterempfehlen. Also ohne sie selbst benutzt zu haben, aber vom Sourcecode lesen. Die macht sehr gute Sachen, sehr schlaue Sachen.
Ja, man setzt ein Tag und dann rennt die Action los und schubst dann mit entsprechender Manipulation der Readme den ganzen Kram dann da hoch. Ist wirklich cool.
Vor allem macht sie so ein paar schlaue SVN-Geschichten, von denen ich mir gar nicht mehr bewusst war, dass sie gingen. Also was ich immer mache vor jedem Release: Ich update mir quasi das ganze SVN.Das musst du aber gar nicht machen. Also du musst nicht lokal alle Tags und so weiter da haben.Und dieser Workflow macht tatsächlich einfach nur das Nötigste und klont auch nicht die ganzen Tags und so weiter.Also, wer irgendwie Plugins mit WordPress baut, schaut's euch mal an.
Wirklich sehr hilfreich, ja. Ja und damit war dann der Player raus unddanach kam quasi Erfolg, ne? Man drückt auf Release und jetzt wird alles gut.So war's leider nicht. Das führte nämlich dazu, dass wir ... Wir hatten zwar vorher die Integration mit dem Publisher getestet, aber der ganze Weg, wie man diese Integration herstellt, warfür uns glaube ich relativ offensichtlich, aber für die Nutzer einfach nicht.
Es gingen verschiedene Dinge schief an der Stelle. Also ich weiß gar nicht mehr, wie weit jetzt das Release von dir und dem Publisher auseinander waren. Haben wir das wirklich getimed? Oder warst du ein paar Tage eher?
Also ich glaube wir haben das getimed gehabt. Also du hattest die... Es war auch...Wir hatten ja Tester. Es ist ja nicht so, dass wir das nicht vorher getestet haben.Die sind halt einfach nicht in die Probleme reingelaufen. Und leider war es auch so, dass wir nicht genügend Betatester oder eigentlich keinen Betatester von dem Podlove Publisher hatten, der genau diese Integration mal ausprobiert.
Also aus Publisher-Sicht gab's halt wirklich sehr viele Permutationen von Konfigurationsmöglichkeiten. Eine große Umstellung von Player 1, 2, 3, 4 zu 5war, dass der Publisher halt die selbst mit ausgeliefert hat.Und das heißt die ganzen Dateien liegen im Publisher und der hat das einfach unter Kontrolle. Und beim 5er-Player haben wir jetzt gesagt,wir setzen als Bedingung, dass das Web-Player-5-Plugin aktiviert ist und der Publisherquasi nutzt dann diesen Code mit oder die sprechen miteinander. Und das ist technisch eine relativ große Umstellung, weil ich muss halt einmal checken, welcherPlayer ist im Publisher eigentlich ausgewählt, der 4er oder 5er? Und ist5er da oder nicht? Oder ist vielleicht das alte Plugin noch da? Oder aktiviert oder nicht?Und da hatte ich eigentlich gedacht, das alles durchgetestet zu haben, aber es gab dann dochProbleme oder Konstellationen, wo es bei vielen dazu geführt hat, dass sie den Publisher aktualisiert haben und ihr Player weg war,weil es eben ein Konfigurationsproblem gab vom Publisher, wo zwar der 4er-Player noch eingestellt war, aber er ihn nicht finden konnte.Oder der Publisher dachte, dass der 5erausgewählt war, obwohl er das nicht war. Oder es gab auch Namenspace-Konflikte in den Shotcodes, weil wir da schon lange Zeit sehr lustige Dinge tun.Nämlichist der Shortcode "Podlove Web Player" und der Publisher guckt nach, also in den anderen Modulen,ob der schon registriert ist. Weil halt das Web-Player-Plugin, das theoretisch auch selbst, also praktischregistriert. Und der Publisher dann sagt, "Okay, also wenn das andere Plugin den Shortcodes schon registriert hat, dann hatte ich mich mal zurück.Und wenn nicht, dann registriere ich meinen eigenen Shortcode noch. Und wir auch in sehr viel Legacy-Kram dagelaufen sind und irgendwie viele Dinge, die da irgendwie subtil schief gingen. Und nur Nutzer fragten, warum jetzt ihnen dieses Upgrade aufgezwungen wurde, was es eigentlich gar nicht war. Es gingen halt nur irgendwie Dinge schief undwir haben irgendwie weiter getestet und konnten's halt irgendwie nicht reproduzieren lange Zeit. Ja, das war schmerzhaft.
Ja, das das hätte man, glaube ich, generell besser einfach kommunizieren müssen. Also auch zu sagen, "So, pass mal auf, es ist jetzt der 5er-Player.Wir haben zwar viele Fälle getestet, aber es kann sein, dass es halt irgendwo an irgendeiner Stelle noch knackst." Was, glaube ich, für die meisten absolut okay gewesen wäre, die dann auch gesagt hätten, "Ja okay, gut. Dann stelle ich mich drauf ein".Aber so ist es ja... Und ich fand das war eigentlich auch durchweg auch immer, glaube ich, ein Lob. Nämlich irgendwie "Komisch. Ich kann mich einem kein Publisher-Update irgendwie erinnern, wo mal was kaputt gegangen wäre."Und das war halt jetzt so das Erste, was rausstach.Und dann haben wir halt dann relativ zügig die ganze Zeit Updates rausgeschoben. Also ich kann mich so an Wochen erinnern, wo ich irgendwie jeden Tag oder jeden zweiten Tag ein Update für das Plugin rausgepumpt habe,um dann irgendwie so die größten gröbsten Sachen zu beheben. Und angefangen habe Dokumentationen dafür zu schreiben. Dann ist auch ziemlich schnell klar geworden, beispielsweise, dass Viele auch gar nicht so richtig mit den Twig-Templatesumgehen konnten. Anfangs war es so, dass man... Also das Web-Player-Plugin hat soDefaults für unterschiedliche Sachen. Einmal für eine Konfiguration, für ein Theme und für ein Template.Und viele Nutzer:innen haben sich einfach nicht getraut, das Default zu editieren. Ich dachte mit, "Ja dann ändert ihr das halt da drinnen". Sondern die haben dann ein neues hinzugefügt und fragten dann, "Warum sehe ich das denn nicht? Ich hab's doch ausgewählt."Was aber eigentlich passiert war: Sie haben's in der Preview ausgewählt und haben in dem Twig-Template das nie wirklich festgemacht.
In der Zeit habe ich auch mehrfach gelesen von Leuten, "Ja ne, Templates? Das habe ich ja nie angeklickt."
Aber das war gutes Feedback für uns, weil wir dann wussten,wir arbeiten hier an Features oder wir investieren hier Zeiten, Features, die viele halt einfach gar nicht verwenden. Das istdas ist sehr wertvoll für uns, weil wir dann natürlich unsere Prioritäten ändern konnten. Ein Resultat beispielsweise war, dass das Web-Player-Plugin dann auch noch einen Switch hatte. Um zu sagen, "So,mein Default zeigt jetzt auf...", und dann quasi mein Theme, meine Konfiguration, mein Template und so weiter. Ja unddas hatte sich dann mit der Zeit auch ein bisschen stabilisiert. Was ich komplett vergessen hatte, der 5er-Player hat auch eine Funktionalität, die nennt sich "Related Episodes".Das heißt, der kann andere Episoden darstellen und man kann da unten auf Play drücken und dann wird die auch mit ausgewählt. Und standardmäßig bei einer Publisher-Installation ist es so, dass sie sich die letzten 20 Episoden holt.Aber man kann auch Shows noch mit referenzieren.Und was mir letztens auch zugetragen wurde, von Joey, ist warum wir denn die Related Episodes dafür gar nicht verwendet haben, das Feature von den Publisher? Und das stimmt.Das ist mir einfach nicht eingefallen, dass es ja im Publisher ein Feature oder ein Modul gibt, das nennt sich "Related Episodes". Es war eigentlich offensichtlich, es trägt sogar denselben Namen.Ja, aber das ist sowas, da werden wir auch garantiert noch weiterarbeiten und dann noch die Möglichkeit geben,tatsächlich diese Anwendungsfälle oder diese unterschiedlichen Szenarien für den Player auszuspielen.Also was ich mir immer vorgestellt habe, war dass irgendwie auf der Startseite, ist halt ein Player.Da spielt die letzte Episode und hat in den Related Episodes, die anderen Episoden, die Letzteren. Und wenn man dannbeispielsweise irgendwie auf einen Player in einem Beitrag klickt, dann ist der halt viel ausgestalteter oder hat halt andere Eigenschaften, jetzt nicht unbedingt die Related Episodes, sondernja, weiß ich nicht, der hat nen Infotab noch mit dabei, der halt in der View nicht da ist. Da gibt's viel Potential, was jetzt gerade einfach auch noch liegen gelassen wird, einfach, weil, glaube ich, vielen gar nicht klar ist, was man damit alles machen kann.
Wie du schon sagst, also man muss da, glaube ich, viel Hand reichen, weilwir noch von relativ viel technischer Expertise ausgehen. Teilweise mit so, "Da muss man ja nur an diesem Template was editieren oder hier und da was konfigurieren. Und man muss aber denke ich da einfach viel irgendwie klickbar machen,Preview-bar machen, dass man einfachvielleicht sieht, "Okay, was gibt's jetzt hier für Optionen?" Direkt mit Vorschau und dann "Ah, genau, das ist das, was ich will. Gib mir das bitte."
Ja, was wir auf jeden Fall machen können, ist noch mehr Defaults mit auszuspielen. So ist es zum Beispiel, dass der Web Playeroder das WordPress-Plugin auch mehrere Themes für zum Beispieldass 2019er-Theme und das 2020er-Theme von WordPress mit anbietet, die dann einfach da mehr drauf passen.Das ist so ein netter Nebeneffekt, dass wir da die existierenden Themes ganz einfach nachschieben können.Und es gibt jetzt auch so eine Blueprint-Funktionalität. Das heißt, wenn du dir eine neue Konfiguration oder ein neues Theme anlegst, dann kannst du sagen, "Ja, aber ich möchte, folgende Werte schon mal erben". Und dann kann man sagen,beispielsweise das 2019er-Theme von WordPress möchte ich jetzt als Theme da drin haben.Genau, aber da geht's weiter. Da gibt's noch, glaube ich, viel zu arbeiten.Auch so ein Ding ist: Man kann sich ja auch jetzt die Ordnung und tatsächlich auch dieunterschiedlichen Podcast-Clients im Subscribe-Button da mit drinnen konfigurieren. Das ist auch sowas. Da ist das UI auch bei Weitem nicht optimal. Da gibt's auch noch regelmäßig Fragen dazu. Da werde ich auch mir nochmal was überlegen müssen, wie man das dann tatsächlich besserklar macht, was man wo jetzt eintragen muss. Weil nämlich die Realität leider so ist, dass wir durch die ganzen Plattformen, die jetzt den Podcast-Markt bearbeiten, immer neueInformationen, die jetzt nicht unbedingt der Feed oder die iTunes-ID sind, benötigen, um tatsächlich da hinzulinken.
Hm. Gibt immer was zu tun.Jut. Bist du ausgeredet?
Weiß ich noch nicht, also zumindest was in den Web Player angeht, ja.
Was willst du denn sonst noch bereden? Was hast du? Hast du noch Themen dabei?
Ausblick
1:29:23
Naja, es muss ja irgendwas nach dem Web Player 5 kommen. Das ist ja wohl selbstverständlich. Das ist so ein bisschen... Aber da ist noch nichts fix, ne? Alsoda hoffe oder beziehungsweise da seht ihr gerade die ersten Experimente damit.Nämlich, was wir oder was ich schon sehr früh mir vorgestellt hatte, war dass eigentlich d er Player, bisher immer nur in einem Fenster, in der Seite eingesperrt war, aber eigentlich die ganze Seite der Player sein sollte.
"Eingesperrt" ist ein schönes Wert dafür.
Genau. Und die Podlovers-Seite ist jetzt so ein erster Versuch, mal die existierende Technologie, die wir haben, zu verwenden, um ihn mal freizulassen und mal zu sehen, was man da für nette Nebeneffekte hat.
Free the Web Player! Free!
Wo das dann hinführt, wie wir das zur Verfügung stellen können – weil's ja auch ein ganz anderer Technologie-Stack ist – das gibt's nochmal, glaube ich, in einer extra Episode.Aber die nächste Iteation des Players wird auf jeden Fall etwas sein, was jetzt nicht unbedingt der Player in einer Box ist.
Sehr schön.
Out of the box.
Thinking outside the box. Out of the box. Who let the player out?Okay, mir gehen die schlechten Kommentare aus. Hat noch jemand was beizutragen?Alle schütteln mit dem Kopf. Na, dann danke Simon, dass du da warst. Für die kleine Geschichtsstunde.
Und Tschüss
1:30:49
Danke für die Einladung.
Und wir hören uns beim nächsten Mal. Tschau.
Bis dann.
Tschüssi.
Tschau.
Tschüss.