Optional players and links
This commit is contained in:
parent
04b815372c
commit
6a1a187e1c
88
index.html
88
index.html
@ -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
64
script.js
@ -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
94
style.css
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user