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

Optional players and links

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">
<head>
@ -21,20 +20,68 @@
<body>
<section>
<div class="inputs">
<h1>Dane</h1>
<h1>Episode</h1>
<div class="input">
<label for="name">Nazwa odcinka</label>
<label for="name">Episode name</label>
<input
type="text"
name="episode-name"
id="episode_name"
value="Test - ICD #213"
placeholder="Test - ICD #213"
value="Generic name - ICD #999"
placeholder="Generic name - ICD #999"
oninput="generateHtml();"
>
</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">
<label for="castopod">Castopod episode url</label>
@ -54,19 +101,8 @@
type="text"
name="peertube-video-id"
id="peertube"
value="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY"
placeholder="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY"
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"
value="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
placeholder="https://video.internet-czas-dzialac.pl/w/a8sThShNukC8Vbm1MHZ5Ta"
oninput="generateHtml();"
>
</div>
@ -83,6 +119,16 @@
>
</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 class="result">
@ -94,9 +140,9 @@
></textarea>
</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>

64
script.js
View File

@ -3,26 +3,41 @@ function generateHtml() {
document.querySelector("#episode_name").value &&
document.querySelector("#castopod").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 peertube_id;
try {
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) {
alert("Podaj link do odcinka w Castopod");
alert(error);
}
try {
peertube_id = document
.querySelector("#peertube")
.value.split("/w/")[1];
if (!peertube_id) {
throw new Error("Incorrect PeerTube URL format! Please paste the correct URL.");
}
} 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
width="100%"
height="112"
@ -31,8 +46,25 @@ function generateHtml() {
style="width: 100%; height: 112px; overflow: hidden;"
src="${castopod_url}/embed/light"
></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">
<a
title="Link do naszego podcastowego RSSa"
@ -116,7 +148,10 @@ function generateHtml() {
height="48"
/>
</a>
</div>
</div>`
}
if (document.querySelector("#video-links-visible").checked) {
html += `
<div class="podcast-logos video-logos">
<a
title="${document.querySelector("#episode_name").value} w serwisie PeerTube."
@ -132,12 +167,12 @@ function generateHtml() {
</a>
<a
title="${document.querySelector("#odysee").value
? `${document.querySelector("#episode_name").value} w serwisie Odysee`
: `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
? `${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'}"
? document.querySelector("#odysee").value
: 'https://odysee.com/@internetczasdzialac'}"
>
<img
class="logo"
@ -158,8 +193,9 @@ function generateHtml() {
height="48"
/>
</a>
</div>`
}
</div>`;
console.log('Copied to clipboard');
document.querySelector("textarea").value = html;
document.querySelector(".preview").innerHTML = html;
@ -167,6 +203,8 @@ function generateHtml() {
}
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 {
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%);
}
@ -18,6 +18,20 @@ section {
flex-wrap: nowrap;
}
label {
margin-top: 1rem;
margin-bottom: .5rem;
}
label:nth-child(1) {
margin-top: 0;
}
fieldset {
padding: .5rem;
margin-bottom: 2rem;
}
h1 {
margin-bottom: 1rem;
}
@ -26,13 +40,13 @@ h1 {
display: flex;
flex-flow: column;
width: 24rem;
margin-right: 1rem;
margin-right: 2rem;
}
.input {
display: flex;
flex-flow: column;
margin-bottom: 1rem;
margin-bottom: 2rem;
}
.output {
@ -41,11 +55,24 @@ h1 {
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 {
border: 1px solid #5e636e;
padding: .5rem;
overflow-y: scroll;
font-size: .667rem;
font-size: .5rem;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: 100%;
@ -54,11 +81,11 @@ textarea {
button {
padding: 0.25rem .5rem;
margin-bottom: 1rem;
margin-bottom: 2rem;
}
.preview {
width: 700px;
padding: 1rem;
border: 1px solid #5e636e;
}
@ -67,47 +94,48 @@ section {
}
.player {
width: 100%;
margin-bottom: 2rem;
width: 100%;
margin-bottom: 2rem;
}
.podcast-logos {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.audio-logos {
margin-top: 2rem;
margin-top: 2rem;
}
.video-logos {
margin-bottom: 2rem;
margin-bottom: 2rem;
}
.podcast-logos > a {
margin: 0.75rem 0;
.podcast-logos>a {
margin: 0.75rem 0;
}
.podcast-logos > a,
.podcast-logos > a:hover {
text-decoration: none !important;
box-shadow: none !important;
.podcast-logos>a,
.podcast-logos>a:hover {
text-decoration: none !important;
box-shadow: none !important;
}
.podcast-logos > a > img {
width: auto !important;
margin: 0 0.75rem;
max-width: 120px;
height: 3rem;
.podcast-logos>a>img {
width: auto !important;
margin: 0 0.75rem;
max-width: 120px;
height: 3rem;
}
@media (prefers-color-scheme: dark) {
.logo {
content: var(--dark-image);
background-color: #191b1f;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.logo {
content: var(--dark-image);
background-color: #191b1f;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}