weircon-front/templates/podcast.html

{% extends "base.html" %}
{% block title %}{% if delt and udsendelser %}{{ udsendelser[0].titel }}{% else %}Podcast{% endif %}{% endblock %}
{% block head %}{% if delt %}<meta name="robots" content="noindex, nofollow, noarchive">
<meta name="referrer" content="no-referrer">
{% if og %}<meta property="og:type" content="website">
<meta property="og:title" content="{{ og.titel }}">
<meta property="og:description" content="{{ og.beskrivelse }}">
<meta property="og:url" content="{{ og.url }}">
{% if og.billede %}<meta property="og:image" content="{{ og.billede }}">{% endif %}{% endif %}{% endif %}{% endblock %}
{% block body %}
<style>
  /* Ingen vandret scroll på iPhone: afspiller og felter må aldrig blive bredere end
     kortet, og felter skal have mindst 16 px skrift, ellers zoomer iOS ind. */
  html, body { overflow-x: hidden; }
  .pod-side { max-width: 100%; overflow-wrap: anywhere; }
  .pod-side img, .pod-side audio, .pod-side input, .pod-side .wt-card { max-width: 100%; box-sizing: border-box; }
  .pod-side audio { display: block; width: 100%; min-width: 0; }
  .pod-side input { font-size: 16px !important; min-width: 0; }
  .pod-side .wt-btn { white-space: normal; }
</style>
<div class="pod-side">
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}
{% if not udsendelser %}
<h1>Podcast</h1>
<p class="wt-muted">Der er ingen podcasts endnu.</p>
{% endif %}
{% for u in udsendelser %}
<section style="margin:1rem 0 2.5rem">
  <div style="display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap">
    {% if u.har_cover %}
    <img src="{{ rod }}/{{ u.slug }}/cover.jpg" alt="" width="160" height="160"
         style="border-radius:14px;flex:0 0 auto;box-shadow:0 4px 18px rgba(0,0,0,.25)">
    {% endif %}
    <div style="flex:1 1 18rem;min-width:0">
      <h1 style="margin:.1rem 0 .4rem">{{ u.titel }}</h1>
      <p class="wt-lead" style="margin:0">{{ u.beskrivelse }}</p>
    </div>
  </div>

  <div class="wt-card" style="margin:1.4rem 0;padding:1rem 1.2rem">
    <h2 style="font-size:1.05rem;margin:0 0 .5rem">Abonnér i din podcast-app</h2>
    {% if indbygget %}
    <div class="wt-flash" style="margin:.4rem 0 .9rem">
      <p style="margin:0 0 .5rem">Du har åbnet siden inde i Messenger, og den kan ikke åbne podcast-apps. Du kan stadig lytte herunder. Vil du abonnere:</p>
      {% if indbygget.platform == "android" %}
      <p style="margin:.4rem 0"><a class="wt-btn wt-btn--primary" href="{{ indbygget.href }}">Åbn i Chrome</a></p>
      <p style="margin:.4rem 0">Virker det ikke: tryk på ⋮ øverst til højre og vælg "Åbn i ekstern browser".</p>
      {% else %}
      <p style="margin:.4rem 0"><strong>1.</strong> Tryk på ⋯ øverst til højre og vælg "Åbn i ekstern browser" (eller "Åbn i Safari"). Så virker knapperne herunder.</p>
      <p style="margin:.6rem 0 .3rem"><strong>2.</strong> Eller kopiér adressen og tilføj den selv i Apple Podcasts: <em>Bibliotek → ⋯ øverst → Følg en serie via URL</em>.</p>
      <button class="wt-btn wt-btn--primary" type="button" data-kopier-tekst="{{ udsendelser[0].feed if udsendelser else '' }}">Kopiér adressen</button>
      {% endif %}
    </div>
    {% endif %}
    <p class="wt-muted" style="margin:.2rem 0 .8rem">{% if delt %}Tryk på din app, så kommer nye episoder af sig selv. Linket er familiens fælles, så del det kun inden for familien.{% else %}Tryk på din app. Nye episoder kommer så af sig selv. Adressen er din egen, så del den ikke; familien får hver sin.{% endif %}</p>
    <div style="display:flex;flex-wrap:wrap;gap:.5rem">
      <a class="wt-btn wt-btn--primary" href="podcast://{{ u.uden_skema }}">Apple Podcasts</a>
      <a class="wt-btn" href="overcast://x-callback-url/add?url={{ u.feed_enc }}">Overcast</a>
      <a class="wt-btn" href="pktc://subscribe/{{ u.uden_skema }}">Pocket Casts</a>
      <a class="wt-btn" href="https://antennapod.org/deeplink/subscribe?url={{ u.feed_enc }}">AntennaPod</a>
    </div>
    <details style="margin-top:.9rem">
      <summary class="wt-muted" style="cursor:pointer">Anden app? Kopiér adressen</summary>
      <div style="display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap">
        <input class="wt-input" readonly value="{{ u.feed }}" id="feed-{{ u.slug }}"
               style="flex:1 1 20rem;font-family:ui-monospace,monospace;font-size:.85rem" onclick="this.select()">
        <button class="wt-btn" type="button" data-kopier="feed-{{ u.slug }}">Kopiér</button>
      </div>
      <p class="wt-muted" style="font-size:.85rem;margin:.5rem 0 0">Spotify kan ikke abonnere på private podcasts. På Android virker AntennaPod og Pocket Casts.</p>
    </details>
  </div>

  <h2 style="font-size:1.15rem">Episoder</h2>
  {% for e in u.episoder %}
  <article class="wt-card" style="margin:.8rem 0;padding:1rem 1.2rem">
    <div style="display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap">
      <h3 style="margin:0;font-size:1.05rem">{% if e.nr %}{{ e.nr }}. {% endif %}{{ e.titel }}</h3>
      <span class="wt-muted" style="font-size:.85rem">
        {% if e.kladde %}<strong>Kladde, kun du kan se den</strong> · {% endif %}{{ (e.varighed // 60) }} min
      </span>
    </div>
    {% if e.beskrivelse %}<p style="margin:.5rem 0;white-space:pre-line">{{ e.beskrivelse }}</p>{% endif %}
    <audio controls preload="none" style="width:100%;margin-top:.4rem"
           src="{{ rod }}/{{ u.slug }}/{{ e.slug }}.mp3"></audio>
  </article>
  {% else %}
  <p class="wt-muted">Ingen episoder endnu.</p>
  {% endfor %}
</section>
{% endfor %}

{% if udsendelser and not delt %}
<form method="post" action="/podcast/ny-noegle" style="margin:2rem 0"
      onsubmit="return confirm('Din gamle adresse holder op med at virke, og du skal abonnere igen i din app. Fortsæt?')">
  <button class="wt-btn" type="submit">Lav en ny adresse</button>
  <span class="wt-muted" style="font-size:.85rem">Hvis du har delt din adresse ved et uheld.</span>
</form>
{% endif %}
<script>
function kopierTekst(t, knap) {
  var ok = function () { knap.textContent = 'Kopieret'; };
  var fallback = function () {
    var ta = document.createElement('textarea'); ta.value = t; ta.setAttribute('readonly', '');
    ta.style.position = 'fixed'; ta.style.top = '0'; ta.style.opacity = '0'; ta.style.fontSize = '16px';
    document.body.appendChild(ta); ta.focus(); ta.setSelectionRange(0, t.length);
    try { document.execCommand('copy'); ok(); } catch (e) { prompt('Kopiér adressen:', t); }
    document.body.removeChild(ta);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(t).then(ok, fallback); else fallback();
}
document.querySelectorAll('[data-kopier-tekst]').forEach(function (b) {
  b.addEventListener('click', function () { kopierTekst(b.dataset.kopierTekst, b); });
});
document.querySelectorAll('[data-kopier]').forEach(function (b) {
  b.addEventListener('click', function () {
    var i = document.getElementById(b.dataset.kopier);
    i.select();
    (navigator.clipboard ? navigator.clipboard.writeText(i.value) : Promise.reject())
      .catch(function () { document.execCommand('copy'); })
      .finally(function () { b.textContent = 'Kopieret'; });
  });
});
</script>
</div>
{% endblock %}