Update
This commit is contained in:
Arkadiusz Wieczorek
commit
d91a1cc6e3
114
index.html
Normal file
114
index.html
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta
|
||||||
|
http-equiv="X-UA-Compatible"
|
||||||
|
content="IE=edge"
|
||||||
|
>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0"
|
||||||
|
>
|
||||||
|
<title>Audio/video links generator</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="style.css"
|
||||||
|
>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="inputs">
|
||||||
|
<h1>Dane</h1>
|
||||||
|
<div class="input">
|
||||||
|
<label for="name">Nazwa odcinka</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="episode-name"
|
||||||
|
id="episode_name"
|
||||||
|
value="Test - ICD #213"
|
||||||
|
placeholder="Test - ICD #213"
|
||||||
|
oninput="generateHtml();"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input">
|
||||||
|
<label for="funkwhale">Funkhwale episode url</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="funkwhale-episode-id"
|
||||||
|
id="funkwhale"
|
||||||
|
value="https://podcast.midline.pl/library/tracks/32/"
|
||||||
|
placeholder="https://podcast.midline.pl/library/tracks/32/"
|
||||||
|
oninput="generateHtml();"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input">
|
||||||
|
<label for="peertube">Peertube video url</label>
|
||||||
|
<input
|
||||||
|
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</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 class="input">
|
||||||
|
<label for="youtube">Youtube video url</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="youtube-video-id"
|
||||||
|
id="youtube"
|
||||||
|
value="https://www.youtube.com/watch?v=3MC-_83Zqik"
|
||||||
|
placeholder="https://www.youtube.com/watch?v=3MC-_83Zqik"
|
||||||
|
oninput="generateHtml();"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="result">
|
||||||
|
|
||||||
|
<div class="output">
|
||||||
|
<h1>Output</h1>
|
||||||
|
<textarea
|
||||||
|
name="output"
|
||||||
|
id="output"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onclick="copyHtml()">Copy HTML</button>
|
||||||
|
|
||||||
|
<h1>Render jak w Ghost</h1>
|
||||||
|
<div class="preview">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<script>
|
||||||
|
window.addEventListener("DOMContentLoaded", function() {
|
||||||
|
generateHtml()
|
||||||
|
}, false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
179
script.js
Normal file
179
script.js
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
function generateHtml() {
|
||||||
|
if (
|
||||||
|
document.querySelector("#episode_name").value &&
|
||||||
|
document.querySelector("#funkwhale").value &&
|
||||||
|
document.querySelector("#peertube").value &&
|
||||||
|
document.querySelector("#youtube").value
|
||||||
|
) {
|
||||||
|
let funkwhale_id;
|
||||||
|
let peertube_id;
|
||||||
|
try {
|
||||||
|
funkwhale_id = document
|
||||||
|
.querySelector("#funkwhale")
|
||||||
|
.value.split("/tracks/")[1];
|
||||||
|
} catch (error) {
|
||||||
|
alert("Podaj prawidłową wartością dla funkwhale");
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
peertube_id = document
|
||||||
|
.querySelector("#peertube")
|
||||||
|
.value.split("/w/")[1];
|
||||||
|
} catch (error) {
|
||||||
|
alert("Podaj prawidłową wartością dla peertube");
|
||||||
|
}
|
||||||
|
|
||||||
|
const html = `<div class="player">
|
||||||
|
<iframe
|
||||||
|
scrolling="no"
|
||||||
|
src="https://podcast.midline.pl/front/embed.html?type=track&id=${funkwhale_id}"
|
||||||
|
width="100%"
|
||||||
|
height="160"
|
||||||
|
frameborder="no"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="podcast-logos audio-logos">
|
||||||
|
<a
|
||||||
|
title="Link do naszego podcastowego RSSa"
|
||||||
|
alt="Logo RSS"
|
||||||
|
href="https://podcast.midline.pl/feed.xml"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="logo"
|
||||||
|
height="32"
|
||||||
|
width="32"
|
||||||
|
src="https://assets.midline.pl/logos/light/rss.svg"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
title="${episode_name} w naszej instancji Funkwhale."
|
||||||
|
alt="Logo Funkwhale"
|
||||||
|
href="https://podcast.midline.pl/library/tracks/${funkwhale_id}"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="logo"
|
||||||
|
style="--dark-image: url('https://assets.midline.pl/logos/dark/funkwhale.svg')"
|
||||||
|
src="https://assets.midline.pl/logos/light/funkwhale.svg"
|
||||||
|
height="32"
|
||||||
|
width="32"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
|
||||||
|
alt="Logo AntennaPod"
|
||||||
|
href="https://antennapod.org/"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<div class="podcast-logos video-logos">
|
||||||
|
<a
|
||||||
|
title="${episode_name} w serwisie 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="Kanał 'Internet. Czas działać!' w serwisie Odysee."
|
||||||
|
alt="Logo Odysee"
|
||||||
|
href="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="${episode_name} w serwisie YouTube."
|
||||||
|
alt="Logo YouTube"
|
||||||
|
href="https://www.youtube.com/watch?v=3MC-_83Zqik"
|
||||||
|
>
|
||||||
|
<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(html);
|
||||||
|
document.querySelector("textarea").value = html;
|
||||||
|
document.querySelector(".preview").innerHTML = html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyHtml() {
|
||||||
|
navigator.clipboard.writeText(document.querySelector("textarea").value);
|
||||||
|
}
|
||||||
|
|
||||||
113
style.css
Normal file
113
style.css
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
* {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
font-smooth: auto;
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
color: hsl(258.8, 17.4%, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
width: 24rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
height: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
border: 1px solid #5e636e;
|
||||||
|
padding: .5rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
font-size: .667rem;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 0.25rem .5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
width: 700px;
|
||||||
|
border: 1px solid #5e636e;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.podcast-logos {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-logos {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-logos {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 > 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user