Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter mayamitkind

    (@mayamitkind)

    Tiny addition to the problem above: the “shownotes” tab makes the player unresponsive. Like, with the above template, while I am on the “shownotes” tab, I can’t actually *use* the player, clicking the play button does nothing. I can still move around the player position or look at the transcript and (empty) shownotes and all that, but no audio will play. When I’m on one of the other tabs, like the “transcript” tab, I can use the player again. I absolutely don’t get *why* that happens though?! Something about the Shownotes functionality seems very broken.

    I’m seeing the following error in the web console:

    TypeError: "r is null"
        groups https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/bootstrap.js:2
        groups https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/bootstrap.js:2
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:27
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:27
        _data https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        yr https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        yr https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        _init https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        a https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        componentInstance https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        init https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        h https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        h https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        h https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        zi https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        _update https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        n https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        get https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        vr https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        mount https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        $mount https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        $mount https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        init https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        f https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        zi https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        _update https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        n https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        get https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        run https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        pr https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        ne https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
        Jt https://podcast.vielgeliebt.net/wp-content/plugins/podlove-web-player/web-player/5.1.1/player/vendor.js:33
    vendor.js:33:11711
    Thread Starter mayamitkind

    (@mayamitkind)

    Okay, I figured out why the tab wasn’t getting shown. When I only change the Web Player settings, this will not affect how the player displays for already posted episodes somehow. I need to re-save the episode to update the player. Is that the intended behaviour? I would somehow have expected the changes to be applied right after saving, and for all my episodes.

    Now I’m getting a “Shownotes” tab, but it remains completely empty.

    I’m using Podlove Publisher to display the player. So in Podlove Publisher I have simply selected Podlove Web Player 5, and in Podlove Web Player 5 settings, I edited the “default” template with the two lines shown above, giving in total:

    <root data-test="player--xl" style="max-width:950px;min-width:260px;">
      <div class="tablet:px-6 tablet:pt-6 mobile:px-4 mobile:pt-4 flex flex-col">
        <div class="flex-col items-center mobile:flex tablet:hidden">
          <show-title class="text-sm"></show-title>
          <episode-title class="text-base mb-2"></episode-title>
          <subscribe-button class="mb-4 mobile:flex tablet:hidden"></subscribe-button>
          <poster class="rounded-sm w-48 shadow overflow-hidden"></poster>
          <divider class="w-full my-6"></divider>
        </div>
    
        <div class="tablet:flex flex-grow">
          <div class="w-64 mobile:hidden tablet:block tablet:mr-6">
            <poster class="rounded-sm shadow overflow-hidden"></poster>
          </div>
          <div class="w-full">
            <div class="hidden tablet:block">
              <show-title class="text-base"></show-title>
              <episode-title class="text-xl desktop:text-2xl"></episode-title>
              <divider class="w-full my-4"></divider>
            </div>
            <div class="flex items-center justify-between">
              <div class="block">
                <play-state on="active">
                  <speed-control class="flex items-center"></speed-control>
                </play-state>
              </div>
    
              <div class="flex">
                <play-state on="active">
                  <chapter-previous class="mx-2 block"></chapter-previous>
                </play-state>
                <play-state on="active">
                  <step-backward class="mx-2 block"></step-backward>
                </play-state>
    
                <play-button class="mx-2 block" :label="$t('PLAYER.PLAY_EPISODE')"></play-button>
    
                <play-state on="active">
                  <step-forward class="mx-2 block"></step-forward>
                </play-state>
                <play-state on="active">
                  <chapter-next class="mx-2 block"></chapter-next>
                </play-state>
              </div>
    
              <div class="block">
                <play-state on="active">
                  <volume-control class="flex items-center"></volume-control>
                </play-state>
              </div>
            </div>
            <div class="flex w-full">
              <progress-bar></progress-bar>
            </div>
            <div class="flex w-full -mt-2">
              <div class="w-3/12 text-left">
                <timer-current class="text-sm"></timer-current>
              </div>
              <div class="w-6/12 text-center truncate">
                <play-state on="active">
                  <current-chapter class="text-sm"></current-chapter>
                </play-state>
              </div>
              <div class="w-3/12 text-right">
                <timer-duration class="text-sm"></timer-duration>
              </div>
            </div>
          </div>
        </div>
        <divider class="w-full mt-6 mb-3"></divider>
        <div class="flex justify-between">
          <div class="flex mobile:w-full tablet:w-3/12 desktop:w-3/12 justify-between">
            <tab-trigger tab="shownotes">
              <icon type="info"></icon>
            </tab-trigger>
            <tab-trigger tab="chapters">
              <icon type="chapter"></icon>
            </tab-trigger>
            <tab-trigger tab="transcripts">
              <icon type="transcripts"></icon>
            </tab-trigger>
            <tab-trigger tab="files">
              <icon type="download"></icon>
            </tab-trigger>
            <tab-trigger tab="playlist">
              <icon type="playlist"></icon>
            </tab-trigger>
            <tab-trigger tab="share">
              <icon type="share"></icon>
            </tab-trigger>
          </div>
          <!--<subscribe-button class="mt-1 mobile:hidden tablet:flex"></subscribe-button>-->
        </div>
      </div>
      <div class="w-full relative overflow-hidden">
      <tab name="shownotes">
          <tab-shownotes></tab-shownotes>
        </tab>
        <tab name="chapters">
          <tab-chapters></tab-chapters>
        </tab>
        <tab name="transcripts">
          <tab-transcripts></tab-transcripts>
        </tab>
        <tab name="files">
          <tab-files></tab-files>
        </tab>
        <tab name="playlist">
          <tab-playlist></tab-playlist>
        </tab>
        <tab name="share">
          <tab-share></tab-share>
        </tab>
        <tab-overflow></tab-overflow>
      </div>
      <error></error>
    </root>
    

    You can check out the result of this at https://podcast.vielgeliebt.net/2020/04/bdsm-sprache-gewissen/ – you will see the “Shownotes” tab is empty, despite me filling in the Subtitle and Summary fields into the episode settings, as you can also see the “description” field filled out in the RSS feed describing the episode: http://podcast.vielgeliebt.net/feed/mp3

    Thread Starter mayamitkind

    (@mayamitkind)

    Yeah, I’m using the standard WordPress Twentytwenty theme. I’m also on a multisite installation, if that makes any difference. This problem happens even with all other plugins disabled.

    It might also be that another bug I described over at Podlove community is related (iframe animating to zero height happens when moving the window to a second monitor): https://community.podlove.org/t/bug-moving-window-to-second-monitor-makes-web-player-5-invisible/2158

    Thread Starter mayamitkind

    (@mayamitkind)

    Thanks, I did the latter!

    /**
     * Removes the preconnect to fonts.gstatic.com
     */
    add_filter('autoptimize_html_after_minify', function($content) {
    
        $content = str_replace("<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />", ' ', $content);
    
        return $content;
    }, 10, 1);
Viewing 4 replies - 1 through 4 (of 4 total)