NPM package verwenden mit webpack

Podlove Podlove Web Player
1

Hallo,

gibt es eine Beispiel-Implementation, die das NPM Package verwendet, evtl mit webpack ?
Irgendwie bekomme ich das „base“ setting in der config nicht hin.

Vielen Dank!

2

Heyho,

ich vermute mal du meinst den https://www.npmjs.com/package/@podlove/web-player? Das würde ich an deiner Stelle vermutlich via CopyPlugin und dann script tag einbinden. Je nachdem was du genau implementieren willst gibt es aber auch noch weitere Plugins mit denen du dir einen Player bauen kannst. Wenn du ein Repo hast schaue ich gerne mal drauf.

3

Hab hier mal eine PR https://github.com/stereosupersonic/podi/pull/20

es kommt der JS Fehler <URL>/player/variant-xl.js net::ERR_ABORTED 404 (Not Found)

sieht so aus als ob ich den „Base“ Pfade anders setzen muss.

4

Ich hab im PR mal was drunter geschrieben.

5

Vielen Dank, ich schau es mir die nächsten Tage an.

6

@zusatzstoff hat funktioniert, danke!

habe aber noch zwei Fehler in der console

    The above error occurred in task qe
    created by takeEvery(PLAYER_READY, qe)
    created by t
Tasks cancelled due to error:
takeEvery(PLAYER_READY, qe)
takeEvery(PLAYER_REQUEST_PLAYTIME, $e)
takeEvery(PLAYER_BACKEND_PLAYTIME, $e)
takeEvery(PLAYER_SET_CHAPTER, Ye)
takeEvery(PLAYER_DISABLE_GHOST_MODE, Xe)
takeEvery(PLAYER_PREVIOUS_CHAPTER, Ke)
takeEvery(PLAYER_NEXT_CHAPTER, Qe)

und

TypeError: o.reduce is not a function
    at index.js:1
    at l (length.js:25)
    at Generator._invoke (length.js:25)
    at Generator.next (length.js:25)
    at p (vendor.js:342)
    at u (vendor.js:342)
    at I.<computed> (vendor.js:342)
    at vendor.js:342
    at v (vendor.js:342)
    at p (vendor.js:342)

liegt vielleicht an meiner Config.

7

Kannst du mal die Config posten? Das sieht mir so aus als ob da fehlerhafte chapters reinkommen.

8

der Großteil wurde per Copy & Paste vom Beispiel übernommen https://docs.podlove.org/podlove-web-player/meta-data.html

  podlovePlayer(
    ".podloveplayer", {
      "version": 5,
      "show": {
      },
      "title": player.dataset.title,
      "subtitle": "",
      "summary":  player.datase.description,
      "publicationDate": player.dataset.published_on,
      "poster": player.dataset.poster,
      "duration": player.dataset.duration,
      "link": player.dataset.link,
      "audio": [

        {
          "url": player.dataset.mp3Url,
          "size": player.dataset.file_size,
          "title": "MP3 Audio (mp3)",
          "mimeType": "audio/mpeg"
        }
      ],
      "files": [
      ],
      "chapters": "",
      "contributors": [
      ],
    },

    {
      "base": "/packs/media/player/",
      "theme": {
        "tokens": {
          "brand": "#166255",
          "brandDark": "#166255",
          "brandDarkest": "#1A3A4A",
          "brandLightest": "#E5EAECFF",
          "shadeDark": "#807E7C",
          "shadeBase": "#807E7C",
          "contrast": "#000",
          "alt": "#fff"
        },
        "fonts": {
          "ci": {
            "name": "RobotoBlack",
            "family": [
              "RobotoBlack",
              "Calibri",
              "Candara",
              "Arial",
              "Helvetica",
              "sans-serif"
            ],
            "weight": 900,
            "src": ["./assets/Roboto-Black.ttf"]
          },
          "regular": {
            "name": "FiraSansLight",
            "family": [
              "FiraSansLight",
              "Calibri",
              "Candara",
              "Arial",
              "Helvetica",
              "sans-serif"
            ],
            "weight": 300,
            "src": ["./assets/FiraSans-Light.ttf"]
          },
          "bold": {
            "name": "FiraSansBold",
            "family": [
              "FiraSansBold",
              "Calibri",
              "Candara",
              "Arial",
              "Helvetica",
              "sans-serif"
            ],
            "weight": 700,
            "src": ["./assets/FiraSans-Bold.ttf"]
          }
        }
      },
      "subscribe-button": {
        "feed": "https://www.wartenberger.de/episodes.rss",
        "clients": [{
            "id": "apple-podcasts",
            "service": "id1546458413"
          },
          {
            "id": "antenna-pod"
          },
          {
            "id": "beyond-pod"
          },
          {
            "id": "castro"
          },
          {
            "id": "clementine"
          },
          {
            "id": "deezer",
            "service": "deezer-id"
          },
          {
            "id": "downcast"
          },
          {
            "id": "google-podcasts",
            "service": "https://podcasts.google.com/feed/aHR0cHM6Ly93d3cud2FydGVuYmVyZ2VyLmRlL2VwaXNvZGVzLnJzcw"
          },
          {
            "id": "gpodder"
          },
          {
            "id": "itunes"
          },
          {
            "id": "i-catcher"
          },
          {
            "id": "instacast"
          },
          {
            "id": "overcast"
          },
          {
            "id": "player-fm"
          },
          {
            "id": "pocket-casts"
          },
          {
            "id": "pocket-casts",
            "service": "https://wartenberger.de/feed/m4a/"
          },
          {
            "id": "pod-grasp"
          },
          {
            "id": "podcast-addict"
          },
          {
            "id": "podcast-republic"
          },
          {
            "id": "podcat"
          },
          {
            "id": "podscout"
          },
          {
            "id": "rss-radio"
          },
          {
            "id": "rss"
          }
        ]
      },
      "share": {
        "channels": ["facebook", "twitter", "mail", "link"],
        "outlet": "/share.html",
        "sharePlaytime": true
      }
    });
9

chapters: "" kann null, undefined oder auch ein leeres array sein, aber kein leerstring :smiley: