129 lines
7.5 KiB
HTML
129 lines
7.5 KiB
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 gaest %}Tryk på din app, så kommer nye episoder af sig selv. Linket er delt med dig personligt{% if gaest.udloeber %} og virker til <span data-ts="{{ gaest.udloeber }}"></span>{% endif %}, så del det ikke videre.{% elif 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-ts]').forEach(function (s) {
|
|
s.textContent = new Date(parseInt(s.dataset.ts, 10) * 1000).toLocaleDateString('da-DK', { dateStyle: 'long' });
|
|
});
|
|
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 %}
|