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

109
script.js
View File

@ -1,40 +1,44 @@
function generateHtml() { function getCastopodURL() {
if (
document.querySelector("#episode_name").value &&
document.querySelector("#castopod").value &&
document.querySelector("#peertube").value &&
document.querySelector("#youtube").value
) {
let castopod_url; let castopod_url;
let peertube_id;
try { try {
castopod_url = document castopod_url = document.querySelector("#castopod").value;
.querySelector("#castopod").value; const regex =
const regex = /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//; /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//;
if (!regex.test(castopod_url)) { 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"); 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) { } catch (error) {
alert(error); alert(error);
} }
return castopod_url;
}
function getPeertubeID() {
let peertube_id;
try { try {
const regex = /^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/; const regex =
peertube_id = document /^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/;
.querySelector("#peertube") peertube_id = document.querySelector("#peertube").value.split("/w/")[1];
.value.split("/w/")[1];
if (!regex.test(document.querySelector("#peertube").value) || !peertube_id) { if (
throw new Error("Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy"); !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) { } catch (error) {
alert(error); alert(error);
} }
return peertube_id;
}
let html = ""; function makeCastopodPlayer(castopod_url) {
return /* HTML */ `<div class="player">
if (document.querySelector("#castopod-player-visible").checked) {
html += `<div class="player">
<iframe <iframe
width="100%" width="100%"
height="112" height="112"
@ -43,12 +47,11 @@ function generateHtml() {
style="width: 100%; height: 112px; overflow: hidden;" style="width: 100%; height: 112px; overflow: hidden;"
src="${castopod_url}/embed/light" src="${castopod_url}/embed/light"
></iframe> ></iframe>
</div>` </div>`;
} }
if (document.querySelector("#peertube-player-visible").checked) { function makePeertubePlayer(peertube_id) {
html += ` return /* HTML */ ` <div class="player">
<div class="player">
<iframe <iframe
sandbox="allow-same-origin allow-scripts" sandbox="allow-same-origin allow-scripts"
src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}" src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}"
@ -57,12 +60,11 @@ function generateHtml() {
height="394" height="394"
frameborder="0" frameborder="0"
></iframe> ></iframe>
</div>` </div>`;
} }
if (document.querySelector("#audio-links-visible").checked) { function makeAudioLinks(castopod_url) {
html += ` return /* HTML */ ` <div class="podcast-logos audio-logos">
<div class="podcast-logos audio-logos">
<a <a
title="Link do naszego podcastowego RSSa" title="Link do naszego podcastowego RSSa"
alt="Logo RSS" alt="Logo RSS"
@ -76,7 +78,8 @@ function generateHtml() {
/> />
</a> </a>
<a <a
title="${document.querySelector("#episode_name").value} na naszej instancji Castopod." title="${document.querySelector("#episode_name")
.value} na naszej instancji Castopod."
alt="Logo Castopod" alt="Logo Castopod"
href="${castopod_url}" href="${castopod_url}"
> >
@ -145,13 +148,14 @@ function generateHtml() {
height="48" height="48"
/> />
</a> </a>
</div>` </div>`;
} }
if (document.querySelector("#video-links-visible").checked) {
html += ` function makeVideoLinks(peertube_id) {
<div class="podcast-logos video-logos"> return /* HTML */ ` <div class="podcast-logos video-logos">
<a <a
title="${document.querySelector("#episode_name").value} na naszej instancji PeerTube." title="${document.querySelector("#episode_name")
.value} na naszej instancji PeerTube."
alt="Logo PeerTube" alt="Logo PeerTube"
href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}" href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}"
> >
@ -169,7 +173,7 @@ function generateHtml() {
alt="Logo Odysee" alt="Logo Odysee"
href="${document.querySelector("#odysee").value href="${document.querySelector("#odysee").value
? document.querySelector("#odysee").value ? document.querySelector("#odysee").value
: 'https://odysee.com/@internetczasdzialac'}" : "https://odysee.com/@internetczasdzialac"}"
> >
<img <img
class="logo" class="logo"
@ -179,7 +183,8 @@ function generateHtml() {
/> />
</a> </a>
<a <a
title="${document.querySelector("#episode_name").value} w serwisie YouTube." title="${document.querySelector("#episode_name")
.value} w serwisie YouTube."
alt="Logo YouTube" alt="Logo YouTube"
href="${document.querySelector("#youtube").value}" href="${document.querySelector("#youtube").value}"
> >
@ -190,18 +195,38 @@ function generateHtml() {
height="48" height="48"
/> />
</a> </a>
</div>` </div>`;
} }
console.log('Copied to clipboard'); function generateHtml() {
const castopod_url = getCastopodURL();
const peertube_id = getPeertubeID();
let html = "";
if (document.querySelector("#castopod-player-visible").checked) {
html += makeCastopodPlayer(castopod_url);
}
if (document.querySelector("#peertube-player-visible").checked) {
html += makePeertubePlayer(peertube_id);
}
if (document.querySelector("#audio-links-visible").checked) {
html += makeAudioLinks(castopod_url);
}
if (document.querySelector("#video-links-visible").checked) {
html += makeVideoLinks(peertube_id);
}
console.log("Copied to clipboard");
document.querySelector("textarea").value = html; document.querySelector("textarea").value = html;
document.querySelector(".preview").innerHTML = 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);
} }
} }

22
style.css
View File

@ -8,7 +8,8 @@
} }
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",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: hsl(258.8, 17.4%, 3%); color: hsl(258.8, 17.4%, 3%);
} }
@ -20,7 +21,7 @@ section {
label { label {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
label:nth-child(1) { label:nth-child(1) {
@ -28,7 +29,7 @@ label:nth-child(1) {
} }
fieldset { fieldset {
padding: .5rem; padding: 0.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -52,11 +53,10 @@ h1 {
.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;
} }
@ -65,22 +65,22 @@ input[type="checkbox"]+label {
} }
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;
} }