icd/audio-video-links-generator
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make it possible to generate only video preview

Browse Source
This commit is contained in:
Kuba Orlik 2024-01-17 10:30:44 +01:00
parent 895302fa1e
commit 139c4b9359
2 changed files with 294 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

417
script.js
View File

@ -1,207 +1,232 @@
function getCastopodURL() {
let castopod_url;
try {
castopod_url = document.querySelector("#castopod").value;
const regex =
/^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//;
if (!regex.test(castopod_url)) {
throw new Error(
"Incorrect Castopod URL format! Please paste the correct URL. Example: https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-6-stara-myszka-mickey-nowy-prezes-uodo-i-sony-psujace-sylwestra"
);
}
} catch (error) {
alert(error);
}
return castopod_url;
}
function getPeertubeID() {
let peertube_id;
try {
const regex =
/^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/;
peertube_id = document.querySelector("#peertube").value.split("/w/")[1];
if (
!regex.test(document.querySelector("#peertube").value) ||
!peertube_id
) {
throw new Error(
"Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy"
);
}
} catch (error) {
alert(error);
}
return peertube_id;
}
function makeCastopodPlayer(castopod_url) {
return /* HTML */ `<div class="player">
<iframe
width="100%"
height="112"
frameborder="0"
scrolling="no"
style="width: 100%; height: 112px; overflow: hidden;"
src="${castopod_url}/embed/light"
></iframe>
</div>`;
}
function makePeertubePlayer(peertube_id) {
return /* HTML */ ` <div class="player">
<iframe
sandbox="allow-same-origin allow-scripts"
src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}"
allowfullscreen=""
width="100%"
height="394"
frameborder="0"
></iframe>
</div>`;
}
function makeAudioLinks(castopod_url) {
return /* HTML */ ` <div class="podcast-logos audio-logos">
<a
title="Link do naszego podcastowego RSSa"
alt="Logo RSS"
href="https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
>
<img
class="logo"
height="32"
width="32"
src="https://assets.midline.pl/logos/light/rss.svg"
/>
</a>
<a
title="${document.querySelector("#episode_name")
.value} na naszej instancji Castopod."
alt="Logo Castopod"
href="${castopod_url}"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/castopod.svg')"
src="https://assets.midline.pl/logos/light/castopod.svg?v=2"
height="32"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
alt="Logo AntennaPod"
href="https://antennapod.org/deeplink/subscribe/?url=https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
>
<img
class="logo"
height="32"
width="32"
src="https://assets.midline.pl/logos/light/antennapod.svg"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w aplikacji Patronite Audio."
alt="Logo Patronite Audio"
href="https://patronite.pl/patrocast/podcasts/f2eaf21a-8c3e-4e7f-93e1-c11868afa5f0/details"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/patronite-audio.svg"
height="32"
width="32"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Spotify."
alt="Logo Spotify"
href="https://open.spotify.com/show/2BSREI0uQcADS8W0RHrkxB"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/spotify.svg')"
src="https://assets.midline.pl/logos/light/spotify.svg"
height="48"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Apple Podcasts."
alt="Logo Apple Podcasts"
href="https://podcasts.apple.com/pl/podcast/internet-czas-dzia%C5%82a%C4%87/id1536929719"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/apple-podcasts.svg"
height="48"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Google Podcasts."
alt="Logo Podcasty Google"
href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lm1pZGxpbmUucGwvZmVlZC54bWw?sa=X&ved=0CAUQrrcFahcKEwiYtdDr7__sAhUAAAAAHQAAAAAQAQ"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/google-podcasts.svg"
height="48"
/>
</a>
</div>`;
}
function makeVideoLinks(peertube_id) {
return /* HTML */ ` <div class="podcast-logos video-logos">
<a
title="${document.querySelector("#episode_name")
.value} na naszej instancji PeerTube."
alt="Logo PeerTube"
href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/peertube.svg')"
src="https://assets.midline.pl/logos/light/peertube.svg"
height="48"
/>
</a>
<a
title="${document.querySelector("#odysee").value
? `${document.querySelector("#episode_name").value} w serwisie Odysee`
: `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
alt="Logo Odysee"
href="${document.querySelector("#odysee").value
? document.querySelector("#odysee").value
: "https://odysee.com/@internetczasdzialac"}"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/odysee.svg"
style="--dark-image: url('https://assets.midline.pl/logos/dark/odysee.svg')"
height="48"
/>
</a>
<a
title="${document.querySelector("#episode_name")
.value} w serwisie YouTube."
alt="Logo YouTube"
href="${document.querySelector("#youtube").value}"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/youtube.svg"
style="--dark-image: url('https://assets.midline.pl/logos/dark/youtube.svg')"
height="48"
/>
</a>
</div>`;
}
function generateHtml() { function generateHtml() {
if ( const castopod_url = getCastopodURL();
document.querySelector("#episode_name").value && const peertube_id = getPeertubeID();
document.querySelector("#castopod").value &&
document.querySelector("#peertube").value &&
document.querySelector("#youtube").value
) {
let castopod_url;
let peertube_id;
try {
castopod_url = document
.querySelector("#castopod").value;
const regex = /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//;
if (!regex.test(castopod_url)) {
throw new Error("Incorrect Castopod URL format! Please paste the correct URL. Example: https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-6-stara-myszka-mickey-nowy-prezes-uodo-i-sony-psujace-sylwestra");
}
} catch (error) {
alert(error);
}
try { let html = "";
const regex = /^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/;
peertube_id = document
.querySelector("#peertube")
.value.split("/w/")[1];
if (!regex.test(document.querySelector("#peertube").value) || !peertube_id) { if (document.querySelector("#castopod-player-visible").checked) {
throw new Error("Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy"); html += makeCastopodPlayer(castopod_url);
} }
} catch (error) {
alert(error);
}
let html = ""; if (document.querySelector("#peertube-player-visible").checked) {
html += makePeertubePlayer(peertube_id);
}
if (document.querySelector("#castopod-player-visible").checked) { if (document.querySelector("#audio-links-visible").checked) {
html += `<div class="player"> html += makeAudioLinks(castopod_url);
<iframe }
width="100%"
height="112"
frameborder="0"
scrolling="no"
style="width: 100%; height: 112px; overflow: hidden;"
src="${castopod_url}/embed/light"
></iframe>
</div>`
}
if (document.querySelector("#peertube-player-visible").checked) { if (document.querySelector("#video-links-visible").checked) {
html += ` html += makeVideoLinks(peertube_id);
<div class="player"> }
<iframe
sandbox="allow-same-origin allow-scripts"
src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}"
allowfullscreen=""
width="100%"
height="394"
frameborder="0"
></iframe>
</div>`
}
if (document.querySelector("#audio-links-visible").checked) { console.log("Copied to clipboard");
html += ` document.querySelector("textarea").value = html;
<div class="podcast-logos audio-logos"> document.querySelector(".preview").innerHTML = html;
<a
title="Link do naszego podcastowego RSSa"
alt="Logo RSS"
href="https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
>
<img
class="logo"
height="32"
width="32"
src="https://assets.midline.pl/logos/light/rss.svg"
/>
</a>
<a
title="${document.querySelector("#episode_name").value} na naszej instancji Castopod."
alt="Logo Castopod"
href="${castopod_url}"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/castopod.svg')"
src="https://assets.midline.pl/logos/light/castopod.svg?v=2"
height="32"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
alt="Logo AntennaPod"
href="https://antennapod.org/deeplink/subscribe/?url=https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
>
<img
class="logo"
height="32"
width="32"
src="https://assets.midline.pl/logos/light/antennapod.svg"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w aplikacji Patronite Audio."
alt="Logo Patronite Audio"
href="https://patronite.pl/patrocast/podcasts/f2eaf21a-8c3e-4e7f-93e1-c11868afa5f0/details"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/patronite-audio.svg"
height="32"
width="32"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Spotify."
alt="Logo Spotify"
href="https://open.spotify.com/show/2BSREI0uQcADS8W0RHrkxB"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/spotify.svg')"
src="https://assets.midline.pl/logos/light/spotify.svg"
height="48"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Apple Podcasts."
alt="Logo Apple Podcasts"
href="https://podcasts.apple.com/pl/podcast/internet-czas-dzia%C5%82a%C4%87/id1536929719"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/apple-podcasts.svg"
height="48"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w serwisie Google Podcasts."
alt="Logo Podcasty Google"
href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lm1pZGxpbmUucGwvZmVlZC54bWw?sa=X&ved=0CAUQrrcFahcKEwiYtdDr7__sAhUAAAAAHQAAAAAQAQ"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/google-podcasts.svg"
height="48"
/>
</a>
</div>`
}
if (document.querySelector("#video-links-visible").checked) {
html += `
<div class="podcast-logos video-logos">
<a
title="${document.querySelector("#episode_name").value} na naszej instancji PeerTube."
alt="Logo PeerTube"
href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/peertube.svg')"
src="https://assets.midline.pl/logos/light/peertube.svg"
height="48"
/>
</a>
<a
title="${document.querySelector("#odysee").value
? `${document.querySelector("#episode_name").value} w serwisie Odysee`
: `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
alt="Logo Odysee"
href="${document.querySelector("#odysee").value
? document.querySelector("#odysee").value
: 'https://odysee.com/@internetczasdzialac'}"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/odysee.svg"
style="--dark-image: url('https://assets.midline.pl/logos/dark/odysee.svg')"
height="48"
/>
</a>
<a
title="${document.querySelector("#episode_name").value} w serwisie YouTube."
alt="Logo YouTube"
href="${document.querySelector("#youtube").value}"
>
<img
class="logo"
src="https://assets.midline.pl/logos/light/youtube.svg"
style="--dark-image: url('https://assets.midline.pl/logos/dark/youtube.svg')"
height="48"
/>
</a>
</div>`
}
console.log('Copied to clipboard');
document.querySelector("textarea").value = html;
document.querySelector(".preview").innerHTML = html;
}
} }
function copyHtml() { function copyHtml() {
if (navigator) { if (navigator) {
navigator.clipboard.writeText(document.querySelector("textarea").value); navigator.clipboard.writeText(document.querySelector("textarea").value);
} }
} }

146
style.css
View File

@ -1,142 +1,142 @@
* { * {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
box-sizing: border-box; box-sizing: border-box;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-smooth: auto; font-smooth: auto;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
} }
body { body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
color: hsl(258.8, 17.4%, 3%); "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: hsl(258.8, 17.4%, 3%);
} }
section { section {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
label { label {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
label:nth-child(1) { label:nth-child(1) {
margin-top: 0; margin-top: 0;
} }
fieldset { fieldset {
padding: .5rem; padding: 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
h1 { h1 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.inputs { .inputs {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
width: 24rem; width: 24rem;
margin-right: 2rem; margin-right: 2rem;
} }
.input { .input {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.output { .output {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 20vh;
} }
.input-checkbox { .input-checkbox {
padding: .5rem; padding: 0.5rem;
user-select: none; user-select: none;
} }
input[type="checkbox"]+label { input[type="checkbox"] + label {
cursor: pointer; cursor: pointer;
} }
input[type="text"] { input[type="text"] {
font-family: 'Courier New', Courier, monospace; font-family: "Courier New", Courier, monospace;
} }
textarea { textarea {
border: 1px solid #5e636e; border: 1px solid #5e636e;
padding: .5rem; padding: 0.5rem;
overflow-y: scroll; overflow-y: scroll;
font-size: .5rem; font-size: 0.5rem;
font-family: 'Courier New', Courier, monospace; font-family: "Courier New", Courier, monospace;
width: 100%; width: 100%;
height: 100%; min-height: 20vh;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
button { button {
padding: 0.25rem .5rem; padding: 0.25rem 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.preview { .preview {
width: 700px; width: 700px;
padding: 1rem; padding: 1rem;
border: 1px solid #5e636e; border: 1px solid #5e636e;
} }
section { section {
padding: 1rem; padding: 1rem;
} }
.player { .player {
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.podcast-logos { .podcast-logos {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.audio-logos { .audio-logos {
margin-top: 2rem; margin-top: 2rem;
} }
.video-logos { .video-logos {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.podcast-logos>a { .podcast-logos > a {
margin: 0.75rem 0; margin: 0.75rem 0;
} }
.podcast-logos>a, .podcast-logos > a,
.podcast-logos>a:hover { .podcast-logos > a:hover {
text-decoration: none !important; text-decoration: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.podcast-logos>a>img { .podcast-logos > a > img {
width: auto !important; width: auto !important;
margin: 0 0.75rem; margin: 0 0.75rem;
max-width: 120px; max-width: 120px;
height: 3rem; height: 3rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.logo { .logo {
content: var(--dark-image); content: var(--dark-image);
background-color: #191b1f; background-color: #191b1f;
display: block; display: block;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
} }