Architektur

+----------------------------------------------------------------------------+
|                                                                            |
|    UI (Vue.js)                                                             |
|                                                                            |
|                                                                            |
|    +------------+    +------------+    +------------+    +------------+    |
|    |            |    |            |    |            |    |            |    |
|    |            |    |            |    |            |    |            |    |
|    |   Player   |    |  Chapters  |    | Transkript |    |  Settings  |    |
|    |            |    |            |    |            |    |            |    |
|    |            |    |            |    |            |    |            |    |
|    +------------+    +------------+    +------------+    +------------+    |
|                                                                            |
+----------------------------------------------------------+-----------------+
                                                           |
            ^                                              |
            |                                              | Dispatch
            | Subscribe                                    |
            |                                              |
            |                                              v
    +-------+---------------+
    |                       |                      +--------------------+
    |    Store (redux)      |                      |                    |
    |                       |                      |    Actions         |
    |                       |                      |                    |
    |                       |                      |                    |
    |                       |                      |                    |
    |                       |                      +--------------------+
    |                       |
    +-------+---------------+                              ^
            |                                              | Dispatch
            |                                              |
            | Subscribe                            +-------+------------+
            |                                      |                    |
            v                                      |    Effects         |
                                                   |                    |
   +-----------------------------------------------+--------------------+---+
   |                                                                        |
   |    Media-Player (Howler)                                               |
   |                                                                        |
   |                                                                        |
   |                                                                        |
   |                                                                        |
   +------------------------------------------------------------------------+

• Basis: Redux Store
• Media Player: Howler
  • Howler ohne Frontend
  • API treibt Store
  • Kann durch beliebige andere Mediaelement Bibliotheken ausgetauscht werden
  • Mediaelement über Store entkoppelt vom UI
• UI Renderer: Vue.js
  • Austauschbar
  • UI über Store entkoppelt von Mediaelement
  • Integriert sich gut mit Redux Store
  • Viele Bibliotheken für Theming, i18n, ...
• Actions
  • Abstraktion für den Store
  • Gewährleistet Austauschbarkeit von Action Types

Aktuelle Einschränkungen

• Tabs fehlen (Kapitel, Transkripte, Einstellungen)
• Kein Theming (mehrere Möglichkeiten, bspw. fixierte Themes wie in (Material UI)
• Kein i18n
• Kein Deeplinking (kann relativ simpel als redux Store Akteur implementiert werden)

Weiterführende Links

• Redux:
  • Getting started
  • Beispiel: In C