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

Optional players and links

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2024-01-06 16:07:52 +01:00
parent 04b815372c
commit 6a1a187e1c
3 changed files with 179 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
index.html
View File

@ -1,4 +1,3 @@
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -21,20 +20,68 @@
<body> <body>
<section> <section>
<div class="inputs"> <div class="inputs">
<h1>Dane</h1> <h1>Episode</h1>
<div class="input"> <div class="input">
<label for="name">Nazwa odcinka</label> <label for="name">Episode name</label>
<input <input
type="text" type="text"
name="episode-name" name="episode-name"
id="episode_name" id="episode_name"
value="Test - ICD #213" value="Generic name - ICD #999"
placeholder="Test - ICD #213" placeholder="Generic name - ICD #999"
oninput="generateHtml();" oninput="generateHtml();"
> >
</div> </div>
<fieldset>
<legend>Choose visible elements:</legend>
<div class="input-checkbox">
<input
type="checkbox"
id="castopod-player-visible"
name="castopod-player-visible"
checked
oninput="generateHtml();"
/>
<label for="castopod-player-visible">Castopod player</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="peertube-player-visible"
name="peertube-player-visible"
oninput="generateHtml();"
/>
<label for="peertube-player-visible">PeerTube player</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="audio-links-visible"
name="audio-links-visible"
checked
oninput="generateHtml();"
/>
<label for="audio-links-visible">Audio links</label>
</div>
<div class="input-checkbox">
<input
type="checkbox"
id="video-links-visible"
name="video-links-visible"
checked
oninput="generateHtml();"
/>
<label for="video-links-visible">Video links</label>
</div>
</fieldset>
<div class="input"> <div class="input">
<label for="castopod">Castopod episode url</label> <label for="castopod">Castopod episode url</label>
@ -54,19 +101,8 @@
type="text" type="text"
name="peertube-video-id" name="peertube-video-id"
id="peertube" id="peertube"
value="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY" value="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
placeholder="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY" placeholder="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="odysee">Odysee video url (opcjonalnie jezeli znany jest url)</label>
<input
type="text"
name="odysee-video-id"
id="odysee"
placeholder="https://odysee.com/@internetczasdzialac:6/internet-of-things,-czy-internet-of-shit:1"
oninput="generateHtml();" oninput="generateHtml();"
> >
</div> </div>
@ -83,6 +119,16 @@
> >
</div> </div>
<div class="input">
<label for="odysee">Odysee video url (optional)</label>
<input
type="text"
name="odysee-video-id"
id="odysee"
placeholder="https://odysee.com/@internetczasdzialac:6/internet-of-things,-czy-internet-of-shit:1"
oninput="generateHtml();"
>
</div>
</div> </div>
<div class="result"> <div class="result">
@ -94,9 +140,9 @@
></textarea> ></textarea>
</div> </div>
<button onclick="copyHtml()">Copy HTML</button> <button onclick="copyHtml()">Copy HTML code</button>
<h1>Render jak w Ghost</h1> <h1>Preview (render like in Ghost)</h1>
<div class="preview"> <div class="preview">
</div> </div>

64
script.js
View File

@ -3,26 +3,41 @@ function generateHtml() {
document.querySelector("#episode_name").value && document.querySelector("#episode_name").value &&
document.querySelector("#castopod").value && document.querySelector("#castopod").value &&
document.querySelector("#peertube").value && document.querySelector("#peertube").value &&
document.querySelector("#youtube").value document.querySelector("#youtube").value &&
document.querySelector("#castopod-player-visible").value &&
document.querySelector("#peertube-player-visible").value &&
document.querySelector("#audio-links-visible").value &&
document.querySelector("#video-links-visible").value
) { ) {
let castopod_url; let castopod_url;
let peertube_id; let peertube_id;
try { try {
castopod_url = document castopod_url = document
.querySelector("#castopod").value .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.");
}
} catch (error) { } catch (error) {
alert("Podaj link do odcinka w Castopod"); alert(error);
} }
try { try {
peertube_id = document peertube_id = document
.querySelector("#peertube") .querySelector("#peertube")
.value.split("/w/")[1]; .value.split("/w/")[1];
if (!peertube_id) {
throw new Error("Incorrect PeerTube URL format! Please paste the correct URL.");
}
} catch (error) { } catch (error) {
alert("Podaj prawidłową wartością dla peertube"); alert(error);
} }
const html = `<div class="player"> let html = "";
if (document.querySelector("#castopod-player-visible").checked) {
html += `<div class="player">
<iframe <iframe
width="100%" width="100%"
height="112" height="112"
@ -31,8 +46,25 @@ 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) {
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>`
}
if (document.querySelector("#audio-links-visible").checked) {
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"
@ -116,7 +148,10 @@ function generateHtml() {
height="48" height="48"
/> />
</a> </a>
</div> </div>`
}
if (document.querySelector("#video-links-visible").checked) {
html += `
<div class="podcast-logos video-logos"> <div class="podcast-logos video-logos">
<a <a
title="${document.querySelector("#episode_name").value} w serwisie PeerTube." title="${document.querySelector("#episode_name").value} w serwisie PeerTube."
@ -132,12 +167,12 @@ function generateHtml() {
</a> </a>
<a <a
title="${document.querySelector("#odysee").value title="${document.querySelector("#odysee").value
? `${document.querySelector("#episode_name").value} w serwisie Odysee` ? `${document.querySelector("#episode_name").value} w serwisie Odysee`
: `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}" : `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
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"
@ -158,8 +193,9 @@ function generateHtml() {
height="48" height="48"
/> />
</a> </a>
</div>`
}
</div>`;
console.log('Copied to clipboard'); 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;
@ -167,6 +203,8 @@ function generateHtml() {
} }
function copyHtml() { function copyHtml() {
navigator.clipboard.writeText(document.querySelector("textarea").value); if (navigator) {
navigator.clipboard.writeText(document.querySelector("textarea").value);
}
} }

94
style.css
View File

@ -8,7 +8,7 @@
} }
body { body {
font-family: "Open Sans"; 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%);
} }
@ -18,6 +18,20 @@ section {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
label {
margin-top: 1rem;
margin-bottom: .5rem;
}
label:nth-child(1) {
margin-top: 0;
}
fieldset {
padding: .5rem;
margin-bottom: 2rem;
}
h1 { h1 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -26,13 +40,13 @@ h1 {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
width: 24rem; width: 24rem;
margin-right: 1rem; margin-right: 2rem;
} }
.input { .input {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
margin-bottom: 1rem; margin-bottom: 2rem;
} }
.output { .output {
@ -41,11 +55,24 @@ h1 {
height: 20vh; height: 20vh;
} }
.input-checkbox {
padding: .5rem;
user-select: none;
}
input[type="checkbox"]+label {
cursor: pointer;
}
input[type="text"] {
font-family: 'Courier New', Courier, monospace;
}
textarea { textarea {
border: 1px solid #5e636e; border: 1px solid #5e636e;
padding: .5rem; padding: .5rem;
overflow-y: scroll; overflow-y: scroll;
font-size: .667rem; font-size: .5rem;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -54,11 +81,11 @@ textarea {
button { button {
padding: 0.25rem .5rem; padding: 0.25rem .5rem;
margin-bottom: 1rem; margin-bottom: 2rem;
} }
.preview { .preview {
width: 700px; padding: 1rem;
border: 1px solid #5e636e; border: 1px solid #5e636e;
} }
@ -67,47 +94,48 @@ section {
} }
.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;
} }
} }